ECサイトに必須 “レスポンシブ対応” のWebデザインとは？
あなたは、ECサイトでものを購入する際、スマホを利用する派ですか？それとも、パソコンを利用する派ですか？はたまた、タブレット派ですか？？
言うまでもなく、今やオンラインショッピングはスマホを利用するのが当たり前、という時代になっています。そしてこれは、日本・海外に関わらず。つまり、国内EC・越境EC、いずれにせよスマホ〜タブレット〜パソコン全てのデバイスに対応するECサイトを作ることが必要不可欠となっています。逆に、スマホで見づらいECサイトは、売上に大きく影響してしまいます。
今回の記事では、レスポンシブデザインの基本的な部分について見ていきたいと思います！
１．レスポンシブデザインとは？
誰もがどんなデバイスから見ても使いやすいサイトにするためには、「パソコンから利用している人にはこのデザイン」、「スマホから見ている人にはこのデザイン」という様に、見るデバイスに最適化されたデザインが表示されるサイト作りをする必要があります。基本的に、横長で画面の大きいパソコンと縦長で画面の小さいスマホでは見やすいデザインの基準は大きく異なるためです。
そして、このように同じ一つのサイトを見ていて、それが見ているデバイスによって見やすいように最適化されるようなWebデザインのことを、レスポンシプデザインといいます。そして、このレスポンシブ対応がうまくされていれば、モバイルフレンドリーつまり、モバイル画面でもストレスなく見られるサイトとなるのです！
「デザインと構築は、スクリーンサイズやプラットフォーム、順応性に基づいてユーザーの行動や環境に適応するべきである」ということを提案するのが、レスポンシブデザインの考え方である。
（引用：Smashing Magazine | Responsive Web Design - What It Is And How To Use It）
例えば、GO RIDE Newsのトップページ。PCで見るとことのように表示されますが、
スマホで見るとこうなります。
どちらもページのURLは、https://news.goriderep.com/ja/で管理されています。これがレスポンシブ対応というわけですね。
また、最近GO RIDEで開発したオリジナルのShopifyアプリ、その名も「Search&co」もレスポンシブ対応となっております！（近日リリース予定です！）
２．レスポンシブ対応のメリット
では、レスポンシブ対応をすることによって何がよくなるのでしょうか？
画面が小さいスマホの画面でも見やすい＆使いやすいサイトになる
誰しも、快適にスイスイ使えるサイトには留まりたい、そう思いますよね？何がどこにあるのか分かりづらいサイトは、そのままユーザーの離脱＝売上の損失につながってしまいます。
レスポンシブ対応していない場合：PCで見る画面がそのままサイズが小さくなった状態。見えない。。使いづらい。。。
Googleがレスポンシブ対応のサイトを優先的に表示している
Googleはユーザーエクスペリエンス向上のため、レスポンシブデザインを推奨しており、レスポンシブ対応がされているサイトは検索順位において有利になることができます。SEOの観点からも、レスポンシブデザインのほうがベターとされています。
レスポンシブ対応していない場合：サイトの内容はしっかりしているのに、検索で上位に表示されない。。。
URLが１つで済む
レスポンシブ対応しているサイトの場合、PCで見る場合もスマホで見る場合も同じ一つのURLを使用するので、ユーザーが困惑してしまうこともなくなります。SNSやメール上でストアのリンクを添付するときにも、便利ですよね！
レスポンシブ対応していない場合：PC画面用のサイトデザインのURLと、スマホ画面用のURL（＋タブレット用）というように、別々のURLを使う事となり、ユーザーにとって導線がわかりづらくなってしまう。。。
サイト作成側にとっての管理が楽
URLもHTML/CSSも、ソースが一箇所となるので、アップデートやメンテナンスが楽になるというメリットもあります。
レスポンシブ対応していない場合：サイト内の１箇所アップデートしようとしたとき、スマホ用コード、PCページ用コードをそれぞれ修正する必要がある
レスポンシブデザインのサイトにはメリットがこんなにも！でも、今でもまれにこのような表示を見ることはないですか・・・？↓
３．レスポンシブデザインの仕組み
ここまでは、レスポンシブデザインとはなんぞや？という大まかな部分についてお話して来ました。ここからは、もっと深入りしてレスポンシブデザインについて見ていきましょう！
レスポンシブデザインの構成
レスポンシブデザインでよく見られるPC・スマホのデザイン構成の違いについていくつかご紹介したいと思います。
メニューが上部に表示 / ハンバーガーメニュー
PCの場合、メニューバーが画面上部等に常に表示されていることが多いです。一方で、スマホの画面では、メニューが３本線のアイコンの部分に収納されていて、そこをタップするとメニューの内容が開く、というパターンが多く見られます。ちなみに、メニューの３本線アイコンはハンバーガーメニューと呼ばれます！
カラムの数
PCは画面サイズも大きく、更に横長なため、それぞれの要素を横に並べると自然で見やすいですよね。例えば、画像の横にテキストがあったり、画像が３枚横並びに置いてあったりすることはよくありますね。もしレスポンシブ対応していないページでこれを見た場合、一つのカラムが極細になってしまったり、要素が画面内に収まらなくなってしまいます…。そのため、縦長のスマホ用スクリーンではあまり要素を横並びに配置せず、全て１行で要素が上下に置かれる様にCSSを書くようにします。
余白の調整
画面の大きいPC画面の場合、文字が画面いっぱいに書いてあると圧迫感が強すぎてしまうため、ページ内に余白が多くとってあることが多いです。しかし、スマホの小さい画面では余白をとりすぎてしまうと逆に見づらくなってしまいます。そのため、PCでは余白を設けるが、スマホではその余白を非表示にする、ということもよくあります。
レスポンシブデザインを作成するときのコード
レスポンシブデザインがどのようなものかわかったところで、これを生み出すHTML/CSSコードについても見ていきましょう。大きく分けて、２つのステップになります。
①HTMLにViewportタグを追加: HTMLファイルのヘッダー部分に以下のコードを書きましょう。（HTMLファイルで作成されたWebサイトの場合）
＜meta name=”viewport” content=”width=device-width,initial-scale=1.0″＞
②CSSにメディアクエリを使用して条件を指定: CSSで、「PCの大きさの画面のときはこう！」「タブレットよりも小さい画面のときはこう！」という様に、条件を指定します。
これがメディアクエリ！
@media screen and (max-width: 480px) {
}
この｛ ｝の中に入れた指定条件は、スマホ画面のときのみに反映されるので、
@media screen and (max-width: 480px) {
img {
width: 100% ;
}
}
このように入れた場合、スマホ画面のときのみ画像が幅100％で表示される様になる、ということになります。
４．Webサイトがレスポンシブ対応しているかを知るには？
自分のサイト、もしくは他のサイトがレスポンシブ対応を一体しているのか。調べてみましょう。方法は主に２つ！
PCを開く＆スマホを開く！
シンプルで一番わかりやすい方法がこちら。スマホとPCを両方開いてみて、画面を見比べてみましょう！
PC上から、Google Chromeで検証ツールを使って見てみる
Google Chromeの【検証】は使ってみたことあるでしょうか？これを使えば、PC上でタブレット・スマホで見たときにどんな画面になるのか素早く確認ができます。やり方は至って簡単。まず、検証したいページを開き、その上で右クリックをします。
そのときに出てくる項目の下から2番目の【検証（Inspect）】を選択してください。そうするとこのような画面になります。
ここで、右のコードが書かれたカラム内の左上部を見ると、こんなマークがあるので、そこをクリック！
そうすると、この様にPC上でスマホ画面のイメージが確認出来ます！
検証機能を使ったことのない方は、ぜひ一度ご試しあれ！
５．まとめ
レスポンシブ対応に関して理解が深まりましたでしょうか？メリットについても色々とご紹介はましたが、2020年、もはやECサイトのレスポンシブ対応は”必須”です。レスポンシブデザインになっていなければ、それは売上の損失に直結してしまいます・・。
そして、レスポンシブデザインのサイトは、もちろんイチからコードをゴリゴリ書いて作っていくことも可能！ですが、WordpressやShopifyのようなCMSを利用することでもっと簡単に、そしてスピーディーにレスポンシブ対応サイトを作成することが出来ます。
ECサイトのレスポンシブ対応でお困りの際は、Shopifyを選択することをおすすめします！Shopify構築の制作依頼なら、GO RIDEまで！
OTHER ARTICLES
View all
