ユーザープロフィール

ゲストさん

2017年版・無料で使えるWordPressのレスポンシブのテンプレート15選

2017年版・無料で使えるWordPressのレスポンシブのテンプレート15選

頻繁に更新するWebサイトには、CMSの導入を欠かすことができません。加えて近年は、スマホやタブレット、デスクトップなどマルチデバイスへの対応、すなわちレスポンシブなデザインを求められることが非常に多いです。 そこで今回は国内でのシェアが高いCMS「WordPress」を導入することを前提に、レスポンシブデザインに対応したおすすめのテンプレートを紹介していきます。

テーマとテンプレートとは?

WordPressにおける「テーマ」とは、WordPressで構築したWebサイトの見た目(外観デザイン)のことを指します。同様にWordPressにおける「テンプレート」とは、ページの構造と内容、表示スタイルを制御するファイル一式のことを指します。広義では、テーマとテンプレートをほとんど同義で呼ぶこともありますし、両方まとめてテーマあるいはテンプレートと呼ぶこともあります。

テーマはダッシュボード上で管理し、カスタマイズしたり、新規に追加・不要なものを削除することができます。公式サイトのテーマディレクトリの中から選択するだけではなく、制作会社などが独自に開発・配付しているものを取り込んで使うことができます。

狭義のテーマすなわち外観は、自由にカスタマイズすることができます。たとえば、ヘッダやフッターの画像を差し替えたり、背景の色を変更したりHTMLやCSSを付け足したり、機能を追加することができます。編集は、ダッシュボード(管理画面)の「外観」メニューやプラグインの追加によって、HTMLやCSSの知識がなくても簡単に行うことができます。

テンプレート(テーマ)の流用方法 - 子テーマの作り方

テーマは、テンプレートのソースコード直接編集してカスタマイズすることもできます。この場合、先ほどよりも細かいカスタマイズを行うことができます。ただし、HTMLやCSS、JavaScriptやPHPの基礎知識が必要な上に、使用中のテーマがアップデートする度に編集した内容が失われる可能性があります。

アップデートの影響を受けることなくカスタマイズするには、子テーマを作成します。子テーマの作り方の詳細は、公式オンラインマニュアル「WordPress Codex日本語版」の「子テーマ」を御覧下さい。

テーマは、完全に自作することができます。けれども、既存テーマの子テーマを作る方が開発コストが少なく済みます。なので特別な事情がないのであれば、既存のテーマを流用することをおすすめします。このように、WordPressのテーマ(テンプレート)は、用途に応じて自由に追加したりカスタマイズすることができます。

おすすめのテーマについて

次の用途ごとにおすすめのテーマを具体的に紹介していきます。

  • ブログ、ニュースサイト
  • ECサイト、コーポレートサイト
  • 画像・動画サイト、ポートフォリオ

WordPress公式サイトのテーマディレクトリの中から選びました。実際はどのテーマも多様な使い方が可能ですが、参考程度に分けています。

選定方法は、評価が高い上にインストール数が多く、日本語対応・レスポンシブデザインで、国内で話題になっているものとしました。デフォルトテーマはプリインストール時に必ず入っているためにインストール数が群を抜いて多いことから、番外で紹介します。

1. ブログ、ニュースサイト向きのテーマ5選

ブログと言えば「これ」といった、定番・汎用性の高いテンプレートテーマを紹介していきます。

1-1. Sparkling

画像

Sparkling(スパークリング)は、どんなテーマのコンテンツにも適応するフラットなデザインのテーマです。レスポンシブデザインはBootstrapによって実装されています。テーマオプションで設定できる項目やサポートしているプラグインが豊富です。
テーマホームページ

1-2. Hueman

Hueman(ヒューマン)は一度に多くの記事を掲載することに向いていて、なおかつモバイルフレンドリーなレイアウトが特徴です。ブログやニュースサイト、ビジネスサイトに向いています。
テーマホームページ

1-3. MH Magazine lite

MH Magazine lite(MHマガジン・ライト)は、オンラインメディア向きの無料テーマです。初期状態でサイドバーにレクタングル広告を埋め込む事が前提のレイアウトとなっていて、人気の高いウィジェットも最初から導入されています。問合せフォームで人気の高いプラグイン「Contact Form 7」の組み込みスタイルもあります。有償版にはフォントのカスタマイズや顧客サポートなども含まれています。
テーマホームページ

1-4. Travelify

Travelify(トラベルファイ)は様々なシーンに対応可能なSEOフレンドリーなテーマです。スライダーによって画像を際立たせ、ECシステムのプラグイン「WooCommerce」に対応していることが特徴です。他にも問合せフォームのプラグイン「Contact Form 7」など人気のプラグインとの互換性があります。
テーマホームページ

1-5. Xeory

Xeory(セオリー)は、Webメディア「バズ部」の運営母体である株式会社ルーシがコンテンツSEOにより月間100万PVを集めるWebメディアを作り上げたノウハウを生かして提供しているテーマです。レイアウトは、コーポレートサイトとコンテンツマーケティングを両立させたサイト型テーマ「Xeory Extension」とブログ型テーマ「Xeory Base」の2種類を選択できて、いずれも無料で利用することができます。WordPress公式テーマではありませんが、国内での知名度の高さから取り上げました。
テーマホームページ

番外(デフォルトテーマ):Twenty Sixteen

デフォルトテンプレートは2011年のテーマ「Twenty Eleven」より全てレスポンシブ対応です。このテーマはブログやウェブサイト向きの2カラムレイアウトです。

2. ECサイト、コーポレートサイト向きのテーマ5選

2-1. Onetone

画像

Onetone Onetone(ワントーン)は、全ての情報を単一ページにまとめるタイプのテーマです。ビジネスサイト向けに設計されており、SEO対策はもちろん管理機能も充実しています。 テーマホームページ

2-2. Storefront

Storefront(ストアフロント)は、ECシステムのプラグイン「WooCommerce」の開発元であるAutomattic社が開発したテーマです。その名の通りオンラインショップのフロントページ向きです。 テーマホームページ

2-3. Virtue

Virtue(バーチュー)は多目的で使えるテーマです。Pro版はECサイト構築にも対応しています。
テーマホームページ

2-4. Edin

Edin(エディン)は、クリーンなデザインのビジネスサイト向けテーマです。カスタムページのテンプレート、ソーシャル対応などあります。
テーマホームページ

2-5. BizVektor

BizVektor(ビズベクトル)は、Webシステム開発などを行っている株式会社ベクトルが開発した、国産のテンプレートです。主な用途はビジネス用途のWebサイト構築です。HTMLやCSSの知識がなくても構築・メンテナンスを簡単に行えるようなインタフェース設計、SNS連携、SEO対策、追加プラグインなど、機能抱負な上に日本国内のWeb制作事情に配慮されています。Xeory同様、WordPress公式テーマではありませんが国内での知名度は高いです。
テーマホームページ

番外:デフォルトテーマより

Twenty Seventeen

ビジネスサイトに焦点をあてたデザインです。

3. 画像・動画サイト、ポートフォリオ向きのテーマ5選

3-1. Sydney

画像

Sydney(シドニー)は、コーポレートサイトや個人事業主のポートフォリオに適したビジネステーマです。スライダーによって画像を際立たせるスタイリッシュなデザインが可能です。柔軟なカスタマイズが可能で、Googleフォントにも対応しています。
テーマホームページ

3-2. Fukasawa

Fukasawa(フカサワ)は、レンガを詰むように組まれたミニマルなレイアウトが特徴の、主に写真家やコレクター向けのテーマです。
テーマホームページ

3-3. GK Portfolio

GK Portfolio(GKポートフォリオ)は、画像を見せることに特化したテーマです。フォトグラファーやデザイナー、アニメーターなどのクリエーターがプロジェクトを最善の状態で紹介するために適しています。軽量で高速なことも特徴です。
テーマホームページ

3-4. Pictorico

Pictorico(ピクトリコ)は、グリッドベースのシンプルなテーマです。レイアウトは単一カラムで、トップページは多くの画像がパネルのように並び、各ページは画像を大きく見せることが特徴です。
テーマホームページ

3-5. Pixova Lite

Pixova Lite(ピクソバ・ライト)は、単一ページで情報を見せるパララックスサイトのテーマです。有償版はSEO対策機能、ECプラグインサポートなどがあります。
テーマホームページ

以上、WordPressのおすすめテンプレートを15種ご紹介しました。あなたのお仕事にぜひお役立てください。

PR_infeed

PR_Relative

オウンドメディア運営会社の皆様へ

s

ページトップ