今や多くの企業が導入しているWordPressには様々な魅力がありますが、豊富なテーマ(ページデザインのテンプレート)を揃えている点も魅力の1つです。

テーマを使えば専門知識がなくても高品質な企業サイトを作成できます。ただ、単純に雰囲気だけで選んでしまうと、運用を始めた後に使いにくさを感じるかもしれません。

今回は、無数にあるテーマの中から自社にフィットするものを選ぶコツをご紹介します。

失敗しないCMS導入手順の秘訣をまとめた初心者向けCMS完全攻略ガイド

WordPressの「テーマ」とは?

WordPressでは、画像も含めたページデザインのテンプレートを「テーマ」と呼びます。1つのテーマにはトップページ、固定ページ、投稿記事など項目ごとに最適化されたテンプレートが用意されています。
 

すでにインストールされているデフォルトのテーマ

WordPressをダウンロードすると、デフォルトで設定されているテーマを確認できます。管理画面の[ダッシュボード]→[外観]をクリックしてみてください。

すると、デフォルトのテーマが一覧で表示されます。今回は「Twenty Twenty」を選んでみます。

Twenty Twentyをテーマに選んだ場合のトップページやブログ投稿ページはこのようになります。

特にこだわりがなければデフォルトのテーマでも十分ですが、企業サイトとして使うならより自社のイメージや目的に合ったテーマを選んだ方が良さそうです。
 

新しいWordPressテーマをインストールする

では、デフォルト以外のテーマをインストールする手順を見ていきましょう。

管理画面の左メニューにある「外観」をクリックします。

「新規追加」をクリックします。

テーマがあらかじめ決まっていたら、「テーマを検索」のところから選びます。どのテーマにするか決めていない場合は「注目」や「人気」の一覧から選んだり、歯車アイコンの「特徴フィルター」をクリックして選ぶこともできます。

特徴フィルターから選ぶ場合は、希望するカテゴリにチェックを入れます。

ここでは「Lightning」というテーマを選ぶことにしてインストールの仕方を説明します。

インストールのボタンを押し、インストールが完了すると「有効化」というボタンに変わります。そこで「有効化」をクリックします。

有効化したら、次は上部の家のアイコンにポインタを合わせ「サイトを表示」を出します。

サイトを表示すると「Lightning」が反映されていることがわかります。

テーマをカスタマイズする場合は、サイト上部の「カスタマイズ」、もしくはダッシュボードの「外観」→「カスタマイズ」からできます。

タイトルやスライドショーなどを個別にカスタマイズすることができます。
 

WordPressテーマを決める前にやっておくべきこと

WordPressのテーマは有料・無料を合わせると数千を超えるテーマがあります。多すぎてなかなか選びきれないと思いますが、まずは判断基準を明確にする必要があります。判断基準を設定するために決めておきたいのは以下の3点です。

  1. 目的は何か
  2. ターゲットは誰か
  3. 掲載する情報の内容は

各項目について確認してみましょう。
 

1. 目的は何か

一般的に企業がWebサイトを持つのはどのような理由があるのでしょうか。

問い合わせを増やしたい、採用に繋げたい、FAQを設置してカスタマーサービスの負担を減らしたいなど、理由は多岐に渡ります。

どのような目的で構築するのか、事前に社内で擦り合わせておかなければ認識のズレが起こる可能性があります。あとから「この項目も追加してほしい」と言われると修正の手間が発生してしまう上、テーマによっては対応できない可能性もあります。
 

2. ターゲットは誰か

次は、誰に向けたWebサイトなのかを決めましょう。

ターゲット像は明確であればあるほど共通認識を持ちやすく、Webサイトの仕様も判断もしやすくなります。明確にするためにはペルソナを設計すると良いでしょう。

ペルソナとは、自社にとって理想的な顧客像を1人の人物に落とこんだものです。年齢、性別、悩み、趣味など、実在の人物として認識できるレベルに作り込んでみましょう。

HubSpotが作成した無料のペルソナ設計テンプレートを使ってみるといいかもしれません。
 

3. 掲載する情報の内容は

Webサイトの目的とターゲットが明確になったら、どのような情報を入れるのかを決めていきます。Webサイトを構成する情報を考える前に、WordPressのページ構造を理解しておきましょう。

WordPressは「固定ページ」と「投稿ページ」の2種類のページがあり、それぞれに適した情報が異なります。

《固定ページと投稿ページの違い》

  固定ページ 投稿ページ
コンテンツ ・トップページ
・ランディングページ
・会社概要
・事業紹介
・アクセス
・問い合わせフォーム etc
・ニュース
・ブログ
・事例紹介
・お知らせ
・イベント情報 etc
特徴 普遍性の高い情報を配置するのに適したストック型のページ 時事性の高い情報を流すのに適したフロー型のページ
留意点 不足している情報はないか、準備段階でしっかり確認する どれだけ更新できるか、運用体制を構築する

 

企業サイト用WordPressテーマの特徴を知ろう

事前準備ができたら、実際にどのようなテーマを選定するか考えていきましょう。

ただ、どのようなサイト構成が必要で、どのようなデザインのテーマを選べばいいのか、よほど経験がない限りゼロからイメージするのは難しいでしょう。迷った時は、同業他社や自分が使いやすいと思うWebサイトを参考にしてみましょう。

漫然と「このWebサイト、カッコイイな…」と眺めるだけはなく、以下で紹介する視点を持ってじっくり観察してみてください。
 

参考にしたいWebサイトを「リバースエンジニアリング」してみよう

リバースエンジニアリング(逆行分析)とは、他者が作ったものを分解してその仕組みを理解することです。Webサイトをリバースエンジニアリングしてみることで、様々な気づきを得られます。

難しそうと思われるかもしれませんが、見るポイントを絞ればそれほど難易度は高くありません。注視するべきポイントは以下の2つとなります。

  1. レイアウト
  2. デザイン

では、実際に上記2つのポイントに沿ってリバースエンジニアリングをやってみましょう。

Barnsley Hospital NHS Foundation Trust 

こちらはイギリスの総合病院Barnsley HospitalのWebサイトです。トップページにたどり着いたユーザーが知りたいであろう情報がわかりやすく配置されています。
 

1. レイアウト

トップページの構成はこのようになっています。

病院のWebサイトを訪問するユーザーが求めるのは、例えば以下のような情報でしょう。

  1. 時事性の高い病気に関する最新情報
  2. 病院の連絡先、住所
  3. 病院の評価

バーンズリー・ホスピタルのトップページは、緊急時に検索で連絡先を探す人も、最新情報を求める人も、すぐに欲しい情報を見つけられるような構成となっています。

  • このページに訪れるユーザーは何を知りたがっているのか
  • どのように配置すればユーザーはストレスなく情報を得られるのか

基本的にはこちらの2点を意識しながら、自社にとっての最適なレイアウトを考えてみましょう。
 

2. デザイン

次に、デザインをリバースエンジニアリングしてみましょう。サイト全体の色使いやフォント、ボタンのデザイン、テキストの色、リンクの色(既読、ホバリング)などをチェックします。

Barnsley HospitalのWebサイトは、「安心感」「信頼」」などの印象を与える青がメインに使われています。装飾はほとんどなく、限りなくシンプルなデザインで、各ページの情報量も必要最低限に抑えられています。あまりに雑多だとどこに何の情報があるのかわからなくなってしまうため、シンプルさを優先しているのかもしれません。

右上にアクセシビリティツールが設置されており、クリックするとサイト内のテキストの大きさを変更したり、音声読み上げ機能を利用できたりします。小さい文字が読みにくい方や、目の見えない方でも問題なく利用できるよう配慮されていますね。

  • ターゲットユーザーはどのような人なのか
  • ターゲットユーザーにとって見やすい・使いやすいデザインは何か

レイアウト同様、デザイン面もターゲットに合わせて設計するのが基本です。

他のWebサイトも簡単に見ていきましょう。
 

SaaSサービスサイト

Pressbooks | The open book creation platform.

PressBooksは、WordPress上でさまざまな書籍形式のeBookが作成できるソフトウェアを提供しているSaaSです。

Pressbooks | The open book creation platform.

ファーストビューにサービスの内容がひと目で理解できる情報を集約しています。白を基調としたシンプルなデザインで、赤い「詳細」ボタンの視認性が高くなっています。下部に設置されたインストールボタンはマウスオーバーすると赤色に変化し、シンプルなデザインを保ちつつ、クリックを促すような設計になっています。
 

B2C

Cleaning Products, Supplies and Bleach | Clorox®

家庭用および業務用の洗剤や漂白剤などの製造・販売を行っているクロロックス社のホームページです。製品情報だけでなく、消費者の関心が高いインフルエンザなどのについてのニュースも提供しています。

本来なら製品情報だけ掲載しても良さそうですが、「ユーザーが求める情報を提供する」という企業としての姿勢を感じる情報構成になっています。
 

ホテル

The Bedford Hotel,Tavistock,Devon.Historic Tavistock hotel.

こちらはイギリスのロンドンにあるベッドフォーとホテルのWebサイトです。ファーストビューシンプルで、右側に表示されている空室照会の項目が目立っています。予約目的で訪れたユーザーのニーズにすぐ応えられるレイアウトになっています。
 

WordPressテーマ、無料と有料のメリット・デメリットを比較

WordPressには無料のテーマと有料のテーマがあります。この項では、無料テーマと有料テーマそれぞれのメリット・デメリットを見ていきましょう。

《無料テーマと有料テーマの比較》

  無料テーマ 有料テーマ
メリット ・無料
・限られた機能しかな炒め動作が速い
・気軽に試せる
・初心者でも使いやすい
・幅広い選択肢を得られる
・サポートやアップデートを利用できる
・オリジナリティのあるテーマを選べる
デメリット ・サポートが限定的
・限られた機能しか使用できない
・カスタマイズにはコーディングの知識が必要
・有料に比べると画一的で独自性が発揮しにくい
・動作が重いテーマもある
・ある程度CSSやHTMLの知識が必要な場合もある

時間に比較的余裕があって、タグやCSSに少しずつ慣れながらWebサイトの運営をじっくり学んでいきたいのであれば、いろいろ試せる無料テーマがおすすめです。Webサイトの運営に慣れてきて、もっと洗練されたデザインで多機能のテーマがほしくなったら有料テーマに切り替えるのも良いでしょう。

時間がなくて見栄えの良いWebサイトを作りたい場合は、有料でサポートの充実しているテーマを選ぶと良いでしょう。
 

おすすめの国産企業サイト用テーマ4選

国産の企業サイトに適したテーマをご紹介します。今回、国産に絞って紹介するのは以下の3つの理由からです。

  1. すべて日本語で書かれているので扱いやすい
  2. 半角表示が基本の外国製テーマとは異なり、日本語フォントが前提になっているので表示が崩れる心配がない
  3. エラーが起こった場合にサポートが受けやすい
     

1. BizVektor

bizvektor

BizVektorは、無料で商用利用が可能なテーマです。

最大の特徴は、まったく知識がなくても公式サイトの「BizVektor クイックスタート」のページを見ながら、簡単にWebサイトを作ることができる点にあります。

しかも、SNSやレスポンシブ表示に対応していて、無料でも必要な機能がそろっています。事前準備さえしておけば、迷うことなくWebサイトを完成することができます。
 

2. Lightning

Lightningのテーマには、無料版と有料のLightning Proがあります。無料版も商用利用が可能です。シンプルで設定しやすくて情報を整理しやすいレイアウトとして推薦する人も多いテーマです。

特徴は、プラグインの「VK All in One Expansion Unit」を一緒に利用することで、アクセス解析タグやスマートフォン向けのスライドメニューなどの拡張機能(プラグイン)が利用できる点にあります。

拡張機能の設定などがある分、BizVektorと比較すると初心者には難しく感じるかもしれませんが、Webサイトの運営に慣れるまではこの拡張機能だけで十分かもしれません。
 

3. Habakiri

Habakiriも商用無料で使えるテーマです。

特徴はカスタマイズのしやすさにあります。ヘッダーやメインメニューの色を変えたり、スライドショーにしたりできます。デザインのカスタマイズを行う時は、WordPressのテーマカスタマイザーを利用して、配置の変更や項目追加ができるようになっています。

「基本的な機能だけでとりあえずWebサイトを作っていたい」と考える人にとっては、最適のテーマといえるでしょう。
 

4. TCD

日本でもっとも多く利用されている有料テーマです。スタートアップ向け、エステサロン向け、法律事務所向けなど業種別に分かれており、該当する業種が見つかればすぐにWebサイトを構築できます。

その中でも、企業サイト向けのFAKEでは背景に動画を利用することもできます。
 

ユーザーにとって価値ある情報が伝わるテーマを

「デザイン」という言葉には車やインテリアなどの外観を指すだけではなく「考案する」「企画する」「〇〇の目的で作る」という意味があります。そこから「どうしたら問題が解決できるだろう」と実際にものを作りながら試行錯誤していく「デザイン思考」というアプローチが、ビジネスにも取り入れられるようになりました。

Webサイトのデザインも同じで、イメージや色を決めて外観を美しくするためだけのものではありません。Webサイトを訪れるユーザーは「何を求めてやってくるのか?」「どんな問題を解決しようとしているのか?」に応えるために、デザインがあります。

WordPressの豊富な有料・無料のテーマの中から自社のWebサイトに最も適したテーマを選定するプロセスは、「Webサイトの本来の目的」「訪問ユーザーに何を提供するべきか」を確認する機会でもあるでしょう。

無料のテーマも数多くあるので、試行錯誤を繰り返しながらユーザーに寄り添ったWebサイトを作りましょう。

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

cms_guide_for_beginners

元記事発行日: 2020年4月23日、最終更新日: 2020年4月23日