レスポンシブデザインについて
レスポンシブデザインについて
前に説明をしたbootstrapですが、その最大の特徴はレスポンシブデザインに対応できている事です。
レスポンシブデザインとは、表示している画面の幅（PCモニターやiPad、スマートフォン）に応じて、横幅レイアウトが自動可変する方法です。
それまでは個別にデータを用意
それまでモバイル版ページを準備する場合、PC版のサイトとは別に用意する事がほとんどでした。
PC版とモバイル版とでは当然データが違うため、使う画像なども変えなければならず、構築するにも管理するにも手間が掛かっていたのです。
データが一つで済むようになる
ところがこのbootstrapが誕生した事で、画面幅によって自在にレイアウトを変える手法が簡単になります。
これがスマホ版ページ制作・浸透に拍車をかけたと言っていいでしょう。
つまりサイトデータをレスポンシブデザインで作る事で、様々な画面枠に対応する事ができるようになり、一元管理も可能になったのです。
レスポンシブデザインの仕組み
レスポンシブデザインの仕組みについて簡単に説明をしておきましょう。
クライアントに「レスポンシブデザインって何？」とか、「レスポンシブデザインでサイトをリニューアルして欲しい」等と言われた場合に、わかりやく説明・提案ができなければなりません。
画面の幅を感知する
通常WEBサイトは様々な幅の画面モニターで見られますよね。
表示させているモニター画面（パソコン・iPad等のタブレット・スマホ）によって、画面表示の枠幅は違います。
レスポンシブデザインとはその画面の幅を常に察知し、その幅に応じて表示枠が可変するレイアウトを構成する方法になります。
幅が固定ではなく常に「画面幅」
表示する画面によって見え方が変わる事を想定した設計ですので、iPadやスマホでも常に洗練されたレイアウトを見せる事ができます。
何よりも、このデザインを採用すればスマホ版サイトを別に構築する必要が無くなります。
一つのサイトデータ（HTMLサイト・Wordpressサイトいずれも）があれば、全ての領域端末に対応できる事になります。
端末を感知するユーザーエージェントの必要なし
以前は「PCからの閲覧だったらこのページ、スマホからだったらこのページ」というようにページを分けていました。
ユーザーの閲覧端末（ユーザーエージェント）によって表示させるデータをコントロールしていましたが、その必要もなくなる訳です。
bootstrapのCSSを採用する事で、レスポンシブデザインが簡単に実現できるようになったのが非常に大きいですね。
WEBサイトやテンプレートテーマが大量に誕生
それをかわきりにPC・スマホ一体型になったレスポンシブデザインのWEBサイトが大量に誕生しています。
今有料販売されているHTMLテンプレートはもちろん、Wordpressのテーマテンプレートもほぼ全て、レスポンシブデザインが採用されたテンプレートになっています。
ですのでテーマを利用する際にレスポンシブデザイン化しているかについて迷う必要はないと思います。
クライアントへの提案は100％レスポンシブデザイン
現在PCとスマホ版とでサイトが独立している案件も、リニューアルの際はほぼ間違いなくレスポンシブデザインでのリニューアルとなると思います。
費用がサイトリニューアル分だけで済みますし、管理もラクになりますのでこれ以上のメリットはありません。
クライアントへ提案できる機会があれば必ず提案していくべきです。
あわせて読みたい関連記事
メディアクエリの仕組み
では具体的にはどのようにbootstrapでレスポンシブデザインを実現しているのでしょうか。
それはズバリ、「メディアクエリ」によるコントロールです。
メディアクエリとは？
メディアクエリとは条件分岐クエリです。
・画面の幅が〇〇以上だったらデザインAを採用
・画面の幅が〇〇以上〇〇以下だったらデザインBを採用
という風に、画面幅毎に条件分岐をかけてデザインするのが「メディアクエリ」です。
常に画面の幅を読み取り、その幅の対象に入っている場合にのみ設定されるデザイン命令を書き込んでおく事で、その幅専用のコントロールができます。
CSSの条件ごとの優先ルール
基本的な命令と内容がバッティングする場合、別の記事「カスケ―ディングシステム（本流ルールと支流ルール）」の通り、優先された一つの命令が選択されると説明しましたよね。
メディアクエリ内で掛けた命令もそれに準じており、特定の条件下（画面幅）で自動的に最優先されるように仕組みになっています。
メディアクエリは構築済み
bootstrapは最初からこのメディアクエリによって基本的な枠組みに関する設定が全て構築済みとなっています。
このようにbootstrapは読み込むことですぐにメディアクエリが実現できるところが魅力ですよね。
では次に具体的にメディアクエリの書き方をご紹介しましょう。
メディアクエリ具体的な記述例
一つタグを例に取って書き方をご紹介しましょう。
blockquoteタグの基本設定（本流設定）が以下のようになっているとします（パディング幅の指定）。
CSSファイルの記載位置としてはメディアクエリよりも前（上）に書かれています。
CSS記述
blockquote { padding: 30px 20px 30px 80px; }
それに対しメディアクエリでの記述例は、上記よりも後（下）に記載されています。
CSS記述（スマホ版メディアクエリ部分）
@media only screen and (max-width:768px) { blockquote { padding: 30px 5px 30px 40px; } }
上記は画面の幅の最大が「768px」までの場合にのみ発動される命令となります。
これは画面幅が768px以下となる端末（例えばスマホ）で、この設定を採用する事を意味しています。
優先ルールの書き方
基本的には後からか書かれた方が優先されるルールなのですが、条件にヒットした場合にのみ上記メディアクエリ内に書かれた命令が優先して適用されます。
ですので厳密には上に書いても下に書いても効果は同じです。
まずはパソコンなどモニター画面の広い状態を想定した基本デザイン（セレクタやプロパティ）を構築します。
次に「スマホでの場合」という特定条件下でのセレクタやプロパティを記述します。
PC設定とスマホ設定とでセレクタやプロパティはバッティングしているのですが、メディアクエリで書いた方が優先されるのです。
あわせて読みたい関連記事
特徴：ハンバーガーメニュー
このメディアクエリによる制御機能として一番よく使われるのがメニュー部分です。
通常PC版のWEBサイトであれば、ヘッダー部分に横並びメニューがある事がほとんどだと思います。
しかしスマホでは当然幅が狭い訳ですから、その横並びメニューをそのまま映すわけにはいきません。
スマホ版のメニュー表示は複雑
ですのでまずスマホ版はメニューを縦に並べて閉じておく命令を入れます。
しかもボタンを押したら縦並びメニューが展開されるようにルールを設ける事が常識になってきています。
この時展開される際のボタンが「ハンバーガーメニュー」と呼ばれる3本線マークのボタンです。
メディアクエリを使ってこのような「メニュー部分の整備」をおこなう事ができるのですね。
あわせて読みたい関連記事
レスポンシブデザインとSEO
メディアクエリによる条件分岐は設定が非常にしやすく、レスポンシブデザインを簡単に構築できるメリットがあります。
しかしそれ以外に、WEBサイトをレスポンシブデザイン化しなければならなくなった明確な理由があるのですね。
それは検索エンジン対策（SEO）において新しい判断基準ができたためです。
SEOの新しい判断基準
ではなぜSEOの新しい基準ではレスポンシブデザイン化が必要なのでしょうか。
日頃閲覧されているメディアツール（機械）の変化
Googleの検索システムは今までパソコン版のデータを判定してその評価点を決め、順位に反映させていました。
しかし今はパソコンでの閲覧よりもスマホからの閲覧ユーザーが多いという逆転現象が起きています。
ここ数年でスマホサイトの普及が爆発的になり、スマホはあるけどパソコンを持っていない若者ユーザーが多くなりました。
モバイルファーストインデックス
Google側もこの時代の移り変わりを考慮し、「一般的によく見られている端末でのデータを常に検索判断の基準にするべき」と判断しました。
基本的な検索順位判定の元になるデータを「パソコンサイトからスマホサイト」へ切り替えると発表したのです。
これがモバイルファーストインデックスです。
レスポンシブデザインがスマホ化を助ける
貧弱なスマホコンテンツ
それまでスマホサイトはPCサイトとは別に用意されている事が多く、PCサイトに比べてある程度コンテンツが簡略化されたものである事がほとんどでした。
それがスマホ版が検索順位の判断基準のベースになると、今のスマホサイトのままでは順位が落ちる可能性があります。
となると大部分のWEBサイト運営者は困りますよね。その「助け船」となったのがこのレスポンシブデザインです。
このレイアウトであればパソコンであろうがスマホであろうが同じデータを見せるので、Googleの判断材料として不利な面を見せる事にはなりません。
移行期間を長く作る事で対応
Googleからこのモバイルファーストインデックスへ移行する事については、ある程度前からアナウンスがありました。
いきなり完全なスマホページを構築したり、レスポンシブデザインにリニューアルする事は難しいでしょうから、実施されるまでの準備期間を何年か設定していました。
その準備期間の間に、世界中のWEBサイトがどんどんレスポンシブデザイン化されていったのです。
準備期間を終えて強制移行に
今はWEBサイトによって、このモバイルファーストインデックスが既に採用されていたり採用されていなかったりしています。
しかし2020年中にも完全にスマホ版サイトがGoogleの判断基準のベースになり、その評価がパソコン版に反映する事になります。
つまり全てのWEBサイトでモバイルファーストインデックスが強制採用されるのです。
今からスマホ版サイトを用意する場合は、確実にレスポンシブデザインを採用したWEBサイトにしなければなりませんね。
