Tag: スマホ

ECサイトのスマホデザインの参考にしたい!スマホデザインまとめサイト5選!

こんにちは、寝る前には布団の中でスマホでネットサーフィンが日課の相馬です。 仰向けでスマホいじってると、たまに顔に直撃落下して目が覚めちゃいますよね。 ここ2,3年でスマホユーザーが爆発的に増えると同時に、サイトのスマホ最適化の重要度も高まってきました。それはECサイトも例に漏れず、今後もスマホでネットショッピングをするユーザーは増えるばかりでしょう。 ECサイトの運営者の立場になると、リニューアルの難しいECサイトのスマホ最適化は頭を悩ますところだと思います。ECサイトはUIも大切。できるだけたくさんのECサイトのスマホデザインを見て、参考にしたいところです。 そこで今回は、ECサイトのスマホ最適化に役立ちそうな、スマホサイトのデザインを集めたサイトをピックアップ。 スマホサイトはPCのWebデザインとは性質が異なります。 ECサイトのスマホ化にお悩みの運営者さんは是非ブックマークして、参考にしてください。 ECサイトのスマホデザインの参考になるまとめサイト5選 AGT smartphone design gallery AGT smartphone design gallery 国内だけでなく、海外のイケてるスマホデザインも集まっているサイト。 サムネイルをマウスオーバーするとシュルシュル〜っとアニメーションでスクロールされて全体のデザインが見れます。 ショッピングタグでECサイトに絞り込めるのもウレシイです。 iPhoneデザインボックス iPhoneデザインボックス こちらも有名なスマホデザインまとめサイト。 大きな特徴は、各サイト詳細ページでスマホデザインとPCデザインのサムネイルを並べて見ることができる点。 これ地味に助かります。 こちらも「EC・ショッピングサイト」のカテゴリがあります。 iconDrop iconDrop こちらはスマホサイト全体のデザインでは無く、スマホのホーム画面にブックマークした時に表示される、Webクリップアイコンのまとめ。 Webクリップアイコンの有る無しでデザインのクオリティは変わってきます。スマホサイトを用意した時はぜひとも作成しましょう。 アプリのアイコンもありますが、いずれにしろ参考になるものばかりです。 thinkthing thinkthing こちらはユーザーが登録するタイプの優れたスマホサイトデザインのまとめサイト。 ユーザーが集めるだけ会って、国内外問わずデザインの数も豊富です。 ショッピングサイトのカテゴリも、すでに100サイト以上になっています。 Responsive Web Design JP Responsive Web Design JP こちらはスマホサイトのデザインに絞ったわけではなく、レスポンシブデザインだけを集めたまとめサイト。 スマホだけではない、デバイスの多様化の今後を考えると、運営しているサイトをレスポンシブにしておくことは重要かもしれません。 まとめ:スマホではより分かりやすく、使いやすく。 いかがでしょうか?この5つのサイトだけでも、十分すぎるほどのサンプルがあります。 スマホサイトとPCサイトではユーザーの環境や閲覧時間も異なるため、元のPCデザインのテイストを保ちつつ、ボタンのサイズや写真の見え方など、少し性質が変わってきます。 PCサイトと見比べながらスマホのデザインを見ていくと、沢山の新しい発見があります。 引き出しは沢山あればあるほど良いアイデアが生まれやすくなります。 ぜひぜひ暇な時にでも、これらのサイトをじっくり見てみることをオススメします。 ではでは。

ECサイトもスマホ時代!大手ECサイトから学ぶスマホページ作成のポイントとは?

こんにちは、自宅で仕事しているので、外出ゼロの日がほとんどの不健康ライフ中の相馬です。 ECサイトの運営者さんたちは、スマホのアクセスや売上をチェックしていますか? ECサイト運営におけるスマホ対策の重要性は、どんどん増していくばかりです。若い世代はPCではなくスマホでサイトを見ています。この流れはどんどん加速していくことは間違いないでしょう。 となれば、運営しているECサイトを少しでもスマホに最適化していく必要があります。スマホサイト作成のポイントを分かっているのといないのでは、その後の売上やコンバージョンに大きな差が出てきます。 スマホECサイトには、ユーザーの使いやすさに配慮したセオリーや、デザインのポイントというものがあります。 今回は、大手のECサイトから、スマホ対応のためのポイントを探っていきましょう。 大手ECサイトから学ぶ、スマホECサイトのポイント ファーストビューでユーザーが求めていると思われるものを提示する 左が楽天、右がAmazonのスマホサイト。 どちらも大手の中の大手ECサイトですが、スマホサイトで表示して、まず目に飛び込んでくる検索窓。 ユーザーが求める商品ページまで出来る限り早くたどり着かせることが、ECサイトでは重要です。 そこで、検索フォームの重要さが増します。 検索アイコンをタップしてからフォームを表示させるパターンも有りますが、これらの2つの大手サイトは、すでにフォームを配置して、いちいちスクロールをせずとも、ファーストビューから商品を検索できるようになっています。 右上には会員ログインアイコンは共通して設置され、楽天ではお得なキャンペーン情報がファーストビューでしっかりと視認できます。Amazonの方はより無駄のないすっきりとしたデザインで、使いやすさを重視していますね。 ユーザーに使って欲しいものやアピールしたい情報、そしてユーザーがまず必要とするであろうアクションに必要な要素を、ファーストビューでまとめて表示させています。 ユーザーにオトクな情報を一番上に配置 商品のシンプルさで人気の無印良品。スマホのデザインもやはり無駄のない作りです。 一番上に、期間限定の送料無料キャンペーンを知らせる、シンプルなイラストでデザインされたバナーが配置されています。 ファーストビューでまずはお得な情報をユーザーに知らせて、商品購入へと繋げる流れを作っています。 他にも、トップページでは特集コンテンツを写真とともに整然と並べ、無印良品らしいコンセプトの商品の提案で、訪れたファンを楽しませる工夫を忘れません。無印良品のファンが好む、シンプルなレイアウトですね。 ターゲットに合わせた絞り込みを アパレル系ECサイトの最大手であるZOZOTOWNは、トップページ最上位に「MEN」「WOMEN」「KIDS」と、性別によって絞り込めるように配慮されています。確かに服を買うときに真っ先に絞り込む条件ですね。 このように、商品のターゲットによって絞り込みの種類を選別することは、ユーザビリティにおいて重要です。 設計でちょっとした工夫をすることによって、商品の検索のしやすさがグッとアップします。 ボタンの表記は動詞で 左からZOZOTOWN、Amazon、楽天のそれぞれの商品詳細ページ。 注目はカートに入れるボタンですが、表記は全て丁寧な動詞になっています。 通常のサイトであれば「商品詳細」「注文の確定」など、簡単な名詞表記のパターンも有りますが、ECサイト、特にカートに入れるボタンでは「カートに"入れる"」「購入"する"」というように、回りくどいぐらいの丁寧な動詞表記で、というのがセオリーになっています。 「商品の詳細」であれば「詳しく見る」、「注文の確定」であれば「注文する」といった具合です。 ユーザーにとってほしい行動で表記するイメージです。 まとめ:大手ECサイトのスマホサイトでの共通ポイントは・・・ 大手といえども、それぞれのコンセプトやターゲットには少なからず違いがあり、全てのサイトがこれらのポイントを抑えているとは言えません。 ただし、一つだけ言えることは、検索窓はファーストビューに置いてあるということです。この記事の執筆のために調べた大手のECスマホサイトの全てに、開いた瞬間に分かる位置に検索窓が設置してありました。 スマホユーザーには、スクロールよりもページの移動を嫌う傾向にあります。そのため、よりダイレクトに商品を探し当てられるよう、キーワードで検索するというアクションが当たり前になっているのかもしれません。 PCサイトを疎かにするわけにはいけません。ただ、スマホサイトに関しては、ECサイトにかぎらず、まだまだユーザビリティに研究の余地が残されていそうです。 ユーザーがより使いやすいサイトを目指すことが、ECサイトでの売上につながっていくことを、忘れてはいけないですね。

Want to stay up to date with the latest news?

We would love to hear from you! Please fill in your details and we will stay in touch. It's that simple!