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

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

07 クリック結実型

楽しさと印象づけでクリックや応募率を高めるレイアウト


07:クリック結実型インターフェイスの例

【こんなサイト制作に最適】
・求人サイト
・資料請求サイト

【解説】
企業の新卒採用情報ページの例。職場の雰囲気や企業理念を、新卒の学生にわかりやすく訴求し、応募へ結び付けることを目的としてデザインした。

企業のイメージを決定する要因になりうるメインビジュアルは、学生の憧れを掻き立てるビジネスマンの爽やかな姿を大きく取り上げた。

資料請求や応募への窓口は、即座に判別できるように視認性の高い右コラムトップに配置。また採用関連のメニューは、クリック率を上げるためにバナー形態で右側に並べた。

このタイプのレイアウトは、同じく採用活動目的のサイトで最近目立つフルFlashバージョンのインターフェイスに比べ、企業の安定性や信頼感を率直に打ち出すのに適している。


クリック結実型インターフェイスのポイント
【Point】

1. イメージビジュアルを大きく配置
社風が感じられるような社員の爽やかなイメージを、最も目立つ中央コラムに大きく配置。

2. 主要な情報を目立つ位置に
学生が必要とする採用情報などのニュースはイメージの下部に配し、目につきやすくしている。

3. 問い合わせ窓口も目立たせる
視認性の高い右コラムトップへ資料請求やお問い合わせ窓口を設置し、コンバージョン率アップをねらう。

4. コンテンツ見出しをピックアップ
下層コンテンツへの興味を引き立たせるよう、特に重要なコンテンツをピックアップして右コラムへ。



【参考サイト】

新卒採用情報 株式会社ベネッセコーポレーション

新卒採用情報 株式会社ベネッセコーポレーション

画面のほぼ半分のエリアを、活躍中の先輩社員の姿にクローズアップしたビジュアルと力強いキャッチコピーが占める。このように社員の魅力にフォーカスすると、入社後の自分の姿を想像でき企業に親近感が沸くため、エントリーにつながりやすい。
また企業の特徴を訴求する下層コンテンツへ学生を引きつけたい場合は、ここにみられるように、興味を引きやすいタイトルをつけたバナーを配置し、導線を確保する。



採用・インターンシップ : HITACHI
採用・インターンシップ : HITACHI
http://www.hitachi.co.jp/recruit/index.html

日立製作所の採用ページでは、先端技術をイメージさせるビジュアルと、新卒採用・経験者採用を振り分けるボタンを中心に構成されている。エントリーフォームへのアクセスや、リクルート用特別コンテンツ、イベント・セミナー情報など、採用に興味がある学生が今すぐチェックしたい要素を、わかりやすく右コラムに集約。
エントリーへ直行させたい場合、これくらいに構成要素を抑えると効果的だ。
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在