タイトルに「デザイン」とありますが、私はデザイナーではありません。
しかし、WEBではデザイナーでなくてもできるWEBデザインのポイントがあります。
そのポイントに気をつけるだけでユーザーに最後まで飽きずに読んでもらえ、途中離脱を減らすことができるので、そのポイントを簡単に解説していきたいと思います。
ポイント１：視線の動き
人の視線は左上を起点に3種類の動きをします。- 右下に向かって視線を走らせ、視線の周辺も見つつ右下で止まる（グーテンベルク・ダイヤグラム）
- 右上、左下、右下を「Z」を描きながら右下で止まる。（Z型）
- 基本的には左上から左下に向かって視点を動かすが、見出しや興味のある文章で右に視線を走らせる。（F型）
ポイント２：目に留まりやすいもの
人の目は「大から小」に動きます。つまりコンテンツの途中で意図的に視線を集めたい部分が発生したら画像や大文字を登場させれば次に続く内容に視線を誘導しやすくなります。この習性を利用したものとして「見出しと本文」、「画像と画像下のテキスト」などが当てはまります。
ポイント３：配置を整理して情報を見やすくする
人は視線を動かすのが楽なので近くの情報に目線を動かしますが、どれも等間隔で情報が散らばっていたりすると混乱します。同じ情報は近くに固まらせて見やすくしましょう。「見出しと本文」や「商品名と値段」など繰り返し出される情報は、特にグルーピングすると見やすくなります。
ポイントを意識したコンテンツ作り
ポイント１〜３を意識してサイトをデザインするためには以下のようなことに気をつける必要があります。視線の導線上にアイキャッチを設置
視線は左上から始まり、下または右下に動くので、その視線の動きに重なるようにして目に留まりやすい「アイキャッチ」となる画像や見出しを設置します。読み飛ばされていても見出しで一旦視線が止まります。
視線を誘導するメリハリのある表現とグルーピングを
アイキャッチの役割は視線を留めるだけではありません。見出しや画像がまったくないのっぺりした記事に対して「読む気がおこらない」のはどこに意識を集中すればいいのか分からず、気が散ってしまうからです。適度に見出しを挿入し、情報をグルーピングすることで読みやすくなり、読んでる人にとって必要な情報にたどり着きやすい構造になります。
視線の導線を邪魔しない配置
人の目線が左上から下か右下に動くのであれば左側に配置するコンテンツや画像は重要になります。内容と関係のない広告などばかりで埋め尽くすのはよくありません。視線の終着点では行動を促す
視線は右下にたどり着くため、ここに「関連コンテンツ」、「続きはこちら」など次の行動を促すような仕掛けをすると誘導しやすくなります。また、この部分に広告やお知らせを配置しておくとクリックされやすくなります。
まとめ
「見やすさ」と「視線の誘導」を心がけるだけで、「最後まで読んでもらえる」や「誘導したい部分がクリック」してもらえるようになります。やること自体はとても簡単なので、ぜひ実践してみてください。
