見出し画像

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

Rina

デザインに無縁だった私が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から選びます。

コンテンツ構造をデザイン

とりあえず概要を作っていきます。
その際、グリッド（比率）というものを使っていきます。
Figmaの右側にLayout Gridがあります。

基本的には真ん中揃えにします。
真ん中がわかればそれを元にコンテンツの枠を決めていきます。
数値は決めた倍数（ここでは8の倍数）で調整します。

Layout Gridがオンでコンテンツ枠を決めた状態

実際にコンテンツの情報を置いていきます。
ブロック名を"ラベル"（タイトル）として入れていきます。
コンテンツの情報は実際の情報に近いものを入れます。
そうすることでユーザーが具体的にイメージしやすくなります。

ここまでの制作過程

レイアウト（構造表現）は実際の参考UIから盗んできます。
今回はStripe/Linearをメインで参考にしていきます。
下記の赤枠のような構造（フォントサイズやラベル＋中身）です。

参考UI（Stripe）
上記を参考に作ったUI

参考UIからステータスは囲みのラベルがあるので
以下のように調整していきます。

参考UI（Stripe）
ステータス調整後のUI

⭐POINT
まとまりと意味の違いを瞬時に判断できるUIにする！

次のブロックに移ります。
同じ意味であれば前のブロックと同じデザインにしていきます。

基本的にはブロックで横は全幅取ってデザインします。
ブロックを意識できる組み方が良いです。

表のブロックをデザイン

要件定義書を元に何を記載すればよいか確認します。
ちなみに縦幅は40pxが多いです。

ユースケース：項目
意味：項目の順番
中身の情報：幅　　　を決めていきます。
またここでグリッドを使って表の比率を揃えていきます。

表のデザイン

全体を見ながらブロックを線でひとまず区切っておきます。
（細かいデザインは後で考えます）
そうすることで、UIが構造化されていきます。

UI途中経過

全体のメリハリあるUIが作られましたね💡

情報設計をしっかりやることでいい見た目になりやすくなります。
なのでUI要件定義書で何を載せるべきか、
どのようなアクションが必要かを
まずまとめておくことが重要になります。

UI確認

要件定義書を見ながらすべての項目を追加したら
実際にどのように見えるか再生してUI確認をします。
編集は編集する項目の近くにあったほうがよいと判断し
それぞれの項目ごとに編集を追加。
要件定義書の行動フローにシェアも含んでいたので
元々アクションの部分にあった編集をシェアに変更しました。

デザインしたラフのUI


振り返り

コンテンツを見ながらトレースしていっただけですが
たくさん学びの要素が詰まっていてかなり大変でした😂

ただ、要件定義書があったからこそ
何を作る必要があるかをすぐに把握し
抜け漏れがないように確認できていました。

なので、最初にUIの整理がしっかりできていることが
いかに重要かを痛感しました。

また、参考UIがあることでまっさらの状態から
自分で考えることなくデザインできました。

すでに世の中には使いやすいUIがあるので
自分でわざわざ使いやすいかわからない危険物を
生み出さないためにもリサーチは大事ですね！

次回はUIを詰めていきます！
それでは！


この記事が気に入ったらサポートをしてみませんか？