ゼロからはじめるUI情報設計④具体UIを作る

Rina Monica

2023年3月8日 00:09

デザインに無縁だった私がUIUXデザイナーを目指す
過程を記録しています。

私の所属しているUIUXデザインコミュニティBONOから
「UI情報設計」について学んだことをまとめます！

前回はUI情報設計の「UIリサーチ」について学びました。

どういう形で情報設計をしてUIにしていくのか？
どのようにレイアウトを組んでいくのか？
どこになぜ配置するのか？を実際にトレースしていきます。

紙のラフでざっくり方向性を考える

✎使うもの
・紙
・UI要件定義書
・参考UI

紙にナビゲーションのラフを描いていきます。
UI要件定義書を使ってどういう形にしていくのか考えます。
参考UIを見ながら、どこにタイトルがきそうか？
各項目はラベルと中身で構成されていて線で区切られているな、
などを見ていきます。

この形試してみようかな、をとりあえず作って
自分の肌感的にテストしてみることが重要になります。

手書きでやるメリットは
・スピードが早い
・イメージを作ることで機能から素早く考えられる

ラフなのでざっくりイメージがわかれば大丈夫です◎

どういう情報設計にすると要件を満たせるのか？
という視点でたくさんアイデアを出していきます。

UI基本構成を必ず入れます。
🔸ナビ
　基本ヘッダーに配置されます。

🔸コンテンツ
　要件定義書のUI情報を見ながら
　何をどういうグループにするか？
　グループ内の情報はどういう関係性なのか？など
　情報同士の親子関係、グループ関係といった「構造」を意識します。
　→構造/情報のデザインの基本！
　
　グループの基本＝グループラベル（親）＋中身（子）

　それができればどういう情報が実際に表示されそうか？
　を具体的に想像します。
　すると、どんな内容がどの程度の量必要かわかってきます。
　→UIパターンを採用
　
　どういうUIかがイメージできればラフはアバウトでOKです。

🔸アクション
　要件定義書のタスクを確認すれば、
　これからどんなアクションを作っていく必要があるかわかります。

　参考UIからもわかりますが、大体は右側で
　アクションできるようになっています。
　（何かを認知する、操作する、順番を変更するなど）
　
　よくあるサービスUIを見て真似していきます。
　例）削除はすぐにアイコンを押せないようになっている

UI情報構造をデザインする

簡易システムを使う

UIの基本的なパーツ（フォントや余白、色）に対して
役割が分担されている状態で構造設計をすると作業しやすいです。
見た目のバランスは役割に左右されずに後から変更できるので、
一旦ビジュアルが定まってない時は仮で定義しておいてOKです◎

こちらの簡易システムの学びについては別で投稿します。
以下のようなかんじで作っています。

ナビゲーションの設置

ナビは基本的にヘッダーかフッターにあります。
ヘッダーのサイズは基本48か56px（8の倍数）です。

今回はYouTube Studioを参考にしていきます。
ヘッダーのサイズはスクリーンショットを撮るときに
サイズが出るのでそれで測ると64pxなので
一旦56pxの長方形で枠を取ります。

また、"戻る"ボタンのサイズを14pxでやってみます。
これは簡易システムのTextの16〜10pxから選んでいます。

簡易システムに用意していないアイコンを使うときは
FigmaのプラグインからMaterial Design Iconsを使います。
Material Design IconsはGoogleが出しているアイコンを使用できます。

「＜」こんなかんじの矢印は"Arrow"と呼ばれています。
Arrowで検索してアイコンを入れます。
アイコンの大枠の真ん中にアイコンがくるように調整します。
そしてアイコンの大きさを4の倍数（ここでは20px）にして
"戻る"テキストとオートレイアウトを組んで真ん中揃えにします。
左右の余白4pxで一旦左側のナビは終了です。

右側にアクションがきますので、一旦テキストで"編集"を置いておきます。
Material Design Iconsから"more"で検索すると
「︙」こんなかんじのアイコンが出てきます。
上記と同様の形で設定します。

一旦ヘッダーナビの長方形を白にして
アンダーバーで下に線を入れます。
色は簡易システムのBorderから選びます。