今回はWebデザインの初歩的なコラムです。息を吐くように使えるようになりたい技術を5つピックアップしてみました。楽しんでください!

1.人間の視線の動きを考えてみよう

Webサイトを見る時、サイトによって人は大きく分けて2種類の目線の動きをするということがわかっています。”Fパターン”と”Zパターンです。”

Fパターン

Fパターンは一般的な目線の動きです。以下の画像を見てみましょう。

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

縦に長い、記事やブログ投稿のようなテキストベースのページによくある視線の動きです。基本的に読者は、見出しや最初のリード行を下に読み進めていき、面白い話題を見つけると、右に読み進めます。この結果をヒートマップで表してみたのが上記の画像ですが、F(またはE)のように見えませんか?例えば、重要な情報を一列に並べ、短い、太字の見出し、箇条書きなどの注意をつけて段落ブロックを分割することが、こういったユーザーの対応方法となるでしょう。

Zパターン

https://cheesetart.com/

Zパターンは、どちらかというと、横長のサイトに多くみられる視線の動きです。読者の目は、まず重要な情報が見つかる可能性のあるページの上部を見つめていき、対角線の反対側の角に移動、ページ下部で同じことを行います。最も重要な情報を全ての角に配置し、その他の重要な情報を視線の移動することで、ユーザーの視線を網羅することができます。

説明すると難しいので以下画像をご参照ください!

https://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design–webdesign-28

2.一番大きいモノの勝ち。



http://rijp.eng.nagasaki-u.ac.jp/

普通の人間は、大きい文字に興味を惹かれます。上の画像で、Professionalという文字よりも、横のfor the worldの方が先に目に入るという人がいれば、私の出番はありません。笑
恐ろしいことに、一番大きいものは、全てを凌駕します。基本的に人間は上から下に情報を読み取っていきますが、この画像の場合は、上の”アジアで学び”という文字よりも、Professionalの方が先に目に入りませんでしたか?

こういったトップダウンなUXを崩すことができるのも、大きな文字を使うときの面白いポイントです。

3.余白の効率的利用と、マーキングテクスチャ

https://eco-island.jp/

余白をゆったり取ることによって、大事な部分を浮き彫りにすることができます。
自分が本当に伝えたいことに要素を絞れば、むやみにフォントを大きくする必要がなくても読みやすいサイトを作ることができます。

この現象を逆手にとって、伝えたい情報の優劣を意図的に作り出すことも可能です。
次の画像をご覧ください。

https://www.smashingmagazine.com/2013/02/creating-visual-hierarchies-typography/

1番目の画像ではSPORTSとBADMINTONは並列です。ですが、二番目であれば、BADMINTONがSPORTSの中でも紹介したい、伝えたいことなのだという印象を受けますし、3番目であれば、もはやBADMINTONはスポーツではないのだ、と言わんばかりです。

余白の利用によって同じ構図でも大きく意味合いが異なってきます。

4.フォントでサビを効かせよう。

http://kasperstromman.tumblr.com/post/42093497866/best-finnish-magazine-covers-of-2012

フォントはコンテンツごとの同質性と異質性、並列と優劣を決めるのに重要な働きをします。上の画像では、白い文字の項目は全て並列のように見えますよね。また、オレンジの文字はフォントが違って、異質なもの(見出し)であることがはっきりとわかります。

フォントの種類を増やしすぎると、却って統一感の無い雰囲気になってしまいますが、内容の優劣を表現する時、フォントをイタリックや太字にするだけで解消できることがあるので覚えておくおくと良いでしょう。

5.色使いで〆ましょう

https://www.iamas.ac.jp/

皆さんもご存知の通り、ユーザーにクリック/タップしてもらいたい場所に色を有効的に使うことは非常に重要です。例えば情報科学芸術大学院大学の例では、青い部分(資料請求)が重要だということをユーザーは直感的に理解できますよね。

https://whitney.org/

また、この例では、灰色の文字が黒色の文字と正確に役割が違うのだということを理解することができます。また、色が濃い文字を上に、薄い文字を下に持ってくることで、ユーザーは直感的に上部の方が大事な情報なんだ!ということを理解することができます。

まとめ

私が意識している基本的なWebデザインの原則をおさらいしました。情報構造や、強弱によってサイトの印象は大きく変わります。伝えたいことと、重要なこと、そして伝えなくていいことをまずは取捨選択するのが大切です。

データサイドマーケティング代表。大阪大学卒業後、デザイナー、広告代理店のクリエイティブディレクターを経験。企業や学術組織など100以上のサイトを手掛けた。得意なのはコンテンツ作成(だと勝手に思っている)。