💡

エンジニアが作るイマイチなUI」を作らないためのコツ ~主役は誰だ編~

2024/07/09に公開

こんにちは!普段フロントエンド開発をしている人です🙌
今回は作成したレイアウトの調整編です。
レイアウト作成編を読んでない方は下の目次から飛んで読んでみてください。

  1. UIを作る前の情報整理1 WHO・WHAT・WHENについて
  2. UIを作る前の情報整理2 図解とラフ図について
  3. UIを作る前の情報整理2 どっちがだいじ?
  4. UIのレイアウト作成
  5. 画面内情報の主役決め ←今回
  6. 色と脳
  7. UI作成時に気をつけていること

前回までの例

料理のレシピUIの作成

誰が使う 何ができる いつどこで使う
料理を全く知らない人 作り方を伝える スマホで見れる料理サイト
意識高い系の人 詳しく知ってもらう 雑誌形式サイトの最後のページ
小学生 料理を楽しんでもらう 学校の授業
誰が使う 必須情報 あったほうがいい なくてもいい
料理を全く知らない人 作り方、材料、レシピの写真 グッズ、レシピ名 栄養価
意識高い系の人 作り方、材料、栄養価、レシピ名 レシピの写真 グッズ
小学生 レシピの写真 レシピ名、作り方、材料 グッズ、栄養価

なぜ主役決めをするのか

情報の整理でどの情報が必須か判断しましたが、前回の作成したレイアウトではまだ「どの情報を一番見てほしいか」というのが曖昧になっています。
ぱっと見た時にどこを見ればいいのかわからない… そうならないためにも、一番見てほしい情報 = 主役 とすると使用者の方にとって使いやすい・見やすいUIを作成できます。

例で主役を決めてみる

情報整理でわかった必須項目の中からそれぞれ一つずつ主役を決めましょう。

誰が使う 主役
料理を全く知らない人 作り方
意識高い系の人 栄養価
小学生 レシピの写真

今回は違いをつけるために意識高い系の人は栄養価にしてみました。ここは作り方であっても材料であっても大丈夫です🙆‍♀️
一緒に開発する方や先方の方などとの認識のずれがなければよく、この考え方にならなければいけないというわけではありません。

スポットライト

例でも主役が決まったので主役を目立たせる「スポットライト」を決めましょう。

色・図と地

白とグレーや黒しかない場所にポツンと赤いマークがあるととても目立ちます。
このように色によって決める方法ととそれを応用した図と地の関係がを使用して決める方法があります。

色に関しては、色がない場合は「足し算」で目立たせ、色が多い場合は「引き算」で目立たせます。

図と地に関しての解説はリンクから飛んで読んでください。例えばの例が下の図のようになります。
https://uidesign-dailylife.com/042-figure-ground/

サイズ・余白・形

画面内に配置するもののサイズともの通しの余白、ものの形で目立たせることが可能です。
サイズに関しては、面線≒重要度となるように配置していきます。主役の大きさを大きくすることだけを考えるのではなく、脇役の大きさを小さく揃えたりすることを考えるほうが重要です。

余白に関しては重要度が高いものと周りの情報との余白を他のものよりも大きくしましょう。

形に関してはgridで分けられているものなどの規則的に並べられたところにその後かとは違う変形した形を置きましょう。

例でやってみる

前回作成したレイアウトで主役が目立つようにレイアウトを変更してみましょう。

何が変わった…?となるくらい細かい部分かもしれませんが、ちょっとは主役が目立つようになったはず…(なったと思いたい)

まとめ

情報整理でもっとも重要などっちがだいじ?で行った内容をレイアウトに使用しました。
主役決めで使用したスポットライトはどれが正解であるかというのはありません。常に見やすい、使いやすいに加えてわかりやすいを考えて作っていきましょう。

Discussion