モバイルファーストという言葉をよく耳にするようになってきた昨今、Web業界ではスマホユーザーの目線に立った戦略が必要不可欠な時代に突入しています。
あのGoogleが「モバイルファーストインデックス」を正式にスタートさせていることからも、この流れは確固たるものになりました。
そこで今回は、ECサイトのスマホデザインについて特集します。スマホデザインが重要視されていく一方である現状を踏まえ、ECサイトのスマホデザインにおいて気をつけるべきポイントやデザインの参考になるサイトのご紹介など、充実した内容をお届けしますのでご期待ください！
この記事を読んだらわかること
・レスポンシブデザインをスマホデザインに取り入れない方がいい？
・ECサイトのスマホデザインの参考になるサイト10選
ECサイトは、一から構築すると莫大な費用がかかってしまいますが、弊社はWordPressを使用し、最小限に費用を抑えたECサイトの構築が得意です。ECサイトの制作で費用が気になるという方は、お気軽にご相談ください！
ECサイトのスマホデザインで気をつける8つのポイント
スマホ用のECサイトデザインを手がける際には、絶対に気をつけるべき点があります。ここではデザイン上重要な項目を以下の8つに絞って解説していきます。
・ファーストビューはなるべく1つの情報にする
・優先順位の高い情報を上部に掲載
・カテゴリはわかりやすく
・商品の情報は見やすく
・細かい動作はいらない
・項目が多いものはコンパクトにする
・電話機能を活用する
・親指での操作を意識する
それではそれぞれの項目について詳しく見ていきましょう！
ファーストビューはなるべく1つの情報にする
ファーストビューはいわゆる”つかみ”の部分なのでユーザーに「他のコンテンツやページも読みたい」と思わせるような画面作りを心がけます。
そのためには多くの情報を詰め込まない方がベター。ファーストビューで見せる情報はできるだけ1つに留め、もっと見ようとして思わずスクロールしてしまう程度の情報量を目安としましょう。
ECサイトはウィンドウショッピング感覚で流し読みされることが多いので、ファーストビューで離脱されないよう、的確に画像や動画を配置することも重要です。
優先順位の高い情報を上部に掲載
PCと異なりスマホの1画面で提供できる情報には限界があります。
ですので、掲載したい情報に優先順位をつけ、優先度の高い情報からページ上部に掲載しましょう。
ページの下部に行くほど情報は読まれなくなるという考えが基本原理ですので、ニーズの高い商品やサイト運営側が推したい商品などはページ上部に配置するよう意識してください。
カテゴリはわかりやすく
PC版のECサイトでは、カテゴリがヘッダー部分に表示されわかりやすいメニュー状になっているのが一般的ですが、スマホ版はかなりサイズダウンするためヘッダーにずらりと並べるとごちゃごちゃして見にくくなってしまいます。サイト内を効率的に回遊していただくためには、カテゴリの見やすさはきわめて重要。
カテゴリが多い場合は、ハンバーガーメニューでまとめるなどして表示し、ユーザーにとってわかりやすくなるよう工夫しましょう。
商品の情報は見やすく
ECサイトの主役は商品です。商品の写真が小さすぎると、ユーザーは見にくいサイト＝買物しにくいサイトであるという印象を強めてしまいます。商品画像を見やすく並べるには4列程度が限界です。
それ以上になると写真が小さすぎて、お目当ての商品情報を見つけられないという事態になりかねません。また、商品画像を多数掲載したい場合は、スライドを利用して、商品画像の列数はなるべく少なくして、より商品が見やすくなるようデザインしましょう。
細かい動作はいらない
スマホは画面は小さく誤作動が多いため、細かい動作をさせてしまうとユーザーが扱いにくく感じてしまいます。
欲しい情報を得るまでに誤作動のリスクが高いと「このサイトは使えない」と判断されてしまいかねないので、なるべく動作はシンプルなものを採用しましょう。
例えば、Webサイトのようにページ下部にページを数字表示して別のページに遷移させるような仕組みは避ける必要があります。実際にGoogleの検索もスマホ版ではページ遷移をしないで閲覧させるようなデザインになっています。
項目が多いものはコンパクトにする
Q＆Aのような項目数が多いコンテンツに関しては、なるべくコンパクトに収まるよう、シンプルなデザインにこだわることが大切です。
Webの感覚でデザインしてしまうとごちゃごちゃと細かくなってしまい、とても読みたいとは思えなくなってしまいます。クリックすることで内容の開閉ができる「アコーディオン」機能などを使うとすっきりとまとまって便利です。
電話機能を活用する
スマホであることの特長を活かすという意味で大きいのが電話本来の通話機能です。
ECサイトへの商品に関するお問い合わせなど、メールやチャットをご利用いただくのも良いですが、ポンと1タップで通話できるよう設定すれば、コンバージョン率アップも期待できます。ユーザーの利便性や安心感も自ずと高まるのでおすすめです。
親指での操作を意識する
スマホユーザーの50%以上が、画面操作を片手でするという報告があります。
この事実を踏まえれば、タップやスクロールなどの操作が手のひらでスマホを支えて親指で行われることを前提としたデザインが重要です。ボタン配置などは親指で押しやすい位置や大きさを検討するようにしましょう。
レスポンシブデザインをスマホデザインに取り入れない方がいい？
レスポンシブデザインとは、1つのHTLMでWebサイトを構築すればさまざまなデバイスに対しサイズダウンなどを自動で行ってくれる互換性のあるデザインのことを言います。1つのURLでサイト管理が可能なので業務にとって非常に効率的で最近多く採用されている手法です。
しかし、特にECサイトについては、レスポンシブデザインはあまりお勧めできません。レスポンシブデザインは、スマホ対応する際の見やすさを考慮したデザインが求められるため、複雑なものはできません。そのため、会社や商材の個性・オリジナリティを表現しづらくなります。
ブランディングを意識したオリジナリティのあるデザインのECサイトを制作したい場合は、レスポンシブデザインではなく、スマホ専用のデザインを採用した方がいいでしょう。
参考：ECサイトをレスポンシブデザインで制作するのはNG!?その理由を解説
PageSpeed Insightsと呼ばれるツールを使用すれば、表示速度がわかるので便利です。スコアは80以上を目指しましょう。
ZERO式ECサイト制作はこちら
ECサイトのスマホデザインの参考になるサイト10選
ECサイトのスマホデザインで重要となるポイントや、レスポンシブではなくスマホ専用デザインを採用すべきであるということについて解説してきましたが、ここでは実際にユーザー目線を追求し、なおかつ自社のブランドイメージや個性を活かしてスマホデザインがなされたECサイト例をご紹介します。
北欧、暮らしの道具店
シンプルでおしゃれな北欧雑貨イメージをしっかりとスマホ画面にも反映させたデザインとなっています。Web版デザインではメニュー・カテゴリはサイドバーでたっぷりと用意している一方、スマホデザインではヘッダにシンプルにまとめ、カテゴリはハンバーガーメニューで隠して整然とさせているのが特徴的。新着情報をトップに置き、テッパンのレイアウトでユーザーの心をつかんでいます。
ユニクロ
Web版デザインの印象をそのままに、スマホ版では商品紹介のコンテンを2列配置にして見やすさに配慮がなされています。スマホ画面ならではの制約を逆手に取り、画像使用を抑えてボタンにわかりやすいテキストを載せることでユーザーが迷わないように工夫されているのも特徴。優先させる情報はWebもスマホも当然足並みを揃えています。
ZOZOTOWN
メインコンテンツとなる商品紹介を横4列に写真を並べて示しているWeb版に対し、スマホ版では縦にシンプルな構造でコンテンツを配しています。新着情報をトップに持ってきてその下にランキング→トレンド→カテゴリ（アイテム別）というふうにわかりやすく表示したユーザビリティ最優先のデザインが印象的です。Web版デザインとイメージカラーを合わせ統一感を出しています。
無印良品
トップ画面に推し商品の大きな画像をレイアウトし、次にわかりやすい画像つきバナーで特集コンテンツを一覧に、さらにその下にセールや期間限定商品のコンテンツを配置しているのがWeb版デザイン。これに対し、スマホはスクロールすると単一の画像表示があり、スライダーで特集記事を流し見できる構造となっています。内容には差をつけず、見せ方で違いを出している好例です。
adidas
季節もの商品の大きな画像が目立っているファーストビューから、ファッション性の高い写真を多く並べてブランドイメージを前面に出しているWeb版に対し、スマホデザインは注目トピックの動画をスライダーでまとめてトップで表示しているのが印象的です。商品紹介もスマホ版では横2列ずつできわめて見やすくシンプルにレイアウトされています。
Jins
Web版のデザインを十分に活かしたスマホデザインとなっているECサイトです。Webの方ではファーストビュー直下にバナーで並んでいる注目コンテンツを、スマホデザインでは全てトップ画像にスライダーで収めてコンパクトにまとめてあるのが特徴です。ランキングも横並びで表示してあるWebデザインとは反対に縦に1アイテムずつ並べてユーザーの操作性を高めています。
ジャムホームメイド
3カラムで一度に多くの情報を見せることに成功しているWeb版ECサイトに対して、期間限定商品や人気商品など優先順位に沿って1アイテムずつを縦に並べてしっかり商品情報を得てもらえるように配置してあるのがスマホ版です。スマホ版ではカテゴリ名表示もよりわかりやすく、Web版がブランドイメージを重視したアーティスティックなデザインになっているのに対し、より実用的にデザインされていると言えます。
UNITED ARROWS
性別も年齢層も幅広いユーザー層を持つファッションセレクトショップのECサイト。取り扱うアイテムもトピックも非常に豊富なため、WebECサイトのような列数の多いレイアウトではスマホ画面は見にくくなってしまいます。この問題を解消するために、内容をコンパクトに収納できるアコーディオン機能などを使って、見た目はすっきりさせつつ情報量もキープしている好例です。
Zoff
イメージ画像をメインにしたトップ画面が印象的なWebデザインに比べ、スマホデザインではショップのキャラクター画像をトップに配置し、その後もカテゴリごとに情報をアコーディオンで格納することできわめて操作性を高めているサイトです。にぎやかで色鮮やかなWeb版とは逆に、色もデザイン性も抑え、シンプルで検索しやすいデザインを採用して奏功しています。
ビームス
おもちゃ箱をひっくり返したように豊富な情報が目に飛び込んでくるWeb版のサイトデザインとは一線を画し、片手親指でも徹底してサイト内を回遊しやすく設計されているのが伝わってくるスマホデザインです。細かい動作を一切させないよう配慮が行き届いており、Web版のレスポンシブデザインがスマホデザインでは対応しきれないことを実証しているような典型例と言えます。
まとめ：
今回はECサイトでスマホデザインを考える際のヒントになるポイントや参考例などをご紹介してきました。ECサイトは情報量もページ数・コンテンツも多いホームページなので、レスポンシブデザインで対応するには無理があると言わざるを得ません。
ユーザビリティを考えれば、スマホならではの動線を重視したデザインを採用するのがベストです。スマホデザインには専門家のノウハウが必要な場合もありますが、今やスマホでの集客はEC業界で避けて通れない課題なので、自社のコンセプトを理解してくれる業者を慎重に選んで、魅力溢れるスマホデザインを成功させてくださいね！
この記事のおさらいポイント
・ECサイトのスマホデザインはシンプルで操作性を重視するべき
・ECサイトのスマホデザインでは親指で操作することを前提にデザインされなければならない
・ECサイトにはレスポンシブデザインはおすすめできない
ECサイトは、一から構築すると莫大な費用がかかってしまいますが、弊社はWordPressを使用し、最小限に費用を抑えたECサイトの構築が得意です。ECサイトの制作で費用が気になるという方は、お気軽にご相談ください！
