ブログやウェブサイトの「レスポンシブデザイン」とは？
こんばんは、しろもじです。
ブログのテーマなどを選ぶ時に「レスポンシブデザイン」という言葉を、耳にしたことがある方もいるかもしれません。
なんとなく「レスポンシブね、うんうん」と思いがちですが（笑）、今日はこのレスポンシブデザインとは何かというのを簡単に解説していきたいと思います。
レスポンシブデザインとは？
まず、レスポンシブデザインとは、どういうものなのかを簡単に解説していきます。
Responsiveとは「すぐに反応する」という形容詞になりますが、Webデザイン的な言葉では「ブラウザの解像度に合わせて、デザインを変更する」というものになります。
ウェブサイトを訪れる人のデバイスは、PCであったりタブレットであったりスマホであったり、様々です。
特に重要なのが「横の解像度」で、基本的にウェブサイトは「下にスクロールして見ていく」わけですから、横にはみ出してしまうと閲覧性が悪くなりますよね。
ウェブサイトを「横幅1200px（ピクセル）」で制作したとしましょう。
PCのブラウザならば、作った通りに表示されるはずです。
ところが、iPhone7だと320pxしか解像度がありませんし、iPad mini4でも768pxになります。
これらのブラウザでウェブサイトを閲覧すると「横にスクロールしないと、全体が見えない」ことになってしまいます。
そこで、ブラウザの解像度に合わせてウェブデザインを変えていくこと＝レスポンシブデザイン、というものが登場しました。
と、言葉で説明してもよく分からないかもしれませんので、実際に見ていきましょう。
まずは、普通のPCなどで見た場合です。
少し横枠を小さくしてみます。
もう少し縮めてみましょう。
随分見た目が変わってきましたね。今度はスマホで見てみましょう。最近はスマホからご覧いただくことも多いかと思いますので、この画像の方が馴染みがあるのかもしれませんね。
下2つの画像と、上2つの画像で、大きくデザインが変わっている箇所があるのですが、分かりますか？
まず、ひとつ目は「サイドバーが消えた」ということです。
正確には消えたわけではなく、一番下に移動しているのですが、アクセス時には見えなくなっていますよね。
もうひとつが、メニューの変化です。
PC表示では10個並んでいたメニューが消えて、5つのものに切り替わっています。
「menu」を押せば、メニューの一覧が出ますし「sidebar」を押せば、サイドバーが表示されるようになっています。
これは、使っているテーマによって仕様は異なりますので、一概には言えませんが、だいたいこんな感じになっています。
レスポンシブデザインと完全レスポンシブデザインの違い
WordPressを使ってウェブサイトを作る場合テーマを選択しますが、どのテーマを使っても今時のものであれば、だいたいレスポンシブデザインには対応しています。
ただ、中には「完全レスポンシブデザイン」と書かれているものもあったりして「完全？ 不完全なものもあるの？」と混乱してしまいそうになります。
この完全が付くかどうかと言うのは、テーマによって考え方が違いますし、最近では「完全」という言葉を敢えて使わないものも増えてきていますが、一応解説しておきます。
かなり前のウェブサイトデザインでは、アクセスしてきたブラウザを識別して「それは、このCSSを使ってね」というようにしていました。
ちなみにCSSとは「カスケーディング・スタイル・シート」の略で、ウェブサイトのデザインを決定する記述のことになります。
元々ウェブサイトはHTMLという言語で記述されていたのですが、徐々にデザイン性も重視されるようになり、HTML内にそれを記述できるようになってきました。
しかしその方法では、1ページ毎に同じ記述を繰り返さないといけないので、とても大変です。そこで「ウェブサイト本体の記述」と「デザインの記述」を分けようということになりました。
前者がHTMLで、後者がCSSになります。
これにより、CSSを変更すればウェブサイト全体のデザインを一括して変更できるようになり、管理がとても楽になりました。
つまり「PC用」と「タブレット用」と「スマホ（とかガラケーとか）用」にCSSを作っておき、ブラウザを「ユーザーエージェント」というもので識別して、それぞれのCSSを当てはめる、ということをやっていたのです。
でも、これも大変面倒になってきました。色々な端末が出てきて、いちいち対応していくのが難しくなってきたんですよね。
そこで、同一のCSS内に「解像度ここまではこのデザイン、ここからここまではコレ、そこから下はこれね」という記述をしておくようになってきました。
これを「完全レスポンシブデザイン」と、一般的には呼びます。
ただ、今はユーザーエージェントというのがあってないようなものになっていますので、原則としては「レスポンシブデザイン＝完全レスポンシブデザイン」と思って間違いありません。
サイト運営者は何をすれば良いの？
さて、それでは肝心のところ。
我々ウェブサイト管理者はどうしたら良いのか？ ということです。
これは非常に簡単で「レスポンシブデザインのテーマを採用しましょう」ということになります。
先程書いたように、今時のWordPressテーマのほとんどはレスポンシブデザインに対応しています。
あとは「見栄え」の問題になってきます。
テーマを後から変更しようとすると、少し手間がかかることがあります。
出来るだけ早い内に色々な端末で、どのように見えるのかを確認して、良さそうなテーマを選ぶことをおすすめします。
今日も最後までご覧いただきまして、ありがとうございました。
それでは、また。