👀

「エンジニアが作るイマイチなUI」を作らないためのコツ ~レイアウト編~

2024/07/08に公開

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

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

前回までの例

料理のレシピUIの作成

誰が使う 何ができる いつどこで使う
料理を全く知らない人 作り方を伝える スマホで見れる料理サイト
意識高い系の人 詳しく知ってもらう 雑誌形式サイトの最後のページ
小学生 料理を楽しんでもらう 学校の授業

そもそもレイアウトとは

「layout」を和訳すると、設計、配置図、見取り図…などとなります。今回この話で使うレイアウトとは「画面の骨格」という意味のものとします。

使用する人にどのように見てほしいかというのかレイアウトによって変わってきます。

人の目の流れとレイアウト

人の目の流れとは

あなたは横書きの文章を見た時、どのように読み進めますか?また、縦書きの場合はどうですか?
日本人の方であれば、大抵の人は横書きの場合左上から、縦書きの場合右上から見ていきますよね。
どこからどのように見ていくのかというのがここでいう「人の目の流れ」です。

この人の目の流れを誘導するための設計があり、 視線誘導 と言います。様々なサイトで紹介されているので、もうみなさんご存知かもしれません。

視線誘導のパターン

基本的なものとしてグーテンベルク・ダイヤグラムがありますが、そのほかにも上の図のように様々な種類があります。
この視線誘導をもとにして第二回で作成したラフ図を見てみると、

誰向けのラフ 視線誘導パターン
料理を全く作らない人 数の順序
意識高い系の人 F型
小学生 特になし??

というような感じになります。
例にある小学生向けのラフのように特に当てはまる視線誘導パターンがない場合、もう一度ラフを考えてみることをおすすめします。

Web・Applicationレイアウトパターン

WebサイトやApplicationにはヘッダーやサイドバーなどを使用したある程度の決まったレイアウトがあります。
レイアウトのパーツは大きく分けて以下の五つです。

種類 内容
ヘッダー ロゴやボタンなどのアクションを起こす要素が置かれることが多い
ナビゲーション Web サイトに多くあるコンテンツへのリンクを一列に並べたもの
コンテンツ サイトや Application のメインになる要素
サイドバー コンテンツの横に配置するパーツでカテゴリの一覧などが置かれます
フッター Web サイトに多く、プライバシーポリシーや会社概要へのリンクなどが置かれる

この五つの組み合わせで見やすいレイアウトの作成ができます。


上の図のように必ずしもパーツ五つ全て使用しなければならないわけではありません。

Applicationでは使いやすさが重視されるため、このような決まったパターンを使うことが多いですが、画面上の様々な場所にコンテンツを置いたりするデザインのWebサイトも近年増えてきています。
つまり、 正解はない のです。

文字と図

レイアウトについて最後に考えて欲しいのは画面内の文字と図についてです。
一画面に入れる情報量が多いと文字を多用しがちですが、たくさん文字が書いてあるものを見るのは活字が大好きな人以外はあまり好まれません。(一個人の感想です。)
文字にすべき内容と図にすべき内容を考えてみてください。

前回のどっちがだいじ?である程度の情報が絞れているはずなので、それをレイアウトに当てめていきましょう。

例で作ってみる。

レイアウトを私なりに作ってみたものがこちら。(今回はレイアウトのパーツでいうコンテンツの部分のみ考えています。)

ラフ図の時よりもより具体的に配置決めができたのではないのでしょうか?
小学生向けにはレイアウトテンプレートの数の順序を使っての視線誘導を追加しました。さらに作り方を絵にすることで文字数をできるだけ減らしています。

少し文字が多くなりそうなところはありますが、そこは次回出てくる余白をうまく使っていけばなんとかなりそう…
(なんでもっと少なくなりそうな例題にしなかったんだ…)
みなさんもいい感じに作れたでしょうか?

まとめ

まとめた情報をもとに視線誘導とレイアウトパターンを使用してラフよりも細かい枠を作成することができました。
これをもとに次は画面内の情報の優先順位を考えて、色や文字の大きさを考えていきましょう❗️

注意点(これ結構大事)

今回の材料を表示する部分やBtoBのApplicationを作成するときに多いですが、テーブルなどで情報の羅列をしてしまう時があります。
本当にそれは見やすいUIになっているでしょうか?使う用途や使用する人によって賛否両論あるので、情報整理で誰向けに作っているのかを確認してレイアウトを考えましょう。

Discussion