第1部 新規案件のためのWebインターフェイス・デザインガイド
08 ユーザー登録促進型
下層優良コンテンツまで関心を抱かせるインターフェイス構成
【こんなサイト制作に最適】
・情報サイト
・コミュニティサイト
【解説】
グルメやビューティ情報など、フリーペーパーと連動した情報サイトの例。ここではターゲット層を20～30歳代女性と想定している。
数ある情報に優劣をつけず一覧させるため、カテゴリ別メニューを左右コラムに並べて掲載。中央トップを旬の情報エリアとし、ユーザーの興味を喚起させるフックとした。
連動するフリーペーパーがあると設定し、相乗効果を考慮して紙面ダイジェストを下部に掲載。下層コンテンツへの導線を作る。またメルマガ登録への導線も中央コラムに配置し、より多くのメールアドレスを回収することを狙いとしている。
このタイプの構成は、会員登録したユーザーからの情報提供も見込んだユーザー参加型のWebサイトの構築に有効だ。
・情報サイト
・コミュニティサイト
【解説】
グルメやビューティ情報など、フリーペーパーと連動した情報サイトの例。ここではターゲット層を20～30歳代女性と想定している。
数ある情報に優劣をつけず一覧させるため、カテゴリ別メニューを左右コラムに並べて掲載。中央トップを旬の情報エリアとし、ユーザーの興味を喚起させるフックとした。
連動するフリーペーパーがあると設定し、相乗効果を考慮して紙面ダイジェストを下部に掲載。下層コンテンツへの導線を作る。またメルマガ登録への導線も中央コラムに配置し、より多くのメールアドレスを回収することを狙いとしている。
このタイプの構成は、会員登録したユーザーからの情報提供も見込んだユーザー参加型のWebサイトの構築に有効だ。
【Point】
1. 登録機能をヘッダに設置
ログインボックスやユーザー登録への導線を他要素から区別するため、ヘッダ部分へ配置している。
2. メニュー全表示
カテゴリ別メニューを左右コラムに振り分けることによって、すべてのメニューをファーストビュー内に。
3. 目立たせたい要素をセンターに
興味を喚起する要素を中央コラムトップに配し目立たせる。
4. イメージによるにぎやかな演出
イメージを中心に配置してサイトのにぎわいを強調した。
5. 連動情報は下部に配置
連動しているフリーペーパーの紙面ダイジェストは下部に置く。
【参考サイト】
![みんなのHappyコミュニティ！ freeml [フリー・エムエル]](/attach/images/2006december/feature/interfacedesign/08-01freeml.gif)
みんなのHappyコミュニティ！ freeml [フリー・エムエル]
SNSサイト「freeml」では、人気ランキングや新着コミュニティなど、会員・非会員ともに興味をひかれるコンテンツが、閲覧しやすく3コラムに振り分けられ掲載されている。たくさんのコンテンツを一覧できる構成により、会員にとっては新しい興味を発見することが可能。日記の更新やコメントの投稿などが促され、サイトの活性化にもつながる。また非会員にもサイトの盛り上がりを感じさせることで、コミュニティ参加の動機となりうるだろう。
無料のブログを簡単作成・携帯対応! JUGEM(ジュゲム)
http://jugem.jp/
左右コラムのスペースを狭くし、中央コラムによりスペースを割いたレイアウトを用いた無料ブログポータルサイトJUGEM。主な情報が中央に集約され、サブ的な要素が左右に配されていることによって、注目すべき要素がわかりやすく配置されている。同時にサイトの管理者側からの訴求点もユーザーの目に届きやすい。
