ホームページ制作

あなたの発注コンシェルジュ

登録者数No.1
フリーダイアル

0120-917-819

営業時間 平日 10:00~19:00

【2019年最新】レスポンシブ対応のWordPressテーマ35選!サイトをスマホ対応にする方法も解説

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

更新日:2019年07月12日 | 公開日:2017年06月12日

この記事のポイント
  • WordPressのテーマの選び方を紹介
  • テーマ以外でレスポンシブデザインのWebサイトを製作する方法
  • レスポンシブ対応のWordPressテーマを業種別に紹介

1.まずはWordPressのテーマの選び方のポイントを抑えよう

最初に気をつけたいのはテーマの選び方について。WordPressは自由度が高い分、テーマやカスタマイズ方法が非常に多く、結局どれを選べばいいのかわからなくなりがちです。

最初にテーマを選ぶ上でどのような点に注意して選ぶべきかを5つに分けて紹介します。基本的なことなので「もうわかっている」という方は読み飛ばしてください。

1-1.スマホに対応したレスポンシプデザインか

この記事のメインテーマ通り、テーマがレスポンシブデザインなのかは現在において最も重要な要素と言っても過言ではありません。スマートフォンで閲覧した時に余計な負担を与えてしまったらせっかくのデザインも台無しになってしまいます。

WordPressのテーマがレスポンシブデザインなのかはすぐに確認できるのでまずはこの点を確認しましょう。

1-2.SEO対策がされている

WordPressのテーマは基本的には自身でSEO対策を施す必要がありますが、最近のテーマに関して言えばデフォルトで設定されていることも多いです。

具体的には構造化マークアップやページスピード(表示速度)やメタタグの設定など。自身で全て行うと結構な作業量になるのでデフォルトで設定されたものを選ぶと良いでしょう。

1-3.更新頻度が多く、サポートは手厚いか

Webサイトのトレンドの変遷は非常に早いペースで進むため、Webサイトもそれに合わせて改善を続ける必要があります。テーマを改善して日々更新を続けるテーマも中には存在するため、こういったテーマを選ぶと業務の効率化につながるでしょう。

サポートというのは具体的に

・開発者にテーマに関する質問をできる環境があるか
・電話やチャットで問題を解決してくれるサポートデスクがあるか
・同テーマの利用者同士で疑問点を解消できるコミュニティがあるか


などが挙げられます。テーマのカスタマイズを行う中で疑問点は自然と生まれてくるものです。
上記のような環境があればすぐに疑問点を解消でき、効率的にWebサイトを運営できるでしょう。

1-4.UIやデザインがサイトのテーマに合っているか

Webサイトは内容ももちろん重要ですが、サイト全体のデザインも重要です。ユーザーの目的にあったデザインを設計しなければ、内容がよくてもユーザーが狙い通りに動いてくれないかもしれません。

サイトを運営する目的がなんなのか、ということを念頭に置いてテーマを選びましょう。

1-5.カスタマイズがしやすいか

デザインのカスタマイズはもちろん、記事中の装飾のしやすさもテーマによって変わります。この点は実際に使ってみないとわからないかもしれませんが、テーマについて調べていく中である程度わかってくるので確認しておくといいでしょう。

2. WordPressでレスポンシブサイトを構築する方法

タイピング

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

基本的にレスポンシブ対応のテーマを利用すればそれだけでスマホ対応は完了しますが、レスポンシブ対応していないテーマをどうしても活用したいという場合の方法を2点紹介します。

2-1.プラグインを利用してレスポンシブサイトを構築する

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

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

下記の記事も参考になると思います。

2-2.テーマファイルをカスタマイズする

WordPressのテーマファイルをカスタマイズするという方法もあります。ただしこの方法はCSSやPHPなどのプログラミング言語の知識が必要なため、おすすめできません。初心者の方はまずは下記で紹介するレスポンシブデザイン対応のWordPressテーマを選ぶのが1番簡単にできるため、おすすめです。

3.レスポンシブWebデザインのWordPressテーマ35個を業種別に紹介!

次にレスポンシブ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サイトからの商品やサービスチケットなどの販売もできます。

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

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

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

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

上記で述べたように、レスポンシブWebデザイン対応のWordPressテーマを用いれば、スマホ対応のWebサイトを簡単に作ることができます。

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

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

“ホームページ制作”のことなら
コンシェルジュに無料で相談!

お急ぎの方はこちら

0120-917-819

営業時間 平日 10:00~19:00

Kadono