WordPressでのレスポンシブデザインの作り方！おすすめテーマやCSS編集方法も解説

あなたが運営しているサイトは、スマホに対応しているでしょうか？

スマホに対応したサイトにすることで、より多くの人が見てくれる可能性も高くなります。

そこで今回は、WordPressでレスポンシブデザインにするメリットやデメリットから、具体的なやり方、レスポンシブデザインにおすすめのテーマやプラグインなどについて初心者にもわかりやすくお伝えします。

レスポンシブデザインをはじめ、プログラミングを本気で学ぶなら、おすすめのプログラミングスクールを利用しましょう。

レスポンシブとは？

レスポンシブとは、パソコンやタブレット、スマホなどの複数の異なる画面サイズでも外観や操作方法を最適化したWebサイトを制作するためのWebデザインの手法です。

レスポンシブとは、サーバーからどのデバイスに対しても常に同じHTMLコードを配信し、CSSを使用して各デバイスでのページのレンダリングを変える設定方法です。 すべてのGooglebotユーザーエージェントがページとそのアセット(CSS、JavaScript、画像)をクロールできる状態であれば、Googleのアルゴリズムによってこの設定が自動的に検出されます。

Google Developers

Google検索エンジンは、3種類のモバイルサイトを認識しています。

• レスポンシブデザイン
• PHPなどで作られ、実際のHTMLは存在していない動的な配信
• PC向けのHTMLとモバイル向けのHTMLを別々に用意してURLが分けられている状態

また、Googleでは、レスポンシブデザインの使用を推奨されています。

レスポンシブデザインの場合は、どのデバイスに対しても同じURL、HTML、CSSを使用するため表示エラーが起こりにくいです。これによって、ユーザビリティが向上し、Google検索エンジンのクローラーの巡回の手間が少なくなります。

そのため、Googleはレスポンシブデザインの使用を推奨しています。続いて、レスポンシブデザインに対応するメリットとデメリットについて紹介します。

レスポンシブ対応をするメリット3つ

まずは、レスポンシブ対応するメリットです。

デザインが表示端末に合った大きさに変えられる

最近は、インターネットを見る際に、パソコンやスマホ、タブレットなど閲覧デバイスが増えてきました。

実際のところ、この記事をスマホで読んでいるという方も多いのではないでしょうか。このように、レスポンシブ対応させることで、どのデバイスでも見やすいように表示してくれます。

レスポンシブは端末の画面サイズに依存しないため、今後新たに登場する端末に対しても対応することができます。

1つのソースで管理できる

また、レスポンシブを導入することによって、PCサイトとスマホサイトでHTMLが別構築されていません。

それによって、サイトのメンテナンス工数を削減することができます。さらに、1つのHTMLを更新するだけでどのデバイスでも同じ状態になります。そのため、ミスが少なくなり、修正も簡単にできるようになります。

SEOに有利

最後に、検索エンジンによる被リンク数の評価は、検索順位に影響を及ぼします。

仮に、デバイスごとにWebページを用意した場合、そのページごとに評価されてしまいます。そのため、検索エンジンによる被リンク数の評価が低くなることがあります。

一方、レスポンシブにすることによって、1つのファイルで複数のデバイスに対応することができます。そのため、デバイスごとにページを用意する場合に比べ、被リンクの分散を防ぐことができます。

プログラミングやWebデザインを学ぶと、自分でレスポンシブの設定ができるようになります。コーディングできれば、Webサイトのデザインの幅を広げられるのがメリットです。

レスポンシブ対応をするデメリット2つ

一方、レスポンシブ対応するデメリットには下記が挙げられます

CSSのデザインが複雑

レスポンシブは、自動で複数の端末に対応できます。

しかし、デザインを考える際には、デバイスごとの特徴を考慮しなければなりません。複数の端末に対応してくれますが、縦向きと横向きのそれぞれの向きでデザインが崩れないように考えることが必要になります。

そのため、対応させる端末ごとにデザインを用意し、HTMLのコーディングが複雑になり、チェックすることが必要になります。そうするとCSSのデザインが複雑になり、初心者には構築に時間がかかってしまいます。

レスポンシブデザインをはじめ、プログラミングを本気で学ぶなら、おすすめのプログラミングスクールを利用しましょう。

Webサイトが重くなることがある

レスポンシブでは、ページを表示する際に見えていないタグの部分も読み込まれます。

例えば、横幅1200pxの場合は画像を表示するが、横幅480pxの場合は画像を表示しないというようにHTMLを構築したとします。仮に、480pxで画像を表示しないようになっていたとしても、一度そのタグを読み込もうとします。

そのため、サイズが大きい画像をサイト上で使用する場合、スマホサイト上では表示速度が落ちてしまい、動作が重くなってしまうことがあります。

このようにレスポンシブデザインには確かにデメリットもありますが、世の中の多くの人がスマホでインターネットのサイトを閲覧する機会は今後も増えていくことは間違いありません。続いては、WordpressでのレスポンシブCSSの書き方や、Wordpressをレスポンシブに対応させるための設定方法についてお伝えします。

WordPressをレスポンシブ対応にするCSSの書き方

まず結論ですが、レスポンシブ対応させる場合は、メディアクエリを使っていくようになります。

メディアクエリとは、表示された画面環境に応じて適用するスタイルを切り替える機能。

IT用語辞典 e-Words

簡単に言うと、「スマホやタブレットなどにレスポンシブ対応させるための機能」になります。

このメディアクエリはHTMLとCSSだけで制御していくことになりますので、実装するのは難しくはありません。実際にレスポンシブ対応する時にやるべきこととしては、以下の2つです。

1. viewportを設定する
2. CSSでメディアクエリを指定する

① viewportを設定する

まず、レスポンシブを導入する際にviewportとメディアクエリの設定を行います。

Viewportは、アクセスしているデバイスの横幅を取得します。取得した値に応じて、パソコンやタブレット、スマホのそれぞれに対応したCSSで画面に出力します。

デバイスの横幅を取得するためには、以下のviewportをHTMLのヘッダー部分に設置します。(横幅を「ブレイクポイント」と呼ぶこともあります。)

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

それぞれの意味は次のようになります。

• width=device-width：端末画面の幅に合わせる
• initial-scale：初期のズーム倍率
• minimum-scale：最小倍率
• maximum-scale：最大倍率
• user-scalable：ズームの操作(yes or no)

contentの最初に書いてある「width=device-width」は、レスポンシブ対応させる際には必須項目になりますので、忘れずに記述しておきましょう。

② メディアクエリでCSSを指定する

viewportで取得した横幅に応じて使用するCSSを指定します。

横幅の数値は任意なので、様々なデバイスがあり、悩むこともあるかもしれませんが、おおよその目安としては以下のようになります。

• パソコン：横幅769px以上
• タブレット(android)：横幅768px
• スマホ(android)：横幅640px

OSによって横幅は異なってきますので、実際の画面を見ながら試してみると良いです。

具体的には、CSSに以下のように記述します。

/* pc */
@media screen and (min-width: 769px) {
/*ここにpc用スタイルを記述*/
}

/* tablet  */
@media only screen and (min-width: 641px) and (max-width: 960px) {
/*ここにtablet用スタイルを記述*/
}

/* smartPhone */
@media screen and (max-width: 640px) {
/*ここにスマホ用スタイルを記述*/
}

以上が基本的なレスポンシブデザインのためのコードとなりますが、「難しい…」と感じた方は、最初からレスポンシブデザイン対応しているワードプレスの有料テーマを利用されるのがおすすめです。

レスポンシブ対応のWordPressのおすすめテーマ3つを比較

ここではレスポンシブに対応したWordPressのテーマを3つほど厳選してご紹介します。

これらのテーマは最初からレスポンシブに対応しているので、レスポンシブに対応したWebサイト構築する手間であったり、コードを書く手間を減らすことができます。実際のところ、ワードプレス初心者は最初からレスポンシブに対応していて、日本語にも対応しているWordPressのテーマを利用された方が手間もかからないのでおすすめです。

STREETIST

画像出典：STREETIST

まず、WordPressテーマ 「STREETIST」はオシャレなデザインで表示も高速なWordPressテーマです。

SEO関連の設定も豊富で、設定も簡単なので、初心者にも優しい作りになっています。 ブログ初心者、デザインにこだわるブロガー、メディア運営者など、オシャレなデザインのブログを運営する方におすすめのテーマです。

サイトの表示が遅くなり、利用者がイライラするという問題が起こらなくなります。テーマ側で不要とされる部分を排除してくれるため、自分でWordpressを軽くさせる必要がありません。素早く表示させたいと思う方には使いやすいでしょう。

また、街をイメージしたデザインは、多くの人を引き付けてくれます。どのようなジャンルでも導入しやすく、いいイメージを与えてくれます。

さらに、STREETIST[ストリーティスト]では、Googleアドセンスを導入しやすい仕組みが採用されています。アドセンスの位置を任意で調整できるメリットがあるほか、自動で位置を調整して表示させる方法もあります。

STREETISTの公式サイトへ

New Standard

導入事例掲載数が300件を突破しており、集客できる事業用WordPressテーマが「New Standard」です。

「New Standard」は、WordPress有料テーマでは珍しい購入前の無料お試し体験が14日間可能です。集客をしたい個人事業主や小規模企業の経営者におすすめのテーマで、初月は無料のテクニカルサポートも付いています。

ワードプレステーマ『New Standard』の一番のメリットは、コーポレートサイトを起点にしたインバウンド型のWeb集客会社として確かな実績を持つ株式会社ninoyaがそのノウハウを詰め込んでいることです。

ninoyaは「Web集客 コンサル」「PR施策」「本 宣伝」など多数の検索1位表示、自社メディアのSNSシェア数30,000件超、多くのマスコミからも取材を受けるなど名実ともに優れたWeb集客会社です。

そのノウハウを詰め込んだワードプレステーマ『New Standard』を使うことで高い集客効果が期待できます。当サイトも有料テーマを使ってワードプレスで運営していますが、やはり初心者の方ほど有料テーマを利用した方が、余計なことに悩まされないのでおすすめです。

New Standardの公式サイトへ

Emanon Pro

画像出典：Emanon

Emanonは、内部SEO対策が施されているWordPressのテーマです。

Google Adsenseなどの広告をサイドバーや記事に表示できる「広告設定機能」や、SNSでシェアされたときにアイキャッチ画像を表示する「SNS用OPG設定機能」などこのテーマ独自のカスタマイズメニューが多く用意されています。

このテーマでは無料版も用意されていますが、きちんと対応するのであれば有料版のEmanon Proがおすすめです。

＼集客に特化したWordPressテーマ！／

プラグインを使ってワードプレスをレスポンシブ対応させる方法

続いて、直接コードを書くのではなく、プラグインを使うことで対応することも可能です。

プラグインによっては、自動的にスマホやタブレット向けのページを生成してくれます。プラグインの場合、インストールして有効化するだけで、すぐにスマホやタブレット向けのページを生成してくれます。

なので、プログラミングができない方であっても、最低限使う分には難しい設定はほとんどありません。そこで今回は、レスポンシブ対応できるプラグインを5つ紹介します。

WPtouch Mobile Plugin

WPtouch Mobile Pluginは、スマホ向けのサイトを自動生成してくれるプラグインの中でも特に人気があります。

設定で「Japanese」を選択さえすれば、管理画面が日本語表記になります。このプラグインは「WPtouch」の無料版のプラグインなので、使用できる機能は限定されています。

ですが、バージョンアップされたことによってデザインは非常に洗練されるようになってきました。

WordPress Mobile Pack

WordPress Mobile Packは、モバイルアプリのようなきれいなデザインとUIに変えることができます。色やフォントの設定も細かくできるので、自由にデザインを変更することができます。

また、簡易的ではありますが、アクセス解析機能も付いています。そのため、Webサイトを閲覧しているユーザーの中に「どれだけスマホなどのモバイルユーザーがいるのか」ということも知ることができます。

MobilePress

MobilePressは、スマホ向けのサイトを自動生成してくれます。このプラグインも無料版なので機能は限定されていますが、専用テンプレートのカスタマイズもできます。

Any Mobile Theme Switcher

Any Mobile Theme Switcherは、ユーザーが使用している端末に合わせてテーマを自動的に切り替えてくれます。

機種ごとにテーマを細かく設定できるので、端末に合わせて最適化することができます。

WordPress PDA & iPhone

WordPress PDA & iPhoneは、iPhoneやタブレット端末向けのサイトを自動生成してくれます。難しい設定は一切なく、インストールすればすぐに利用することができます。

このプラグインは英語表記になっていますが、デフォルトの専用テンプレートがシンプルで洗練されたデザインになっています。

WordPressのレスポンシブ対応方法に関するまとめ

今回はWordPressのレスポンシブ対応についてお伝えしてきました。CSSを自分でいじっていくのは不安な方やプラグインのアップデートなどに不安がある方は、すでにレスポンシブに対応した有料テーマを使うのも一手です。

それだけでもスマホやタブレットでも見やすくなるので、アクセスが自然と集まるようになるでしょう。