WordPressをスマホ対応に!レスポンシブWebデザインのテーマ35選

キーボードを操作する女性

更新日:2017年10月04日 | 公開日:2017年06月12日

この記事のポイント
  • 豊富なWordPressテーマを業種別に紹介
  • テーマのインストールでWordPressをスマホ対応サイトに!
  • 理想のスマホ対応サイトを構築するには?

スマートフォンやタブレットの急速な普及により、モバイル端末を使うユーザーがここ数年で一気に増えました。
実際、Webサイトへのアクセスはスマートフォンがパソコンを上回っているという例も多いです。
これからの時代、Webサイトをスマホ対応させることは必須テーマの一つと言えるでしょう。

しかし、自分でスマホ対応のサイトを作ろうとすると、そのための専門的な知識や面倒な作業が必要となります。

その点、WordPressであればデバイスに応じて自動的に切り替える「レスポンシブWebデザイン」対応のテーマやプラグインが豊富に用意されています。
これらをインストールするだけで、専門的知識がなくても簡単にレスポンシブ対応サイトを構築することができるので、ぜひチャレンジしてみてください。

1. レスポンシブWebデザインのおすすめWordPressテーマ

まずは、レスポンシブWebデザインのWordPressテーマ(テンプレート)を7つのタイプ別にご紹介します。
一口にレスポンシブWebデザインと言っても、カラム(列)や画像の表示方法によってサイトの雰囲気は大きく変わります。

デザインの好みだけでなく、サイトの機能性やあなたの目的に応じてテーマを選ぶことが重要です。

2-1 一般・ブログ向けのレスポンシブWebデザインテーマ

まずは一般利用やブログに最適なレスポンシブWebデザインのWordPressテーマをご紹介します。

(1)ストーク(国内・有料)

「OPENCAGE」の公式サイト
出典OPENCAGE

スマートフォンやタブレットなどモバイル端末での使いやすさ、読みやすさを徹底的に意識して作られており、見た目だけでなはく機能性などもモバイルファーストで考えられています。
利用者も多く、人気のWordPressテーマです。

(2)ハミングバード(国内・有料)

「OPENCAGE」の公式サイト
出典OPENCAGE

読んでいるユーザーの注意を引きつける豊富なアニメーション効果が特徴的なWordPressテーマです。
全体の構成もモバイルファーストになっているので、スマホやタブレットからも見やすいアニメーションになっています。
他のサイトと差別化を図りたい方におすすめです。

(3)アルバトロス(国内・有料)

「OPENCAGE」の公式サイト
出典OPENCAGE

「ストーク」や「ハミングバード」と同じく、モバイルファーストで作られており、大きな特徴は色鮮やかで美しいデザインです。
モバイル端末で見たときにもデザインが崩れないように配慮されているので、PCと同じようにWebサイトを見ることができます。

(4)STINGER8(国内・無料)

構成は2カラムでデザインもシンプルですが、SEOに大変強くアフィリエイトサイトやブログを運営している人に評判がいいWordPressテーマです。
モバイル端末からのユーザーを重視しているだけにスマートフォンやタブレットからも見やすいデザインになっています。

STINGER8は無料のWordPressテーマですが有料のSTINGER PROやAFFINGER4があり、デフォルトで高機能なカスタマイズができるので検討してみてください。

(5)Attitude(海外・無料)

WordPress公式サイトで配布をされているWordPressテーマなので、安心して利用可能です。
スッキリとしたシンプルなデザインになっているので、個人サイトからコーポレートサイトまで幅広く使えます。

2-2 企業向けレスポンシブWebデザインテーマ

企業のコーポレートサイト向けWordPressテーマをご紹介します。

(1)BizVektor(ビズベクトル)(国内・無料)

コーポレートサイトや店舗用のサイトなどビジネス向けに適したWordPressテーマです。
モバイル端末からも見やすく、操作しやすい画面になるように配慮されています。

(2)テンプレートキング(国内・無料)

「FirstServer」の公式サイト
出典FirstServer

会社案内や飲食、ファッションなど5つのテーマが用意されており、それぞれ5色のカラーバリエーションから、目的や好みに合わせて選ぶことができます。

(3)GADGETRY(海外・無料)

「ThemeFuse」の公式サイト
出典ThemeFuse

写真や動画をきれいに表示できるので、モバイル端末でもビジュアルを効果的に使えるコーポレートサイトやポータルサイトを作りたい方におすすめのWordPressテーマです。

(4)無料ホームページテンプレート.com(国内・無料)

「Cloud Nine」の公式サイト
出典Cloud Nine

商用利用が可能な無料のWordPressテーマで、非常にシンプルな構成な作りになっています。
写真を大きく表示し、効果的に見せたい場合に有効です。
テーマは全部で30種類の用意されており、それぞれカラーバリエーションも3色あるので好みに合わせて選ぶことができます。

(5)クールでかっこいいWordPressテーマ(国内・有料)

業種やサイトのタイプなどに合わせたテーマがあるほか、機能を強化するプラグインやウィジェットも用意されています。

2-3 メディア向けレスポンシブWebデザインテーマ

メディアやニュースサイトに最適なWordPressテーマをご紹介します。
画像表示が得意なテーマを上手く活用して、ユーザーの興味を惹きつけましょう。

(1)MH Magazine lite(海外・無料)

ニュースやウェブマガジン、ポータルサイトなどメディア関連に幅広く使えるWordPressテーマです。
以前は有料版のみでしか使えなかった「レスポンシブ対応」機能が、無料版でも使えるようになりました。

(2)Hueman(海外・無料)

オシャレでとても人気のあるWordPressテーマで、基本は3カラムです。
写真や動画を自由に配置することで、スマートフォンやタブレットなどのモバイル端末にも効果的に表現できます。

(3)MH Newsdesk Lite(海外・無料)

ニュースマガジン向けのWordPressテーマで、写真をメインで目立たせるWebサイト作りに適しています。

(4)DUAL SHOCK(海外・無料)

「MyThemeShop」の公式サイト
出典MyThemeShop

左サイドバーが特徴的な2カラムの構成になっています。
シンプルでスッキリとしたWebサイト作りをしたい方におすすめのWordPressテーマです。

(5)CORE(TCD027)(国内・有料)

スライドするヘッダー画像が特徴的なWordPressテーマで、サイズの違う写真を5枚配置することができます。
メニューや記事にそれぞれ大きめの写真を付けることができるほか、ロゴや画像をカスタマイズすることで、さらにユーザーの目を引くデザインにすることができます。

2-4 飲食向けレスポンシブWebデザインテーマ

飲食向けWordPressテーマは、メニューを簡単に設置できたり、店内の雰囲気を伝えることに特化しています。
飲食店のブランドイメージに合わせて選びましょう。

(1)micata(国内・無料)

企業のコーポレートサイトや店舗用のWebサイト向けに作られたWordPressテーマで、作ったあとのWebサイトの運営がスムーズにできるよう、操作性や機能性にも配慮しています。

(2)Avalon - for TCD040(国内・有料)

「大人のバー」をイメージしたスタイリッシュで落ち着いた雰囲気を与えてくれるデザインになっています。
スマホから見たデザインやユーザーの導線まで分析した作りになっており、モバイルファーストに徹底したWordPressテーマです。

(3)SWEETY - for TCD029(国内・有料)

ヘッダーやギャラリー機能を使っておすすめしたい商品や季節のメニューを効果的に見せることができます。
さらにパソコン(PC)やタブレットとは別にスマートフォン専用の画像を設定することができるので、スマートフォン向けのユーザーに対してひと味違った見せ方をすることができます。

(4)AMORE - for TCD028(国内・有料)

「パララックス」という視差効果を使った特徴のあるWordPressテーマです。
Webサイト上の画面を縦にスクロールさせたり、マウスをかざすと画像がさまざまな種類のアニメーションで動いて表示されるので、メニューや店内の写真を効果的に表現できます。

(5)Folclore(国内・有料)

「Minimal WP」の公式サイト
出典Minimal WP

企業のコーポレートサイトや店舗用のWebサイト向けに作られたWordPressテーマで、カフェやファストフードなどの飲食用にも最適です。
作ったあとのWebサイトの運営がスムーズにできるよう、操作性や機能性にも配慮しています。

2-5 EC向けレスポンシブWebデザインテーマ

商品を効果的に見せる工夫が施されている、ECサイト向けWordPressテーマをご紹介します。

(1)VIRTUE(海外・無料)

シンプルなデザインながらも機能性の高いWordPressテーマです。
eコマース機能のプラグインとして「WooCommerce」が使われています。

(2)Santa Cruz(海外・無料)

トップページやメニューページでさまざまな種類の写真を配置することで、商品を効果的に見せられるWordPressテーマです。

(3)Welcart Basic (国内・無料)

「Welcart」の公式サイト
出典Welcart

シンプルなデザインで、スマートフォンやタブレット、PCからネットショッピングができる「Welcart」専用のWordPressテーマです。

(4)Fukasawa(国内・無料)

北欧の建築や家具をイメージさせるようなスタイリッシュなデザインで、サイトはシンプルに、商品はオシャレに見せたい方向けのWordPressテーマです。

(5)BLOC - for TCD035(国内・有料)

セレクトショップやブランドショップをイメージさせるデザインで、TOPページでさまざまな種類の写真を使って商品を見せることができます。
商品ごとに写真や文章を載せた紹介ページも作れるので、Webサイトでしっかりと商品の魅力を伝えたることのできるWordPressテーマです。

2-6 ファッション向けレスポンシブWebデザインテーマ

シンプルでありながらも、画像を上手く使って商品を目立たせることが可能な、ファッション向けWordPressテーマをご紹介します。

(1)MesoColumn(海外・無料)

記事の一覧が2カラムで表示されるので、ファッションマガジンやポータルサイトのようなWebサイトを作ることができます。

スマートフォンやタブレットなどのモバイル端末でも、見やすく記事一覧が表示されるので、一つの記事だけではなく、他の記事も合わせてユーザーに読んでもらえます。

(2)Grid Style Theme (海外・無料)

「Dessign.net」の公式サイト
出典Dessign.net

白と黒を基調としたシンプルなデザインが特徴です。
シンプルなファッションサイトやマガジンサイトを作りたい方におすすめなWordPressテーマです。

(3)IZM - for TCD034(国内・有料)

トップページの大きめなアイキャッチ画像が特徴のWordPressテーマです。

サイドバーや各ページにもそれぞれ写真を多めに配置することができるので、読ませたい記事をユーザーに対して効果的にアピールすることができます。

(4)INNOVATE HACK - for TCD025(国内・有料)

トップページにスライドする大きめのヘッダー画像や記事一覧を配置することができるので、写真を効果的に見せたファッション用のウェブマガジンなどに適したWordPressテーマです。

(5)Grider - for TCD015(国内・有料)

トップページに最新記事や今までの記事一覧を写真と文章でそれぞれオシャレに配置することができるので、ファッションの記事を中心にユーザーに読ませたい場合に効果的なWordPressテーマです。

2-7 エステ・美容向けレスポンシブWebデザインテーマ

ここでご紹介するエステ・美容向けWordPressテーマは、エステや美容系店舗向けに、ブランドイメージや店内の雰囲気などが伝えることができます。

(1)LOTUS - for TCD039(国内・有料)

エステやネイル、スパなどを意識したイメージになっており、全体的にピンクを基調としたWordPressテーマです。
大きめのヘッダーが特徴で、スマートフォンやタブレットで見たときも写真が崩れないように配慮されています。

(2)STORY - for TCD041(国内・有料)

「ウェディング」をテーマにしたWordPressテーマで、結婚式場やホテルなどをイメージして作られています。
スライドできるギャラリー機能が付いており、結婚式の写真をアルバム形式で表示させることによって、結婚式のサービスやストーリーを伝えることができます。

(3)AN - for TCD014(国内・有料)

「癒やし」をイメージさせる柔らかい色使いが特徴的なWordPressテーマです。
最新の記事や過去の記事もTOP画面で表示できるようになっています。

(4)Chill - for TCD016(国内・有料)

ピンクを基調としたテーマだけではなく、ブラックを基調としたテーマも用意されています。
ワンボタンで切り替えることができるため、対象などに応じて簡単に使い分けることができます。

(5)Spalon(毎外・無料)

エステやスパ、美容室などをイメージして作られたWordPressテーマです。
さらにeコマース機能のプラグインとして「WooCommerce」を使うことができるので、webサイトからの商品やサービスチケットなどの販売もできます。

2. WordPressでスマホ対応のサイトを構築するには?

タイピング

では実際にレスポンシブWebデザインのWordPressテーマを活用して、どのようにスマホ対応サイトを構築するのか説明します。

(1)テーマを利用してスマホ対応サイトを構築する

レスポンシブWebデザインのテーマは難しいカスタマイズをしなくても、インストールだけで好みのデザインのスマホ対応サイトを構築することができるので便利です。

(2)プラグインを利用してスマホ対応サイトを構築する

WordPressテーマをインストールする他にも、レスポンシブWebデザイン対応のプラグインをインストールしてスマホ対応サイトを構築する方法もあります。
プラグインをインストールしたら、あとは有効化をするだけで、パソコン(PC)とモバイル端末それぞれの必要性に応じて自動的に表示を切り替えてくれるので初心者でも簡単に使うことができます。

ただ、自分の好みのデザインにするにはある程度カスタマイズする必要があり、多少の知識がないと難しいかもしれません。
下記の記事も参考になると思います。

3. 【まとめ】WordPressをスマホ対応するために

ノートパソコンとコーヒー

スマートフォンからWebサイトを見るユーザーが圧倒的に増え、もはやPC対応だけでは大事なファンや顧客を逃してしまう可能性があります。

Webサイトの内容がどんなに素晴らしくても画面の見づらさや操作性の悪さなどによって離脱率が高くなるとも言われており、今後はアクセスアップ顧客獲得を目指す上で、PCだけではなくスマートフォンやタブレットなどモバイル端末に対応したWebサイト作りがさらに重要になるでしょう。

上記で述べたように、レスポンシブWebデザイン対応のWordPressテーマを用いれば、スマホ対応のWebサイトを簡単に作ることができます。
無料テーマよりも有料テーマのほうが、クオリティーや機能性、操作性が高く使いやすいので目的に合わせて選びましょう。
まずは、あなたの会社がイメージしているスマホ対応サイトを明確にし、本記事からサンプルとなるWordPressテーマを見つけてみてください。

スマホ対応サイトはテーマを使って独力でも簡単に作成できますが、もし「時間がないのでレスポンシブWebデザインのサイト作りを外注したい」「もっと会社やお店のイメージに合ったスマホ対応サイト構築の相談にのってもらえる業者が知りたい」という場合は、ぜひ日本最大級の発注業者比較サイト「アイミツ」までお気軽にご相談ください!
全国のホームページ制作業者から、あなたに見合った業者を選定し、担当のコンシェルジュがご案内いたします。

いま知りたいこと
コンシェルジュが解決します!

コンシェルジュサービスは
3万社以上が利用している無料の相談サービスです。

コンシェルジュ