今やタブレットやモバイルが多く普及し、サイトへのアクセスもデスクトップを上回るようになってきました。それだけに、小さい画面で閲覧するモバイルユーザーのことも意識してサイトを作るほうが親切ではないでしょうか。

レスポンシブデザインは必須?

レスポンスデザインとは

 そもそもレスポンシブデザインとは何かを説明します。レスポンシブ (ウェブ) デザイン(RWD)とは、サーバーからどのデバイスに対しても常に同じ HTML コードを配信し、CSS を使用して各デバイスでのページのレンダリングを変える設定方法です。簡単に言うと、パソコン、タブレット、スマホそれぞれに合った形でページを表示するということです。(googleのデベロッパーツールのサイトに書いてありました。)

そんなに必要なの?

 そこで、その重要性ですが意見は分かれるところです。スマホなども機能がどんどん良くなっていて、パソコンの画面でも十分に閲覧できるようになっています。昔のようにフューチャーフォン(ガラケー)が多いのであればそれなりの対応が必要ですが、スマホならパソコンの画面でも読めますからね。あえて対応しなくてもいいのではと思う方もいるようです。ただ、デスクトップパソコンでインターネットを閲覧するより、モバイル端末でアクセスする人の方が数も時間も急激に増えています。これは実感としてわかりますよね。電車の中でモバイル端末を片手に操作している人、ものすごく多くないですか?エスカレータですれ違う人・・・半分は片手に携帯ですよ。ちょっと気持ちがわるいくらいです。

うわ!ちっちゃい。

 さて、モバイル端末で閲覧する方が増えているのは事実です。そして、パソコンの画面そのままでも閲覧が可能なのも事実です。ただ、そのままスマホで閲覧するとものすごく小さく表示されますよね。指を使って拡大をすればよいのですが、上下左右にスクロールしないとコンテンツが見られません。これではモバイルフレンドリー(モバイルでも使いやすい)とみなされません。それを良しとするかどうかです。

 ただ、デメリットばかりでもありません。パソコンと同じ見せ方をしているので、意図しないレイアウトの崩れは起こりにくいのです。モバイル対応すると、スマホなどの幅に合わせてレイアウトが変わるため不具合が起きている場合もあるのです。そのあたりを意識してサイトを作る必要があります。

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%;}}

 例えば、画面のサイズが737pxから1000pxの時は、rやlで指定した部分は、横並びを解除して縦並びに…余白は無くなって幅は100%にする。こんな感じです。難しそうだと思うのですが、分かってしまえばそんなに大変なことではありませんし、なによりサイトを美しく見せるためにはCSSは必須なんです。

▶ スポンサードリンク


レスポンシブ化は簡単?

 CSSなんて難しそうな言葉を・・・。と思われた方もいらっしゃるのではないでしょうか。本来はCSS(スタイルシート)で全て記述していくのですが、WordPressとこのElementorを使えば簡単です。後ほど実践編で詳しく書いていきますが、デスクトップでどうするか、タブレットでどうするか、モバイルでどうするかと細かく設定することも可能です。そもそも、設定しなくても、レイアウトが崩れないようにある程度は自動でやってくれます。

 大切なのは、レスポンシブ対応したWordPressのテーマを選ぶこと。そして、Elementorを使って記事を更新していれば、自動的にレスポンシブデザインになっていると思っていて大丈夫です。

 これはElementorの機能の一部ですが、表示形式を変えることができます。私はデスクトップ画面のままで作業をしますが、モバイルに変更して確認したり、その画面を見ながら記事作成もできるのです。

 Elementorのプレビュー機能は、まさにリアルタイムで公開画面を見ながら記事を更新できるので誰にとっても簡単です。