Appleをはじめ、最近多くのウェブサイトが採用しているファーストビューにプロダクトやサービスのイメージを大きく配置するレイアウト。インパクトのある配置でサイトを訪れたユーザーにどのようなプロダクトなのか印象付けることができます。
日本ではまだ一般的ではない呼称ですが「ヒーローエリア（ヒーローイメージ）」と言い、今回ご紹介するECサイトもこのヒーローエリアに上手くプロダクトを配置してサイト全体のブランディングにつなげていました。
| サイト名 | twelvesouth |
| URL | http://www.twelvesouth.com/ |
| QRコード |  |
英語版のウィキベディアには、
Hero image is a term used in web design for a specific type of web banner. A hero image is a large banner image, prominently placed on a web page, generally in the front and center. The hero image is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site’s most important content.
ーHero image – Wikipedia, the free encyclopedia
「ウェブサイト上で使われるバナー画像で、上部中央に大きく配置される。その目的は、サイトの最も重要なコンテンツを訪問者に伝えるためである（要訳）。」とあります。
ファーストビューでインパクトのある画像を大きく表示するヒーローエリア。最近のWebサイトではプロダクトを詳細をビジュアルで伝える手段としてトレンドとなっています。
Twelvesouthも例に漏れず、ヒーローエリアにプロダクトの画像を表示。スマホの縦の画面に合わせてファーストビューで見えるヒーローエリアを丁寧に切り替えています。
動画を使った商品紹介です。単に使い方だけでなく、商品のイメージをスタイリッシュに紹介しているのでApple好きはさらに欲しくなるでしょう。
決済に進み、クレジットカード情報や送付先住所などを入力する画面です。項目ごとにページ遷移する必要がなくモバイルユーザーにとってもストレスなく入力できます。
細かいですが、カード入力のところに「・・・・」や「MM/YYYY」など予め入力する桁数や内容を表示させて多くのも分かりやすくていいですね。
商品のカテゴリ毎（MacやiPadなど）にアイコンが用意されていて、どのカテゴリを選択するのかひと目で分かります。
さらにアイコンを選択するとそのカテゴリにある商品が画面遷移することなく自動でソートされるので、こちらもモバイルユーザーにとって使いやすいと思いました。
ヒーローエリアを活用したレスポンシブWebサイト
他にもヒーローエリアを活用して、プロダクトやサービスの魅力を存分にWebサイト上で伝えているレスポンシブなサイトをご紹介します。海外の事例が多く、日本のサイトではまだまだ少ない印象です。
Square
いいオフィス（LIG）
MEXTURES
Playground
Hammerhead
TATABREW
ビールのしずくが何とも美味しそうなサイトです。
Kin HR Software
いかがでしたでしょうか？ヒーローエリアを活用すれば、文字や小さな写真よりもインパクトのあるサイトを作ることができます。この機会に是非取り入れてみてはいかがでしょうか。
ちなみに弊社サイトもヒーローエリアに動画を入れていますので、是非ごらんください（笑）
