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

良いウェブサイトに仕上げるために

ウェブサイトを開設、運営するのは知名度や利益を上げるためなので、そのウェブサイトを訪れたウェブユーザーにとって役立つコンテンツがあること、欲しい商品を取り扱っていることなどがお気に入りのウェブサイトになるかどうかの分かれ目になります。もちろん、見やすさも大切です。いくらお気に入りの商品があったとしてもゴチャゴチャしていれば見にくいので、同じ商品を扱う別の見やすいウェブサイトに流れていってしまうでしょう。逃がした獲物は大きすぎます。

そうなる前に、ネットユーザーにとって見やすくて良いウェブサイトに仕上げなければなりません。そのために様々な工夫が必要になってくるのですが、そのひとつがレスポンシブデザインです。

レスポンシブデザインってどんなデザインなの?

普段インターネットにアクセスするとき、普段からよくパソコンを使う人もいますし、スマホしか使わないという方もいるでしょう。そのため、同じウェブサイトでもそのウェブサイトにアクセスするときにパソコンだと見やすいけれどスマホだと見ずらいとか、その逆も考えられます。そこでレスポンシブデザインの出番というわけです。

レスポンシブデザインを取り入れることで、表示画面がどのようなサイズだとしても、それに適した見やすい表示を可能にすることができます。サイズはもちろんのこと、例えばパソコンで表示させたときの背景の色は水色にして、スマホからアクセスしたときはピンク色、タブレットからアクセスしたらオレンジ色など、細かく設定することができます。

レスポンシブデザインの定義とは

やはり昔に比べてインターネットにアクセスする方法が多様化してきたため、ウェブサイトを運営する際にパソコンユーザーだけに焦点を当てて運営することがNGとなってきました。スマホやタブレットでアクセスしたときも見やすくて何度でも訪れたくなるような作り方が大切と言われるようになりました。マルチデバイスの流れにうまく対応できるかどうか、これが良いウェブサイトと悪いウェブサイトの分かれ目になります。

2015年4月にGoogleではモバイルフレンドリーのアップデートを行ったため、これがきっかけとなりモバイルに対応したコンテンツ作りがしっかりできているウェブサイトの検索順位があがるようになりました。やはりパソコン、スマホ、タブレット、それぞれのユーザーに対応できるコンテンツ作りが重要なんです。

レスポンシブデザインの必要性

レスポンシブデザインのメリット

レスポンシブデザインのメリットは、ウェブサイトを管理するのがとても簡単で楽なところです。なぜなら、パソコン用、スマホ用、タブレット用など別々にHTMLを用意する必要はなく、ひとつのHTMLですべて更新や修正が可能だからです。それぞれの作業が一度で済むので管理が楽というわけです。

また、ウェブサイトのURLアドレスがひとつでいいので、ウェブサイトを見たウェブユーザーからシェアされやすい点もメリットのひとつと言えます。URLアドレスがひとつなのでスマホからアクセスしたウェブユーザーが、そのウェブサイトのアドレスをパソコンユーザーに送ってもパソコン用に画面が変換されます。もしも別々のURLアドレスだったらこうはいかず、スマホユーザーがパソコンユーザー用にパソコン用のURLアドレスを送らなければならなくなります。レスポンシブデザインは想像以上に大きなメリットがありました。

そしてなんといっても検索結果で上位に入りやすい点は大きいでしょう。レスポンシブデザインによってモバイルフレンドリーやモバイルファーストインデックスに対応するため、モバイル用の検索結果で上位に食い込む可能性が高くなります。

レスポンシブデザインをどのように仕上げていくか

レスポンシブデザインはパソコンにもスマホにもタブレットにも適したウェブサイトを作ることができるので、もしもスマホを使う頻度が多い若い層に強くPRしたい場合は特にレスポンシブデザインが適しています。このとき、文章でコンテンツをまとめるよりも、SNSのような画像を少し多めに並べてみたほうが伝わりやすいかもしれません。ただし、画像は文字に比べて読み込みが遅くなる可能性があるので、画像の使い過ぎには注意してください。

また、会社の商品をPRしたり、ネットショップのように商品を売るためにウェブサイトを運営する場合は、一人でも多くのユーザーに足を運んでもらう必要があります。商品の数が多ければ多いほどコンテンツがゴチャゴチャしがちで見にくくなり、ユーザーの足が遠のく可能性があるのでプルダウンを使うよりもレスポンシブデザインを取り入れて訪問者が見やすいウェブサイトに仕上げていきましょう。

レスポンシブデザインの作り方と確認する方法

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

レスポンシブデザインを作るために、まずはHTMLのヘッダーにmeta viewportタグを付け加えてください。訪問者がパソコン、スマホ、タブレッドのどれでアクセスした来たのか情報をキャッチするためのタグです。一般的に使われることが多いタグは以下になります。

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

このタグで訪問者がどの危機でアクセスしてきたのか、その機器の画面のサイズはどのぐらいなのか情報をキャッチすることができます。ここで情報をキャッチすることでパソコン用で表示したらいいのか、それともスマホ用で表示したらいいのか判断します。

次にCSSにパソコン向けとスマホ向けの表示方法の違いを入力していきます。パソコン向けのソースとしてよく使われているのは以下になります。

@media screen and (min-width: 481px) {※ここに通常のCSSを入れる }

スマホ向けのタグはこちらです。

@media screen and (max-width: 480px) {※ここに通常のCSSを入れる }

どのようにレスポンシブデザインを確認するか

HTMLの設定が終わったら、それらが正しく動くかどうか必ず動作確認をしてください。設定したあと、もしも正しく表示されなければ訪問者にとって役に立たないウェブサイトと思われてしまいますし、Googleクローラーからの評価も下がる一方です。

確認の方法はいくつかあります。ひとつはブラウザの機能を使って確認する方法です。Googlechromeの場合、ウェブサイトを表示させたあとに画面の上で右クリックしてください。その中にある「検証」を選びましょう。

そこで画面の上に表示された中にあるスマホの機種を選びましょう。これによってスマホで実際にアクセスしたときにどのように表示されるかが確認できます。このとき右側には設定したあとのCSSが表示されるので一緒に確認できます。うまく表示されたら問題ないものの、画面がおかしいようであれば修正が必要です。

そのほかにもウェブサービスを使用して確認する方法もあります。有料タイプや無料タイプがありますが、まずは無料タイプで試してみてはいかがでしょうか。スマホ・ブラウザテスト、タブレット・ブラウザテストなどと検索すると色んなサービスがヒットします。

そして最後にご紹介する確認方法は、やっぱり実機を使ってアクセスする方法です。いつでも無料で確認できます。実際にパソコンやスマホ、タブレットからアクセスしたときどのように表示されるか、一番確実に確認できる方法です。デジタルでありながらアナログチックな方法ではありますが、自分が訪問者の立場になって確認できる方法なので、確かな確認方法を実践した胃という場合は、やはり実機を使った確認方法をおすすめします。