画面がPCに比べ小さく、レイアウトできる要素も必然的に少ないスマートフォン向けのWebサイトでは、何がそのサイトにとって重要かを見極めることがサイト制作のカギとなります。特に、アクセス直後の1画面内にどんな情報を見せるかが、サイト全体の印象と利便性に大きく関わってきます。

とりわけ多数の商品を取り扱うECサイトは、1画面に表示しきれない商品を探してもらうためのさまざまな要素や機能を上手に配置する必要があります。利用者が買いたいものに最短でアクセスできるよう、最初の画面でどのような見せ方をするべきなのか、参考になりそうなスマートフォン向けECサイトをまとめてみました。

重要な機能を1画面に収め、リンク先にも工夫を盛り込んだECサイト

スキンケア通販 ナチュラルサイエンス

http://natural-s.jp/



ローテーションバナーで注目商品を押し出しつつ、「キャンペーン・新商品」「初回限定セット」「商品を探す」という3つの重要な機能を果たすボタンも1画面内に収めています。中でも利用者にとって一番優先度の高い「商品を探す」ボタンは目立たせるだけでなく、実はこのボタンはページ最下部へのページ内リンクになっていて、トップページのコンテンツを一通りスクロールして見ていった後でも、すぐに検索ボックスにアクセスできます。

機能をコンパクトに、アクセスしやすくまとめたECサイト

＠ｃｏｓｍｅ（アットコスメ）

http://s.cosme.net/



商品検索ボックスにすぐさま文字入力できるようになっているほか、注目ワードをタグ風に表示させてアピールしたい情報、機能をコンパクトにまとめています。その下には詳細検索、ランキング、情報コンテンツなどにワンタッチでアクセスできるアプリ風のボタンも配置。多数のコスメ商品や商品情報を扱っている分、商品の探しやすさを第一に考えたデザインになっています。

好みの分かれる商品をダイレクトに検索できるECサイト

Skinny Ties

http://skinnyties.com/



ネクタイというカテゴリー的にかなり絞り込まれた商品ではあるものの、個人の好みや既存のファッションとの組み合わせが重要なアイテムであることから、大胆なインターフェースで商品を探せる工夫が設けられています。メニューのタップで「色」「太さ」「生地」「柄」それぞれの選択肢をポップアップ表示してダイレクトに選択できるようになっており、利用者の目的を最短の手順で達成できます。

ライフスタイルの啓蒙にも力を入れるECサイト

ALOOK（アルク）

http://alook.jp/



こちらもメガネというカテゴリー特化型のECサイトで、シンプルに3つのジャンルボタンと検索機能へのリンクボタンを1画面内に表示しています。メガネのあるライフスタイルを提案するというような意図から、単純に商品を列挙するのではなく、周辺情報や用途、利用イメージなども合わせて紹介する形のECサイトとして、必要最小限の検索機能のみ用意。写真を多用した読み物コンテンツに近い見せ方に、購買意欲も高まります。

利用者の目的が明白なECサイト

ドミノ・ピザ

http://dominos.jp/



利用者の目的がおそらくほとんど1つに絞られるような場合、一般的なECサイトとは異なったスタイルを取ることになります。食事をしたいと思ったその時にアクセスするこのWebサイトでは、その希望を可能な限り迅速に達成できるよう、1画面内の要素は極力減らし、「注文」ボタンがすぐに目に飛び込んでくるように配置。利用者の「今すぐに食べたい」思いを1秒でも早くかなえられるようにしていることが分かります。

優れたデザインのサイトを見ていると、小さな画面でも、いろいろな可能性が開けそうです。
今後も、進化するスマホサイトの動向から目が離せません。