DOE HOME > DOEの強み > 読ませる為の『複雑レイアウト』

読ませる為の『複雑レイアウト』

単純レイアウト VS 複雑レイアウト 深く読んでもらえるレイアウトは?

ホームページで重要なことは第一に、パッと見た時の『印象』です。
このホームページに自分が望んでいるコンテンツがあるかどうか?
そこを直感的にユーザーは判断します。
辞書のように文字が羅列されているサイトをユーザーが好むでしょうか?
辞書のようなサイトは「読む気がしない」という理由でユーザーに離脱されるケースが多いです。
そのため、コンテンツとは別にコンテンツの『見せ方』を考える必要があります。

単純レイアウトと複雑レイアウトの違い

目が止まらない単純レイアウトの場合

単純レイアウト

Webと新聞は違います。
インターネットユーザーは、特にWeb閲覧時はハイスピードで情報把握をしようとしていることがキーポイントとなります。
連続して表示されるテキストスタイルは『斜め読み』ができず、「読んでみたい」という気持ちにさせるのは困難です。

目が止まりユーザーに読んでもらえる複雑レイアウト

複雑レイアウト

右の画像は、目が止まり、斜め読みができる構成例です。

  1. 画像やアイコン等のアイキャッチの配置
  2. 目の流れを遮るようなコンテンツボックスの配置
  3. 余白の使い方が他と大きく違う箇条書きコンテンツの配置
  4. 同じようなデザインパターンを流用するのではなく、なるべく多くのデザインスタイルを組み合わせて配置

単純な説明文を掲載しただけだと、ユーザー側で説明文章の中からカテゴリ構造を理解しなければなりません。ユーザーに考えさせるのではなく、文章のカテゴリ構造を細かく分類し、タイトルを斜め読みするだけでも内容が理解でき、気になるところだけ詳細を読む、というような設計を行うのがポイントです。

複雑レイアウトの制作事例

情報盛り沢山の葬儀社サイト

1枚のページの中に様々なパターンのレイアウトが盛り込まれているセカンドページです。ゴチャゴチャして見えないように、配色や余白の取り方にこだわっています。

» http://www.kindhall.co.jp/plan/plan-120.php

思わず見入ってしまうページ構成

採用サイトだからと言って、単純な募集要項などを掲載していくだけではなく、個性を最大限に引き出したセカンドページになっています。

» http://www.shonankamakura.or.jp/pharmacist/story/staff_03.php

見てるだけでお腹が空いてくるような構成

飲食店サイトなのでセカンドページにもできるだけ写真を掲載し、見た目で楽しんでもらう構成になっています。イメージギャラリーなども取り入れ、サイトの滞在時間が長くなるような設計になっています。

» http://www.yoshuhanten.com/shinhonten/

安心できる歯科医院サイト

歯科医院という特性上、まず安心感を持ってもらうために、情報をふんだんに掲載しました。ブロックごとに見やすいレイアウトにこだわり、画像も写真だけではなくイラストも作成して見やすい構成になっています。

» http://www.parkside-yokohama.jp/service/whitening/section02.php

文字情報も見やすく。

技術的な内容が多く、どうしてもテキストだらけになってしまいがちなセカンドページですが、ただの箇条書きにしても数種類のデザインを用意するなど、飽きさせない見せ方にこだわっています。

» http://www.ogura-indus.co.jp/product/section04.php

シンプルさの中にも変化をつける。

全体的なデザインとしては色数も少なく、フラットデザインなので単調になってしまいそうですが、アクセントでアイコンを配置したり、大胆な余白を取ることで変化のあるページ構成になっています。

» http://www.kiwi-education.jp/ja/class/

提供画像が少なくても変化をつけたサイトへ。

提供いただいた画像はほとんどありませんでしたが、ポイントで目をとめてもらうためにアイコンを数十個作成しました。

» http://www.sinc.co.jp/service/

アクセントとなるデザインやコンテンツを適宜配置。

ページ中段に「私達にできること」というコンバージョンに誘導する大きめのバナーを配置したり、CMSとも連動するコンテンツを引っ張ってきたりと工夫がされているセカンドページです。

» http://www.fgc.or.jp/activity/myanmar/

セカンドページの設計が集客のポイント

『web集客』で新たなステージへ…一覧を見る

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

ホームページ制作のお問い合わせは横浜のDOEで。