第1部 06 読ませる目的型 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
新規案件のためのWebインターフェイス・デザインガイド

第1部 新規案件のためのWebインターフェイス・デザインガイド

06 読ませる目的型

テキスト情報の読みやすさを追求したデザイン構成


06:読ませる目的型インターフェイスの例

【こんなサイト制作に最適】
・コーポレートサイト

【解説】
ニュース発信を目的とした新聞社のサイトを想定したデザイン。幅広い年齢層のターゲットユーザーが、いかに快適に閲覧できるかについて配慮した構成だ。

上部にグローバルナビゲーションと、ニュースカテゴリのメニューを配置し、検索ボックスはナビゲーションエリアの上部に置いた。こうすることで、インデックス機能を下部のテキスト情報エリアと切り離し、情報が混在するのを防ぐことができる。また多くのテキスト情報を掲載するため、余分なビジュアルの使用を控え、文字の羅列にユーザーが耐えられるよう余白を残したレイアウトとした。

右コラムには、埋もれがちな下層の読み物や関連サイトへのリンクを張り、ユーザー導線を確保している。そのほか、購読申し込み用のバナーを視認性の高い右上エリアに配し、コンバージョン率アップにも配慮した。


読ませる目的型インターフェイスのポイント
【Point】

1. 2. メニュー類を上部に集約
グローバルナビゲーションとカテゴリ別メニューを並べて上部に配置。

3. トップニュースをもっとも目立たせる
最も重要度の高いニュースをトップに掲載する。

3. ヘッドラインは可読性重視
ニュースカテゴリ別のヘッドラインは、文字の読みやすさを第一に考慮し、余裕を持ったレイアウトに。

4. 次点のニュースをその下に配置
主要ニュースやトピックスも、なるべくファーストビュー内に収める。

5. ヘッドラインは可読性重視
ニュースカテゴリ別のヘッドラインは、文字の読みやすさを第一に考慮し、余裕を持ったレイアウトに。

6. 購読バナーを視覚に入れる
目につきやすい位置に購読への申し込みへのバナーを張り、コンバージョン率アップに備える。

7. そのほかの情報類も1カ所にまとめる
ニュース以外の情報については右コラムで紹介する。



【参考サイト】

YOMIURI ONLINE(読売新聞)

YOMIURI ONLINE(読売新聞)
http://www.yomiuri.co.jp/

読売新聞社のニュースサイトでは、主要ニュースがひと目でわかり、カテゴリ別に整理されたヘッドラインによって、ニュースが一覧できる。右コラムは、ニュース以外のコンテンツへのインデックスとなっているが、できる限りワンクリックで目的のページに繋がるよう、細かく項目があげられている。全都道府県のニュースページへのリンクもあり、簡単に目的の地方版へアクセスすることが可能だ。また購読申し込み用のバナーを右上に貼り、コンバージョンも配慮されている。



asahi.com:朝日新聞の速報ニュースサイト
asahi.com:朝日新聞の速報ニュースサイト
http://www.asahi.com/

朝日新聞社のニュースサイトでは、ファーストビューで主要ニュースのヘッドラインが確認でき、リンクによって全記事の一覧へ飛ぶことも可能だ。文字情報をわかりやすく読ませる場合は、このようにカテゴリ別に分けたヘッドラインを順に並べるシンプルなレイアウトで、余白を持たせるとよい。このサイトでは2つのコラムの右側に、Web版のコンテンツや特集を配したことによって、ニュース情報との差別化がうまくはかられている。
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在