人気記事
レスポンシブデザインとは?実装までの手順も紹介!

皆さんこんにちは!たかだひかる(@hikaru_makemon)です!

 

皆さんはWeb制作を行う際、どんなことを意識していますか?

 

内容?デザイン?

 

正直どちらも意識することが一番大切ですよね。

 

しかし、どんなに良いに内容のものを作っても、見やすいデザインでなければユーザーは興味を示してくれません。

 

では、見やすいデザインとは何なのかというと、ズバリ!

 

レスポンシブデザイン

 

これに尽きます。Web制作を最近始めた方や基礎が抜けてきた方で「レスポンシブデザインって何なの?」と疑問に思われた方、大丈夫です。

 

この記事を読んで知ったかぶりを卒業しましょう!

 

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

 

皆さん普段インターネットで検索する時、何を用いて調べていますか?

 

パソコン?スマートフォン?タブレット?

 

私たちの生きる社会ではスマートフォンが普及したことで、以前に比べて多くの方がスマートフォンやタブレットなどの端末を利用してWebページの閲覧を行うようになりました。

 

しかし、便利なツールが登場したことで、同時に問題も発生するようになったのです。

 

では、その問題とは何なのか?

 

答えは簡単です。「使用する端末ごとに画面サイズが異なってしまう。」

 

これこそが発生した問題なのです。

 

横長のパソコンと縦長のスマートフォン。

 

もしスマートフォンの画面にパソコンのサイズが表示されたらどうでしょうか?

 

とても見づらくないですか?

 

そのため、閲覧者が使用している端末にあったサイズでサイトを表示することは必須であると言えるでしょう。

 

もし、閲覧者のためにパソコン用のサイトとスマートフォン用のサイトの2つを用意するのであれば、費用も時間もかかってしまいますよね。

 

しかし、その手間を簡単に省くことができるデザインが世の中には存在しているんです!

 

端末の画面サイズに対応させるデザイン = レスポンシブデザイン

 

レスポンシブデザイン(レスポンシブ対応)を利用することで、わざわざ2種類のサイトを作る必要もなく、

HTMLとCSSをいじるだけで簡単に画面サイズに対応させることができるのです。

 

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

Webサイトをレスポンシブ化することで、閲覧者がサイトを表示した際、使用している端末に応じて画面表示が最適化され、見やすくて操作性の高いサイトを表示することができます。

 

また、レスポンシブデザインでは、1つのHTMLファイルで複数デバイスに対応できるため、パソコン用とスマートフォン用のURLを統一することができます。

 

その結果、デバイスごとにページを用意する場合に比べて、被リンク数の分散を防げるためSEO対策にも効果があります

 

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

レスポンシブ化する際に注意しておく点もあります。

 

それは、「Webサイトが重くなる場合がある」ということです。

 

レスポンシブ化を行った場合もページ内のHTMLタグがなくなるわけではないため、見えない多くのタグも読み込まれることになります。

 

つまり、パソコン用のデータはスマホ版では重くて表示されないかもしれませんが、タグ自体は読み込まれるため、その分だけロードに時間がかかってしまうかもしれません

 

ただ上述したように、以前よりもスマートフォンやタブレットを用いてWebページを閲覧するユーザーが増えたため、特別な理由がない場合はレスポンシブデザインにしておくことをオススメします。

 

実装までの手順

ここまででレスポンシブデザインとはどういったものなのかわかってきたのではないでしょうか。

 

それではここからは実際に実装していくまでの手順をご紹介していきたいと思います!

 

viewportの設定

レスポンシブデザインを適用するためにまず行うことは、「viewportの設定」です。

 

こちらの設定を行うことで、ブラウザの標準設定を変更することができるようになります。

 

簡単に言うと、端末の横幅に対応してページを縮小するという設定を変更するということです。

 

そしてその変更を行うためには、HTMLに「viewport」を書き加える必要があります。

 

HTMLファイルを開いて <head>タグの中にこちらの一行を追加してみてください!

 

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

 

このコードを追加するだけであら簡単!これから実装するレスポンシブデザインが反映されるようになりました!

 

ちなみに!

 

viewportの設定はページごとに追加する必要があります!

 

他のWebページ(メニューやアクセスやお問い合わせページなど)のHTMLファイルにも上記のコードを追加しておきましょう!

 

メディアクエリを適用

 

HTMLファイルにviewportを書き加えることができたら、次はCSSにコードを書き加えていきましょう!

 

画面の幅に応じてCSSを適用する方法のことをメディアクエリと言います。

 

メディアクエリを適用するためには以下のコードを追加してみてください!

 

@media screen and (max-width: 1024px) { }

 

こちらのコードを追加することで画面サイズが1024px以下の場合は、PC版のサイズとは異なったサイズで表示することができます。

 

このように一定の数字以下、以上の場合画面サイズが変更される分岐点を作ることを「ブレイクポイントの設定と言います。

 

ちなみにどうして今回1024pxで設定しているのかというと、こちらはタブレットのサイズに合わせた数字となっています。

 

冒頭でもお伝えしましたが、現在スマートフォンに加えてタブレットでの閲覧者も増えていることからスマートフォン用のサイズだけではなく、タブレット用のサイズも設定しておくことをオススメします。

 

スマートフォン用のサイズを設定する場合は以下のコードを追加してみてください。

 

@media screen and (max-width: 670px) { }

 

これで670px以下の場合のメディアクエリを設定することができました!

 

しかし、これだけ設定してもレスポンシブ化したとは言えません。

 

メディアクエリを追加した後は、フォントのサイズや余白の調整、テキストの位置などが崩れている場合があるのでそれらの調整が必要になります!

 

調整はCSSで"padding"や"font-size"等々を用いて実装してみてください!

 

※「デバイスの画面サイズがわからない!」という方は、ページをGoogle Chromeで開いてデベロッパーツールを使用してみてください。そちらから各デバイスのサイズとページを表示した状態を確認できます!

最後に

 

いかがだったでしょうか。

 

今回はレスポンシブデザインの実装までを記しましたが、細かな調整は各々作成したいものによって異なってくるので注意が必要です!

 

レスポンシブ化することでユーザーの見やすいページ作りを行うことができるので、必ず理解して必要があれば実装していくことが大切です。

 

また、インターネットで調べればレスポンシブデザインのテンプレートも存在していますので、気になった方はそちらもお調べください。

 

ご清覧ありがとうございました!

Twitterでフォローしよう

おすすめの記事