【WordPress】スマホ対応!必ず使えるテンプレート35選

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

スマホ対応!必ず使えるテンプレート35選

iPhoneやAndroid系のスマートフォン、タブレット端末などの急速な普及により、これらのモバイル端末を使うユーザーがここ数年で一気に増えました。
実際、Webサイトのアクセス数がパソコン(PC)よりもスマートフォンからのアクセスの方が多いという企業も少なくありません。
これからの時代、Webサイトをスマートフォンやタブレットなどのモバイル端末に対応することは必須のテーマの一つです。

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

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

この記事では、WordPressで「レスポンシブ」対応のサイトを作るときのポイントをお伝えした後に、おススメのテンプレートをご紹介します。

1. WordPressで「レスポンシブ」対応のサイトを作るには?

WordPressで作ったWebサイトを「レスポンシブ」対応にする方法は、大きく分けて次の2つがあります。

(1)プラグインを利用する

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

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

(2)テーマを利用する

「レスポンシブ」対応のテーマは、無料で使えるものが多くあり、デザインもたくさんある中から好きなものを選ぶことができます。
プラグインのようなカスタマイズをしなくても、すぐに好みのデザインのテンプレートを使用することができるので、とても便利です。
次では、この「レスポンシブ」対応のテーマのテンプレートをメディアや飲食、ファッションなど7つのタイプ別にご紹介します。

2. 「レスポンシブ」対応おススメテーマ(テンプレート)

同じレスポンシブ対応でも、例えば1カラム(1列組)、2カラム(2列組)、3カラム(3列組)といったデザインの基本パターンが変われば見え方も大きく違ってきます。
デザインの好みだけではなく、サイトの機能性(使い勝手)なども考慮してテーマを選ぶことが重要です。

2-1 一般・ブログ向け

(1)ストーク(有料・無料)

出典OPENCAGE

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

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

出典OPENCAGE

大きな特徴は、読んでいるユーザーの注意を引きつける豊富なアニメーション効果です。
全体の構成もモバイルファーストになっているので、スマホやタブレットからも見やすいアニメーションになっています。
他のサイトとはひと味違った表現したい場合には効果的でしょう。

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

出典OPENCAGE

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

(4)STINGER8(国内・無料)

構成は2カラムでデザインもシンプルですが、SEOに大変強く、モバイル端末からのユーザーを重視しているだけにスマートフォンやタブレットから見やすい作りになっています。

(5)Attitude(海外・無料)

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

2-2 企業向け

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

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

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

出典FirstServer

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

(3)GADGETRY(海外・無料)

出典ThemeFuse

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

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

出典Cloud Nine

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

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

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

2-3 メディア向け

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

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

(2)Hueman(海外・無料)

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

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

ニュースマガジン向けのテンプレートで、写真を入れた記事を中心にWebサイト作りに適しています。

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

出典MyThemeShop

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

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

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

2-4 飲食向け

(1)micata(国内・無料)

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

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

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

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

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

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

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

(5)Folclore(国内・有料)

出典Minimal WP

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

2-5 EC向け

(1)VIRTUE(海外・無料)

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

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

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

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

出典Welcart

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

(4)Fukasawa(国内・無料)

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

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

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

2-6 ファッション向け

(1)MesoColumn(海外・無料)

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

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

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

出典Dessign.net

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

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

TOPページの大きめなアイキャッチ画像が特徴のテンプレートで、その画像からリンク先へと直接移れるような設定もできます。

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

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

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

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

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

2-7 エステ・美容向け

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

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

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

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

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

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

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

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

(5)Spalon(毎外・無料)

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

3. まとめ

スマートフォンからWebサイトを見るユーザーが圧倒的に増え、もはやPC対応だけのWebサイトでは内容がどんなに素晴らしくても、画面の見づらさや操作性の悪さなどによって離脱率が高くなると言われています。
これからはPCだけではなく、スマートフォンやタブレットなどのモバイル端末に対応したWebサイト作りが、アクセスアップや顧客獲得の成功に大きく繋がります。

「レスポンシブ」対応の無料のテンプレートであれば、モバイル端末などに適したWebサイトを簡単に作ることができます。
ただ、有料のテンプレートには高級感や洗練されたデザインに加え、クオリティーや機能性、操作性が高いものも多いだけに目的に合わせて選んでいきたいですね。

まずは、あなたの会社がイメージしているWebサイトを明確にし、今回の記事からサンプルとなるテンプレートを見つけてみてください。

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

見積もり、取ってますか?

発注をする際に最も大切なことは適正価格を知ることです。
3~4社から見積もりを取ることで、
発注への納得度を高めることができます。

コンシェルジュ

発注は時間も手間もかかりますよね?

コンシェルジュが解決します!

コンシェルジュに相談、あなたにあった業者を提案、発注の手間を削減!

完全無料

まずはお気軽にご相談ください