レスポンシブデザインの作り方を解説! 初心者向けにテンプレートも紹介
レスポンシブデザインの作り方を解説! 初心者向けにテンプレートも紹介
スマホからサイト閲覧する人の割合が増えた現代では、サイトのレスポンシブ対応が必須となりました。 そのため、デバイスに合わせた最適な画面表示ができるレスポンシブデザインが重要です。
レスポンシブデザインはユーザーにとって使いやすいだけでなく、サイト運営側にとっても管理しやすいなどのメリットがあります。
今回はレスポンシブデザインの作り方や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の日本の画面解像度統計において、もっとも多いサイズは以下のとおりでした。
(引用: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は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デザインチェックツールは、リキッドデザイン株式会社が提供するチェックツールです。
5種類のデバイスからの見え方がわかるので、一目で比較できます。表示画面のサイズを変え、デバイスの枠を取り外すことも可能。
横向きでの見え方もボタン一つで切り替えられ、直感的に使えるレスポンシブデザイン確認ツールです。
レスポンシブデザインのHTMLテンプレート紹介
コーディングが難しいとお困りなら、テンプレートを利用してみませんか?HTMLテンプレートを3つ紹介します。
- HTML5 UP
- 無料ホームページテンプレート.com
- TempNate
HTML5 UP
HTML5 UPでは、44種類のHTMLテンプレートが紹介されています。全てのテーマでライブデモを確認できるので、作成後のサイトをイメージしやすいのが特徴。サイトの目的や用途に合わせて、豊富な種類からテンプレートを選べます。
HTML5 UPは基本的に無料です。クリエイティブ・コモンズのライセンスクレジットを表示することで、改変や商用での利用も可能です。
クレジットを表示したくない場合は有料プランにする必要があります。有料プランにすると91種類のテンプレートが使えるようになります。
無料ホームページテンプレート.com
無料ホームページテンプレート.comには、HTMLテンプレートとWordPressのテンプレートがあり、どちらもレスポンシブ対応しています。
テンプレートは無料で利用できますが、ページの最下部にクレジットが挿入される仕様です。シリアルキー(2,980円)を購入すれば、クレジットを外せます。
現在、テンプレートの種類は186個。デモサイトやシミュレーターで、各デバイスからの見え方が一つずつチェックできます。
TempNate
TempNateでは企業サイトや学校などの教育関係、通販などにも対応したテンプレートが10シリーズ用意されています。
各シリーズにおいてカラーや幅のサイズ、設置するコンテンツの位置などのバリエーションが豊富です。
無料版ではフッター部分に著作テキストが表示されますが、3,900円の著作権表示削除サービスを利用すれば、著作テキストが削除できます。
ホームページ・テンプレートの設置方法が丁寧に解説されているので、初心者の方でも安心。ヘッダーやサイドバーなどのパーツや、画像素材もダウンロード可能です。
また、テンプレートではなく、よりオリジナリティのあるWebサイトを作りたい場合は直感的な操作性と自由度の高いデザイン性で評価の高い国産CMS「LeadGrid」がおすすめです。LeadGridは誰でも簡単に操作できるCMSで、使いやすいだけではなく、会社の特徴にあわせたWebサイトを提案することもできます。
無料配布資料「LeadGridサイト制作事例集」では、導入事例を詳しく紹介しています。LeadGridを使用した制作イメージをより具体的に膨らませたい方は、下記より無料でダウンロードし比較検討の際にご活用ください。
レスポンシブデザイン参考サイト
レスポンシブデザインの参考サイトを紹介します。
- RESPOSIVE WEB DESIGN JP
- SANKOU!
- 81-web.com
RESPOSIVE WEB DESIGN JP
RESPOSIVE WEB DESIGN JPでは、日本国内のレスポンシブ対応しているサイトを紹介しています。ただ単にレスポンシブ対応のサイトを集めているだけでなく、デザイン性の高いサイトを集めているのが大きな特徴です。
PC・タブレット・スマホ用のサイトが一覧となって見られるので、デバイスごとの切り替えをしなくてもすぐにデザインチェックができます。
SANKOU!
SANKOU!は検索フィルターが充実しており、探しているデザインを見つけやすいサイトです。企業サイトやサービスサイトなどのサイトの種類や、サイトの雰囲気や業種、サイトカラーなどをフィルターにかけられます。
現在、日本国内のレスポンシブ対応サイトやスマホサイトが、589種類紹介されています。
81-web.com
81-web.comの81とは日本の国際電話番号「81」に由来しており、日本国内のレスポンシブ対応サイトを紹介しています。サイトは日々追加されており、どれもデザイン性に優れたものばかりです。
カテゴリーやカラー、タグやWebフォントでの検索ができるので、参考になるサイトがきっと見つかります。
HTML・CSS以外でレスポンシブ対応させる方法
レスポンシブ対応させるにはHTML・CSS以外にも、さまざまな方法があります。
WordPressでサイト運用しているなら、プラグインの追加やテーマを変更することでレスポンシブ対応が可能です。既存のサイトをレスポンシブ対応させるなら、自動変換ツールも使えます。
また、レスポンシブ対応したCMSの利用もおすすめです。CMSはそれぞれ得意分野が異なるため、自社のサイトに必要な機能が備わったサービスを選びましょう。
たとえばリード獲得に力を入れたいのなら、リード顧客の流入経路がわかり、資料をダウンロードできる管理機能がついているCMSがおすすめ。ECサイトでセキュリティを万全にしたいのなら、改ざんを検知する機能やWAFなどのセキュリティレベルが高いCMSを選ぶと良いでしょう。
運用目的に応じたレスポンシブ対応しているCMSを選べば、簡単にレスポンシブ対応が可能です。
無料配布資料「CMS比較一覧表」ではコーポレートサイトやサービスサイト、オウンドメディアなどの各種Webサイトを制作する際に最適なCMSを機能別で比較できるよう一覧表にまとめました。ぜひ以下より無料でダウンロードし、比較検討にお役立てください。
LeadGridは担当者も使いやすいレスポンシブ対応CMS
レスポンシブデザインは、HTMLとCSSを使って対応させられます。コーディングが難しい場合は、テンプレートを利用してみましょう。まだ自社のサイトがレスポンシブ対応していないなら、早急に対応することをおすすめします。
しかし記事を読んで「やはり自社でレスポンシブ対応させるのは難しい」とお考えなら、CMSを利用してみませんか?
レスポンシブ対応にしているCMSなら、LeadGridがおすすめです。LeadGridはリード獲得に特化したCMSで、Webサイトから得たリードを一括管理できます。またリードの獲得経路も分析可能なため、各リードごとに適切な営業施策を走らせることも可能です。
さらに、使用時点でレスポンシブ対応しているため、PCやスマホ、タブレットなど、端末ごとに特別な設定を行うことなく最適化されたWebサイトを表示できます。
すでに100社以上で導入実績があり、コーポレートサイトや採用サイト、オウンドメディア、サービスサイトなど、あらゆるWebサイトで活用されています。
▼下記資料はLeadGridの導入実績です。サイト種別ごとの活用事例を知りたい方は、ぜひご覧ください。
今なら無料デモを提供中です。「まずは使ってみて、それから使用を検討したい……」という方は、ぜひ14日間の無料デモをお試しください。
LeadGrid BLOG編集部は、Web制作とデジタルマーケティングの最前線で活躍するプロフェッショナル集団です。Webの専門知識がない企業の担当者にも分かりやすく、実践的な情報を発信いたします。
Interview
お客様の声
-
採用力強化を目的に更新性の高いCMSを導入し、自社で自由に情報発信できる体制を実現した事例
株式会社ボルテックス 様
- # 採用サイト
- # 採用強化
- # 更新性向上
Check -
直感的な操作性・自由に構成を変更できる柔軟性により、理想のサイト運営が可能になった事例
株式会社フォーカスシステムズ 様
- # コーポレートサイト
- # 更新性向上
- # 採用強化
Check -
ロゴ・サイト・モーション、すべてのデザインに世界観を込めたリブランディング事例
circus株式会社 様
- # コーポレートサイト
- # 更新性向上
- # リブランディング
- # 採用強化
Check -
物流DX企業として信頼いただけるようなサイトデザインに刷新し、SEO流入も増加した事例
三菱商事ロジスティクス株式会社 様
- # コーポレートサイト
Check
Works
サイト制作事例
SAAFホールディングス ㈱ 様 - コーポレートサイト
- # コーポレートサイト制作
㈱ エスネットワークス様 - コーポレートサイト
- # コーポレートサイト制作
㈱ レイ様「コミデ」ユニット - コーポレートサイト
- # コーポレートサイト制作
㈱ ボルテックス様 - 採用サイト
- # 採用サイト制作
㈱ フォーカスシステムズ様 - コーポレートサイト
- # コーポレートサイト制作
㈱ エブリー 様 - コーポレートサイト
- # コーポレートサイト制作