スマホやタブレットでもデザインが崩れない！レスポンシブ対応WordPressテーマまとめ

WordPressでサイトを作ったけど、スマホやタブレットでアクセスしたらデザインが崩れて困ったことはありませんか？

レスポンシブデザイン対応のテーマであれば、デバイスによって見た目の大きな違いは少ないはずですが、思っていたのと違う！ということは考えられます。

今回はレスポンシブ対応のデザインを探す際のコツや、チェックするべきポイントを交えながら、レスポンシブデザイン対応のWordPressテーマを5つご紹介します。

1.STINGER

公式URL:https://wp-fun.com/

まずご紹介したいのがSTINGERです。

STINGERはレスポンシブデザインでスマホやタブレットでも綺麗に表示されます。

SEOにも優れているので、WordPress初心者の方やこれからブログを作ってみたいという方におすすめです。

STINGERの公式ページを見ると、トップ画像のスライダー部分にそれぞれのデバイスでの見え方が表示されています。

レスポンシブデザインに対応しているかどうかは、まずはこういった公式ページや作者のページでチェックすることが大切です。

2.Xeory Extension

公式URL：https://xeory.jp/template/xeory-extension/

Xeory Extensionは非常にシンプルなデザインであり、レスポンシブにも対応しています。

WordPressのカスタマイズを勉強していると、つい派手なデザイン、見栄えの良いテーマを探してしまいがちです。

しかし、派手なデザインや見栄えの良いテーマほど、再現するためにはテクニックやセンスが必要なこともあるんですね。 Xeory Extensionのようにレスポンシブに対応、カラーリングの変更が簡単、なおかつカスタマイズ性高いテーマを選ぶことで、手間を掛けずにすぐにコンテンツ制作を作る段階に移行できます。

WordPressでサイトを作るのが目的ではありますが、枠組みだけでなく中身（コンテンツや記事）を作るのも忘れないようにしましょう。

3.Luxeritas

公式URL：https://thk.kanzae.net/wp/

Luxeritasはレスポンシブデザインに完全対応、そしてAMPにも対応しているテーマです。

また、SEOやページ表示速度など見えない部分についてもしっかりと考えられて構築されているので、非常に安定感のあるテーマと言えるでしょう。

無料でありながら高機能、そしてカスタマイズ性も高いのでWordPress初心者の方だけでなく、ある程度WordPressを使いこなしている方にもおすすめです。

WordPressのテーマはテーマ固有の機能が存在します。テーマ＝デザインという思い込みをせず、そのテーマにしかない機能があることを知っておくべきです。 逆に言えば、シンプルで高機能なテーマの方がデザイン面はカスタマイズしやすいということでもあるので、見た目だけではなく、カスタマイズ性も考慮して選びましょう。

4.Simplicity

公式URL：https://wp-simplicity.com/

Simplicityはレスポンシブ対応だけでなく、高解像度、低解像度にも対応しているテーマです。

デザインは非常にシンプルであり、カスタマイズ性が高い反面、シェアされやすいようにシェアボタンがあったり、収益化しやすいようになっています。

WordPressでサイトを立ち上げる時、画像や写真、動画も必要ですが、やはり主役は文章だと言えます。 Simplicityの作者は「主役は本文」というコンセプトを掲げています。 Simplicityのように文章を主とした作り、そして読んでもらうための工夫が詰まっているテーマは非常におすすめです。

5.Cocoon

公式URL：https://wp-cocoon.com/

CocoonはSimplicityと同じ作者のテーマであり、ユーザーから寄せられた意見を反映して作られています。

特徴はSimplicityを主軸としたものであるということ、そしてAMP対応、アマゾンや楽天、Googleアドセンスなどの広告も掲載しやすくなっています。 これまでシンプルでカスタマイズしやすい無料テーマを紹介してきました。

高機能なものもありますが、基本的にはプラグインの追加やデザインの変更に影響が少ないものばかりです。

高機能で凝ったデザインの場合、CSSやjsによる調整が多いこともあり、デザインをいじろうとすると思ったようにカスタマイズできないことがあるからです。 特にWordPress初心者の方の場合はテーマ固有の機能があること、テーマのデザインはカスタマイズして使うものだと考えながら勉強することが大切です。

まとめ

レスポンシブデザイン対応のテーマを5種類ご紹介しました。

比較的シンプルでカスタマイズ性が高いものであり、派手なアニメーションや見栄えのものではありません。 Simplicityのテーマの作者がおっしゃっている「主役は本文」という言葉をまずは意識してみましょう。

読者はブログやサービスのコンテンツを楽しみにしていることを忘れてはいけません。 また、テーマを選ぶ時は実際にインストールして、スマホやタブレットで確認するようにしましょう。 実際にいくつかテーマをインストールして、自分の好みにあったテーマを見つけてみてくださいね。