こんにちは。今回はレイアウトの記事を書きます。
「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。
なんだかすごく中二心をくすぐられる言葉ですね。
「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。
簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。
こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。
テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置するように心がける、というものです。
これはドキュメントを読む際の視線の動きであって、媒体によって効果的な導線が異なってきます。
Z型パターン
紙媒体（横書き）の紙面なんかで
「左上→右上→左下→右下」とZの形にユーザーの視線が移動するため、
この導線上に重要なエレメントを配置しましょう、といった考え方です。
F型パターン
こちらはwebにおける視線移動の研究から提唱された、
比較的新しいパターンです。
まずはロゴ部分からヘッダーが目に入り、
続いて見出し・メニュー、記事…と読み進めていくような移動です。
レイアウトによって変わってくると思いますが、
やはり目立たせたいエレメントは左上に配置するのがベターなようです。
目標からレイアウトを逆算する
当たり前ですが、視線の流れは無意識によるものだけではなく、デザインの効果によって変わります。
サイトの目標をしっかりと設定し、ユーザーがどう行動するか、導線を考えて設計することが大切です。
見た目がキレイならいいってもんじゃない
同一色・同系色の配色は、デザインがまとまりやすく洗練された印象を覚えますが、
上の画像のように、見出しと本文が一瞬で判断できないと視線が迷ってしまいます。
また、文字サイズの大きさをあまり変えないと、落ちついたデザインになりますが、
ジャンプ率が低くなり、パッと見た時にどの文章を読めばいいのかわからなくなってしまいます。
デザインによる誘導
このようなレイアウトの場合、
配色による視線誘導
コンテンツ３カラムのうち重要な１つのみにアクセントカラーを置き、視線を誘導します。
逆に言えば、横にいくつものコンテンツを並列した場合に通常の視線の流れから考えて
左から読ませたいと考えていても、誘目性の高い色を一番左以外に使うと読み飛ばされてしまう危険性があります。
ジャンプ率による視線誘導
見出しに目が行き、一目で重要度が分かります。
webサイトをデザインする際は、コンテンツの重要度を把握した上でのレイアウト・ビジュアルデザインを意識したいですね。
