ToDoサービスのUIデザイン①
デザインに無縁だった私がUIUXデザイナーを目指す過程を記録しています。
ご無沙汰ですね。
ここ1ヶ月ほど水面下で蓄積してきた学びを投稿していきます。
私の所属しているUIUXデザインコミュニティBONOから新しいコースが誕生しました。
その名も「ゼロからはじめるUIビジュアル」。
Figmaの使い方を丁寧に解説していただきながらも、ゼロからToDoサービスのUIデザインをしてUIビジュアルの超基本を学べる、というまさに私のような超初心者向けに作られたコースです。
ありがたや…
このコースを通してソフトウェアデザインに必要なコンテンツ/作成/編集/ナビゲーションを一通り体験できました。
お題
これから作っていく画面の大きさは、FigmaでFrameのDesktopとなっている1440 x 1024とします。
ヘッダーUIのデザイン
最初から微調整はせず、まずは全体を作ってから見た目を調整していきます。
UIの基本構造
UIには3つの基本ブロックがあります。
1. ナビゲーション
2. コンテンツ
3. アクション
ゼロベースでUIを作るときはこの3つの要素を意識してデザインしていくと整理しやすいです。
そして作る前にラフで方向性をイメージするのは大事です。
既存サービスを参考にする
今回カイさんが参考にしておられたのは以下のサービスです。
・Google Calender横のTODOリスト
・Todoist
・Nu
まずはこのサービスが良さそうというものを見つけて真似します。
今回はTodoistを採用します。
必要なものだけ真似したらOKです。
ナビゲーションで今回真似することは以下のようになります。
左ブロック
・検索
・ホームに戻る（アイコンでなくてもサービス名でOKそう）
右ブロック
・アカウントのアイコン
・通知
ヘッダーブロックを定義
Frameでブロックを作っていきます。
縦幅が何pxかは参考UIから真似します。
作りながらトレースすることで引き出しが増えていきます。
ブロック内側の余白は、左右・上下で均等にします。
こちらも参考UIでどのくらいの余白を左右・上下で取っているのかを確認してバランスを取っていきます。
文字のフォントはOS標準のフォントを使います。
ソフトウェアサービスはOSデフォルトフォントが基本です。
Mac
日本語：Hiragino Sans
英語：Helvetica
Windows
日本語：MeiryoかYuGothic
英語：Arial
検索フォームをデザイン
Material Iconsを予め用意しておきます。
FigmaのLayersから"search"と検索すると、アイコン検索できます。
検索フォームの色を決めていきますが、有名サービスが使う色を調べます。
スクリーンショットを取ってきてFigmaで色を調べていくと、自分の感覚値が洗練されていきます。
Twitterを参考にして色を当てます。
文字の大きさは参考UIが14pxなので揃えていきます。
アイコンの大きさは文字の大きさと揃えるのが基本なので、参考UIではなくTwitterから参考にしていきます。
Line Heightは改行時の高さに影響しており、%で指定が普通です。
改行が生まれないときは100%にしておいたほうが良いです。
今回検索アイコンと検索文字の間の余白調整をする際、アイコンそのものが持っている余白があるので、実際の見た目で余白を測ると正確ではあります。
サイズ基本は偶数の倍数で比率を管理します。
サービス名と検索フォームをAuto Layoutして、ナビゲーションの左ブロックは完成になります。
右ブロックをデザイン
Material Iconsから通知のアイコンをコピーしてきます。
アカウントのアイコンはFrameを丸にします（丸は人っぽさが出るので使われるケースが多いです）。
Command+Option+Cで要素をコピーできるので、それを丸のFrameにペーストして画像も丸くします。
通知アイコンとアカウントアイコンをAuto Layoutします。
参考UIから余白を調べて適用しますが、こちらもアイコンそのものが持っている余白があるので実際できる余白が参考UIと同じになるようにします。
最後にプレビュー機能を使ってユーザーが見る形でおかしいところをチェックしてメモしていきます。
参考UIを実際に開いたものと見比べて違いを見つけていきます。
自分で自分のデザインを叩いて初めて上達します。
が、まずは土台＝構造から作っていくので、細かいデザイン部分は後で調整します。
コンテンツブロックをデザイン
コンテンツはめちゃくちゃ重要です。
というのも、コンテンツがUIのメインだからです。
ユーザーはコンテンツを目的に使いに来ています。
作るブロックの機能を確認
今回はナビとToDoのブロックを作っていきます。
作るときは要件も確認します。
まずは自分で考えるよりも参考UIを真似をしてからアレンジしていくのが鉄則です。
目線は左上から始まります。
なのでToDoのチェックは左側に揃えたほうが見やすいです。
コンテンツブロックを定義
参考UIをトレースします。
UIに詳しくなっていき、引き出しが増え、基本の型を取り入れていくことができるからです。
今回は横幅が800pxになっているので真似してブロックを作ります。
基本的にシンメトリーになっているデザインは人間に安心感を与えるので真ん中に揃えます。
ToDoアイテムを盗む
ここからは参考UIをどんどんトレースしていきます。
ToDoリストのタイトル、期限、カテゴリはそれぞれ何pxか確認します。
ちなみにリストの1ブロックをオブジェクトと呼びます。
タイトルより期限、カテゴリは2px小さかったので、タイトルが目立つように強さを変えていることがわかります。
基本的にFigmaでは使い勝手が良いことが多いので、なんでもFrameで作ります。
今回のチェックボックスもそれに当たります。
ToDoの構造を考える
参考UIから整列されている部分を見てブロックを判断していきます。
また、アクション機能があるかも判断材料になります。
今回であれば以下のように構造をわけることができます。
大きく左がアクション、右がコンテンツの機能で分かれています。
コンテンツの中では左右でなく上下で分かれていると考えられるのは、下側のそれぞれが同じ高さで左右にピタッと分かれているように見えるからです。
コンテンツブロックを作っていく
期限とカテゴリをブロックにします。
作ったブロックとリストのタイトルを更にブロックにします。
そして右側のブロックとチェックボックスとをブロックにすればオブジェクトの完成になります。
ただ、これをしていくとチェックボックスの位置がズレてしまうので、高さの調整をしていきます。
まずはタイトルの文字の高さ調整からします。
タイトルは改行される可能性があるので、敢えてLine-Heightは140%にしておきます。%で合わせるとやりやすいです。
チェックボックスをブロック化していなかったので、ブロック化します。
FigmaではAuto Layoutがそれに当たります。
ただし、チェックボックスそのものではなく大枠のブロックとなるFrameを作り、その階層下にチェックボックスが存在していてそれをAuto Layoutするようなフローになります。
タイトルの真ん中にルーラーで線を引いて、その真ん中にチェックボックスがくるよう余白を調整します。
最後に左ブロック（アクション）と右ブロック（コンテンツ）をまとめてブロック化してリストアイテムが完成です。
ToDo一覧をデザイン
これまで参考UIの上でトレースのようにやってきたので、実際の画面に入れてデザイン調整をします。
文字の色は背景が白なのに薄めのグレーなので調整が必要です。
まずは真っ黒にします。タイトルはこれでOKですが、期限やカテゴリは黒の透過の%で色を変更することにより階層関係を示唆できます。
アクションの色は目立ったほうが良いですが薄いので、Google のToDoを見に行きます。
やはり濃いめの色が使われていたので一先ず真っ黒にしておきます。
一覧のブロックを定義
アイテムをまとめるブロックを作ります。
横幅は800pxで考えていたのでFigmaのFrameで800pxのブロックを作ります。
その中にアイテムを入れます。
ただ、アイテムの横幅がぴったり合わないので、調整が必要です。
まずは作ったメインブロックとアイテムをAuto Layoutしてメインブロックの幅をFixedで800pxにします。
そしてアイテムの横幅がFillの設定になると横幅いっぱいに自動で調整してくれるので、右ブロックの外の大枠と中身をすべてFillにします。
下の期限とカテゴリのブロックは間の余白をAutoにすることで左右が両サイドいっぱいになるよう並んでくれます。
最後にリストの下に線を引きます。FigmaではStrokeから下だけ線を引ける設定ができます。
余白を4の倍数で設定するとリストと線の間が詰まって見えません。
左のアクションと右のコンテンツの余白が8pxなので、それと同じかそれより大きい余白だとバランスがとれます。
色は黒20%にします。
できたリストを一度コンポーネント化して画面外に置き、コピーしたものを一覧に並べます。
リストに線を引くために上下余白を作ったので、メインブロックの上下の余白は消します。
ナビブロックを作る
メインブロックの中にナビゲーションが必要なので、Frameでブロックを作ります。
リストすべてをAuto Layoutしてブロックを作ります。
ナビゲーションのブロックを選択した状態でテキスト（タイトル名）を入れます。
タイトルはだいたい20px以上が良いとされています。
Hiragino SansであればW6がタイトル用の太字になっているのでその設定にします。
ナビゲーションブロックでAuto Layoutして左右の余白を消します。
情報の伝達構造で余白サイズは考えていきます。
上下の余白は今回20pxにします。
メインブロックの上下に余白がついていたので消します。
ヘッダーとメインブロックの余白は参考UIが40pxだったので同じにします。
ナビブロックですでに20pxの余白を取っているので、ヘッダーとメインブロックの余白は20pxになります。
作ったらプレビューで確認します。
私も動画に沿って作っていましたが、この状態の画面を残していなかったのでここまでの画面についてはカイさんの作成分を拝借しました。
振り返り
出来上がったものはめちゃくちゃシンプルですが、学びの要素はたくさんありました。
あまり細かくは記載しませんでしたが、カイさんがめちゃくちゃ丁寧にひとつひとつのFigmaの操作まで解説してくださっているので、迷うことなくFigmaが操作できました。
また、余白や色、構造の考え方の基礎が実際にデザインしながら学べていけているので、非常に充実しています。
まずは世の中のデザインを知るためにも参考UIからどんどん真似していくのが大事になってきます。
チェックボックスが左にあるのはどういう理由なのかな？と自分で考察しながらやっていくことが1番の上達になるとプロのお墨付きをもらっているので、これからも量をこなして頑張ります！
次回はアクションを追加していきますよ〜。