モバイル端末からのインターネットへのアクセスがますます増えている近年。パソコンの画面上で美しく表示される静的サイトデザインだけでは十分とは言えません。
サイトデザインを考える際はタブレット、2イン1タイプのパソコン、それぞれ異なる画面サイズの各種スマートフォンを考慮しなければなりません。
もはやコンテンツをただ1カラムに詰め込んで完了、とはいきません。
レスポンシブウェブデザインにすることで、スマートフォンでも、タブレットでも、ノートパソコンでも、デスクトップパソコンでも変わらずサイトを美しく表示させることができます。
また、そうすることでユーザーエクスペリエンスが向上、コンバージョンが改善し、事業の成長へとつながります。
今回は、定義、作成の手順、実例などレスポンシブウェブデザインに関することを網羅していきたいと思います。
レスポンシブウェブデザインとは？
レスポンシブデザインとはウェブコンテンツが様々な端末の画面やウィンドウのサイズに応じて適切に表示されるものです。
例えば、デスクトップの画面では横幅が十分にとれるため、コンテンツは複数のカラムに分かれて表示されているとします。
モバイル端末でも同じようにコンテンツを複数のカラムに分けて表示するとユーザーにとって読みづらく、操作しづらくなる可能性があります。
レスポンシブデザインでは画面のサイズに応じて、端末毎に異なるコンテンツレイアウトが表示されるようにします。
レスポンシブウェブデザインとアダプティブデザイン
レスポンシブデザインとアダプティブデザインの違いがこちら。レスポンシブデザインの方は特定のページの単一のバージョンを端末毎に適応させます。一方、アダプティブデザインの場合、特定のページの複数ある全く異なるバージョンを端末毎に表示させます。
どちらも複数種類の画面でのサイトの表示を管理するための重要なウェブデザイントレンドですが、アプローチはそれぞれ異なります。
レスポンシブデザインでは、サイト訪問者は端末の種類に関わらず、ブラウザから同じファイルにアクセスしますが、レイアウトがCSSコードによって制御され、画面サイズに応じて異なる表示となります。アダプティブデザインの場合、画面サイズを確認するスクリプトがあり、ユーザーは該当する端末に合わせてデザインされたテンプレートにアクセスします。
レスポンシブデザインがなぜ重要なのか
ウェブデザインや開発、ブログを始めたばかりの方は、そもそもなぜレスポンシブデザインがそれほど重要なのかと疑問に思われるかもしれません。
答えは簡単です。単一の端末に向けたデザインだけでは不十分なのです。モバイル端末からのウェブトラフィックは今ではデスクトップのそれを上回り、全体の51%とウェブサイトトラフィックの過半数を占めています。
サイトを訪問する可能性があるユーザーの半分以上がモバイル端末でインターネットを利用するのであれば、デスクトップ専用のサイトデザインだけでは不十分です。読みづらく使いにくいサイトとなり、ユーザーエクスペリエンスの低下につながります。
それだけではありません。モバイル端末ユーザーは検索エンジンからの訪問（オーガニックトラフィック）の過半数を占めます。
最後に、ここ数年間、モバイル端末は最も重要な宣伝手段の一つとなっています。コロナ禍の中にある市場でさえ、モバイル端末による広告費は4.8%成長し、915.2億ドルに達しています。
ソーシャルメディアを利用して宣伝をするにしても、YouTube SEOなどのオーガニックなアプローチをとるにしても、トラフィックの大多数はモバイルユーザーによるものになるでしょう。
ランディングページがモバイル端末向けに最適化されておらず使いにくいようでは、マーケティング施策時のROIを最大化することができません。コンバージョン率が低いと、潜在顧客が減り、広告費が無駄になってしまいます。
WordPressサイトはレスポンシブなのか
WordPressサイトがレスポンシブかどうかはお使いのテーマ次第です。WordPressのテーマは静的サイトのテンプレートと同じようなもので、コンテンツ、デザイン、レイアウトをコントロールします。
Twenty Twentyなど、デフォルトのWordPressテーマをお使いの場合、デザインはレスポンシブですが、シングルカラムのデザインなので、複数端末で見比べてもレスポンシブであることに気がつかないかもしれません。
他のWordPressテーマをお使いの場合、複数の端末で表示を見比べるか、Chromeの開発者ツールを使用してレスポンシブかどうか確認することができます。
レスポンシブウェブデザインの構成要素
ここでは、レスポンシブウェブデザインの基礎となる仕組みと様々な構成要素についてご説明します。
CSSとHTML
レスポンシブデザインの基本は、各ウェブブラウザでページのコンテンツとレイアウトをコントロール2つの言語、HTMLとCSSの組み合わせです。
HTMLは主に、ウェブページの構造、要素、コンテンツをコントロールします。例えば、サイトに画像を追加するには次のHTMLコードを記述します。
<img src="image.gif" alt="image" class=”full-width-img”>「class」もしくは「id」を設定し、後ほどCSSコードで装飾することができます。
また、幅や高さなどの属性もHTML内で指定できますが、現在ではあまり推奨されていません。
代わりにHTMLでページ内に追加した要素のデザインやレイアウトを編集するのにCSSを使います。CSSコードはHTMLドキュメント内の<style>のセクションに記述するか、個別のスタイルシートファイルに記述します。
例えば、次のように全てのHTML内の画像の幅を要素レベルで変更することができます。
img {
width: 100%;
}または、「full-width-img」の前にピリオドをつけて、特定のクラスを定義することもできます。
.full-width-img {
width: 100%;
}高さ、幅、色以外のデザインも指定することができます。こうしたCSSの記述にメディアクエリと呼ばれる手法を組み合わせることでレスポンシブデザインを構築します。
メディアクエリ
メディアクエリはコンテンツを画面サイズや解像度など様々な要素に合わせて表示させるのに必要なCSS3の基礎的な技術です。
プログラミング言語の「if文」と同じような仕組みで、基本的には画面のビューポートの幅が十分か、もしくは幅が広すぎるかを確認してから適切なコードを実行します。
@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}画面が最低780ピクセルあれば「full-width-img」クラスの画像は画面の90%を占めるよう表示され、自動的に左右に均等な幅の余白を取り中央に配置されます。
可変レイアウト
可変レイアウトは現代のレスポンシブデザインに必要不可欠な技術です。昔は、全てのHTML要素に「600ピクセル」など、静的な値を設定していました。
可変レイアウトでは、ビューポートの幅のパーセンテージなど、動的な値を指定します。
このアプローチにより、画面サイズに応じてコンテナのサイズを動的に拡大、もしくは縮小することができます。
フレックスボックスレイアウト
パーセンテージに基づいたレイアウトは可変性がありますが、デザイナーやウェブ開発者の多くが、それだけでは十分に動的かつ柔軟ではないと考えました。フレックスボックスは、たとえコンテナ内のコンテンツのサイズが分かっていなくても複数の要素をより効率的に配置する方法です。
フレックスなコンテナが、与えられた余白を満たすよう、もしくははみ出してしまわないよう、アイテムを拡大したり縮小したりします。フレックスコンテナにはjustify-contentなど、通常のHTML要素では編集できない独自のプロパティがあります。
込み入った内容なので、デザインに取り入れたい場合はCSS Tricksによるフレックスボックスの説明などをご覧ください。
レスポンシブ画像
最も基本的なレスポンシブ画像は、可変レイアウトと同じ考え方で、幅と高さのコントロールに動的な値を使用します。先ほど記載したCSSコードの例で既にご紹介しています。
img {
width: 100%;
}ここにある％は、ビューポートの幅または高さのパーセントに近似し、画像が画面サイズに合わせた縮尺で表示されるようになります。
この手法の問題は、モバイルを含め全ての端末でフルサイズの画像をダウンロードしなければならないことです。
端末ごとに異なるサイズの画像を表示するには、HTMLのimgタグでsrcset属性を使用し、複数の画像サイズから選べるようにしなければなりません。
<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w"
src="small.jpg"
/>WordPressでは、投稿や固定ページに含まれる画像には自動でこの機能が適用されます。
スピード
レスポンシブデザインを作成しようとする際、ページの読み込みスピードを最優先に考えなければなりません。
2秒で読み込むページの平均的な直帰率は9%ですが、5秒になると直帰率は38%まで上昇します。
レスポンシブ対応がページの読み込みを少しでも妨げたり、遅くしてしまったりするのは避けなければなりません。
ページの読み込み速度を速くする方法はいくつかあります。画像の最適化、キャッシュの実行、圧縮、より効率的なCSSレイアウトの使用、レンダリングブロックするJSの除外、クリティカルレンダリングパスの改善等を検討しましょう。
また、モバイル向けにGoogle AMPを利用してもよいですが、当社の行ったGoogle AMPのケーススタディでは、モバイル端末における潜在顧客獲得率はなんと59%も減少しました。
一般的なレスポンシブデザインのブレイクポイント
メディアクエリを利用するには「レスポンシブデザインのブレイクポイント」、つまり画面サイズのブレイクポイントを決める必要があります。ブレイクポイントとはメディアクエリで新たなCSSスタイルを実行する時の画面の幅です。
一般的な画面サイズ
- モバイル: 360 x 640
- モバイル: 375 x 667
- モバイル: 360 x 720
- iPhone X: 375 x 812
- Pixel 2: 411 x 731
- タブレット: 768 x 1024
- ノートパソコン: 1366 x 768
- 高解像度ノートパソコンまたはデスクトップ: 1920 x 1080
シングルカラムと小さなフォントサイズを基本としたモバイルファーストのアプローチを選択するのであれば、特定のモデル向けにデザインを最適化したい場合を除き、そのブレイクポイントを指定する必要はありません。
そのため、タブレット用、そして、ノートパソコン/デスクトップパソコン用の2つのブレイクポイントのみで、基本的なレスポンシブデザインを作成することができます。
Bootstrapレスポンシブデザインのブレイクポイント
古くからあり、人気のレスポンシブフレームワークであるBootstrapにより、従来の静的ウェブデザインは下火になり、モバイルファーストデザインが業界のスタンダードとなりました。
そのような経緯から、現在でも多くのデザイナーがBootstrapにおける画面幅のブレイクポイントを採用しています。
メディアクエリではスマートフォンのランドスケープモード（576px）、タブレット（768px）、ノートパソコン（992px）、大画面のデスクトップ（1200px）が指定されます。
レスポンシブサイトを作成する方法
ここまで構成要素についてご紹介してきましたが、ここからはレスポンシブサイトを作る方法を実際に見ていきましょう。
メディアクエリの範囲を指定する（レスポンシブのブレイクポイント）
あなた自身のデザインで求められる条件に応じて、メディアクエリの範囲を指定してください。例えば、Bootstrapの基準を採用したい場合は、次のメディアクエリを使用します。
- スマートフォンのポートレートモード＝576px
- タブレット＝768px
- ノートパソコン＝992px
- 大きな端末＝1200px
レイアウト要素のサイズをパーセンテージで指定するかCSSグリッドレイアウトを作成する
最初の、そして最も重要な手順は、メディアクエリと画面のブレイクポイント毎のレイアウト要素にそれぞれ異なるサイズを指定することです。
レイアウトコンテナの数はデザインによって異なりますが、多くのサイトに次の要素があるはずです。
モバイルファーストアプローチを採用する場合、主要なレイアウト要素を次のようにスタイリングできます（スマートフォン向け基本スタイルのメディアクエリはなし）。
#wrapper {width:95%; margin: 0 auto; }
#header {width:100%; }
#content {width:100%; }
#sidebar {width:100%; }
#footer {width:100%; }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
#wrapper {width:90%; margin: 0 auto; }
#content {width:70%; float:left; }
#sidebar {width:30%; float:right; }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
#wrapper {width:90%; margin: 0 auto; }
}パーセンテージに基づいた手法では、「float」属性により、画面の左右どちら側に要素が表示されるかを指定します。
より高度な最新のレスポンシブデザインを取り入れたいのであれば、CSSのフレックスボックスレイアウトや「box-sizing」、「flex」などの属性を使いこなす必要があります。
レスポンシブ画像を使用する
画像の表示が損なわれるのを防ぐ方法の一つは、先ほどご紹介した通り、単に全ての画像に動的な値を指定することです。
img {
width: 100%;
}しかし、これではモバイル端末を用いた訪問者がサイトにアクセスした際の読み込みサイズを削減することができません。
ページに画像を挿入する際は必ず複数の画像サイズとともにsrcsetを用いるようにしましょう。
手動で行うと時間がかかりますが、WordPressなどのCMSではメディアファイルをアップロードするとこれが自動で適用されます。
サイトのテキストにレスポンシブタイポグラフィを使用する
レスポンシブウェブデザインで一番重要なのはレイアウトブロック、要素、メディアをレスポンシブにすることであり、テキストは通常、二の次です。
しかし、真のレスポンシブデザインでは、フォントサイズを調整し画面サイズに合うようにしなければなりません。
最も簡単なのはフォントサイズに例えば22pxなどの静的な値を指定し、それぞれのメディアクエリで適用する方法です。
カンマで区切り、複数のテキスト要素を同時に定義することもできます。
@media (min-width: 992px) {
body, p, a, h4 {
font-size: 14px;
}
}レスポンシブかどうか確認する
まずは、Googleのモバイルフレンドリーテストでサイトがレスポンシブになっているかどうか確認しましょう。サイトのURLを入力し「URLをテスト」をクリックするだけで結果が表示されます。
サイトを呼び出すのに少し時間がかかったとしても心配はいりません。これは、ページの読み込み速度を反映しているわけではありません。
この記事でご紹介した手順を踏んでいれば、モバイルフレンドリーなサイトと診断されるはずです。
その後、Chromeの開発者ツールなどで、複数の画面サイズでのサイトの表示を確認してみましょう。
Windowsの場合「CTRL + Shift + I」を、Macの場合「Command + Option + I」を押して、該当の端末における表示を確認できます。お好きなモバイル端末やタブレットを選択し、デザインがレスポンシブかどうか見てみましょう。
このテストを実施する際、次のポイントを確認してみましょう。
- レイアウトは適切なカラム数に調整されているか
- それぞれの画面サイズで、コンテンツがレイアウト要素やコンテナの中に適切に収まっているか
- フォントサイズは各画面サイズに合っているか
レスポンシブデザインにおけるCSSの単位と値
CSSには「絶対的な長さの単位」と「相対的な長さの単位」があります。絶対的な長さの単位の一例は「cm」や「px」です。相対的な長さの単位、つまり、動的な値は画面のサイズと解像度、もしくはルート要素のフォントサイズに依存します。
レスポンシブデザインのPX、EM、REM、ビューポートを基準とした単位
- PX – ピクセル数
- EM – 要素のフォントサイズを基準とした相対的な単位
- REM – 要素のフォントサイズを基準とした相対的な単位
- VH、VW – ビューポートの高さ、もしくは幅に対する割合
- % – 親要素に対するパーセンテージ
ウェブデザイナーや開発者になりたてであれば、CSSの長さの単位の中で最も分かりやすいピクセルでテキストを指定したくなるはずです。
しかし、画像などの要素の幅や最大幅を設定する際は%を用いるのが最適です。これで、どのような端末の画面でも適切なサイズで表示されます。
レスポンシブデザインの実例
ここからは様々な業界におけるレスポンシブウェブデザインの実例をご紹介しながらその良い点、悪い点を解説します。
1. オンラインニュースサイト: New York Times
デスクトップ版のNew York Timesのレイアウトはビジュアルを多用し、たくさんの行やカラムでコンテンツを表示しており、従来の新聞を思わせるようなものです。ニュースのカテゴリー毎に個別の行とカラムがあるようです。
モバイル版では、標準のシングルカラムのレイアウトを採用しており、メニューも使いやすさを考慮しアコーディオンメニューになっています。
2. ブログ: The Art of Non-Conformity
Chris Guillebeau氏のブログ、“The Art of Non-Conformity”は10年以上、業界で高い影響力を誇っています。デザイン自体は最先端とは言えませんが、レスポンシブになっており、モバイル版ではサイドバーとメインコンテンツの2カラムレイアウトからシングルカラムレイアウトに変更されます。
3. ECサイト: Amazon
AmazonはECのグローバルリーダーなだけあり、そのユーザーインターフェースはあらゆる端末に合わせて変化しています。
タブレット版ではコンテンツがより小さな枠に収まるよう、余白を少し削り、スクロール可能なアイコンのセクションを設けています。
モバイル版では、メインサイトのように様々なセクションへリンクするアイコンは表示されず、直近の購入履歴など必要不可欠な部分に絞ったシングルカラムのレイアウトになっています。
4. 動画サイト: YouTube
YouTubeのサイトデザインの中核は、各ユーザーに関連する動画の柔軟なグリッドです。タブレット版では、行毎のカラム数は3つになり、モバイル版ではシングルカラムデザインになります。
モバイル版ではスマートフォンユーザーが親指でタップしやすいよう、メインメニューが画面の下部に移動しています。シンプルな動作にすることでUXとナビゲーションが改善されています。
5. オンラインマガジン: Wired
Wiredのレスポンシブデザインでは、タブレットやそれよりも小さな端末にシングルカラムレイアウトを採用しています。
基本的なレイアウトですが、トップ記事や、購読へのCTAへユーザーの注意を引きつけやすいような作りになっています。
まとめ
レスポンシブウェブデザインは様々な要素で構成されています。HTMLとCSSの基本的な知識がなければ、間違った対応をしてしまう可能性が高いでしょう。
しかし、様々な構成要素の理解を深め、ウェブ開発ツールにより実例を分析し、サンプルコードを実際に使用しテストしてみることで、大きな問題なくレスポンシブサイトを作成することができるはずです。
自力で対応するのは難しそうだと感じたならば、WordPressに精通した開発者を雇うか、もともとレスポンシブなテーマを利用することをおすすめします。
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
コメントを残す