1画面を平面ではなく側面で考える UI Stack｜みーた
さてさて、今回の本題。 最近プライベートで新規サービスのUI監修みたいなことをやったのですが、その際に「UI Stack」の考え方が意外と知れ渡ってないように感じたので、要点だけの内容ですが綴ってみたいと思います。 元の話は英語でこちら↓に詳しく書いてあります。 しっかり読み解いてみたい方は覗いてみてください。 1画面は平面ではなく側面があるPinterestやDribbbleなどで「パッと見の雰囲気いいなぁ」というデザインには最近よく出くわすようになってきて、それを新規の画面やサービスに取り入れようと考えることが多いかと思いますが、実装までいって使ってみたけど「なんか違和感あるな」みたいなことありませんか？ それは「1画面の側面を見れていない」からかもしれません。 側面とは一体なんなのか。 それは「状態」です。 私達の住む世界は必ずしも完璧ではなく、間違いや遅延が発生します。それはサーバ
良いUIを支えるフロントエンド開発のポイント
前回書いた「なぜUIデザインとフロントエンド開発に注力しているのか」はおかげさまで（自分の記事としては）様々な反響をいただきました。SNS上の言及だけでなくカジュアル面談でも話題にしていただく方が多くとても嬉しいです。 フロントエンド開発とUIデザインの関係についてもう少し掘り下げるため、今回は良いUIを支えるためにフロントエンド開発で重要になるポイントだと Gaji-Labo が考えていることをまとめていきます。 前提：リリースも仮説検証の通過点ウォーターフォール的な開発が主流だった一昔前は、サービスのリリースがひとつのゴールだったように感じます。しかし、Web開発にもアジャイル開発や人間中心設計の手法などが浸透した現在では、リリースしたら終わりというプロジェクトは少なくなりました。（フェーズの変化によりチームの体制が縮小されるというのは当然ありますが、リリース後もある程度の規模感で開発
なぜUIデザインとフロントエンド開発に注力しているのか
Gaji-Labo は “すべてのサービスとプロダクトに「手ざわりのいいUI」を” というタグラインを掲げ、「フロントエンド開発」「UIデザイン」「チームとプロセスの支援」の3つの柱で受託の事業をおこなっています。 現在とくに主力となっているのがフロントエンド開発とUIデザインですが、受託の開発会社・制作会社でこの2つを掲げている会社は少ない気がします。 弊社サイトのキャプチャーインターフェイスは人間に一番近いユーザーインターフェイスはサービスのなかで一番ユーザーに近い部分だと思っています。 僕は15年ちょっと前にHTMLコーダーからキャリアをスタートしました。その頃からHTMLコーディングは地味な仕事だけど「HTMLは情報を」「CSSは表現を」「JSはインタラクションを」ユーザーに直接届けるところに楽しさを見出していました。 その後マークアップエンジニア・フロントエンドエンジニアと世間で
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
新卒採用：職種紹介：デザイン系 - UI/UXデザイン｜採用情報｜任天堂
UIとは「ユーザー・インターフェース」の略で、UXは「ユーザー・エクスペリエンス」の略です。 インターフェースは「接点/接触面」、エクスペリエンスは「経験/体験」を意味します。 ゲームにおけるUI/UXデザインとは、「ゲーム」と「遊び手」を仲介する絵や文字の表現を通じて、心地よいゲーム「体験」を作りだすこと、とも言えます。 任天堂におけるUI/UXデザイナーの具体的な制作物は、 ・タイトル画面やメニュー画面 ・ゲーム中の体力ゲージやボタン、マップ、アイコン ・フォントやメッセージ ・勝敗の結果画面（リザルト画面） などとなります。 これらのUIを通じて、お客様にストレスなく心地よいゲームプレイを提供することがUI/UXデザインの主な役割です。 特に、ゲームは娯楽品であって生活必需品ではないため、わかりにくければ簡単に手放されてしまいます。そのうえ、何百万人というプレイヤーがUIを何百回、何
Nintendo Switch『モンスターハンターライズ』の最新映像が公開。 | トピックス | Nintendo
極寒の寒冷群島は、かつて巨大な龍が巣窟としていた場所。数多くの強者たちがその龍に挑み散っていった、果ての死地として知られる土地です。島々の中央には、その激戦を物語る巨大な龍の骨と朽ち果てた撃龍船が残され、今なお雪風にさらされています。 そんな極寒の土地に生息するモンスターたちが公開されましたので、以下、一挙ご紹介します。 雪鬼獣（せっきじゅう） ゴシャハギ 獲物を求めて雪原を徘徊する牙獣種。その身は氷雪地帯の過酷な環境に耐えられるよう、密度の高い毛で覆われている。 呼吸で取り込んだ冷気を使って溜め込んだ体液を冷やし、一気に吐き出すことで氷の刃を生成する。 興奮して全身が赤くなっているときは要注意。
Headless Component開発をはじめよう (Headless UI + React Spectrum)
はじめに この記事ではライブラリを活用したHeadlessなReact Component開発について紹介します。 Not Headless Component Headless Component の紹介の前にHeadless ComponentではないComponentとはなんでしょうか。 ReactでComponent を作成する際に Material-UIやAnt Designを使ったことがある人も多いのでは多いのではないでしょうか。 これらのライブラリは<Button />や<Menu />といったスタイル付属のReactコンポーネント集になっています。 自前でスタイルを書かずに使えるので便利ではあるのですが以下のような欠点があります。 細かい見た目の調整が難しい。 ライブラリにもよるのですが、細かい調整が難しいものが多いです。 例えばAnt DesignのButtonコンポーネ
React Hooksの使い方 - cidermitaina
このあいだチームのバックエンドエンジニア向けにReact Hooks勉強会を開催しました。 チームのみんなでプロダクトのフロントエンドの底上げをしたくて、React Hooks啓蒙活動です！ 改めてReact Hooksについて勉強＆まとめることができたのでReact Hooks勉強会の内容をブログにも書いておこうと思います。 これは何？ Hooksとは何か？ Hooksを使うと何が変わるのか？ Hooksの使い方 Hooksを書くときのルール 👆についてまとめてます。 対象は Reactは書けるけどHooksって何？ Hooksって聞いたことあるけど何がすごいの？ Hooks使いたいけど、よく分からないんだよね… な人向けです。 背景 これから積極的にReact Hooksを使っていきたいなあと思っています。 でもいきなりHooks使おう！ってなっても、 Hooksって何？ 使うといい
UI の実装で考えていること, 気をつけたいこと
READYFOR にフロントエンドの業務委託として参加している yamanoku です。 現在、デザインシステムを活用した SPA でのコンポーネント実装に携わっています。 私が Web UI コンポーネント（以下: UI）を実装する中で個人的に大切にしていることについてを某 LT 会にて発表しました。今回はその内容と、加筆したものを記事にして紹介してみます。 例：ボタン UI を実装する際に気をつけること いろいろな文脈があるとは思いますが、まず最初にこれは「リンクとしてのボタン」なのか「何かを動かすためのボタン」なのか「送信するボタン」なのかというのを考えます。 <button> のボタンである場合 type 指定をする 指定をしないとデフォルトでsubmit（送信）と決まってしまうので設定する disabled の考慮 リンクボタンと違って操作できる・できないが設定できる 操作できな
React向けライブラリを解説～フォームの状態管理を助けるFormikとは？
昨今、WebアプリケーションのフロントエンドをReactで作成する機会は少しずつ増えてきました。Reactそのものは状態管理とUIを効率的にひもづけるためのフレームワークですが、その周辺には、複雑な状態管理を効率化するライブラリやきれいなUIを提供してくれるライブラリなど、魅力的なライブラリが数多く存在しています。本連載では、そんなライブラリを1つずつ、実例を添えて解説することで、現場で課題に出会った際に適切なライブラリを選択できる力を養います。第1回となる今回は、入力フォームについて扱います。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Catalina 10.15.7 Node.js 14.14.0／npm 6.14.8 React 17.0.
第三の答え、Stimulusjs - Qiita
昨今のフロントエンドトレンドを鑑みてフロントエンドの技術構成を考えると今はどんな選択肢が主流でしょう？ それぞれ並列なものではないですが、React? Vue? Next? Nuxt?そんなワードがきっと頭に浮かぶでしょう。 今の時代、jQueryでゴリゴリUIを記述するとなんだか白い目でみられる。 そう、令和とはそういう時代です。 界隈の最先端おじさんをみると、build processがあるのは当然で、HTML/CSSはjsが吐き出すもので、それが最大限正しいように語られています。 確かにExising Domのアプローチで界隈から評価されてるライブラリはなく、さほどいい選択肢には見えません。(個人の主観) ではそれらのアプローチの何がそんなにいいんでしょう？ 過去から現在まで我々は何に苦心して、それらはそれをどう解決してくれたのでしょう？ 雑に紐解いていきましょう。(今回はUI構築の
UIデザインのためのブックリスト（2020, 追記あり）｜yoshi_design
UXや認知科学のブックリストはおかげさまでかなり読まれていますが、そういえば「UIデザイン」のリストは作ってなかったなと思い至って本を探し始めました。手元の本を並べてみると該当する本はあまり多くなくて、関連する周辺の分野のものにも対象を広げることにしました。UIデザインと周辺分野との境界はハッキリと分かれるわけではないので、自分が作った他のブックリストとの重複があります。また、分野の明確な線引きはしていませんのでご了承ください。 UI（ユーザー・インタフェース）が関わる分野はかなり広いのですが、このリストでは主に、比較的新しい（と言ってもiPhone発表から10年以上経ちますが）「スマートフォン・アプリのUIデザイン」を念頭において選んでいます。パソコンのソフトウェアや情報システム、ウェブ（情報設計やウェブ・ユーザビリティーを含む）のインタフェース・デザインについては、すでに世の中に知見や
UIデザインとデータ分析の近接点｜樫田光 | Hikaru Kashida
こんにちは、hikaruです。 (誰？と思った方はこちらの自己紹介を見てくだると嬉しいです） 最近、デザインにとっても興味があります。 そんなこんなで先月くらいから、Cocoda!というUIデザインの学習サイトでゆるっと勉強を始めたところ、 Cocoda!の初心者コースを見ながら人生で初のUIデザインを作ってみてるが、丁寧でキットが充実しているおかげで僕のようなド素人でも意外にサクサク作れて楽しい。 しかしデザインツール便利だ。これはデザイナに限らずみんな使えるようになったほうが良さげ pic.twitter.com/1NEjvkNfqY — 樫田光 | Hikaru Kashida (@hik0107) July 17, 2020
OOUIを実践してわかった、9つの大切なこと｜リクルート Air ビジネスツールズ プロダクトデザイン
こんにちは、プロダクトデザイナーのmunazoです。 私の所属するリクルートの「Air ビジネスツールズ」で、OOUIを実践したいデザイナー・エンジニアを有志で集め、半年間にわたり実践に取り組みました。 この記事では、現場でやってみたからこそ気付くことができた、OOUIを実践するにあたって大切なことをご紹介します。 この記事に書かれていること ・練習問題を解くだけでは、わからなかったこと ・「これは先に知っておきたかった」と今になって思うこと ・現場で実践して躓いたこと、気をつけたいことはじめに まず、OOUI（オブジェクト指向ユーザーインターフェイス）について簡単にご紹介します。OOUIは、1980年代からあるUIデザインにおける基本的な考え方です。 OOUIではオブジェクトを関心の中心として扱うことで、ユーザーが直感的に操作を行えるようになります。また、相対するタスクベースと比較すると
不安に強い食べログFEチームの働き方｜食べログ フロントエンドエンジニアブログ
お疲れさまです！FE（フロントエンド）チームリーダー 兼 JIRA職人 兼 残業警察の辻です。 チームでjQuery→React/TypeScriptのリプレースプロジェクトを進めています。技術的なチャレンジはもちろん、大規模かつ長期プロジェクトゆえの不安と日々戦っています。 ・このプロジェクトはちゃんと進んでるの？このまま進めていいの？ ・成果が出るまでに時間がかかり、チーム外からは何もやってないように見えてない？ ・残業すれば初期計画スケジュールに間に合うけど、どれくらい頑張ったらいいの？ ・初めてのパターンだけど書き方これであってる？今後もこれに合わせる？ ・リプレース中にもどんどん技術が変わっていってキャッチアップが大変 ・チーム外から突然の依頼があったけど、優先度どうしよう...これらの不安と戦うため、いつでもプロジェクトの状態がわかる状態、いつでもチームに相談できる状態、個人依
pixivのUIを迅速にアップデートする UIUXチームのフロントエンドモダン化の歴史 - pixiv inside
こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。 UIUXチームとは UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。 UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。 イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました @s
上野学「オブジェクト指向デザインの道具論」 | ÉKRITS / エクリ
——— 上野さんが出版された本『オブジェクト指向UIデザイン※1』は、体裁が実用書という形で、副題には「使いやすいソフトウェアの原理」とあって、そしてユーザーインターフェース（UI）の「操作性と開発効率の劇的な向上」と書かれています。なので、基本的にはUIデザイナーの人たちに向けた実用マニュアルみたいなもので、そこをメインターゲットとして想定しているんでしょうか。 上野： これは技術評論社という出版社の一連のシリーズなんです。もともとコンピューター関係の技術本を出してるので、想定読者としてはコンピューター技術者ですね。たぶんこのシリーズで初めてのデザインに関する本なんですが、技術者向けの枠組みでデザインについて書いています。担当編集者の方には、前から雑誌記事でお世話になっていて、僕がどういうことを書くのかよくわかっていたので、かなり好きなことを書かせてもらいました。 § ——— ただこの「
気になるUI: iOS 14 の新しい時刻の入力UI
こんにちは、Gaji-Labo UIデザイナーの今西です。 自分のiPhoneを iOS 14にアップデートしました。ホーム画面を設定を変えたり、細かいところがカスタムできたりするのがおもしろいと思っています。 ヘルスケアアプリで睡眠が管理できるようになったため、アラームも調整していると時刻を入力するUIが変わっていることに気がつきました。 時刻の入力UI時刻を入力する UI は iOS 14から、テンキー入力になりました。 前のバージョンの OS では、時間と分を選択するドラムロール型でした。 ドラムロールは iOS 14 で完全に消えたわけではなく、時刻のボックスエリア内で時間と分のドラムロールを回して選択することもできます。 私はこの UI を見てなんとなく違和感がありました。 時刻を数字入力するという感覚が、時間の設定をする動きと遠い気がしました。 私は以前のブログの記事の通り、誕
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codepen.io/tak-dcxi/pen/MWjOqYg
JavaScriptで背景色から文字色を導出する
