「パソコン教室」を題材にした既存テーマの比較

サンプルサイトの概要

Word や Excel 講座を開催しているパソコン教室のサイトを、既存テーマを使って制作してみました。
WordPressテーマは公式テーマだけでも数千にのぼります。非公式に配布されているテーマを合わせると数万になるでしょう。
今回選択した4テーマは、その中でも特に人気があり多く使われているものにしました。テーマによって無料版と有料版がありますが、今回はすべて無料版にしています。

制作したサイトは10ページ程度の、ごくごくシンプルなサイトです。コンテンツさえ準備できていれば、初心者でも半日程度で制作が可能です。画像や文章はどのテーマでも同じものを使用し、デザインの比較がしやすいようにしました。
もちろんテーマごとにさまざまな機能を持ち合わせており、デザイン面でのカスタマイズもそれらの機能を使って可能になっています。
ただし今回は、初心者にとって扱いづらい機能はできるだけ使わないようにしました。テーマの機能を覚えるのに大変では、既存テーマを利用するメリットが少ないからです。

Astraは海外製のテーマですが、公式テーマの中でトップ3に入るほど人気があるテーマです。Free版と機能を拡張した有料のPro版があります。
Free版でも十分な機能を備えており、扱いやすさと拡張性からいって、コーポレートサイトでは第一候補に挙げられます。
同じ開発元が出している公式プラグイン「Ultimate Addons for Gutenberg」はエディタの機能を拡張するもので、こちらも非常に有用なので同時に使いたいところです。

テーマ公式サイトはこちら >

Lightningは日本製では数少ない公式テーマのうちの1つです。Free版と機能を拡張した有料のPro版があります。
日本製ということもあって、デザインが日本人好みにできており、日本ではかなりの数のサイトに使われています。
このテーマを利用する場合は、同じ開発元が出している公式プラグイン「VK All in One Expansion Unit」を同時にインストールします。
なお、コピーライト表記はPro版でないと変更できません。

テーマ公式サイトはこちら >

GeneratePressは海外製のテーマですが、シンプルで扱いやすく、こちらも大変人気があります。Free版と機能を拡張した有料のPremium版があります。
他のテーマにない特長として、サイドバーは右左と2つ設置することが可能です。またフッターはカラム数が 0 – 6 で変更可能です。
気になる点としては、最近開発が止まっているのか、アップデート頻度がかなり減ってきていることです。

テーマ公式サイトはこちら >

Cocoonは日本人が個人で開発している非公式のテーマです。従ってインストールするには、テーマサイトからファイルをダウンロードする必要があります。
このテーマには有料版がなく、すべてが無料で使えるのが好印象です。
機能は非常に豊富で、個人のブログサイトやアフィリエイトサイトにはうってつけのテーマです。
コーポレートサイトでも多く使われていますが、機能が豊富な分だけ設定が煩わしく、慣れが必要となります。

テーマ公式サイトはこちら >

テーマ Astra を使ったサンプルサイト

公式テーマである Astra は、圧倒的に人気があるテーマです。海外製ですので日本のサイトではそれほど見かけませんが、海外では数多くのサイトに使われています。
私自身も人気がある既存テーマを20個ほど試してみましたが、コーポレートサイト制作では Astra が一番扱いやすいと感じました。

Astra は Free版でも小規模なサイトでは十分です。少し規模の大きい複雑なサイトでは、5千円ほどで購入できるPro版を使ってみてもよいでしょう。Pro版ではカスタマイズが思いのままにできます。オリジナルテーマに匹敵するほどの拡張性と柔軟性を持ち合わせていますので、プロの制作者のニーズに応えることもできます。

ここでは Astra を使ったサンプルサイトをいくつか制作してみましたので紹介します。

リゾートホテルの Webサイトで、ページ数は20ページほどです。コンテンツ作成を除いた制作時間は4.5時間です。

プラグインは2つ使っています。

  • Contact Form 7
    お問い合わせフォーム作成用です。
  • Home Page Banner for Astra Theme
    Astra開発元が出しているプラグインです。メインビジュアルをウィンドウ幅一杯まで広げて表示しています。
    また画像の上にキャッチフレーズなどテキストを表示することができます。

サブページのタイトルには画像を使っています。
Astra ではページ毎にタイトルの表示を停止する機能がありますので、タイトルを停止させ代わりにアイキャッチ画像に登録した画像をページタイトルとしています。

海辺のレストランの Webサイトで、ページ数は20ページほどです。コンテンツ作成を除いた制作時間は約6時間です。

プラグインは3つ使っています。

  • Contact Form 7
    お問い合わせフォーム作成用です。
  • Custom Post Type UI
    カスタム投稿とカスタムタクソノミーを簡単に登録できるプラグインです。このサイトでは「おすすめコース」をカスタム投稿として登録しています。
  • Ultimate Addons for Gutenberg (UAG)
    Gutenberg で追加できるブロックを拡張するプラグインです。

メインビジュアルは、プラグイン UAG の Sectionブロックを追加し、その背景として画像を設定しています。
他にも UAG で拡張されたブロックを積極的に使ってページを作成しています。

ヘッダーはメインビジュアルの上に透過して配置するデザインにしています。この透過ヘッダー機能を持つことも、Astraテーマの特長となっています。

旅行代理店の Webサイトで、ページ数は30ページほどです。コンテンツ作成を除いた制作時間は約8時間です。

プラグインは3つ使っています。

  • Contact Form 7
    お問い合わせフォーム作成用です。
  • Custom Post Type UI
    カスタム投稿とカスタムタクソノミーを簡単に登録できるプラグインです。このサイトでは「新着情報」をカスタム投稿として登録しています。
  • Ultimate Addons for Gutenberg (UAG)
    Gutenberg で追加できるブロックを拡張するプラグインです。

さらにこのサイトでは、有料のプラグインで提供されている Astra Proモジュールの機能も一部使っています。
メインビジュアルやサブページのトップにくる画像は、ヘッダーと同化させていますが、これはページヘッダーという Proモジュールの機能を使っています。

このサンプルでは、WordPress を利用するにあたって重要である投稿と固定ページの他、カテゴリー、タグ、カスタム投稿も適切に使ってサイトを構成しています。

その他の既存テーマを使ったサンプルサイト

歯医者の Webサイトで、ページ数は15ページほどのシンプルなサイトです。コンテンツ作成を除いた制作時間は約4時間です。

テーマは GeneratePress を使って制作しました。
プラグインは、Ultimate Addons for Gutenberg だけ使っています。このプラグインはテーマ Astra の開発元が出していますが、Astra 以外のテーマでも問題なく使用できます。

サブページにはサイドバーを設けています。
ほとんどの既存テーマでは、サイドバーのコンテンツはウィジェットで登録するようになっています。
このサイトではナビゲーションメニューウィジェットと、カスタムHTMLウィジェットで Googleマップを表示しています。

オリジナルテーマで制作したサンプルサイト

カルチャーセンターの Webサイトで、オリジナルテーマで制作しました。
オリジナルテーマではデザインや機能に制約はないため、かなり細かい部分まで思いどおりに作り込むことができます。
そのため制作時間は結構かかります。このサイトも完成まで2週間かけました。

メインコンテンツは講座情報ですが、管理画面から講座名や開催日時など、さまざまな情報をフォームに従って入力できるように、カスタムフィールドを設けました。
それによってページに表示するコンテンツに統一性を持たせることができます。

カルチャーセンターのサイトですので、いかに素早くユーザーが求める講座情報を表示するかがキーとなります。
そのため WordPress の持っている検索機能をカスタマイズして、講座検索機能を実装しました。カテゴリー・曜日・開始時間・キーワードの4つの条件から講座を検索できます。

講座情報の詳細ページでは、関連した講座の情報を、プラグイン「Yet Another Related Posts Plugin」を使って表示しています。このプラグインはブログサイトでも関連記事表示でよく使われます。

オリジナルテンプレート