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

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

01 ベーシック型

多くの情報から目立たせたい要素を引き立たせるベーシックなレイアウト


01:ベーシック型

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

【解説】
サンプルはさまざまな事業やサービスを展開する企業のホームページを想定して作成したもの。企業に求められる堅実性・信頼性といった「イメージ」を表現するとともに、企業概要などの「情報」をわかりやすく伝えることを考慮している。

ここで用いたのは、イメージ画像とテキスト情報をほどよい分量で掲載することができるレイアウトだ。画面上部にやや広くイメージ画像エリアを取り、企業にふさわしいビジュアルを掲載することで企業イメージを訴求。ニュースやセミナー情報など広報的要素を目が届きやすい画像直下に配した。

企業サイトの場合、商品やサービスごとに別サイトを設けていることも多い。サンプルのようにそれらのサイトへの導線となるメニューを設け、ユーザビリティに配慮することも必要だ。


ベーシック型のポイント
【Point】

1. 企業イメージに合ったビジュアルを使用
ユーザーのファーストインプレッションを決めるビジュアルは、企業イメージやメッセージに即したものを選択。

2. 新着情報は目に付きやすい位置に
ニュースやプレスリリース、セミナー情報、IR情報など、更新頻度や重要度の高い要素をファーストビューに配置。

3. 情報をカテゴライズ
ヘッドラインに事業別のアイコンをつけ、情報をカテゴライズしている。

4. 詳細ページへのリンクバナーを設置
商品やサービス内容の詳細ページへの導線となるバナーを設置。



【参考サイト】

キヤノン:キヤノンホームページ

キヤノン:キヤノンホームページ

http://canon.jp/

精密機器製品を多数展開しているキヤノン株式会社のコーポレートサイト。
企業サイトの場合は、この例に見られるように、特に新着情報に広いスペースを割き、現在の企業動向をわかりやすく示す必要がある。またトップに配されたグローバルナビゲーションの他に、ビジュアル右下スペースで下層への導線を補強すると、訴求したい要素へのアクセス率を高める効果が生まれる。


Sony Japan|ソニーグループ ポータルサイト
Sony Japan|ソニーグループ ポータルサイト
http://www.sony.co.jp/

ソニー株式会社のコーポレートサイト。この形の変化型で、ビジュアルエリアがFlashで作成されている。イメージがランダムに表示されるスタイルだが、これはさまざまな製品やサービスを優劣つけずに訴求したい場合に有効な方法だ。Flash内のナビゲーション機能により、関連サイトへの移動もスムーズに行える。「プレスリリース」、「IR情報」、「重要なお知らせ」、「ソニーグループ情報」など新着情報もカテゴライズされていることによって閲覧しやすい。さらに強調したい企業情報については、バナーが用意されている。
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在