Web制作にレスポンシブデザインって必須？メリットやデメリットは何？
レスポンシブデザインってどうやったらいいんだろう？注意点とかある？
この記事では上の疑問を解決します。
レスポンシブデザインとは｜メリット・デメリット
レスポンシブデザインとは、画面の大きさに応じて表示が変わるWebデザインのことをいいます。
よくあるのが下のような分け方です。
画面幅が…
- 1000px〜→PC用デザイン
- 768px〜999px→タブレット用デザイン
- 〜767px→スマホ用デザイン
※一例なので、別の分け方もたくさんあります。
コーディングの流れとしては、まず、HTMLは共通で記述する。そして、CSSでは、まずベース部分を記述し、その後、タブレット用・スマホ用のデザインをコーディングしていきます。
ベース部分と専用タブレットに記述するものの具体例は下記の通りです。
- ページ遷移用のボタン
- 背景画像
- テキスト など
- ハンバーガーメニュー
- 縦並び→横並び
- 文字の大きさを小さく など
レスポンシブデザインのメリット
レスポンシブデザインのメリットは、ユーザー体験が高まることです。結果として下のようないいことがあります。
- ユーザーに目的の行動を促しやすくなる
- ユーザーの滞在時間が上がり、ファンが増える
- Googleからの評価が上がり、検索順位が上がりやすくなる（SEO対策）
レスポンシブデザインのデメリット
レスポンシブデザインのデメリットは、コーディングと読み込みに時間がかかることです。
レスポンシブデザインは《画面幅による場合分け》をしているので、Web制作者が記述するにも、コンピューターがページを記述するにも時間がかかります。
Web制作者にレスポンシブデザイン技術は必須？
Web制作者は原則レスポンシブデザイン技術は必須です。現在のスマホ所持率から、スマホ対応しているWebサイトを作ることはほぼ必須化しているからです。
もし、まだレスポンシブデザイン技術を身につけていない場合には、下のステップで簡単に身につけることができるので、試してみましょう。
レスポンシブデザインの作る5STEP
5STEPでレスポンシブデザインを実装できます。
まず、デスクトップに《test》という名前のフォルダを作ってください。※別のフォルダ名でもOKです
STEP①：HTMLファイルとCSSファイルを作成
《test》の中に、HTMLファイルとCSSファイルを作ります。名前は、HTMLファイル名を《index.html》、CSSファイル名を《style.css》にしましょう。
STEP②：meta viewportタグを追加
HTMLファイルに記述を加えます。《文字コードの宣言》や《スタイルシートの参照》など、必要事項をまず記載します（下記の通りでOKです）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>次に、下の1行をhead内に挿入します。画面幅によって異なるスタイルを指定する場合には必須になるコードです。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>ここまでできれば、HTMLの準備はOKです。
STEP③：メディアクエリを記述する
タブレット用・スマホ用のコーディングは下のように記述して、場合分けしていきます。
@media screen and (max-width:999px){
タブレット用のコード
}
@media screen and (max-width:767px){
スマホ用のコード
}STEP④：コーディングする
あとはHTMLファイル側でクラス名をつけつつ、CSSファイル側でスタイルを指定してあげてください。
STEP⑤：ディレベロッパーツールで確認する
ディベロッパーツールで画面幅を変えて確認しましょう。ディベロッパーツールは下の図のように、選択していけば開くことができます。※Chromeの場合
そして、タブレットやスマホなど異なる画面幅ものをみたい場合には、下の画像の赤枠部分を選択すれば、選択することができます。
レスポンシブデザインでよくあるブレークポイント
レスポンシブデザインでよくあるブレークポイントは下の通りです。※ブレークポイントとは、デザインが切り替わる幅のことです。
- インナー幅（1000pxが多め）
- 768px（タブレット幅）
この記事でも、上の《よくあるブレークポイント》に則って、説明していました。
人によっては、1024pxや1040pxをブレークポイントに指定します。場合によっては、ブレークポイントを一つしか設定しないケースもあります。
この辺りは、デザイナーやクライアント様と相談して決めるとよいでしょう。
レスポンシブデザインでよくあるパターンと実装方法
レスポンシブデザインでよくあるパターンと実装方法をお伝えします。
メニューをハンバーガーメニューにする
スマホ幅に横並びのメニューは入り切らないため、スマホの場合はハンバーガーメニューを使用するケースが多いです。
下の画像の赤枠に囲まれているのが、ハンバーガーメニューです。これを押すと、メニュー一覧が開きます。
実装方法は、jQueryで実装する方法や、CSSのみで実装する方法があるので、《ハンバーガーメニュー 作り方》などで検索してみてください。
文字や画像などを消す
PCでは表示していた文字や画像をスマホでは表示させないことがよくあります。この場合、消したい文字や画像に《display:none》のスタイル指定をしてあげます。
横並びを縦並びにする
横並びを縦並びにすることもよく行います。この場合、基本的に《flexbox》を利用します。
flexboxはブロックの並べ方の大枠を指定するコードなので、《justify-content》や《align-items》で細かい並べ方を指定することが多いです。
まとめ
この記事では、下のことについてお伝えしました。
- レスポンシブデザインとは何か
- レスポンシブデザインのメリット・デメリット
- レスポンシブデザインを使う5STEP
- よく使われるレスポンシブデザインのパターン
レスポンシブデザインを使いこなして、ユーザーに優しいサイトを制作してくださいね。
最後までお読みいただきありがとうございました。
