難しくない！レスポンシブデザインの基本から考え方のコツ | パソコンスキルと資格のSCワンポイント講座

web制作をしているとレスポンシブデザインが必須とされます。レスポンシブに対応したコーディングはどうやるのだろう、いざコーディングをしてみてもレイアウトが崩れてしまって難しい、何に気を付ければいいのか分からない…という意識をお持ちの方も多いかもしれません。

ここでは、レスポンシブなサイトの作り方から制作する上で役立つ考え方、CSSやHTMLを書く段階から意識したいポイントをご紹介します。基本の考えを押さえるとレスポンシブデザインのコツを掴むのに役立ちます！

レスポンシブデザインとは
レスポンシブなサイトの作り方
- HTMLにViewportを設定する
- CSSにメディアクエリを設定する
レスポンシブデザインを実装する考え方のコツ３つ【画像・CSS・幅】
まとめ

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

そもそもレスポンシブデザインとは、ユーザーが使用するデバイスが、PCやタブレット、スマホでも、それぞれの表示サイズに反応(responsice)して最適化されるデザインということです。

従来、PC版・モバイル版と分けてwebサイトを作っていたのが、レスポンシブデザインでは1つのHTML（URLとも）で表示し、CSSだけで切り替えられる点が大きなポイントです。

web制作側としてはあらゆる見せ方に対応するので大変にはなりますが、レスポンシブデザインのサイトは端末の違いによるエラーなどを避けられるため、ユーザビリティが高められます。Googleが推奨していることもあり、SEO的な観点も含めて今やレスポンシブ化することが必須となりつつあります。

レスポンシブなサイトの作り方

レスポンシブに対応したサイトの作り方を簡単に紹介していきます。
HTMLとCSSでレスポンシブ用の設定をするのは、レスポンシブデザインのweb制作において基本となる部分ですので、準備ができているか必ず確認しましょう。

合わせてコーディングの時点で注意したい点は、CSSをより有効にするため、CSSで調整できるものはHTMLで直書きしないようにすることです。

レスポンシブデザインを作るには、最初からレスポンシブ向けの設計や組み立てを目指すのが重要になるともいえますので、web制作時にはレスポンシブに対応した見せ方を常に意識することが大切です。

HTMLにViewportを設定する

まずは、HTMLの設定です。HTMLのヘッド部分に、viewport（ビューポート）というメタタグを入れます。レスポンシブ対応というとCSSのイメージがありますが、HTMLでも簡単な設定がありますので、うっかり忘れないように気を付けましょう。

<meta name="viewport" content="width=device-width">

こちらは基本的なビューポートの記述ですが、content=内で横幅や倍率、ズームの可否などを設定できます。倍率は指定しない場合、”initial-scale=1″の状態に設定されます。

CSSにメディアクエリを設定する

CSSでは、メディアクエリの設定をします。設定するCSSは、既に書いているCSSの下でも、各デバイス用やレスポンシブ用と別のCSSを用意しても大丈夫です。

さらに、メディアクエリでは「表示している画面の幅がいくつ以上(min-width)」あるいは「いくつ以下(max-width)の時」、という設定ができます。両方を合わせる(andで繋ぐ)ことで、幅がいくつ以上いくつ以下の時、という指定も可能です。

@media screen and (max-width:559px) { 
    /*　画面幅が559px以下の設定　*/
    a { color: #FFF }
}
@media screen and (min-width:560px) and ( max-width:1024px) {
    /*　画面幅が560px以上1024px以下はこの設定　*/
    a { color: #000 }
}
@media screen and (min-width:1025px) {
    /*　画面幅が1025px以上の設定　*/
    a { color: #111 }
}

このメディアクエリの下({}内)にいつも通り記述をすることで、画像幅の条件下でどのように表示するのか、切り替えポイントと内容を指定できます。
※メディアクエリで指定する値についてはここでは解説致しません。理由は後ほどご説明いたします。

レスポンシブデザインを実装する考え方のコツ３つ【画像・CSS・幅】

レスポンシブデザインを実装する上で必要な考え方は、Googleが推奨する理由にある通り、「ユーザーにとって使いやすいか」ということです。

ここで１番のポイントは、読み込み時間ともいえます。PCに比べるとスマホは通信速度が遅いため、PCに合わせてコーディングしてしまうと画像のサイズ等からもサイトが重くなり、サイトを開くのに時間がかかってしまいます。

見ようと思ってもなかなか開かないサイトは、入り口の時点でユーザーにとって使いづらいサイトとなってしまいます。つまり、サイトをいかに軽くするかを実装時に意識することが、レスポンシブデザインの最大のコツともいえます。

ここからの３つのポイントは、工夫することでユーザーにとってどのように良くなるのか、ということも一緒に考えながら読んで頂きたいです。

CSSでできる表現はCSSで実装する

とてもシンプルなことですが、CSSで表現できるフォントやアニメーションは、CSSで実装することを意識します。

例えば、特徴的なフォントを使いたい場合は表示したい文字を画像にして持ってくるのではなく、webフォントを使うと簡単ですし、無理に拡大縮小をしないためきれいに表示されます。また、CSS3では簡単な動きのあるページやロゴを表現することが出来るので、CSS3で出来ることを情報集しておくと表現の幅がひろがるのでいいかもしれません。何より、色や大きさの調整をほとんどCSSでできるのが便利ですので、実現できることも増えます。

ちなみに、ベタではありますが、webフォントに関してはGoogle Fontsがオススメです。web制作トレンドのフォントや、様々な文字の太さも使えます。アイコンでは、Font Awesomeを使うと、よく見るアイコンを選べますし、手軽にSNS等のロゴを表示できます。

積極的にCSSを使うことでサイト自体も軽くすることができ、よりレスポンシブになるともいえますので、制作中に思いついた表現はCSSで実現できるか、作れるものなのか、一旦考えてみるようにするといいと思います。

画像ファイルはサイズと幅指定で工夫する

サイトが重くなる理由の一つとして、PCサイズの画像が使われているということがあります。上記でも触れた様に、画像を使っていた特徴的なフォントはwebフォントを使ったり、画像を用意する時点で画像のサイズを減らしたりしておくことで、サイトを軽くすることができます。

最近は解像度の高いデバイスも多いので、画像サイズを減らす際は画質を落としすぎないように気を付けましょう。

また、画像を使う時には、HTMLに幅指定を直書きするのではなく、CSSで%指定すると細かい調整がしやすくなります。

/**HTML見本**/
<p class="example1" alt="画像例1">
<img src="aaa.jpg">
</p>
<p class="example2" alt="画像例2">
<img src="aaa.jpg">
</p>
<p class="example3" alt="画像例3">
<img src="aaa.jpg">
</p>

/**CSS見本**/
.example1 img {
	/*元の画像サイズ*/
	width: auto;
	height: auto;
}
.example2 img {
	/*横幅を画面いっぱいに表示*/
	width: 100%;
	height: auto;
}
.example3 img {
	/*ビューポートの幅に対して50%の幅で表示*/
	width: 50vw;
}

あらゆるデバイスに対応するためにも、画像の幅指定はCSSで％またはvhやvwといった可変的な単位を使うことを習慣づけるといいでしょう。

ウィンドウ幅に合わせて表示を切り替える

レスポンシブデザインで一番の肝になるともいえますが、最初に設定したCSSのメディアクエリを使って端末のウィンドウ幅に合わせて表示を切り替えます。

ウィンドウ幅で表示を切り替えるには、メディアクエリで切り替えるポイントを指定(ブレイクポイント)するのが一般的です。

ここでもやはり制作時のコツとしては、ブレイクポイントの条件下でコンテンツ幅を指定していくためにも、画像に限らずCSSで普段から可変的な単位を使うことで、柔軟に端末に対応することができるようになります。

@media screen and (max-width:559px) { 
    /*　この場合、559pxがブレイクポイント…559px以下の設定をここに書く　*/
    a { color: #FFF }
}

ブレイクポイントで指定する値は、スマホ・タブレット・PCで分ける場合も多いようですが、制作しているサイトのデザインによって変わりますし、例え同じ「スマホ」でも様々な幅のものがあったり新しい機種で幅が広がったりするので一概にどの値が良いとは言えません。

そのため、必ず最新版の端末サイズの情報や、ブレイクポイントのトレンドをチェックして知識をアップデートするようにしましょう。参考になるサイトを積極的に探しておくのも、ブレイクポイント以外のweb制作のトレンドを知ることができるのでオススメです。

結局のところ、制作中のデザインの見せ方やコンテンツに合ったブレイクポイントを自分で見つけるのがベストだと思います。ただし、ブレイクポイントが多くなるとメンテナンスが大変になるので１～２個が理想的です。

まとめ

レスポンシブデザインの基本的な考え方をご紹介しました。ユーザーにとって使いやすいか、見やすいかということを意識するだけで、よく分からないと感じていたレスポンシブのweb制作方法が少し分かったり、コツが掴みやすくなったりしたのではないでしょうか。

CSS3を使いこなすことはもちろん、ご紹介した以下の３点をweb制作では普段から意識していきたいですね。

CSS3で実現できるか考える
画像のサイズや幅の指定方法を意識してみる
ブレイクポイントを工夫してみる

最後までお読みくださり、ありがとうございました。