【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【事例】レスポンシブサイトを更に効果的にアピールするファーストビューは?

【事例】レスポンシブサイトを更に効果的にアピールするファーストビューは?

Appleをはじめ、最近多くのウェブサイトが採用しているファーストビューにプロダクトやサービスのイメージを大きく配置するレイアウト。インパクトのある配置でサイトを訪れたユーザーにどのようなプロダクトなのか印象付けることができます。

日本ではまだ一般的ではない呼称ですが「ヒーローエリア(ヒーローイメージ)」と言い、今回ご紹介するECサイトもこのヒーローエリアに上手くプロダクトを配置してサイト全体のブランディングにつなげていました。

サイト名 twelvesouth
URL http://www.twelvesouth.com/
QRコード twelvesouth
ヒーローエリアとは

英語版のウィキベディアには、

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

「ウェブサイト上で使われるバナー画像で、上部中央に大きく配置される。その目的は、サイトの最も重要なコンテンツを訪問者に伝えるためである(要訳)。」とあります。

1,PC⇔スマホでのヒーローエリアの切替

HeroArea

ファーストビューでインパクトのある画像を大きく表示するヒーローエリア。最近のWebサイトではプロダクトを詳細をビジュアルで伝える手段としてトレンドとなっています。

Twelvesouthも例に漏れず、ヒーローエリアにプロダクトの画像を表示。スマホの縦の画面に合わせてファーストビューで見えるヒーローエリアを丁寧に切り替えています。

2,動画での商品紹介

動画を使った商品紹介です。単に使い方だけでなく、商品のイメージをスタイリッシュに紹介しているのでApple好きはさらに欲しくなるでしょう。

3,一画面での決済情報入力

決済画面

決済に進み、クレジットカード情報や送付先住所などを入力する画面です。項目ごとにページ遷移する必要がなくモバイルユーザーにとってもストレスなく入力できます。

決済入力画面

細かいですが、カード入力のところに「・・・・」や「MM/YYYY」など予め入力する桁数や内容を表示させて多くのも分かりやすくていいですね。

4,商品検索も画面遷移なし

商品検索

商品のカテゴリ毎(MacやiPadなど)にアイコンが用意されていて、どのカテゴリを選択するのかひと目で分かります。

さらにアイコンを選択するとそのカテゴリにある商品が画面遷移することなく自動でソートされるので、こちらもモバイルユーザーにとって使いやすいと思いました。

ヒーローエリアを活用したレスポンシブWebサイト

他にもヒーローエリアを活用して、プロダクトやサービスの魅力を存分にWebサイト上で伝えているレスポンシブなサイトをご紹介します。海外の事例が多く、日本のサイトではまだまだ少ない印象です。

Square

Square

 

いいオフィス(LIG)

いいオフィス

 

MEXTURES

MEXTURES

 

Playground

Playground

 

Hammerhead

Hammerhead

 

TATABREW

TATABREW

ビールのしずくが何とも美味しそうなサイトです。

 

Kin HR Software

Kin HR Software

 

終わりに

いかがでしたでしょうか?ヒーローエリアを活用すれば、文字や小さな写真よりもインパクトのあるサイトを作ることができます。この機会に是非取り入れてみてはいかがでしょうか。

ちなみに弊社サイトもヒーローエリアに動画を入れていますので、是非ごらんください(笑)

株式会社ロックウェーブ

レスポンシブECサイトの問合せはこちら

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+