レスポンシブデザインの作り方を解説! 初心者向けにテンプレートも紹介|Webサイト制作・CMS開発|LeadGrid

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

目次

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

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

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

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

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

レスポンシブ対応ができていないと、ユーザーはスマホでサイトを見た際に、使いにくさを感じます。結果的にPVやCVが落ちるなど、サイト運用の目的が達成できないことも。

レスポンシブ対応の詳しい概要は、以下の記事で解説していますのでぜひご覧ください。

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

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

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

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

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

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

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

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

(引用:statcounter)

これらの結果から、各デバイスのサイズ範囲は以下のように設定すると良いでしょう。

  • スマホ:340〜428px
  • タブレット:600〜1024px
  • PC:1280〜2048px

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属性を使うことで、デバイスの解像度に合わせた画面表示ができます。

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

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

  • 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円の著作権表示削除サービスを利用すれば、著作テキストが削除できます。

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

レスポンシブデザイン参考サイト

レスポンシブデザインの参考サイトを紹介します。

  • RESPOSIVE WEB DESIGN JP
  • SANKOU!
  • 81-web.com

RESPOSIVE WEB DESIGN JP

▲出典:RESPOSIVE WEB DESIGN JP

RESPOSIVE WEB DESIGN JPでは、日本国内のレスポンシブ対応しているサイトを紹介しています。ただ単にレスポンシブ対応のサイトを集めているだけでなく、デザイン性の高いサイトを集めているのが大きな特徴です。

PC・タブレット・スマホ用のサイトが一覧となって見られるので、デバイスごとの切り替えをしなくてもすぐにデザインチェックができます。

SANKOU!

▲出典:SANKOU!

SANKOU!は検索フィルターが充実しており、探しているデザインを見つけやすいサイトです。企業サイトやサービスサイトなどのサイトの種類や、サイトの雰囲気や業種、サイトカラーなどをフィルターにかけられます。

現在、日本国内のレスポンシブ対応サイトやスマホサイトが、589種類紹介されています。

81-web.com

▲出典:81-web.com

81-web.comの81とは日本の国際電話番号「81」に由来しており、日本国内のレスポンシブ対応サイトを紹介しています。サイトは日々追加されており、どれもデザイン性に優れたものばかりです。

カテゴリーやカラー、タグやWebフォントでの検索ができるので、参考になるサイトがきっと見つかります。

HTML・CSS以外でレスポンシブ対応させる方法

レスポンシブ対応させるにはHTML・CSS以外にも、さまざまな方法があります。

WordPressでサイト運用しているなら、プラグインの追加やテーマを変更することでレスポンシブ対応が可能です。既存のサイトをレスポンシブ対応させるなら、自動変換ツールも使えます。

また、レスポンシブ対応したCMSの利用もおすすめです。CMSはそれぞれ得意分野が異なるため、自社のサイトに必要な機能が備わったサービスを選びましょう

たとえばリード獲得に力を入れたいのなら、リード顧客の流入経路がわかり、資料をダウンロードできる管理機能がついているCMSがおすすめ。ECサイトでセキュリティを万全にしたいのなら、改ざんを検知する機能やWAFなどのセキュリティレベルが高いCMSを選ぶと良いでしょう。

運用目的に応じたレスポンシブ対応しているCMSを選べば、簡単にレスポンシブ対応が可能です。

LeadGridは担当者も使いやすいレスポンシブ対応CMS

レスポンシブデザインは、HTMLとCSSを使って対応させられます。コーディングが難しい場合は、テンプレートを利用してみましょう。まだ自社のサイトがレスポンシブ対応していないなら、早急に対応することをおすすめします。

しかし記事を読んで「やはり自社でレスポンシブ対応させるのは難しい」とお考えなら、CMSを利用してみませんか?

LeadGridはマーケティングに強みがあるCMSなので、企業サイトやサービスサイト、ECサイトにもおすすめです。運用サポートも得られるので、思うような結果が出ないなどのお悩みがある場合は相談もできます。もちろん、レスポンシブ対応しています。

詳しいサービス内容はこちらのサービス紹介資料で紹介していますので、お気軽にダウンロードしてみてください。

LeadGridチームがWebサイト公開業務で使用しているチェックリストを紹介しています

公開前チェックリストを見る

リード獲得に強いCMS・Webサイト運用ツール LeadGrid

LeadGridを使えば、Webマーケティングに強いサービスサイト、オウンドメディア、コーポレートサイト制作をスピーディに制作可能です。

ページを見たまま編集できる「ページ編集機能」や「フォーム管理機能」など、Webの知識がなくても担当者ベースで施策が実行できます。

くわえてご希望の方には、WebマーケティングやSEOコンテンツの設計、運用、分析までトータルでご支援しています。

Webサービスやオウンドメディアの立ち上げ、コーポレートサイトリニューアルなど、御社のプロジェクトをお気軽にご相談下さい。

得意領域

  • Webマーケティングに強いWebサイト制作
  • サービスサイト、オウンドメディアサイトの立ち上げ
  • Webマーケティングの戦略設計、運用支援

記事を書いた人

LeadGrid BLOG編集部

LeadGrid BLOG編集部

LeadGrid BLOG(リードグリッド ブログ)は、リード獲得に役立つ情報を発信するWebマーケティングメディアです。

お役立ち資料

サイト制作、マーケティング戦略設計、コンテンツ制作、Webコンサルティング
関連のお役立ち資料をご紹介します。

Web制作・CMS開発・Webマーケティングに関してお気軽にご相談ください。

多くのWeb制作、オウンドメディア制作、Webコンサルティング、コンテンツマーケティングの実績から制作から運用・改善までトータルでサポートします。