Webサイトをレスポンシブデザインにする前に把握しておきたいポイント

こんにちは、アイオイクスの星野です。

事業部内では、ディレクションやデザインなどのクリエイティブに関わる仕事をしています。

今回はこれからレスポンシブデザイン、レスポンシブ化を担当する際、

  • どれから手をつけたらいいか分からない!
  • メリデメを知ってクライアントや制作会社とのやりとりに臨みたい!

という方向けに基礎知識、メリット・デメリット、実際に構築する際や実装時の注意点を紹介します。

レスポンシブについてなんとなく理解しているものの、実際どういったところに気をつけて進めれば良いか、参考になると幸いです。

目次

レスポンシブデザインとは?

ユーザーがアクセスしたデバイスのウインドウサイズによって、それに応じた適切なサイズで表示するデザインの実装方法です。

PCはもちろんのこと、タブレットやスマートフォン(小さな画面を売りにしたものから、逆にタブレット並みに広範囲までを映せる大画面など)などデバイスの種類やウィンドウサイズは多岐にわたります。

このような複数のデバイスのサイズに対応し、それぞれに適切で見やすく、1つのWebサイト(HTML)で実現できるように構築します。

レスポンシブデザインのメリット・デメリットとリスク

Webサイトをレスポンシブデザイン、レスポンシブ化した場合どのようなメリット・デメリットがあるのか、またこれから行う場合のリスクをまとめてみました。

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

モバイル版のURLを優先的に使用するため、URLが1つのレスポンシブだと評価が統一されやすくなる

Googleは モバイル ファースト インデックス登録の有効化を発表しています。

今までパソコン版を優先しインデックスしてきましたが、これによりモバイル版を優先するようになりました。

2019 年 7 月 1 日以降、すべての新規ウェブサイト(ウェブに新しく追加されたサイトまたは Google 検索が認識していなかったサイト)では、デフォルトでモバイル ファースト インデックス登録が有効化されます。

モバイル ファースト インデックス登録に関するおすすめの方法  |  Google 検索セントラル  |  Google Developers

完全移行については昨今の状況から2021年3月末まで延期することを決定しました。

しかし、自動移行は停止中、全サイト移行完了は 4 月、5 月になるかもという状況です。

コンテンツの管理工数が楽

レスポンシブデザインは1つのWebサイトを複数のデバイスでも適切に表示されるように構築するため、PC・モバイル用それぞれのコンテンツ更新が不要です。

適切な処理を行わないと、スマホ用に変換しただけのサイトはデメリットになりかねないばかりか、PC用・モバイル用のサイト更新の煩雑化を招きかねません。

パソコン用とモバイル用、それぞれが別のURLで構築されているWebサイトの場合、対策としてmetaタグなどに設定しPC・モバイルとURLが違っても同一サイトであると検索エンジンに認識させることが出来ます(これをアノテーションと言います)が、Googleはレスポンシブデザインを推奨しています。

SEOがサイトにとって重要である場合、レスポンシブが良いと言えるでしょう。

ユーザーの約半数がスマートフォンでアクセスしており、カバー対象が広がる

もしレスポンシブデザインに対応しておらず、モバイル対応もしていないサイトの場合、サイトをレスポンシブにすることでモバイル対応となり、カバー対象のユーザーが広がります。

インターネットを利用するユーザーの半数以上がモバイル(スマートフォン)からアクセスしており、Webサイトのジャンルによって利用ユーザーの比重は異なりますがスマートフォンでの表示が多くなっています。

7割以上PCで表示されていた2016年ごろと変わり、現在はスマートフォンで表示するユーザーが全体の50〜60%と、約半数を締めています。

レスポンシブデザインに対応することで、逃していたスマートフォンのみで閲覧していたユーザーからの閲覧が期待できたり、PC・モバイルでURLが分かれていたサイトも閲覧されることが増える可能性があります。

レスポンシブデザインに変更する場合のリスク

まだレスポンシブデザインに対応しておらず、これからレスポンシブデザイン・レスポンシブ化を行う場合はリスクについても考慮しておきましょう。

作業設計や制作期間が長引く

どのデバイス、ウインドウサイズを対象にするのか?それらのサイズで問題なく表示がされるか?

デバイスが1つだけではない分、それぞれのデザイン・コーディングや検証が必要です。

少しの調整で影響範囲が大きい場合も

スマホの画面でのみ配置を変更したい、そんな場合に「モバイルだけなら影響範囲が狭いから大丈夫だよね」とはなりません。

レスポンシブサイトの場合、「○○pxのウインドウサイズでは~…」とサイズを起点にした条件分岐を複数組み合わせて構築することがあります。

コーディングに不慣れな場合、1箇所だけのちょっとした更新でも全体の表示バランスが崩れてしまうことがあります。

対応デバイスの要件定義をミスると制作費が高額になりやすい

作業設計を作り込み、制作期間が長くなってしまう分、制作費がやや割高となることがあります。

初期設計時に対象のウインドウサイズや動き、情報量を絞り込んでおきましょう。

あとから追加、追加で要件を調整する場合、制作期間が長期化し、制作費が膨らんでいく要因になります。

レスポンシブデザインを行う際のポイント

ここではレスポンシブデザインを行うにあたって気をつけると良い、チェックしておくと良いポイントをご紹介します。

レスポンシブデザイン実装前の設計をする段階

レスポンシブデザイン実装前は、まず参考となるレスポンシブデザインのサイトを見ていきましょう。

  • ブレークポイントはどこか?(デザインが切り替わるウインドウサイズはどこで、いくつあるか?)
  • トレンドのサイズや解像度はどのようになっているか?
  • メニューやページが長い場合の動作、情報量はどうなっているか?
  • フォントサイズの切り替えやベースのサイズはどうか?
  • どのブラウザ、端末に対応するか?

PC/タブレット/スマートフォンの見え方それぞれ、レスポンシブデザインをまとめているサイトがいくつかあります。

ブランドやプロダクトのイメージを言語化したり、イメージを固めるためにも参考となるサイトはいくつか調べておきましょう。

Responsive Web Design JP
Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。
縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG縦長のwebデザインをがむしゃらに集めています。

レスポンシブデザインの場合、ひとつのURLで複数のウインドウサイズに対応する必要があります。

スマートフォンで表示する場合、1スクロールでの情報量に限りがあるため、読みやすさが失われることのないよう、改行の位置や、画像、画面幅など配置にも気を配りましょう。

情報量の整理を行う際にフォントサイズも重要になってきます。

あまり小さすぎても読みづらいため、画面左右からの余白を取る、フォントサイズは14~16px程度を基本に各見出しでサイズを調整しましょう。px以外の%、em、rem、vwなど、ウインドウサイズによってフォントサイズを可変できる指定もあります。細かな調整は制作会社やコーダーの方に委ねるのも良いでしょう。

細字タイプのフォントもありますが、PC、タブレット、スマートフォンそれぞれで細字を利用するか、可読性の妨げとならないかもチェックしましょう。

構築や実装をする段階

実装前のインプットや設計が完了したら、レスポンシブデザインの構築を進めていきましょう。

  • ブレークポイントで切り替わっているか?
  • ブレークポイント前にデザインが崩れてしまっていないか?
  • 可変時のフォントサイズは意図したものになっているか?
  • 各ウインドウサイズで要素同士の距離は適切か?
  • 画像ファイルは軽量化してあるか?

デメリットでも取り上げたように、レスポンシブデザインはひとつのURL・コードで複数のデバイスに対応できるよう表示をコントロールする必要があります。

実装してみたらフォントサイズが意図するサイズではなかった、特定ブラウザで異様に太字になる、一回り小さく見える……なども発生することがあります。

ブレークポイント前に要素が離れてしまう、近づきすぎて重なってしまう。フォントの可変が意図していない極小サイズになる、折り返して画面外に飛び出してしまう、といったことはよく見られます。

また、スマートフォンの場合は主に指で操作するため、要素同士が近すぎてタップしにくくなっていないかをSearch Consoleでエラーが出ていないか、でチェックが可能です。

Search Console、PageSpeed InsightsもしくはChromeのデベロッパーツールLighthouseで問題がないか確認しておきましょう。

また、実装の際に別サイトのソースを参考にする場合もあるかと思いますが、全てのサイトで同じようにうまくいくとは限りません。更新前後でしっかりバックアップを取る、履歴管理をするなどして取り組みましょう。

リニューアルをする場合

サイトがすでにあり、レスポンシブデザインにしたい、レスポンシブ化したい、といったご要望もあるかと思います。

  • Google Analyticsで今来ているユーザーのデバイス情報を目安にしてみましょう
  • PC版、モバイル版、それぞれのURLがある場合レスポンシブ化時に情報設計し、リダイレクトルールを設けましょう

今流入しているユーザーのデータを参考に、「レスポンシブデザイン実装前の設計について」でも触れたようにブレークポイントの切り分けるサイズの目安にしてみましょう。

また、リニューアル後に同じ内容がページ内にないと混乱する場合があります。リダイレクト処理を行うためにコンテンツのサイトマップを作成し、レスポンシブ化した場合どのページがどこに残るのか、整理しておくのが良いでしょう。

広告用のページ(LP)の場合

広告用のページ(LP)ではレスポンシブデザインのメリットである、一つのURLで複数のウインドウサイズに対応する点が最大限活かせます。

ただし、複数のウインドウサイズに対応するためテキスト量や画像の配置を調整する必要など制限もあることから、メリットがデメリットになる点もLPならではと言えます。

  • 縦に長すぎる場合に適切にリンクを設定できているか
  • 情報量の多いメニューはスマートフォン表示の際にメニューボタンで画面上の情報を圧縮できているか、邪魔をしていないか
  • ファーストビューで訴求したい情報が載せられているか
  • 追従CTAが誤タップしやすい大きさ・位置に来るなど、著しくユーザーの行動を妨げていないか

今までのポイントを押さえつつ、LP作成に取り組む必要があります。

まとめ

メリット・デメリットを取り上げながら、それぞれの場面で気をつけるべきポイントを取り上げました。

レスポンシブデザインはひとつのコードで複数のウインドウサイズのデザインを調整することが出来るため、コーディングをする上では楽な面もありますが、反映しなかった場合に修正箇所が広がって辛くなることも。。。

最初から順を追って、どの画面でどういったサイズ、距離感で表示する必要があるか、向き合って設計し進めていきましょう。

この記事を書いた人

アイオイクスでディレクターをしています。日本画やグラフィックデザイン、Webデザインを専門に学んで今に至る。趣味は映画鑑賞、ディズニー(舞浜/フロリダ)、カメラ。

目次
閉じる