Webサイト制作

レスポンシブデザインの作り方を解説！初心者向けにテンプレートも紹介

# Webサイト

2022.10.19

スマホからサイト閲覧する人の割合が増えた現代では、サイトのレスポンシブ対応が必須となりました。そのため、デバイスに合わせた最適な画面表示ができるレスポンシブデザインが重要です。

レスポンシブデザインはユーザーにとって使いやすいだけでなく、サイト運営側にとっても管理しやすいなどのメリットがあります。

今回はレスポンシブデザインの作り方やHTMLのテンプレート、参考サイトなどを紹介しています。自社サイトをレスポンシブ対応させたいとお考えのWeb担当者の方は、ぜひ参考にしてください。

なお、レスポンシブ対応は自身でコーディングしなくても、CMSを利用すれば自動的にPC、スマホ、タブレットに最適化されたページを表示することができます。下記資料で解説しているCMS「LeadGrid」は、レスポンシブ対応しているだけではなく、初心者でも直感的に使いやすいCMSとして、100社以上の企業で導入されています。レスポンシブ対応を進め、Webマーケティングに注力したいとお考えの担当者はぜひ一度下記無料資料「サービス資料」をご確認ください。

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

レスポンシブデザインとは、ユーザーが閲覧しているデバイスに合わせた表示ができるデザインのことです。HTMLファイルは一つですが、CSSを利用することで複数の画面に合わせた表示が可能です。

関連記事：レスポンシブ対応とは？5つの対応方法や注意点をWeb制作会社が解説！

レスポンシブ対応ができていないと、ユーザーはスマホでサイトを見た際に、使いにくさを感じます。それだけではなく、SEO的にも悪影響を与えるおそれがあります。

Googleは「モバイルファーストインデックス」を2018年のアップデートよりスタートさせました。モバイルファーストインデックスとは、GoogleがWebサイトの評価軸をPCからスマホに変更するものです。

そのためスマホでの閲覧満足度が低いWebサイト、つまりレスポンシブ対応していないWebサイトに関しては、SEOの観点から検索上位に上がらないリスクがあります。

レスポンシブデザインの作り方基本の3ステップ

レスポンシブデザインを作るには、3つのステップがあります。

レスポンシブ対応させる端末のサイズを決める
meta viewportタグを設定する
メディアクエリを利用してCSSを設定する

1. レスポンシブ対応させる端末のサイズを決める

まずはレスポンシブ対応させる端末サイズを決めましょう。端末サイズを事前に設定しておくことで、デバイスに合わせた最適なサイズのデザインが作れます。

デザインが切り替わるポイントの「ブレイクポイント」では、ユーザーにとって使いやすい最適な値を設定します。とはいえ「◯◯pxが最適」といった答えはないので、現在流通している端末の画面サイズを参考にして、設定しましょう。

statcounterの日本の画面解像度統計において、もっとも多いサイズは以下のとおりでした。

モバイル：390×844
タブレット：768×1024
デスクトップPC：1920×1080

（引用：statcounter）

これらの結果や、実際に画面上でウィンドウを開くときの大きさを考慮し、各デバイスのサイズ範囲は以下のように設定すると良いでしょう。

スマホ：390〜500px
タブレット：768〜1,280px
PC：960〜1,280px

関連記事：【2023年】デバイス別レスポンシブデザインのブレイクポイントまとめ

2. meta viewportタグを設定する

端末サイズを決定したら、サイトのHTMLファイルにmeta viewportタグを挿入します。viewportとはデバイスごとの表示領域を設定するmetaタグのことです。

meta viewportは「ユーザーがスマホで閲覧する場合はこのサイズで表示する」と指示を出す役割があります。

HTMLファイルのheadタグ内に以下のmeta viewportを追加してください。

<meta name="viewport" content="width=device-width,initial-scale=1">

上記のタグは「横幅はデバイスの画面幅に合わせる」「初期設定では拡大せず（1倍）、そのまま表示する」という意味です。このタグを挿入することで、デバイスに合わせたデザイン表示が可能となります。

3. メディアクエリを利用してCSSを設定する

メディアクエリを使い、サイトがレスポンシブ対応するためのCSSを設定していきます。メディアクエリとは、デバイスによって表示を変えたいときに使用するCSSです。

@mediaを使ってメディアタイプ（PCやスマホなど）を指定し、画面幅を設定しましょう。

たとえば以下のような記述ができます。

/* スマホ */
 @media screen and (max-width: 428px) {
 /*ここにスマホ用のCSSを記述する*/
 }
/* タブレット */
 @media only screen and (min-width: 600px) and (max-width: 1024px) {
 /*ここにタブレット用のCSSを記述する*/
 }
/* パソコン */
 @media screen and (min-width: 1024px) {
 /*ここにPC用のCSSを記述する*/
 }

上記はモバイルファーストの記述方法です。最初にスマホ用のスタイルを構築し、後からタブレット・PC用のスタイルを上書きしています。

レスポンシブデザインのコツ

レスポンシブデザインにおけるコツを紹介します。

スマホに合わせたデザイン
横向きに対応するデザイン
高解像度ディスプレイに対応

スマホに合わせたデザイン

デザインを決める際は、スマホでの表示を意識しましょう。

表示したボタンや要素の並び方、画像の縦横比など、PCとスマホでは見え方がまったく異なる場合もあります。たとえば文字が入った画像だとPCでは見やすくても、スマホでは文字が小さくなりすぎて読みづらくなることも。

その場合はデバイスごとで画像を用意する、画像と文字を分けるなどの対応が必要です。

またスマホは指でタップするため、PCとは操作方法が異なります。ボタンの大きさや文字の大きさなどを考慮して、デザインを設定していきましょう。

横向きに対応するデザイン

レスポンシブ対応させるなら、デバイスを横へ傾けたときにも対応できるデザインにしましょう。

メディアクエリは画面の向きにも対応可能です。横向きには「landscape」を縦向きには「portrait」を使います。具体的な記述は以下のとおりです。

@media (orientation: landscape){
  /* デバイスを横向きにした際の記述*/
 }
 @media screen and (orientation: portrait) {
   /* デバイスを縦向きにした際の記述 */
 }

横向きと縦向きで表示される情報量を変えているサイトもあります。ユーザーの使いやすさを考えて、コンテンツの配置や情報量を調整するようにしましょう。

高解像度ディスプレイに対応

スマホの高解像度化が進んでいます。通常のディスプレイでははっきり写る画像が、高解像度ディスプレイだとぼやけて見えることもあるため、高解像度ディスプレイへの対応が必要です。

画像を高解像度ディスプレイに対応させるには、デバイス・ピクセル比を知る必要があります。デバイス・ピクセル比は、こちらのサイトが参考になるでしょう。

たとえばデバイス・ピクセル比が「2」のディスプレイなら、読み込ませたい画像サイズの2倍の解像度画像を用意しなければなりません。しかしピクセル比が1のデバイスに2倍の画像を読み込ませると、サイトが重くなってしまいます。

それぞれのデバイスにあったサイズの画像を表示させるには、imgタグの「srcset属性」を使いましょう。

<img src="sample.png" srcset="sample1x.png 1x, sample2x.png 2x" />

このようにsrcset属性を使うことで、デバイスの解像度に合わせた画面表示ができます。

なお、ここまでの解説を読んで「自社でレスポンシブ対応が難しい」と感じた場合は、CMSの利用をご検討ください。Webサイトを簡単に使えるCMSを利用すれば、最初からレスポンシブ対応をしているケースが多いです。無料配布資料「CMS比較一覧表」ではコーポレートサイトやサービスサイト、オウンドメディアなどの各種Webサイトを制作する際に最適なCMSを機能別で比較できるよう一覧表にまとめました。ぜひ以下より無料でダウンロードし、比較検討にお役立てください。

レスポンシブデザインを確認するツール

レスポンシブ対応したサイトの見え方を確認するツールを紹介します。

Responsive Checker
Chromeデベロッパーツール
レスポンシブWebデザインチェックツール

Responsive Checker

▲出典：Responsive Checker

Responsive CheckerはMedia Genesis社が提供するチェックツールです。URLを検索窓に入れて検索すると、各デバイスからの見え方がわかります。

表示されるモバイルはiPhoneやAndroid、iPadやKindleなど計19種類。PCでは、解像度別での表示方法が見られます。

Responsive Checkerの表示画面からリンク先へ飛べるので、個々のページの見え方もチェックできます。

Chromeデベロッパーツール

Chromeデバロッパーツールとは、Google社が無料提供するWebブラウザ（Google Chrome）についているサイト検証機能のことです。起動させることで、モバイルからの見え方がわかります。

Chromeデバロッパーツールを起動させるには以下の方法があります。

「F12」ボタンを押す
「Ctrl」＋「Shift」＋「I」キーを同時に押す
右クリックし「検証」を押す

赤枠部分をクリックすると、モバイルでの表示が出るので、レスポンシブ対応しているかどうかがわかります。

黄枠部分をクリックすると、横向きの表示方法も見られます。

Chromeデバロッパーツールでは、デバイスサイズの細かい数値の指定も可能です。

レスポンシブWebデザインチェックツール

▲出典：レスポンシブWebデザインチェックツール

レスポンシブWebデザインチェックツールは、リキッドデザイン株式会社が提供するチェックツールです。

5種類のデバイスからの見え方がわかるので、一目で比較できます。表示画面のサイズを変え、デバイスの枠を取り外すことも可能。

横向きでの見え方もボタン一つで切り替えられ、直感的に使えるレスポンシブデザイン確認ツールです。

レスポンシブデザインのHTMLテンプレート紹介

コーディングが難しいとお困りなら、テンプレートを利用してみませんか？HTMLテンプレートを3つ紹介します。

HTML5 UP
無料ホームページテンプレート.com
TempNate

HTML5 UP

▲出典：HTML5 UP

HTML5 UPでは、44種類のHTMLテンプレートが紹介されています。全てのテーマでライブデモを確認できるので、作成後のサイトをイメージしやすいのが特徴。サイトの目的や用途に合わせて、豊富な種類からテンプレートを選べます。

HTML5 UPは基本的に無料です。クリエイティブ・コモンズのライセンスクレジットを表示することで、改変や商用での利用も可能です。

クレジットを表示したくない場合は有料プランにする必要があります。有料プランにすると91種類のテンプレートが使えるようになります。

無料ホームページテンプレート.com

▲出典：無料ホームページテンプレート.com

無料ホームページテンプレート.comには、HTMLテンプレートとWordPressのテンプレートがあり、どちらもレスポンシブ対応しています。

テンプレートは無料で利用できますが、ページの最下部にクレジットが挿入される仕様です。シリアルキー（2,980円）を購入すれば、クレジットを外せます。

現在、テンプレートの種類は186個。デモサイトやシミュレーターで、各デバイスからの見え方が一つずつチェックできます。

TempNate

▲出典：TempNate

TempNateでは企業サイトや学校などの教育関係、通販などにも対応したテンプレートが10シリーズ用意されています。

各シリーズにおいてカラーや幅のサイズ、設置するコンテンツの位置などのバリエーションが豊富です。

無料版ではフッター部分に著作テキストが表示されますが、3,900円の著作権表示削除サービスを利用すれば、著作テキストが削除できます。

ホームページ・テンプレートの設置方法が丁寧に解説されているので、初心者の方でも安心。ヘッダーやサイドバーなどのパーツや、画像素材もダウンロード可能です。

また、テンプレートではなく、よりオリジナリティのあるWebサイトを作りたい場合は直感的な操作性と自由度の高いデザイン性で評価の高い国産CMS「LeadGrid」がおすすめです。LeadGridは誰でも簡単に操作できるCMSで、使いやすいだけではなく、会社の特徴にあわせたWebサイトを提案することもできます。

無料配布資料「LeadGridサイト制作事例集」では、導入事例を詳しく紹介しています。LeadGridを使用した制作イメージをより具体的に膨らませたい方は、下記より無料でダウンロードし比較検討の際にご活用ください。