Tag: レスポンシブ
WEB制作
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サイトにレスポシンブデザインは必要か?メリットとデメリットをまとめました!
こんにちは、海外では色んな味のモンスターエナジーがあることを知って、アメリカに住む友達に送ってもらうようにお願いしたモンスターエナジー中毒の相馬です。
聞くところによると20種類以上あるそうな。ぜひ飲んでみたい・・・飲み比べしたい・・・。
話変わって、今回はレスポンシブデザインとECサイトのお話です。
ECサイト、特に国内のものに関しては、レスポンシブで構築された例は現状(2016年2月)あまり見かけません。
スマホユーザーの重要度が上がり、全体的にこれだけレスポンシブデザインのWebサイトが増えている中、なぜECサイトではレスポンシブが増えていかないのでしょうか?
今回は、レスポンシブデザインのメリットとデメリットを整理しつつ、「結局ECサイトに向いてるの?向いてないの?」というところを考えてみたいと思います。
ECサイト運営者さんやWebに関わる人間であれば結構気になるこの問題。ちょっとじっくり考えてみましょう。
レスポンシブでのサイト構築のメリット
まずはレスポンシブデザインのメリットを見ていきます。当たり前ですが、ほとんどが運営者や制作者側のメリットになってきます。
更新や修正が楽
これはレスポンシブに変わってまず感じること。
PC向け、スマホ向け、というように、デバイス毎にデザインを分けてサイトを運営すると、修正や更新が結構手間なのがネックです。手間だけならまだいいんですが、統一性や漏れなど、ヒューマンエラーも起きやすい。上の写真のような状況担ってしまうこともしばしば。
それに比べてレスポンシブは、修正するものは一つで済みます。ひとつのページで、全デバイスに対応させることが前提になっているので、当たり前といえば当たり前の話です。
特にECサイトになってくると、キャンペーンページや特集ページなど、新しいページを増やすことが割りと多いはずですよね。
そんな時にレスポンシブで運用していると、作業はずいぶんと楽です。逆に各デバイスごとに用意していたら単純に倍々で作業は増えていきます。想像しただけでも辛いですよね。
SEOに強い
天下のGoogleはレスポンシブデザインを強く推奨しています。
「モバイルファースト」という言葉ももう定着してきました。これだけでもSEOに強いと言ってしまっても構わないと思いますが、キチンとした根拠もあります。
それはURLが単一だということ。
デバイスごとにページを分けていると、その分URLも違ってきます。これって思った以上に厄介なんです。
FacebookやTwitterなどのSNSやサイトからの外部リンクの場合、ECサイト運営側でリダイレクト設定してあげないと、スマホなのにPCサイトにアクセスしてしまう・・・といった現象が起こってしまいます。最悪リンク切れという事態にもなりかねません。今でもたまに見かけますよね。
これらのことは、順位に大いに影響アリです。
「リダイレクトする」という一手間が、不具合やミスを引き起こすことは制作の人間なら感じるはず。
SEO効果だけでなく、このような一手間をゼロにしてくれるのも、レスポンシブの魅力です。
新たなデバイスへの対応力
これは先を見越した対応になります。
デバイスごとにページを用意している場合、新たな画面サイズのデバイスに対応する時が厄介です。
思わぬピクセル比のデバイスが登場した時にその都度ページごとの見直しが必要になります。
その点、レスポンシブはそんなリスクが低くなります。
基本的にサイズに合わせてリキッドでデザインしていくレスポンシブは、レイアウトの破綻も少なくなります。
レスポンシブでのサイト構築のデメリット
続いて、レスポンシブのデメリット。結論から言うと、比較的新しい技術ならではのデメリットが目立ちます。
導入ハードルが高い
これは制作側の課題でもあります。
レスポンシブが登場してから時間が経ちますが、制作側、そして運営側でもレスポンシブが持つ可能性をまだまだ持て余している印象があります。時間と、制作側の努力によって解決しなければいけない課題です。
表示時間が遅くなる
レスポンシブの場合、PC、スマホに関係なく、パーツや画像は同じ物を使用します。
逆にPC、デバイス毎にページを用意する場合、制作段階からそれぞれの画面サイズに合わせたパーツ作りや画像を用意するため、容量を抑えやすくなります。
古いブラウザへの対応に手間がかかる
これはPC環境においてのデメリット。
マイクロソフトが古いバージョンのIEをぞくぞく切り捨てているとはいえ、古いブラウザを使っているユーザーはまだまだいます。いわゆる最近の技術であるレスポンシブは、当然古いブラウザでは対応しきれません。
ECサイトに対応した事例が少ない
これは元も子もない課題ですが、まだまだECサイトにレスポンシブを採用した事例は少ないです。
だからこの記事を書いてるんですけども。
事例が増えてくると、普及速度は加速して、いずれはそれがスタンダードになります。
レスポンシブECサイトの場合は、登場から普及までが確かに少し時間がかかっている印象があります。
んで、結局ECサイトにレスポンシブは向いているの?
はい、レスポンシブのメリットとデメリットを挙げました。
個人的な結論を言うと、レスポンシブはECサイトに向いていると思います。
確かに、まだまだ課題はありますが、上に挙げたデメリットはどれも、これから解決していける問題ばかりです。
技術側の努力によっては、すぐにでも解決できそうなものもあります。
むしろメリット面を見れば、「早くレスポンシブがスタンダードにならんかな」と思っている制作者は多いかもしれませんね。
メリットとして挙げた3つの条件を見ていくと、以下の様なサイトはレスポンシブに向いていると言えそうです。
ページ数が多く、更新頻度も高いサイト→更新や修正が楽
検索エンジンからの流入が大切なサイト→SEOに強い
PC以外にも、スマホ、タブレットといったマルチデバイスへの対応が重要なサイト→新たなデバイスへの対応力
この3つ、ECサイトのことを言ってるみたいじゃないですか?
特に楽天やAmazonのようなモール店舗型ではなく、大元の自社ECサイトにぴったりな気がします。
まとめ:過去にとらわれず、新しい技術を取り入れていくことをまず意識する
まだまだECサイトにレスポンシブが少ない理由としては、リニューアルの難しさがあると思います。売上に直結するECサイトは、機能していれば機能しているほどリニューアルは難しくなります。
また、外部ショッピングカートやモール型のものに関しては、そもそも運営側がレスポンシブにしたくても出来ないという事情もあります。レスポンシブにするには追加料金が必要、というケースもありそうですよね。
とはいっても、Webに関して新しい技術が生まれる時は、その技術がユーザーにとって魅力的であるから、という場合がほとんど。レスポンシブにしても、技術面をクリアできればユーザーにとって魅力であることは間違いありません。
新しい技術は当然ハードルが高いもの。
技術者、運営者側としては費用と工数もかかることが多いですが、ユーザーにとっては新しい技術は便利であったり魅力であったりするものです。ユーザーにとって魅力的なものは、結果的に売上や集客力のアップに繋がっていきます。
レスポンシブに限らず、新しい物はどんどん取り入れていきたいですね。そうすれば、日本のWebのクオリティの発展にも繋がっていくでしょう。
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!