収入UPの転職を目指す方へ

レスポンシブWebデザインとスマホ専用サイトのメリット・デメリット比較

  • 2023/01/31
レスポンシブWebデザインとスマホ専用サイトのメリット・デメリット比較

ここ数年でスマートフォンの普及が急激に進み、今や国民の半数以上の人がスマートフォンを利用していると言われています。スマートフォンの普及に伴い、Webサイトはパソコンだけではなく、スマートフォンからアクセスすることも考慮した設計が求められるようになりました。

スマートフォンの小さい画面でもストレスなくWebサイトを閲覧するために考え出されたものが、「スマホ専用サイト」「レスポンシブWebデザイン」です。しかし、スマホに対応したWebサイトを作る際に、どちらを選ぶべきか迷う方も多いのではないでしょうか。そこで今回は、レスポンシブWebデザインとスマホ専用サイトのメリットとデメリットをご紹介します。

有村先生

近年、Webサイトを見る人の75%以上がスマホを使って見ているとされます。スマホ用のサイト表示が当たり前になっているなかで、どのような作り方がスマートフォン用のWebデザインに適しているのか、早速紹介していきます。

目次

レスポンシブWebデザインのメリット

レスポンシブWebデザインのメリット

「レスポンシブWebデザイン」を採用しているWebサイトは、HTMLファイルが1つだけです。そのため、更新などの際に複数のHTMLファイルを書き換える必要がありません。頻繁に更新を行うWebサイトにとっては、大きなメリットになります。

さらに、WebサイトのURLが統一されているため、シェアやリンクが容易なこともメリットのひとつです。パソコンから SNSなどを通じてWebサイトをシェアし、それをスマホで見た人がアクセスした場合もURLは変わりません。そのため、わざわざスマホ用URLとパソコン用 URLをそれぞれ紹介する手間が省けます。また、Googleではスマホ向けWebサイトの構築にあたり、レスポンシブWebデザインを推奨しています。

レスポンシブWebデザインのデメリット

レスポンシブWebデザインの場合、様々なデバイスに対応させるためHTMLファイルのソースが長くなります。また、画像はパソコン用の画像も兼ねているため容量が重く、それに伴ってWebサイトも重くなります。Webページの表示に時間がかかりやすくなってしまう点がユーザーにとって大きなデメリットです。

さらに、パソコン用のレイアウトを元にスマホ用のレイアウトを考えたり、コーディングしたりする必要があるため、通常よりも構築が複雑です。

レスポンシブデザインの種類

レスポンシブWebデザインには、主に4つの種類があります。

レスポンシブWebデザインの種類
レスポンシブレイアウト 画面の幅の数値に合わせてCSSの切り替えを行うレイアウト
リキッドレイアウト 数値を指定せず、デバイスの画面幅に応じて柔軟にレイアウトを変更させる手法
フレキシブルレイアウト リキッドレイアウトにプラスし画面の最小幅と最大幅を指定できる手法
グリッドレイアウト 画面の幅に合わせてボックス型のコンテンツを並べる手法

これらを参考にして、ユーザビリティを確保しながら、イメージに合う設計にしましょう。

レスポンシブレイアウト

レスポンシブWebデザインの主流であるレスポンシブレイアウトはデバイスの画面幅に応じてコンテンツや画像、ナビゲーションなどの配置・表示/非表示などを調整するレイアウトを指します。

デバイス間による情報の差がないため、どのデバイスから見ても同じように消費者にアプローチできるところがメリットです。

CSS(Webページの文字の色や大きさ、背景、配置といったスタイルを設定する言語)の切り替えをするタイミングの画像幅のことを「ブレイクポイント」といいます。デバイスに応じてブレイクポイントを指定することで、最適なレイアウトを表示させることが可能になります。2022年時点での一般的な画面幅のサイズは下記のとおりなので、この範囲内でブレイクポイントを設定しましょう。(画面幅は流行や主流となるデバイスのサイズによって変動します。)

デスクトップパソコン アートボードサイズ:1920px前後(コンテンツ幅:1720px前後)
スマートフォン アートボードサイズ:375px前後
タブレット アートボードサイズ:768px前後

例えば、スマートフォンのブレイクポイントを350pxと設定しておけば、スマートフォンからのアクセスがあったときには350pxのCSSに自動的に切り替わります。

リキッドレイアウト

リキッドレイアウトとはレスポンシブレイアウトのように数値を指定せずどのデバイスでも画面の横幅に合わせてコンテンツの表示サイズがピッタリに可変されるレイアウトです。つまり、リキッドレイアウトを用いることで、どんな横幅でも100%で表示できます

画面の幅に応じて表示させる割合などを指定し、相対的に調整するところが特徴です。例えば、パソコン版ではトップ画像の下に3つのボックスがありますが、スマートフォン版ではトップ画像の下に3つのボックスを縦に並べるなど流動的に変化します。

1ページ当たりの画像や文章量が多くても、ユーザーが見やすいように表示できるところが大きな魅力でしょう。

フレキシブルレイアウト

フレキシブルレイアウトとは、、リキッドレイアウトと同じで要素の単位を%で指定しますが、最小幅と最大幅も指定したレイアウトです。

例えば、リキッドレイアウトでは、大きなデスクトップで閲覧する場合、各要素が横長に広がり過ぎてかえって見づらくなってしまうことがあります。

フレキシブルレイアウトではこれを避けるために、ブレイクポイントを指定することで、指定した幅以上の画面の場合は左右に余白を作って見やすい表示に調整しま実際の画面サイズより狭い最大幅を指摘すると、画面に白い空白を作れたりもします。

コンテンツを表示させたときの余白や、デザイン性にこだわりたい場合におすすめのレイアウトです。

グリッドレイアウト

グリッドレイアウトとは、画面の幅に合わせてボックス型のコンテンツを並べる手法です。

コンテンツをボックス型に並べているため、画面の幅が変わっても大きくレイアウトが崩れずカスタマイズや修正がしやすいところが特徴です。

グリッドレイアウトに対応したテンプレートを使用することで、初心者でも簡単にレスポンシブWebデザインが作成できます。CSSフレームワーク「Foundation」や「Masonry」があり、簡単に導入することができますが、外部ファイルなので仕様の変更に対応する必要があります。

スマホ専用サイトのメリット

スマホ専用サイトのメリット

「スマホ専用サイト」の1番のメリットは、「スマホで閲覧することに特化したWebサイトを構築できる」点です。パソコン用レイアウトとは全く違うスマホ用に特化した設計が可能なため、軽くて見やすいWebサイトを制作することができます。

また、古いブラウザを考慮する必要がないため、HTML5やCSS3などの最新技術をふんだんに使うことができます。

スマホ専用サイトのデメリット

パソコン用のWebサイトとスマホ専用サイトを別々のHTMLファイルで管理する必要があるため、更新や追加・修正の際に手間が掛かります。さらに、画像などの素材もパソコン用とスマホ用の2つ用意しなければなりません。

また、スマホ用とパソコン用Webサイトの内容自体は、同じことがほとんどです。重複した内容があるWebサイトが存在する場合、「単にコピーしただけのWebサイト」という誤認識を受け、Googleなどの検索エンジンで検索結果の上位に表示されにくくなる恐れがあります。重複を回避するためにタグを埋め込んだり、パソコンユーザーに対するリダイレクトを設定したりする必要があるため、レスポンシブWebデザインのサイトの際には不要であった工数が掛かります。

Webデザイン系 人気コースランキングTOP3

  1. Webデザイナー入門コース
  2. Webデザイナーコース
  3. Webデザイナー総合コース

おわりに

おわりに

スマホ専用サイトとレスポンシブWebデザインにはそれぞれメリットとデメリットがあります。「スマホユーザーが何を求めているか」、「パソコンからアクセスしているユーザーと違いがあるか」などを考慮し、スマホ向けWebサイトに必要なコンテンツを検討しましょう。レスポンシブWebデザインが向いているか、スマホ専用サイトが向いているかは、Webサイトのデザイン、写真の枚数、更新頻度などさまざまな要素によって変わってきます。どちらの手法でも作成できるように勉強しておくと良いでしょう。

Webサイトの必須スキルと最新技術

作品制作講座

Webサイトの企画からデザイン、コーディングまで、既定のWebサイトを制作しながら、実践で使えるスキルを学びます。

相談してコースを選びたい方はカウンセラーに無料で相談

カウンセラーに無料で相談

※無理な勧誘は一切ありません

無料で相談してみる