「イマイチなUI」 を作らないためのコツ ~レイアウト編~
こんにちは！普段フロントエンド開発をしている人です🙌
今回はUI作成をレイアウトなどから考えている方向けの内容になっています。
レイアウト作成前の情報整理についての知りたい方はこちら
情報整理編で使用した例(料理レシピUIの作成)
下の表を元に画面上に表示する内容、ラフ図を作成しました。
| 誰が使う | 何ができる | いつどこで使う |
|---|---|---|
| 料理を全く知らない人 | 作り方を伝える | スマホで見れる料理サイト |
| 意識高い系の人 | 詳しく知ってもらう | 雑誌形式サイトの最後のページ |
| 小学生 | 料理を楽しんでもらう | 学校の授業 |
| 誰が使う | 必須情報 | あったほうがいい | なくてもいい |
|---|---|---|---|
| 料理を全く知らない人 | 作り方、材料、レシピの写真 | グッズ、レシピ名 | 栄養価 |
| 意識高い系の人 | 作り方、材料、栄養価、レシピ名 | レシピの写真 | グッズ |
| 小学生 | レシピの写真 | レシピ名、作り方、材料 | グッズ、栄養価 |
そもそもレイアウトとは
「layout」を和訳すると、設計、配置図、見取り図…などとなります。今回この話で使うレイアウトとは「画面の骨格」という意味のものとします。
使用する人にどのように見てほしいかというのかレイアウトによって変わってきます。
レイアウト作成
レイアウトを作成するための事前知識と例を使用して実際に私が作ってみたレイアウトをご紹介します。
人の目の流れとレイアウト
人の目の流れとは
あなたは横書きの文章を見た時、どのように読み進めますか？また、縦書きの場合はどうですか？
日本人の方であれば、大抵の人は横書きの場合左上から、縦書きの場合右上から見ていきますよね。
どこからどのように見ていくのかというのがここでいう「人の目の流れ」です。
この人の目の流れを誘導するための設計があり、 視線誘導 と言います。様々なサイトで紹介されているので、もうみなさんご存知かもしれません。
視線誘導のパターン
基本的なものとしてグーテンベルク・ダイヤグラムがありますが、そのほかにも上の図のように様々な種類があります。
この視線誘導をもとにして情報整理編で作成したラフ図を見てみると、
情報整理編で作成したラフ図
| 誰向けのラフ | 視線誘導パターン |
|---|---|
| 料理を全く作らない人 | 数の順序 |
| 意識高い系の人 | F型 |
| 小学生 | 特になし？？ |
というような感じになります。
例にある小学生向けのラフのように特に当てはまる視線誘導パターンがない場合、もう一度ラフを考えてみることをおすすめします。
Web・Applicationレイアウトパターン
WebサイトやApplicationにはヘッダーやサイドバーなどを使用したある程度の決まったレイアウトがあります。
レイアウトのパーツは大きく分けて以下の五つです。
| 種類 | 内容 |
|---|---|
| ヘッダー | ロゴやボタンなどのアクションを起こす要素が置かれることが多い |
| ナビゲーション | Web サイトに多くあるコンテンツへのリンクを一列に並べたもの |
| コンテンツ | サイトや Application のメインになる要素 |
| サイドバー | コンテンツの横に配置するパーツでカテゴリの一覧などが置かれます |
| フッター | Web サイトに多く、プライバシーポリシーや会社概要へのリンクなどが置かれる |
この五つの組み合わせで見やすいレイアウトの作成ができます。
上の図のように必ずしもパーツ五つ全て使用しなければならないわけではありません。
Applicationでは使いやすさが重視されるため、このような決まったパターンを使うことが多いですが、画面上の様々な場所にコンテンツを置いたりするデザインのWebサイトも近年増えてきています。
つまり、 正解はない のです。
文字と図
画面内の文字と図について皆さんどれくらいお考えでしょうか。
一画面に入れる情報量が多いと文字を多用しがちですが、たくさん文字が書いてあるものを見るのは活字が大好きな人以外はあまり好まれません。(一個人の感想です。)
文字にすべき内容と図にすべき内容を考えてみてください。
情報整理編のどっちがだいじ？である程度の情報が絞れているはずなので、それをレイアウトに当てめていきましょう。
例で作ってみる。
レイアウトを私なりに作ってみたものがこちら。(今回はレイアウトのパーツでいうコンテンツの部分のみ考えています。)
ラフ図の時よりもより具体的に配置決めができたのではないのでしょうか？
小学生向けにはレイアウトテンプレートの数の順序を使っての視線誘導を追加しました。さらに作り方を絵にすることで文字数をできるだけ減らしています。
少し文字が多くなりそうなところはありますが、そこは次回出てくる余白をうまく使っていけばなんとかなりそう…
(なんでもっと少なくなりそうな例題にしなかったんだ…)
みなさんもいい感じに作れたでしょうか？
情報整理とレイアウト作成が終わったらするべきこと
ぱっと見た時にどこを見ればいいのかわからない… そうならないためにも、
一番見てほしい情報 ＝ 主役 とすると使用者の方にとって使いやすい・見やすいUIを作成できます。
主役となるような情報に対して何をするとぱっと見でわかるようになるかは以下のような方法があります。
1. 色・図と地について
例えば、白とグレーや黒しかない場所にポツンと赤いマークがあるととても目立ちます。
このように色によって決める方法ととそれを応用した図と地の関係がを使用して決める方法があります。
色に関しては、色がない場合は「足し算」で目立たせ、色が多い場合は「引き算」で目立たせます。
図と地に関しての解説はリンクから飛んで読んでください。例えばの例が下の図のようになります。
2. サイズ・余白・形について
画面内に配置するもののサイズともの通しの余白、ものの形で目立たせることが可能です。
サイズに関しては、面線≒重要度となるように配置していきます。主役の大きさを大きくすることだけを考えるのではなく、脇役の大きさを小さく揃えたりすることを考えるほうが重要です。
余白に関しては重要度が高いものと周りの情報との余白を他のものよりも大きくしましょう。
形に関してはgridで分けられているものなどの規則的に並べられたところにその後かとは違う変形した形を置きましょう。
例でやってみる
まずは主役となる情報をまとめると以下のような感じに
| 誰が使う | 主役 |
|---|---|
| 料理を全く知らない人 | 作り方 |
| 意識高い系の人 | 栄養価 |
| 小学生 | レシピの写真 |
今回は違いをつけるために意識高い系の人は栄養価にしてみました。ここは作り方であっても材料であっても大丈夫です🙆♀️
一緒に開発する方や先方の方などとの認識のずれがなければよく、この考え方にならなければいけないというわけではありません。
上で作成した作成したレイアウトで主役が目立つようにレイアウトを変更してみましょう。
何が変わった…？となるくらい細かい部分かもしれませんが、ちょっとは主役が目立つようになったはず…（なったと思いたい）
まとめ
情報整理編でまとめた情報を実際の形になる程度まで作成できました！
今回私の独断でレイアウトの作成や主役極めなどを行いましたが、どれが正解であるかというのはありません。
デザインに正解なんてあると斬新でいいデザインなんて出ないですからね…
常に見やすい、使いやすいに加えてわかりやすいを考えて作っていきましょう
Discussion