デザインするときに工夫する3つのポイント

こんにちは、デザイナーのルイです。最近はホトカミのアプリ(iOS、Android)を制作しています。

デザインして自分でも実装を行う場合、大まかにデザインファイルを作る方もいるかもしれません。

しかし、他のエンジニアさんと共同作業になっているので、私は実装するとき、なるべく曖昧さを減らしたいと考えています。

また、デザインのアップデートを想定して、しばらく時間が経っても分かるデザインファイルを意識しています。例えば、3ヶ月後もう一回デザインファイルを開くとき、「なんでこんなデザインになるの？」、「ここの余白は8ポイント?9ポイント？」など、思い出す時間を減らしたいと思います。

以上の理由で、実装に入る前にデザインファイルを細かく整理しています。

1.一連の流れの画面を作る

昔、私は一番見栄えの良い画面だけを作って、最初の操作画面を忘れがちでした。しかし、最初からの流れを想定しないと、ユーザー操作や裏側の流れを把握できず、画面の状態や技術の確認事項などの抜け漏れが生じる可能性があります。

下記の画像は、神社とお寺を検索の画面です。アクセスしてから最初は「空っぽ」の状態です。

そこから、"寺社名入力"→"エリア名入力"→ "読み込み"→"結果表示"、あるいは"現在地周辺"→"読み込み"→"結果表示" 。全ての画面を展開していくと、デザイナー以外の人でも操作のイメージをしやすくなるかと思います。

また、画面を展開していく中、新しい問いも出てきました。
"違う項目をにゅ力するときどう分かりやすいか？"  "検索結果の件数を表示するか?"  "読み込みの時間がどれぐらいかかるか?"など、より良い体験を作るために仲間と議論、検証していきます。

2.気づいたことをすぐデザインファイルにメモする

私はデザイン作成している時、思考回路や疑問を記録する癖があります。

メリットは、技術の問題は漏れなくエンジニアさんに確認出ることや、振り返るときにデザインを採用/破棄する理由もすぐ確認できること。

最終形のデザインだけではなく、ボツ案やその原因も全て残っています。

ボツ案になる原因によって改善の工夫をしています。

デザイン自体の問題: レイアウトや配色をもっと勉強し、より多くデザインパターンを蓄積します。

技術の問題に対する認識が浅い: OSの仕様に詳しくなったり、時間があれば参考コードやライブラリーを探してみて、エンジニアさんと相談する。もしかしたら、技術が発展すれば実装できるかもしれまないです。

まだ必要ではない: アイディアとして寝かせて、タイミングを見て再度提案します。

3.全ての状態を展開する

実装をスムーズに進めるために、デザインの要素は全ての状態を決めるのが必要になります。

昔デザインの決定力の記事を読んでとても感銘を受けました。

例えば
- 設定、表示画面: 設定されていない、空っぽの状態、読み込み中...
- 入力系:- 入力前、入力中、入力後の状態 、入力内容は最大限何行表示
- ボタン：通常、タップされたとき、無効な状態...

下記の画像では、コメント入力欄全ての状態を展開しています。左から右の状態は:入力前、入力中（8行以下）、入力中（最大表示行数を超える場合）になります。

想定しているキーボードの位置、入力エリア可変や最大行数などによって、実装のコードが違います。デザインファイルできちんと決めると、実装するとき迷う時間が少なくなります。

下記の画像では、ユーザーが現在地の設定されていない場合、設定中、設定済みなどの状態を全て展開しています。

下記の画像は、接続切れの表現も検討しています。実装の判断で最終的にデフォルトのアラートが出るかもしれませんが、理想の体験をまずデザインしてみるという習慣があります。

以上はデザインを作るときに、工夫をしている3つのポイントでした。

デザインはデザインーだけの仕事だと思います。ホトカミ内では複数の立場を持っている仲間と一緒に作ってきました。
次回はチーム内の連携やツールを紹介しようと思います。