無料WordPressプラグインでレスポンシブ（スマホ対応）のデメリットを解消！スマホ/PC表示切替できる「LIQUID RWD PLUS」他

アクセス解析などを見るとiPhoneやAndroidのスマートフォンのユーザーが増え、WEBサイトを近年スマートフォンから見るユーザーが増えてきています。

そのためWEBサイトで重視されている機能の1つとしてレスポンシブ・WEBデザインを取り入れているものが増えてきています。

レスポンシブ（スマートフォン対応）はもちろんメリットは大きいもののきちんとデメリットも把握しておく必要があります。

メリットは維持したまま、デメリットを少しでも解消したいですよね？

今回はデメリットを簡単に解消できるプラグインがWordpress公式プラグインとしてリリースされましたので紹介します。

デモ（※スマートフォンでご覧ください）

• 「Twenty Fifteen テーマ」

提供元

• WordPress公式プラグイン「LIQUID RWD PLUS」

まずはレスポンシブって聞くけど何なのか、そこから説明していきます。

• レスポンシブ（スマートフォン対応）とは
• レスポンシブ・WEBデザインのメリットは？
• レスポンシブ・WEBデザインのデメリットは？
• スマホ/PC表示切替できるWordpress公式プラグイン「LIQUID RWD PLUS」

レスポンシブ（スマートフォン対応）とは

レスポンシブの正式名称は、「レスポンシブ・WEBデザイン（Responsive Web Design=RWD）」といい、いろいろな多種なディバイス（機器）でWEBサイトを閲覧できるようにするWEBサイト制作の手法をいいます。

つまり、自動的にスマートフォンやタブレット、パソコンなどの異なる表示サイズをそれぞれ柔軟に最適化し見やすくするWEBサイト制作の手法になります。

レスポンシブ・WEBデザインのメリットは？

スマートフォンやタブレットでも見やすい

同じiPhoneといっても画面のサイズが異なります。他にもAndroidやタブレットなど様々なディバイス（機器）でも見やすくなるため、ユーザビリティを高めることになります。

URLが同じで利用できる

同一のサイトでもそれぞれのURLに分ける必要がなく、PCでもスマートフォンでもタブレットでも同じURLで閲覧することができます。

SEOに有利

Googleでもレスポンシブ・WEBデザインを推奨されています。

英語表記では「Mobile Friendly」とされていますが、モバイルのGoogleで検索するとレスポンシブ（スマートフォン対応）されている場合にはサイトの説明の前に「スマホ対応」と記載されるようになっています。

この「Mobile Friendly（モバイルフレンドリー）」に認定されていない場合、モバイルでの検索結果が下がることもあります。

レスポンシブ・WEBデザインのデメリットは？

転送データ量が増える

転送データ量が増えるというデメリットは、レスポンシブ・イメージという機能で解消することができます。

レスポンシブ・イメージとは、解像度別の画像を自動的に書き出し、各デバイスに最適なサイズの画像を表示する機能です。（HTML5のsrcsetという仕様を利用しています）

レスポンシブ・イメージは、WordPress 4.4から標準搭載されています。なので、実はプラグインなどは不要で、デメリットは解消していました。ただし、4.4以下（4.0以上）の場合は下記プラグインが必要です。

WordPressプラグイン
「RICG Responsive Images」（レスポンシブ・イメージを推進するRICG公認プラグイン）

• https://wordpress.org/plugins/ricg-responsive-images/

スマートフォンやタブレットでPCの表示ができない

いつもサイトを見るユーザーがPCやスマートフォン、タブレットでは見る表示が異なるため、いつもPCで見ていたサイトでもスマートフォンやタブレットで見るといつも見ていたリンクや画像がないなどどこにあるのかわかりません。結果、ユーザビリティを下げることになります。

メジャーなレンタルBlogシステムや官公庁のホームページではレスポンシブでもPCイメージへの表示切替ボタンがついていますが、Wordpressのテーマではまだまだ設置されていないものが多いです。

こちらを解消してくれるWordpress公式プラグイン「LIQUID RWD PLUS」を下記で紹介します。

スマホ/PC表示切替できるWordpress公式プラグイン「LIQUID RWD PLUS」

上記で記載していますが、レスポンシブWebデザインのデメリットとしてあげたスマートフォンやタブレットでPCの表示ができない部分を簡単にPC表示とモバイル表示との切り替えボタンを表示させることができるWordpress公式プラグインです。


プラグインの設定は不要で、プラグインを有効、無効とするだけで簡単に設定ができます。ユーザーが選択した表示方法をCookieに保存され、WEBサイト全体で適用されます。

但し、テーマによってうまく表示されない場合もありますが、無料のWordpress公式プラグインなので一度インストールして試して見てみるといいかもしれません。

デモ（※スマートフォンでご覧ください）

• 「Twenty Fifteen テーマ」

プラグイン「LIQUID RWD PLUS」提供元

• WordPress公式プラグイン「LIQUID RWD PLUS」

• WordPressテーマの必須機能「SEO・レスポンシブ・Bootstrap・商用利用可」を備えた簡単高機能な国産テーマまとめ
• おしゃれなPinterest風。簡単カスタマイズのオウンドメディアマガジン向けWordPressテーマ「LIQUID SMART」
• 多言語化コーポレートサイト制作に最適！日本語対応のWordPressテーマ「LIQUID CORPORATE」
• おしゃれなポートフォリオが作れる！簡単にカスタマイズできる日本語対応WordPressテーマ「LIQUID PORTFOLIO」
• カスタマイズ簡単なオウンドメディアマガジン向け国産WordPressテーマ「LIQUID MAGAZINE」シーズン
• 無料でシンプル、カスタマイズ簡単な日本語対応WordPressテーマ「LIQUID LIGHT」
• SEOって聞くけど、SEO対策とは何？
• えっ！！Wordpressのパーマリンク設定は意外に重要！？