WordPressサイトをスマホ対応にする3つの方法のメリットとデメリット

photo credit: JD Hancock via photopin cc

WordPressサイトをスマートフォンに対応させる必要になったので、どんな方法があるのか、そしてどの方法が適しているのか調べました。

  • プラグインで対応
  • レスポンシブWebデザインで対応
  • 別テーマで対応

の3つが主な方法だと分かったので、それぞれのメリット・デメリットを混じえて書いてみます。(既に作られたWordPressサイトをスマホに対応することを前提にしています)

photo credit: JD Hancock via photopin cc

プラグインで対応

wordpress-smartphone-site01

WordPressサイトをスマホ対応にするプラグインは幾つかありますが、共通しているのは簡単にスマホサイトが出来上がる所です。

実は僕、最近まで「WPTouch」しか知らなかったのですがどうやら他にも幾つかプラグインがあるようでして。以下の記事では6つのプラグインが紹介されています。

WPTouchの他、

といったスマホ対応プラグインがあるんですね。

メリット

WPTouchを例にしますが、メリットはとにかく導入が楽な所です。プラグインをインストールするだけなので、ブログならメニュー設定を考えても5分も掛からないんじゃないでしょうか。サクっとスマホ対応出来ます。

あと、WPTouchに関して言えばサイトの読み込み時間が早いです有料版のProはもっと早いらしいです。

有料版では子テーマの作成も出来るようになります。

デメリット

スマホ用テンプレートは自動で生成されるためどのサイトも同じ見た目になります。趣味でやっているブログならいざ知らず、差別化が必要な企業サイト(もしくは個人ブランディングが目的のサイト、ブログ)ではちょっと致命的だと思います。

WPTouchは無料版だと1つのテーマしか使えません。有料ラインセンスにアップグレードすると追加で4つのテンプレートが使えるようになりますが、母体数が少なくなるとは言えやはり似たサイトが出てきてしまいます。

有料版にアップグレードし、WPTouchの子テーマでデザインを変えてこのデメリットを改善する、といった方法はあります。

レスポンシブWebデザインで対応

photo credit: jiraisurfer via photopin cc
photo credit: jiraisurfer via photopin cc

レスポンシブWebデザインになるようWordPressテーマを修正するとスマホサイトに対応出来ます。例えばこのブログのWordPressテーマはレスポンシブWebデザインで作っています。

レスポンシブWebデザインとは?

レスポンシブWebデザインで作られたサイト(例えば今見ているこのブログ)を表示したまま、ブラウザのウインドウを小さくしたり、大きくしたりするとレイアウトが変化するのが分かると思います。

このように、レスポンシブWebデザインはどんなウインドウサイズにも順応出来る特徴を持っています。

今現在デスクトップPC、ガラケー、スマホ、ノートパソコン、テレビ、ゲーム機とWebに繋がるデバイスが沢山ありますが、これから先もっと多種多様なデバイスが現れるかもしれません。

Webサイトをそれらに逐一対応させる労力は考えただけでヤバイですよね。なので、「それならどんな状況にも対応するモノ作れば良いじゃん」って考えで提唱されたのが「レスポンシブWebデザイン」なんです。(本当はレイアウトがダイナミックに変化するのが重要ではなく、どんな環境にも呼応することが重要のようです。が、色んな意見があって難しい話になるので割愛します。というか実力不足で深く話せません

ちなみにこのレスポンシブWebデザインの内容には建築業界の「Responsive Architecture」という考えが大きく影響を与えたようです。(ソフトウェアの開発法や役職名などは建築業界のメタファが使われているようで。建築とITは師弟関係のように見えてきますね)

メリット

じゃあレスポンシブWebデザインでスマホ対応するメリットは何かっていうと、先述した内容の意味を含めて一言で書くなら「管理が楽になる」でしょう(ただ、大幅なデザイン改変は逆にちょっと面倒だったり…)。

レスポンシブWebデザインで作成するとWordPressテーマは1つで済むので、プラグインや後述する子テーマと比べ、サイト改変が必要な場合に修正する箇所が少なく済みます。極端に言い過ぎると修正作業が半分になります。

もう一つ、Googleが推奨している点も挙げておきます。こちらのページ『スマートフォン向けウェブサイトの構築 – Webmasters — Google Developers』には、

レスポンシブ デザインにする理由

Google では、次のようなさまざまなメリットがあることから、レスポンシブ ウェブ デザインの使用をおすすめしています:

  • コンテンツ 1 つにつき URL を 1 つにすると、ユーザーにとってコンテンツの操作や共有、コンテンツへのリンクが簡単になります。また、Google のアルゴリズムでコンテンツのインデックス プロパティを割り当てやすくなります。
  • 該当するデバイス向けのページにユーザーをリダイレクトする必要がなくなり、読み込み時間が短縮されます。また、ユーザー エージェントに基づくリダイレクトはエラーが発生しやすいため、サイトのユーザー エクスペリエンスを低下させる可能性があります(詳しくは、ユーザー エージェントを検出する際の問題に関するセクションをご覧ください)。
  • サイトと Google のクローラの両方についてリソースを節約できます。レスポンシブ ウェブ デザインのページでは、Googlebot ユーザー エージェントがページをクロールする必要があるのは 1 回のみで、ユーザー エージェントごとに何度もクロールしてコンテンツを取得する必要がありません。このようにクロールの効率が向上するため、サイトのコンテンツがより多く Google のインデックスに登録され、最新の状態に適切に維持される間接的な助けとなります。

と書いてあります。大雑把に要約すると

  • URLが統一されてたらリンクの扱いが簡単になるよ
  • ちょっとした問題があるリダイレクトを使わなくて済むよ
  • 検索エンジンに優しいよ

でしょうか。とりあえず、Googleが推奨してることもメリットの1つです。

デメリット

対してレスポンシブWebデザインのデメリットはサイトが重くなりがちになる、そして制作コストが高くなってしまう所(時間が掛かる)にあります。

サイトが重くなりがちになる、つまりページの読み込みに時間が掛かる点はフロントエンド(HTML/CSS)とバックエンド(サーバー側)の最適化で何とかなるかもしれません。が、製作コストが高くなってしまう点はどうしようも無い、と言い切りたいのですが制作側が作業の最適化を頑張れば安くなるかもしれませんね。僕はまだまだ試行錯誤中です…。(あとは人件費の削減ですね☆)

いつの間にかビジネスの視点に立ってしまいましたが、個人で自分自身のWordPressテーマをレスポンシブWebデザインで作る場合は「プラグインや子テーマよりは大変」という認識で間違いは無いと思います。

この”大変”にはレスポンシブWebデザインの知識を学ぶ必要があるという意味を含めています。(と言っても覚えてしまえばそれで終わりなんですけど…)

別テーマで対応

photo credit: ND-Photo.nl via photopin cc
photo credit: ND-Photo.nl via photopin cc

プラグインやレスポンシブWebデザイン以外でスマホ対応するなら「スマホ用の別テーマを用意する」という方法があります。スマホでアクセスが来た場合に別のテーマを表示出来るのはWordPress(CMS)ならではの手法です。

デスクトップ、スマホに別テーマを表示する振り分けをするならプラグイン「Multi Device Switcher」がオススメです。

しかしこの方法、一見すると「えっ、もう1つテーマ作るの?労力パなくない?」と思うかもしれませんが、WordPressの便利な機能を使えば少ない作業量で済むんです。

子テーマを作ると楽です

スマホ対応をしようとした時に、

  • 既に作ったデスクトップ用のテーマをレスポンシブ化するの大変
  • しかしお金は使いたくない

といった状況なら子テーマで対応させちゃいましょう。割りきって無料のスマホ対応のWordPressテーマを使うのも有りですが。

どうして楽なのか、それはちょっとのテンプレート(HTML)とCSSを弄るだけで済むからです。

子テーマって?

子テーマとは、とあるテーマの機能を引き継いだ形で作成されたテーマです。親テーマに加えた変更が子テーマにも自動的に反映されるので、レスポンシブWebデザインに近い管理体制が出来上がります。

と言ってしまいましたが、厳密に言うとコピーされていないテンプレートのみ自動的に反映されます。ココらへんは書き出すと長くなってしまうので、子テーマについて詳しく説明されているページを紹介しておきます。

メリットとデメリット

この「スマホに対応する子テーマを作成して振り分け表示」という方法のメリット、デメリットはプラグインやレスポンシブWebデザインの大体中間ぐらいです。

導入はプラグインより面倒ですが、レスポンシブWebデザイン化と比べると楽です。

WPTouchの子テーマ作成と似ていますがコレにはお金を払う必要がありますし、デスクトップ版とデザインの整合性を図るなら子テーマに軍配が上がるでしょう。レスポンシブWebデザイン化よりは時間が掛からないと思いますし(内容によりますけど)。

管理の面では「レスポンシブWebデザイン >= 子テーマ > プラグイン」の順番で楽です。(デザインの変更規模によりますが)

まとめ

長ったらしく書いてしまいましたが、軽いまとめに入ります。

3つの方法は以下のような選び方になりますね。(ちょっとアバウトです)

  • 「他のブログとデザインが同じでも(似ても)良いからとにかく楽にスマホ対応したい。お金も払って良いっす」ならプラグインで対応
  • 「管理は極限まで楽にしたい。レスポンシブWebデザインの知識あり。少々時間掛かってもOK」ならレスポンシブWebデザインで対応
  • 「管理はなるべく楽にしたい。あんまり労力も割きたくないけど、他と似たデザインは嫌」なら子テーマで対応

なお、今回僕が対応した案件は「既存のWordPressサイトをスマホ対応する」状況だったんですけど、子テーマで対応する方法が一番しっくり来ました。

 

2014年09月14日追記:

3つと書きましたが、もう一つの方法として「スマホでアクセスしたときのみCSSを変える」という手がありました。これはアクセスしたデバイスがスマホかどうか判定する関数をつかって振り分けます。

こちらの記事を参考にしてスマホ判定の関数を用意し、CSSファイルをPC用、スマホ用と二つ用意して振り分けます。例えばこんな感じですね。

スマホ判定の関数をfunctions.phpに記述し、header.phpでCSSファイルの振り分けを行います。

これは別テーマを用意してスマホ時に切り替える方法と似ていますが、HTML構造を崩さなくても良い場合はこちらの方が適していると思います。(ブログなどに良さそうですね)

最終更新日:2014年9月28日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/wordpress-smartphone-site/trackback/