デザイナーを確保する予算がなく、エンジニアがデザインまで担当する時がある。
後輩エンジニアたちに簡単なデザインのタスクを振った時に、いつも同じ指摘をしていることに気づいたのでガイドをまとめておく。
なお、私も初めての時に同じことを指摘された。
対象読者
-
エンジニアだがデザインをやらねばならなくなった人
-
デザインの基礎の基礎くらいは知っておきたい人
-
興味がある人
マインドセット
プログラミングでは車輪の再発明をしないのに、デザインとなると、とたんにゼロから考えようとする人が多い。私もそうだった。
エンジニアがデザインをやるときは「パクる見たことがある」デザインで固めていくのが正解だと思う。
見たことがあるデザインなら直感的に操作できユーザのストレスもないためだ。
この記事では、料理に例えると「5つ星をとる」ことではなく、
- 焦がさない・生煮えにしない
- （毎日食べられる程度に）普通に美味しい
ことを目指す。
具体的には何をすればいいの？
1. 思想を知る
Google の Material Design1 ガイドが体系的。美しいサイトで読むのが楽しい。
もし時間がない場合、以下から読むのがおすすめ。
-
Layout
- まずは大きいところ、レイアウトから決めていくと段取りがよい
- ユーザが迷わない・見やすい画面配置に
-
Components
- プログラミングで言う文法に該当する気が。知らずに作り始めると後悔する
-
Styles
- 赤は「削除ボタン」など警戒してほしいアクションに使う。といった話もこちら
- モーションはやや上級のため初めのうちは読み飛ばしてよい。ライブラリ使えば適切なモーションついてますし
-
Gestures (モバイルアプリなら)
- スマホでよくやってる操作集。ダブルタップ、長押し、など
- 直感からはずれる結果が起こると「わかりづらい UI」としてストレスがたまるためぜひ一読を
Do & Don't わかりやすい！
2. 可能ならライブラリを使う
例えば MUI を使うと Material Design の設計思想に沿ったコンポーネントやカラーシステムが使える。
自分で CSS を書くより何倍も小さい工数で美しいボタンや入力フォームといったコンポーネントが使えるし、カラーシステムも自動なので、素人が作るより安定する。
3. 「他のサービスはどうしてるの？」をググる
作りたい機能の UI 例をとにかくググる。
例えばスケジュール管理機能を作りたければ、世の中のカレンダー UI をとにかくググって観察する。
「気持ちいい」「わかりやすい」デザインの良いところ（余白があって見やすいなど）を取り入れてみる。
4. デザイナーのブログを読んでみる
個人的なおすすめ
最後に
以上です！もし補足や訂正あればお願いします🙇♀️
-
世の中には他のデザインシステムもあると思うが、Google のデザインということでスマホや Web で目にすることが多く、慣れ親しんでいるユーザが多いことから上げさせていただいた。 ↩