初心者必見! レスポンシブデザインの作り方って? コピペできるCSSコードも紹介!

WEB戦略に基づくサイトリニューアル成功事例集BeforeAfter比較
今すぐ無料ダウンロード
WEB戦略に基づくサイトリニューアル成功事例集BeforeAfter比較
今すぐ無料ダウンロード
目次
    1. レスポンシブデザインとは?
    2. レスポンシブデザインの作り方の手順とは?
      1. meta viewportタグを入れる
      2. メディアクエリを記載する
      3. CSSで調整する
    3. レスポンシブデザインの作り方のコツ
      1. 画像のファイルサイズを小さくする
      2. 横向きのレイアウトに注意する
      3. モバイルフレンドリーなデザインに注意する
      4. ブレイクポイントの違和感を減らす
      5. モバイル用にテキスト量を減らす
    4. レスポンシブデザインが重要視されている理由
      1. モバイルフレンドリー
      2. SEOの評価が高まる
      3. ホームページの修正がしやすい
      4. リダイレクトが必要ない
      5. より多くのユーザーを確保できる
      6. コンバージョンに繋がりやすい
      7. 離脱率が下がる
    5. レスポンシブデザインを作る際の課題
      1. コストがかかる
      2. Webサイトの読み込み速度が少し遅くなる
      3. Webサイトの自由度が低い
    6. まとめ

無料で資料をダウンロード

※フォーム送信後、メールにて資料をお送りいたします。

WEB戦略に基づくサイトリニューアル成功事例集BeforeAfter比較

サイトリニューアル実例を、Before/After比較でご紹介!
 
■こんな方におすすめ
・サイトリニューアルをしようか迷っている方
・どのようなWebサイトの課題がある際に、リニューアルすればいいか分からない方
・実際に、他社がどのようなサイトリニューアルを行っているのか知りたい方
 
■資料内容
・BtoC,BtoBにおける、それぞれのリニューアル実例5種
・各実例における、Webサイトの課題とリニューアル施策内容
 
自社のサイトリニューアルをご検討の方は、ぜひご活用ください!
STEP 1


フォームでの問い合わせが
完了いたしました。
メールにて資料をお送りいたします。

レスポンシブデザインとは、様々なデバイスや画面サイズでサイトを閲覧するユーザーに最適な閲覧体験を提供するための設計手法です。昨今、パソコン、タブレット、スマートフォンなど、様々なデバイス普及しているため、どのデバイスでも同じコンテンツが適切なサイズや配置で表示されるようにする工夫は必要不可欠です。

また、レスポンシブデザインはSEOの観点からも重要です。Googleなどの検索エンジンは、ユーザーが利用するデバイスに合わせて最適なコンテンツを提供することを求めています。レスポンシブデザインによって1つのURLですべてのデバイスに対応したサイトを提供することができるため、SEO対策にも効果的だと言われています。

本稿では、レスポンシブデザインの作り方に焦点を当て解説していきます。基本的なHTMLやCSSの知識を前提とせずに、初心者でもわかるような実践的な内容を紹介しますので、レスポンシブデザインを取り入れたいと考えているWeb制作担当者の方は、ぜひ参考にしてみてください。

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

レスポンシブデザインとは、異なるデバイスや画面サイズに対応するWebサイトやアプリケーションのデザインを行なうことを指します。具体的には、パソコン、タブレット、スマートフォンなどの様々なデバイスで同じコンテンツを最適なレイアウトで表示できるといった技術です。

従来のWebデザインは、パソコンの大きな画面を前提にして作られているため、スマートフォンやタブレットなどの小さな画面では表示が崩れてしまうことがあります。しかし、レスポンシブデザインを採用することで、画面の大きさや解像度に応じて、コンテンツの配置やサイズを自動的に調整し、最適な状態に配置することが可能です。

レスポンシブデザインの利点は、ユーザーがどのデバイスを使っていても同じコンテンツを快適に閲覧できることです。また、1つのURLですべてのデバイスに対応したサイトを提供するため、SEOの観点からも有利です。デバイスの多様化が進む現代ではレスポンシブデザインを採用することがビジネスの成功につながると考えられており、多くの業界でレスポンシブデザインが取り入れられています。

レスポンシブデザインの作り方の手順とは?

通常のWebサイトの制作とレスポンシブデザインのレイアウトに違いはあるのでしょうか。ここでは、レスポンシブデザインを取り入れたWebサイトの作り方について紹介します。

  • meta viewportタグを入れる
  • メディアクエリを記載する
  • CSSで調整する

meta viewportタグを入れる

レスポンシブデザインを実現するためには、いくつかの手順を踏む必要があります。その中でも、必ず行わなければならないのがHTMLソースコードに「meta viewportタグ」を記入することです。meta viewportタグとは、ビューポート(画面表示領域)のサイズを指定するためのHTMLのタグです。

例えば、スマートフォンやタブレットのような小さな画面での閲覧を感知し、その画面に最適な状態で表示を行います。タグは以下の文言をそのまま<head>タグ内にコピーすれば問題ありません。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

このコードを入力することによって、ビューポートの幅をデバイスの幅に合わせ、初期表示時の拡大率を1倍に設定します。この作業により、画面に表示されるコンテンツがデバイスの画面に最適化されてユーザーが快適に閲覧できるようになります。

メディアクエリを記載する

次に、CSSファイル内にメディアクエリを記載しましょう。メディアクエリとは、CSSの機能の1つで、デバイスの種類や画面サイズなど特定の条件に合わせてスタイルシートを切り替えるための記述方法です。具体的には、以下のようなソースコードを入力するとよいでしょう。

@media screen and (max-width: 768px) {
/* 768px以下の画面サイズで適用されるスタイル */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 769px~1024pxの画面サイズで適用されるスタイル */
}

@media screen and (min-width: 1025px) {
/* 1025px以上の画面サイズで適用されるスタイル */
}

例えば、上記のコードでは768px以下、769px~1024px、1025px以上の画面サイズに応じて、それぞれ異なるスタイルを適用するように指定しています。基本的にはこの数値で指定しているレスポンシブサイトが多く、上記の項目をそのままコピー&ペースとしていただければ問題ないはずです。上記では「コメントアウト(/**/)」の部分にそれぞれのサイトにあったコードを入力すればレスポンシブデザインのWebサイトができあがります。

ただし、メディアクエリを使う場合は、多くのスタイルを記述することになるため、コードが複雑になりやすいというデメリットもあります。そのため、コードが煩雑にならないようそれぞれのメディアクエリに対して、必要最低限のスタイルを記述するようにすることが重要です。

CSSで調整する

CSSを使用すればWebサイトの画像やテキストのサイズ、レイアウトなどを調整することができます。上記で指定したメディアクエリに適用するCSSを入力していきます。

例えば、スマートフォンでは縦に表示されるコンテンツをタブレットやパソコンでは横に並べるなどの調整を施すことで、それぞれの画面でみやすいサイトができあがるでしょう。とはいえ、適切なCSSを入力するには基礎的な知識・技術が必要となるため、知識を保有しているWeb制作担当者が在籍していない場合には、外注も検討することが大切です。

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

次に、レスポンシブデザインを作る上で意識すべき5つのコツについて紹介します。

  • 画像のファイルサイズを小さくする
  • 横向きのレイアウトに注意する
  • モバイルフレンドリーなデザインに注意する
  • ブレイクポイントの違和感を減らす
  • モバイル用にテキスト量を減らす

画像のファイルサイズを小さくする

レスポンシブデザインを実現するために、画像のファイルサイズを小さくすることは非常に重要です。なぜなら、モバイル端末では通信速度が遅い場合があるため、大きな画像を読み込ませるとユーザーのストレスとなるからです。具体的な対策としては、画像の最適化ツールを使用する方法があります。こちらのツールを活用すると、画像の圧縮や最適化を自動的に行なってくれるため、手間を省きながら高品質な画像を小さなファイルサイズで表示することができるでしょう。

とはいえ、画像を圧縮しすぎると解像度が低くなりすぎ、Retinaディスプレイなどの高解像度デバイスでの閲覧体験が低下してしまいます。したがって、ある程度クオリティを保ちつつデータ量を低減させる工夫が必要です。

横向きのレイアウトに注意する

レスポンシブデザインを実装する際に、横向きのレイアウトにも注意を払う必要があります。スマートフォンやタブレットなどのモバイルデバイスは、縦向きと横向きの2つの向きで利用されることが多く、デバイスを横向きにした際にも適切に表示されるようにすることが重要です。横向きのレイアウトにも対応することで、ユーザーが自由な姿勢でデバイスを使用できるようになります。ユーザーにとって快適な環境を提供するためにも、横向きのレイアウトにも配慮したレスポンシブデザインを実装することが欠かせません。

モバイルフレンドリーなデザインに注意する

レスポンシブデザインを実装する際には、モバイルフレンドリーなデザインにも注意することが重要です。つまり、モバイルデバイスでの利用に適したデザインを意識する必要があるということです。モバイルフレンドリーなデザインには、以下のような特徴があります。

  • タップやスワイプなどの操作がしやすい
  • 読み込み時間が短く、軽量である
  • ボタンだとわかりやすい
  • 文字が小さすぎず、読みやすいフォントサイズとなっている
  • 画像が適切なサイズで表示されている
  • ナビゲーションがわかりやすく、直感的に操作できる

これらの点を意識しながら、モバイルフレンドリーなデザインを実現することが重要です。モバイルフレンドリーについては下記の記事でも詳しく解説していますので、併せてご覧ください。

ブレイクポイントの違和感を減らす

レスポンシブデザインでは必ず、ブレイクポイント(画面サイズの変化に合わせて表示を切り替えるポイント)が存在します。ブレイクポイント付近ではレイアウトが崩れたり、少し使いにくくなったりすることがあります。このような問題を回避するために、レスポンシブデザインを取り入れる上で、デバイスごとのデザインの変化が自然なものになるように注意する必要があります。ブレイクポイントを完璧な状態にすることは難しいですが、テストを重ねてユーザーが快適に利用できるような状態に仕上げることが大切です。

モバイル用にテキスト量を減らす

テキスト量の調整も重要なポイントです。モバイル端末の画面はパソコンに比べて小さく、文字や画像などが小さく表示されるため、多くのテキストが詰まっていると読みにくくなってしまいます。そのため、モバイル用に不要な情報を排除するなど読みやすいデザインを実現する必要があります。例えば、ホームページに常駐しているコンテンツをモバイル用に非表示としたり、お問い合わせフォームを別ページに飛ぶようにしたりすることで、少しみやすくなるでしょう。モバイルフレンドリーなサイトを作るためには、必要最低限の情報を提供し、シンプルなデザインを心がけることが重要です。

レスポンシブデザインが重要視されている理由

昨今、レスポンシブデザインが重要視されていますが、なぜ重要だと考えられているのでしょうか。ここでは、レスポンシブデザインが重視されている理由について再度まとめます。

  • モバイルフレンドリー
  • SEOの評価が高まる
  • ホームページの修正がしやすい
  • リダイレクトが必要ない
  • より多くのユーザーを確保できる
  • コンバージョンに繋がりやすい
  • 離脱率が下がる

モバイルフレンドリー

レスポンシブデザインは、現在のWebデザインにおいて、モバイルフレンドリーなデザインを実現するために最も有効的な技術となっています。スマートフォンやタブレットなど、モバイル端末の利用が増える中で、Webページの閲覧においてもモバイル端末の利用が主流となってきています。レスポンシブデザインはモバイルフレンドリーなデザインを実現する上で欠かせない技術だといえるでしょう。

モバイルフレンドリーについては下記の記事をご覧ください。

SEOの評価が高まる

レスポンシブデザインは、同じコンテンツを複数のデバイスに適応させるため、URLやコンテンツが統一されるためSEOの評価が高まります。また、Googleもレスポンシブデザインを推奨しており、モバイルフレンドリーなデザインを採用しているWebサイトは検索結果で優先的に表示されると言われています。

ホームページの修正がしやすい

レスポンシブデザインは修正や更新作業にも役立ちます。例えば、パソコン版のホームページとモバイル版のホームページを別々に作成する場合、修正作業や更新作業が二重に必要となり手間がかかってしまいます。しかし、レスポンシブデザインを採用することで同じコンテンツを一括管理できるため、修正や更新作業の手間を減らすことが可能です。

リダイレクトが必要ない

レスポンシブデザインは、同じURLで複数のデバイスに適応させるためURLのリダイレクトが必要ありません。レスポンシブデザインはWebサイトの運営において工数を削減できる点でも重宝される技術だといえます。

より多くのユーザーを確保できる

昨今、モバイルユーザーの割合が増加しており、レスポンシブデザインを採用することでモバイルユーザーにも快適な閲覧環境を提供することができます。その結果、より多くのユーザーを確保し、Webサイトの閲覧者を増やすこともできます。

コンバージョンに繋がりやすい

レスポンシブデザインは、あらゆるデバイスでの利便性を高める手法です。そのため、ユーザーがWebサイト上でアクションを起こしやすくなり、コンバージョン率が向上しやすいと考えられています。また、レスポンシブデザインを採用することで自社ブランディングを向上させられる効果もあります。

離脱率が下がる

レスポンシブデザインを取り入れれば、ユーザーに快適なWebサービスを提供できます。そのため、ユーザーの離脱率が低下し、長時間滞在してもらえる可能性が高まると考えられます。

レスポンシブデザインを作る際の課題

上記で示したように、レスポンシブデザインには様々なメリットがありますが、レスポンシブデザインを作る場合にはいくつかの課題があることを理解しなければなりません。ここでは、レスポンシブデザインで発生する3つの課題を紹介します。

  • コストがかかる
  • Webサイトの読み込み速度が少し遅くなる
  • Webサイトの自由度が低い

コストがかかる

レスポンシブデザインを実装するには、スマートフォンやタブレットなど複数のデバイスでテストを行ない調整する必要があります。そのため、デザインやコーディングの時間や労力が必要であり、コストがかかることが課題とされています。また、デバイスの種類や画面サイズが多様化しているため、新たなデバイスに対応するためのコストも発生する場合があるでしょう。とはいえ、レスポンシブデザインの導入によってより多くのユーザーを獲得しやすくなるため、費用対効果に関しては社内で検討する必要があります。

もしくは、ホームページ用のサイトとして作成するのではなく、モバイル端末の閲覧に特化したサイトを制作し、そこから少し調整してパソコン用に変化させる方法もあります。ターゲットを選びますが、こちらの制作方法のほうがコストを抑えられるため、予算を使えない場合には利用を検討してみることをおすすめします。

Webサイトの読み込み速度が少し遅くなる

レスポンシブデザインでは、メディアクエリごとにCSSやJavaScriptが使用されます。したがって、パソコン用のWebサイトよりも読み込み速度が少し遅くなる可能性があります。しかし、これはコンテンツを適切に最適化し画像のファイルサイズを小さくすることで解決することが可能です。

Webサイトの自由度が低い

レスポンシブデザインは、様々なデバイスでの閲覧に対応するための手法ですが、Webサイトのデザインの自由度が低くなるという課題があります。具体的には、特定のデバイスに合わせたデザインをすることが難しかったり、コンテンツの配置が制限されたりする場合があります。そのため、レスポンシブデザインを作る際にはWebサイトの機能やデザインについて細かく検討し、制限を受け入れる必要があるでしょう。

まとめ

本稿では、レスポンシブデザインの作り方に焦点を当て解説しました。レスポンシブデザインを取り入れたWebサイトは、多くのユーザーに閲覧されやすくなったり、複数サイトを持つよりも修正が容易だったりと様々な点でメリットがあります。しかし、取り入れる上ではサイト設計を入念に行なうなどコストがかかるのも事実であり、その点でレスポンシブサイトの制作を断念する企業も多いでしょう。

「自社のWebサイトが一般ユーザー向けだからレスポンシブデザインに対応させる」「企業向けだからレスポンシブデザインは取り入れない」「どこまでコストをかけられるか」など社内検討し、レスポンシブデザインを取り入れたWebサイトの制作を行なってみてください。