ホームページ制作において、レスポンシブデザインは重要な要素の一つです。
本記事では主に初心者の方に向けて、レスポンシブデザインがどういうものか、メリットとデメリットを示しながら、デザインの作り方も含めて説明いたします。
ホームページ制作を行う際にぜひ参考にしてみてください。
レスポンシブデザインとは？
レスポンシブデザインとは「閲覧ユーザーの使用するデバイスに合わせて、画面サイズや表示を最適化するデザイン」のことを指します。
最近ではWebページをスマートフォンなどのモバイル端末から閲覧することが当たり前になってきています。そのため、どのデバイスにも対応可能なレスポンシブデザインが注目されています。基本的には、一つのHTML（Webページを構成する言語）を使用して配信を行い、デバイスごとに用意したCSS（文章にどのような装飾を行うか決める言語）を設定して表示を変更させます。
レスポンシブデザインのメリット
レスポンシブデザインには、Webページの運営者だけでなく、ページを閲覧するユーザーや検索エンジンといった立場においてもメリットがあります。
管理が楽になる
レスポンシブデザインを取り入れることにより、PC版ページとスマホ版ページで異なるHTMLを用意する必要がなくなります。作業工数が減り、メンテナンスも簡単になり人為的なミスも減らすことができます。
SEOに有利になる
検索エンジンの代表であるGoogleでは、モバイルフレンドリーなページを優先して上位に表示させています。Googleの公式ガイドラインにおいても公表されています。
SNSでシェアされやすくなる
レスポンシブデザインを採用したページは、デバイス問わず1つのURLで表示されるため、SNSでシェアされやすくなります。一度拡散されたページはデバイス問わず表示可能となり、レスポンシブデザインを未採用のページと比較し拡散率を向上可能です。
レスポンシブデザインのデメリット
一方で、デメリットについてもおさえておきましょう。
知識やスキルが必要
デバイスを問わず自動で最適な表示を行うため、構築が複雑になり知識やスキルが必要となるでしょう。初心者には難易度が高く構築に時間がかかるため、専門家に依頼すると安心です。
スマートフォンでの表示に時間がかかる
一つのHTMLを使用するため、PCと同じデータをスマートフォンにも読み込ませます。
不要なデータまで処理しようとしてページの表示速度が遅くなる場合があります。
デザインに制約がある
PCとスマートフォンで大幅に見せ方を変えられません。また、スマートフォンに対応させるため小画面でコンテンツの整理を行う必要があります。
レスポンシブデザインの作り方
レスポンシブデザインの作り方は難しそうに思われがちですが、実はシンプルです。
大きく以下2つの流れで対応可能です。
①HTMLにmeta viewportタグを記述する
HTMLで作成したWebページであれば、全てのHTMLのヘッダー部に、WordPressの場合は「header.php」に以下のコードを記述します。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
この記述により、ページにアクセスしたユーザーのデバイス情報や画面サイズを把握できます。
②CSSファイルでの指定
Webページの見栄えを記述するCSSを指定すると、デバイスに応じたページサイズの切り替えが可能です。
まずはブレイクポイントを設定します。下記で画面サイズが481px以上の場合、PC版ページを表示可能です。
@media screen and (min-width: 481px)
次に下記で、画面サイズが480px以下の場合はモバイル版ページを表示可能です。
@media screen and (max-width: 480px)
レスポンシブデザインの参考ページ
レスポンシブデザインを取り入れる際に参考となるページを2つ紹介いたします。
Responsive Web Design JP
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーページです。
Web Design Clip
海外の優れたWebデザインページも紹介しているページです。
まとめ
スマートフォンなどのモバイルデバイスが普及した今、Webページ制作においてレスポンシブデザインを取り入れることは必須条件です。
また、SEO対策にもつながるため、メリットとデメリットをおさえた上でユーザーの満足度が高いWebページの制作が重要となるでしょう。
コメント