今やタブレットやモバイルが多く普及し、サイトへのアクセスもデスクトップを上回るようになってきました。それだけに、小さい画面で閲覧するモバイルユーザーのことも意識してサイトを作るほうが親切ではないでしょうか。
レスポンシブデザインは必須？
レスポンスデザインとは
そもそもレスポンシブデザインとは何かを説明します。レスポンシブウェブデザイン（RWD）とは、ホームページをパソコン、タブレット、スマホそれぞれに合った形で表示できるように作られたデザインのことです。以前のようにパソコン用と携帯用のサイトを２つ作らなくてもよく、アクセスしてくる端末によってレイアウトや文字のサイズを変えてくれるので見やすくなります。
そんなに必要なの？
そこで、その重要性ですが実は意見が分かれるところです。スマホなども機能がどんどん良くなっていて、パソコンの画面でも十分に閲覧できるようになっています。昔のようにフューチャーフォン（ガラケー）が多いのであればそれなりの対応が必要ですが、スマホならパソコンの画面でも読めますからね。あえて対応しなくてもいいのではと思う方もいるようです。
ただ、デスクトップパソコンでインターネットを閲覧するより、モバイル端末でアクセスする人の方が数も時間も急激に増えています。これは実感としてわかりますよね。電車の中でモバイル端末を片手に操作している人、ものすごく多くないですか？エスカレータですれ違う人・・・半分は片手に携帯ですよ。ちょっと気持ちがわるいくらいです。
うわ！ちっちゃい。
さて、モバイル端末で閲覧する方が増えているのは事実です。そして、パソコンの画面そのままでも閲覧が可能なのも事実です。ただ、そのままスマホで閲覧するとものすごく小さく表示されますよね。指を使って拡大をすればよいのですが、上下左右にスクロールしないとコンテンツが見られません。これではモバイルフレンドリー（モバイルでも使いやすい）とみなされません。それで良しとするかどうかです。
PageSpeed Insightsでチェック
あとは、自分のサイトを客観的に分析することです。ひとつのツールに過ぎませんが、PageSpeed Insights というものが、PageSpeed Toolsから提供されています。これで、赤字でpoorと表示されたらちょっと動揺しますよね。これからこのサイトのやり方で新しくサイトを作られる方は、最新の技術をとりいれてつくっていきますので、poorにはならないと思いますのでご安心ください。古いやり方のままの既存のサイトは評価が低くなる傾向にありますのでチェックしてみてください。
レスポンシブ対応どうするの？
レスポンシブ化はCSSを使います
さて、どうやってレスポンシブ化をするのかというと、CSSで画面がこの幅だったら表示しないとか、余白や文字サイズをどうするとか、「横並び」を「縦並び」に変えるとか、そういうことを書いてあげるのです。難しそうですね・・・。
でも大丈夫です。WordPressにはレスポンシブ対応した「テーマ」が数多く存在しています。考えなくてもすでに自動的に対応してくれています。そして、このサイトで後に紹介するElementorで作成した記事については不具合なくレスポンシブ対応になっています。なので、よく分からなくても心配しないで、「そうなんだ。」と読み続けてください。
- @media (min-width: 737px) and (max-width: 1000px){
- .r,.l{
- float: none; margin: 0 auto; width: 100%;
- }
- }
これはCSSの一部です。例えば、画面のサイズが737pxから1000pxの時は、rやｌで指定した部分は、横並びを解除して縦並びに…余白は無くなって幅は100％にする。こんな感じです。
難しそうだと思うのですが、分かってしまえばそんなに大変なことではありません。なによりサイトを美しく見せるためにはCSSは必須なんです。サイトを自在にあやつりたいとなればここまで究める必要がありますが、CSSの知識が無くてもできるようにこの後解説していきますのでご安心ください。
レスポンシブ化は簡単？
CSSなんて難しそうな言葉を・・・。と思われた方もいらっしゃるのではないでしょうか。
本来はCSS（スタイルシート）で全て記述していくのですが、WordPressとこのElementorを使えば簡単です。なんと、デスクトップでどうするか、タブレットでどうするか、モバイルでどうするかと細かく設定することも可能です。そもそも、設定しなくても、レイアウトが崩れないようにある程度は自動でやってくれます。
大切なのは、レスポンシブ対応したWordPressのテーマを選ぶ（私は、SEOテンプレート【賢威】 
を使っています。）こと。そして、Elementorを使って記事を更新する。これだけで自動的にレスポンシブデザインになっていると思っていて大丈夫です。
ちなみに、これはElementorの機能の一部ですが、表示形式を変えることができます。私はデスクトップ画面のままで作業をしますが、モバイルに変更して確認したり、その画面を見ながら記事作成もできるのです。
Elementorのプレビュー機能は、まさにリアルタイムで公開画面を見ながら記事を更新できるので誰にとっても簡単です。
【資料】レスポンシブ化対応の歴史
WordPressの新しいテーマの多くはCSSを使ってレスポンシブ対応しています。もちろん、公式サイトでデフォルトでインストールされているものも大丈夫です。
私が使っているSEOテンプレート【賢威】 も、その前のSimplicityもレスポンシブ対応しています。
でも、その少し前となるとスマホが多く使われる時代ではなかったので、デスクトップ型のモニターのみを想定してつくられたテーマも結構な数であります。対処法としては、別に携帯用サイトを作成するかプラグインでなんとかする感じです。私も携帯用の別サイトを作ってみたり、プラグインを使ってみたりしてレスポンシブ化進めてきました。私はプラグインを使ってやることはもうなくなりましたが、記録の意味も兼ねて簡単に紹介します。
Multi Device Switcher
これは、アクセスしてくる端末によって表示するテーマを切り替えるというプラグインです。今まで使っていたパソコン用テーマの他に、モバイルに対応しているテーマを使うと良いというものです。今までにテーマを改造したことがある人であれば、スマートフォン用のページのカスタマイズも簡単に出来てしまうというすぐれものです。
リンクを貼ったりアドセンスを入れたり自由自在です。使い方は簡単。
プラグインをインストールして、ダッシュボードの外観から「マルチデバイス」を選択するだけです。
私のサイトの場合は、スマートフォンでアクセスされた時のみ「Twenty Fourteen」というテーマを表示するようにしました。このテーマにアクセス解析やカウンターを入れ忘れておけば、いままでのように統計を取ることも可能です。
デメリットは、テーマをスマホ用と携帯用を作成しなければいけないことと、記事の内容によってはレイアウトが崩れるということです。CSSを使ったレスポンシブ化がどうしても難しい場合はこれを試してみるのもアリかと思います。
WPtouch
Multi Device Switcherはスマートフォン、タブレット、携帯モバイル端末といろいろなデバイスを想定しています。それに対してWPtouch（WPタッチ）はスマートフォンのみを想定しています。プラグインをダウンロードして有効化するだけで基本的には使えます。
ktai_style
そしてこちらは、ガラケー（携帯モバイル端末）を想定して作られたプラグインです。2007年～2011年にかけて作成・更新されてきたものです。携帯電話で閲覧すると軽量化したサイト表示を行います。(フロントページのみならず、アーカイブページ、個別エントリーの URI も対象)
そして、ただ表示が変わるだけではなく、ページ容量が大きい場合、端末に応じてページ分割を行います (5KB〜50KB ごと)。画像を縮小・圧縮したり、カスタマイズしやすい携帯用のテーマがあったりと使いやすいものでした。広告も入れられたのでしばらく愛用させてもらっていました。