DOE'S STRENGTHS

ホームページ制作TOP > DOEの強み > 読ませる為の『複雑レイアウト』
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方

CLEAR LAYOUT

しっかりとした閲覧をしていただく為の仕掛け

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

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

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

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

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

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

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

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

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

右のサンプルは、目が止まり、斜め読みに対して工夫された構成例です。

目が止まる工夫

  1. 画像やアイコン等のアイキャッチの配置
  2. 目の流れを遮るようなコンテンツボックスの配置
  3. 同じようなデザインパターンを流用するのではなく、なるべく多くのデザインスタイルを組み合わせて配置

斜め読みに対する工夫

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

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

[パインバレー] チューニングルームと設備ページ
[ANSUR] HIITページ
[ウエルガーデン] 一般型デイサービスページ
[湘南鎌倉総合病院看護師採用サイト] 看護ストーリーページ
[湘南鎌倉総合病院看護師採用サイト] 看護ストーリーページ
[湘南鎌倉総合病院看護師採用サイト] 看護ストーリーページ
[湘南鎌倉総合病院看護師採用サイト] 看護ストーリーページ
[湘南鎌倉総合病院看護師採用サイト] 看護ストーリーページ
[湘南鎌倉総合病院看護師採用サイト] 看護ストーリーページ

Pick up the second page

色々な角度から小規模のコンテンツを多く盛り込み、ユーザーの想像力をかき立てるコンテンツ内容です。コンテンツの順番は「ブロック」、「起承転結」、「関連性」などを考慮して決めています。見出し要素を多くすることでの斜め読みや、気になるコンテンツを選択しての閲覧が可能です。

» 湘南鎌倉総合病院事務職採用サイトのセカンドページ

Pick up the second page

ページ上段で「告知キャンペーン」エリアと「インパクトのある画像デザイン」を配置しています。全ページで告知キャンペーンの掲載を行っていて、お得情報がしっかりとユーザーに届けられるようにしています。一方、画像デザインの内部で訴求力の高いキャッチコピーを配置しています。重要なのはページ上段で興味を持つかどうか。興味を持ってもらえればページ下段まで読み進められるように考えています。

» パインバレー様のセカンドページ

Pick up the second page

文章を読む上で、横に長い文章を読み進めていくのはストレスを感じます。ANSUR様のセカンドページでは文章の横幅をコントロールしてストレス軽減を考慮しています。また、画像と文章を左右に適宜配置して目が止まる工夫を施しています。

» Ansur様のセカンドページ

Pick up the second page

ウエルガーデン様のセカンドページではページ上段から下段にかけて、色々なレイアウトパターンを展開しているところがポイントです。視覚的にメリハリがあり、コンテンツ量に圧倒されること無く読み進めていくことができます。

» ウエルガーデン様のセカンドページ

Pick up the second page

多くのオブジェクトとアイコンを様々なレイアウトパターンで展開しています。文章を読むという感覚ではなく絵を見ているような感覚で情報が入り込んでくる設計にしています。

» 湘南鎌倉総合病院看護師採用サイトのセカンドページ

PAGE TOP