Googleデジタルマーケティング＆Eコマース：Eコマースストアのためのレスポンシブvsモバイルファースト

# はじめに

”Googleデジタルマーケティング＆Eコマース プロフェッショナル認定証"　の受講が完了しました(2022/3/3)。私がこのコースから得られた素晴らしい体験を、テーマごとに分割して、わかりやすくご紹介しています。興味を持たれた方は、是非下記を受講してみてください。

https://jp.coursera.org/professional-certificates/google-digital-marketing-ecommerce

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/8957baaf-ce73-a2a4-19cd-72db89b6874f.png" width="800">

今回、レスポンシブ・デザインとモバイルファースト・デザインという2つの異なるWebサイトデザインアプローチについて説明します。

# レスポンシブ・デザインとは？

***<font color="MediumVioletRed">『デバイスのディスプレイサイズの変化にWebサイトが自動的に適応するようにするウェブデザイン手法のこと』</font>***

ユーザーの画面サイズに関わらず、画像、フォント、その他のHTML要素が適切に拡大縮小されます。

# モバイルファースト・デザインとは？

***<font color="MediumVioletRed">『モバイルデバイスに特化した設計を行うことで、ユーザーにとってより良い体験を生み出すことを目的としたWebデザインのアプローチのこと』</font>***

モバイルファーストのWebサイトは、多くのスマートフォンの小さな画面サイズで動作するように調整された、大規模なWebサイトの縮小版です。

# レスポンシブ・デザインの長所・短所

### 長所

- ***<font color="MediumBlue">コンテンツの多いWebサイトに最適</font>***
    - さまざまな商品を扱うショッピングプラットフォームなど、多くのデータを含むWebサイトに有効です。このデザインは、ユーザーがデスクトップやノートパソコンなどのフルサイズディスプレイを使ってサイトを訪れることを想定しており、長いフォームへの入力や複雑なコールトゥアクションを簡単に行えるようになっています。
- ***<font color="MediumBlue">費用対効果の高い開発とメンテナンス</font>***
    - 柔軟性のある単一のレイアウトが必要なため、モバイルファーストのデザインに比べて、開発・設計段階での時間とコストが少なくて済みます。
- ***<font color="MediumBlue">あらゆるデバイスに対応する1つのサイト</font>***
    - あらゆるデバイスで正確に表示されるよう調整されます。
- ***<font color="MediumBlue">すべてのデバイスに1つのURLで対応</font>***
    - レスポンシブWebサイトのデータはすべて1つのサーバーで管理され、URLは1つだけです。このため、ユーザーは簡単にサイトを見つけることができ、追加のアプリケーションをダウンロードする必要もありません。
- ***<font color="MediumBlue">リダイレクトが不要</font>***
    - マルチデバイス対応のデザインでは、ユーザーを適切なバージョンのウェブページに誘導するためにリダイレクトを使用する必要があります。リダイレクトが不要なため、ユーザーは目的のコンテンツにいち早くアクセスすることができます。

### 短所

- ***<font color="Darkcyan">機能が失われる</font>***
    - スマホやタブレットなど画面の小さなデバイスで表示すると、サイズが小さくなるにつれて、特徴やグラフィック要素、一部の機能が失われることがあります。
- ***<font color="Darkcyan">読み込みが遅い</font>***
    - 大きな画面から小さな画面へと移行するため、高解像度のグラフィックスが使用されます。そのため、サイトの重量が重くなり、モバイル端末での読み込みが遅くなる。

# モバイルファースト・デザインの長所・短所

### 長所

- ***<font color="MediumBlue">現在のショッピングやインターネット閲覧のトレンドに合致する</font>***
    - Statistica社の予測によると、2025年までに米国では小売業全体の売上の10%以上がモバイルコマースによって生み出されると予想されています。また、現在、世界中のWebトラフィックの半分以上がモバイルで行われています。
- ***<font color="MediumBlue">より良いユーザーエクスペリエンス</font>***
    - アプリのようなユーザーインターフェイス、少ないテキスト、大きなフォントサイズ、より速いダウンロード速度など、さまざまな配慮がなされているため、全体的に優れたユーザーエクスペリエンスを提供します。
- ***<font color="MediumBlue">アクセシビリティの向上</font>***
    - 小さな画面での読みやすさを向上させ、視覚障がい者の方にも利用しやすくなっています。
- ***<font color="MediumBlue">合理的で整ったコンテンツ</font>***
    - サイトに関連性の高いコンテンツだけを含めることを推奨しています。不要な情報を排除することで、カスタマージャーニーを簡素化し、お客様が目的を達成できるようサポートします。
- ***<font color="MediumBlue">バグの減少</font>***
    - レスポンシブデザインよりもシンプルなコードが要求されるため、バグの数を減らすことができます。

### 短所

- ***<font color="Darkcyan">コストがかかる</font>***
    - OSごとに異なるバージョンのWebサイトを開発する必要があるため、開発に時間がかかり、コストが高くなる可能性があります。また、デザインコストもレスポンシブWebサイトより高くなります。
- ***<font color="Darkcyan">コンテンツが異なる</font>***
    - モバイルファーストのWebサイトはコンテンツが限られていますが、レスポンシブバージョンではより幅広く、多様なコンテンツを用意することができます。時には、これがユーザーを混乱させ、ネガティブなエクスペリエンスを生む可能性もあります。

# Eコマースストアに最適なデザインの選択

あなたのEコマースビジネスに最適なWebサイトデザインのアプローチを決定するには、まずユーザーに関する情報を収集し、顧客ペルソナを作成し、Webサイトの目的を概説することから始めます。どのようなユーザーがいて、どのようにサイトにアクセスし、どのような行動をとってほしいのかを把握します。

そして、***<font color="MediumVioletRed">「80対20の法則」</font>*** に従います。80%のユーザーがデスクトップやラップトップを使用している場合は、レスポンシブデザインを選択するのがよいでしょう。80%のユーザーが主にモバイル端末で買い物をするのであれば、モバイルファーストのデザインが最適かもしれません。

Googleアナリティクスを使えば、ユーザーがどのようにサイトにアクセスしているかを知ることができます。また、市場の業界統計を調べたり、ユーザーテストを通じてユーザーの習慣を学んだり、顧客にアンケートを取るなどして、情報を収集することもできます。