ECサイトのサンプル集の落とし穴〜スマホ対応のサイトを参考にしよう

今後のECサイトはスマートフォンでの表示を意識して制作しなければいけません。SEO的な側面だけではなく、スマートフォンユーザーが増加する中で、そのユーザビリティを考慮することの重要性は高まる一方です。スマホ対応を最適化させることは集客とコンバージョンの両方に影響していると考える必要があります。ここではスマホへのデザイン最適化について解説し、サンプルをまとめたサイトを紹介します。

自社でのECサイトもスマホ対応は必須の時代

長くウェブに関わっている人は数年前にGoogleが「レスポンシブではないサイトの評価を著しく下げる」ということがあったことを記憶していることでしょう。その当時、WEBの閲覧はPCからだけでなく、スマートフォンユーザーからのアクセスも爆発的な伸びを見せており、ユーザビリティを検索結果の反映の第一に考えているGoogleはスマホに対応しないサイトの足切りを行いました。

その結果、現在ではPC向けにのみ対応しているサイトはほとんど検索結果に引っ掛からなくなっています。そのため、少しでも検索対策やユーザーへの配慮に意識のあるサイト制作者はスマホとPCサイトの両方を意識して制作することが通常運行となりました。

こうしたスマホとPCとの「レスポンシブデザインであること」はネットショップとして商品を販売するための役割を持つ「ECサイト」も例外ではありません。

【参考】【SEO】あなたのサイトはGoogleが2020年９月と宣言したモバイル対応は十分にできているか

スマホメインで考えることが求められている

今後はレスポンシブであることではなく、さらに一歩進んでスマホをメインに考えたサイトの構築が求められます。もちろんECサイトもです。Googleは2020年の大規模アップデートで、スマホでのユーザビリティをメインにして検索順位を作成するアルゴリズムに切り替えることを発表をしています。

本来は2020年の5月にもその大規模なアルゴリズムアップデートは行われる予定でしたが、新型コロナなどの情報も考慮して、対応できないサイトが増えすぎないように考慮した結果、2020年の後半に日程をずらしています。

このアップデートが行われると、今まではどこかオマケのように考えられていたスマートフォンサイトをメインに据えて考えなければいけなくなります。

しかし、実際のところ、これはGoogleの検索に対するSEO的なことだけでは済まないのが現状といえます。事実として多くのサイトのアクセスがiPhoneやAndroidなどのスマートフォンのブラウザを経由している状況に傾いています。サイトを運営し、Google Analyticsなどで測定している人であればこの事実はすでに把握しているはずです。

もしBtoCでECをやろうとしているのであればスマートフォンの画面での表示をメインに、デザインや動線などを考えなければ行けないという事実は今後も揺るぐことはなさそうです。日本は高齢者を中心にスマホの普及率が他の先進国やアジア諸国より少し低いと言われています。しかし、今後は順次携帯キャリアがフィーチャーフォン、いわゆるガラケーへの対応をやめていく中で、スマホの利用率はさらに高くなっていきます。スマホでの利便性の低いサイトは、検索エンジン以前に淘汰されていくことになるでしょう。

アイディアの元にしたサイトのサンプル集はスマホを意識しているか

サイト制作の落とし穴として、慣れていないとどうしてもPCベースで考えがちになるというものがあります。それはどんなデザインがいいかを吟味している時から発生しています。

例えばECサイトのサンプル集として検索すると出てくるサイトの多くはPCサイトのサンプルを掲示しています。PCサイトは横長で、しかも、クリック要素自体の距離感なども違います。第一に画面自体が、ノートPCであってもスマホよりは大きく、指でスワイプしたり、直接タップして利用するスマホとは決定的に操作感が違います。

そのため、レイアウトや色使いなどデザインの参考として考える場合に直接的に影響を受けたとしても、スマホサイトで十分に反映できるかは疑問が大きくなります。

実際にスマホ向けのECサイトを集めたサンプル集というもので、使えそうなものもまだまだ出てきていないのが現状ですが、参考にするのであれば、やはりスマートフォンでのデザインを考慮しないわけには今後はいきません。

ファーストヴュー、つまり第一印象はウェブデザインでは重要ですが、スマートフォンサイトでは多くの情報を詰め込むことができません。多くのデザインでもあまりTooMachなものは好まれない傾向がありますが、中にはあえてそうした路線をとるサイトもありました。

しかし、スマホサイトでは、実用面で難しさがあります。それがECサイトであれば尚更のことです。利便性の低いECサイトはコンバージョンが低下する傾向にあります。しっかりと販売を増やしたいのであれば、デザインも含めてスマートホンでのUIを考慮したサイトを制作することが肝心です。

【参考】ECサイトのスマホ対応は表示速度も意識しよう

おしゃれだったり、スマートフォンで見やすいというだけでなく、使いやすいサイトを考慮することが売れるECサイト作りには重要です。

オススメスマホデザインサイト3選

それでは最後に実用できそうなスマートフォンサイトのサンプル集を紹介します。ECに限ったものではありませんが、ぜひ活用して参考にしてみてください。海外ではすでにスマホベースで紹介しているサイトが主流になってきています。また視覚的な要素が大きいので、ここでも海外サイトも含めて紹介しています。

極力、サイトを集めただけのようなものはさけ、スマホ対応のレイアウトも意識したサイトが集目られているサンプル集を紹介します。

デザインの検索機能が豊富なSPS　Collection

SPS　Collectionをオススメする点は用途に合わせてどういったデザインのスマートフォンサイトがあるかを調べることが簡単な点です。データベースを扱う場合に、情報を引き出すための簡便さは正義です。

紹介されるサイトのバラエティも豊富ですので、参考に覗いてみるには向いているサンプル紹介サイトといえます。

【参考】SPS Collection

最先端も抑えた海外のスマホサイトデザイン集Lovely Ui

ジャンルごとにトレンドを抑えたサイトを紹介しているのがLovelyUIです。選者の好みの傾向はありますが、海外のサイトらしく、切れ味を感じるサイトが揃っています。

見せ方だけでなく、UIにも拘って選んでいるようで、ECサイトにとっても参考になる面は少なくありません。アンドロイドやiPhoneなどOSごとにデザイン表示を選べるのもGoodです。

【参考】Lovely UI

ユーザーがサイトを評価するAWWWards.com

評価のポイントが明確にあり、ユーザーも評価に加わって投票し、掲示するシステムを取り入れています。そうやって優秀なサイトを取り上げているのがこのAWWWards.comです。サイトのサンプル集としては結構、メジャーな海外のサンプルサイトですが、このサイト自体がすでにスマホをメインにしたデザインになっており、実際の活用を意識したサンプル集といえます。

また、ECサイトを評価するカテゴリも設けられているため、ECサイト制作を考えている場合は一度、目を通しておいても損はないサンプル集です。