税理士などの士業のホームページには、信頼感や誠実さを感じるデザインが欠かせません。さらに専門的な業務内容をわかりやすく伝える工夫も必要になってくるんですよね。
これらを制作会社に依頼するとコストが嵩みますし、多忙な本業の傍ら、ゼロから制作するのは大変です。
WordPressテーマ「AIDER（エイダー）」は、士業のホームページに必要なデザインと機能があらかじめ用意されていますので、オプションを埋めていくだけでホームページが完成します。
当記事で、AIDERの主要機能をご紹介します。どんなことができるテーマなのか参考にご覧ください。
目次
WordPressテーマ「AIDER」とは
WordPressテーマ「AIDER（エイダー）」は、TCD115作目の税理士法人をコンセプトに開発されたテンプレートです。テーマ名は「手伝う・援助する」という意味から名付けられました。
「信頼」「実績」「誠実さ」といったキーワードを自然に感じさせるデザインで、事務所の第一印象を丁寧に伝えられます。
士業に必要なページ構成が最初から用意されているため、開業時のサイト立ち上げはもちろん、既存サイトのリニューアルもスムーズに行えます。
できること
- サービスや料金表を整理して掲載できる
- スタッフ紹介ページを簡単に作成できる
- お客様の声（事例紹介）をサービスに紐づけて掲載できる
- 電話番号やお問い合わせボタンをヘッダー・フッターに常設できる
- お知らせ・コラムなどの更新情報を投稿できる
- 1ページ完結型のランディングページを作成できる
向いているサイト
- 税理士・会計士・社労士などの士業事務所
- 保険会社や金融関連の企業サイト
- 個人事業主・フリーランスの実績紹介サイト
士業に限らず、信頼と実績を重視する業種やコーポレートサイトとも相性がいいです。
デザインの自由度とモバイル対応
まずは、サイト全体の印象を左右するデザイン面や、モバイル対応について確認していきましょう。
カラー
デモサイトにはネイビーを採用していますが、お好きな色に変更可能です。サイト全体のカラーを即時変更できる「アクセントカラー」を利用します。
AIDERのデザインに合わせて用意されているプリセット5種か、ご自身で好きなカラーを指定することも可能です。
フォント
各種OSに入っているシステムフォントの中から厳選した和文フォント3種類、欧文フォント13種類に加え、Webフォントも指定可能です。用意されているフォントは以下の記事でご紹介しています。
フォントは、人々の印象を司る重要な要素のひとつ。Webデザインにおいて、フォントは単なる文字の表示以上の役割を果たします。 Appleは、なぜWindowsとの差別化に成功したのか。スティーブ・ジョブズ氏がタイポグラフィの美しさに魅了され、フォントにこだわり抜いたOSを開発したからです。美しい...
和文にはこのフォント、欧文にはこのフォントというふうにプレビューしながら登録して、各所の反映できる仕組みです。
詳しい設定方法はこちらの記事で解説しています。
フォントは、サイトの雰囲気づくりに大きく作用します。初期値のままでも問題ありませんが、確認しておきましょう。 目次設定箇所使い方フォントセット各所のフォント設定 設定箇所 ダッシュボード内のTCDテーマ > 基本設定 > フォントより設定します。 使い方 基本設定「フォント」でフォントセットを登録しておく。（3タイプ+ロゴ用フォントを登録可） フォントを設定できる各所でフォントセットを…
画像非表示オプション
デモサイトでは各所に画像がセットされていますが、デザインを損なわない範囲で、画像無しに変更できるオプションが用意されています。
例えば、こちらのお客様の声を掲載しているデモページ。
画像ありのお客様の声
ヘッダー画像や、お客様の画像は無しでも使える仕様となっています。
画像無しのお客様の声
お客様の写真は必ずしも用意できないですし、クチコミやレビューは画像無しでも成り立つコンテンツだからです。
ハイクオリティな画像をセットするに越したことはないですが、「すぐには用意できないよ。」「あとで追加するから先に公開したい。」という方に向けたオプションです。
モバイル対応
スマホでも綺麗にデザインが変形してくれます。ユーザー側で設定は不要です。
また、各所でモバイル表示用のテキストを設定できます。「PCではちょうどいいが、スマホでは長すぎる」というような細部の調整をするためのオプションです。
細かく調整を加えていますので、ぜひお手元のスマホでデモサイトをご覧ください。
次のセクションからは、ページやパーツごとにAIDERで実現できることをチェックしてみてください。
トップページ
トップページは第一印象を決める大切な部分です。どんな構成でつくれるのかチェックしてみましょう。
ヘッダーコンテンツ
ヘッダーコンテンツは、以下の2タイプから変更できます。
デモサイトと同じ2分割タイプ
キャッチコピーと画像を2分割にできる仕様で、
- 左右の配置入れ替え
- 画像を複数登録してスライダー化
- 画像下部に補足情報の登録
が可能です。
テキストとボタンを表示するタイプ（左寄せ）
テキスト・ボタン・画像を登録できる仕様で、配置は「左寄せ・中央寄せ・右寄せ」から変更できます。
メインコンテンツ
トップページのメインコンテンツは、テキストや画像を登録してドラッグ&ドロップのみで作成できます。
上記のようにブロックごとにコンテンツを登録・追加して、並び替えなども可能です。WordPressのエディタで作成できるフリースペースも用意しているので、オリジナルのコンテンツも盛り込めます。
各ブロックの設定方法や使い方はこちらの記事で解説しています。
サイト（＝事務所など）の概要や、サイト内の各コンテンツへの導線をイメージしてトップページを設定していきます。下層ページ（詳細ページ）をある程度準備してからの方が設定しやすいです。 「下層ページ」とは、以下のことを指しています。 >>投稿タイプの使い分けについて 投稿ページ：集客ブログやコラム お知らせページ：タイムリーな告知など サービスページ：取扱いサービスを紹介 お客様の声：お客様…
下層ページ
AIDERに搭載されている下層ページについてご紹介します。いずれも士業のホームページに必要なページ構成になっています。
スタッフページ
スタッフページは、WordPressのユーザー情報をそのまま利用してつくれます。
設定画面にある「ユーザー一覧ページを利用する」にチェックを入れると、上記のようなスタッフ一覧ページが出来上がります。WordPressユーザーのオプションを拡張しているので、スタッフの経歴やメッセージも追加で詳しく掲載可能です。
>> 経歴やメッセージを表示しているユーザープロフィールページ
カスタム投稿タイプ「お知らせ」
>> デモのお知らせページ
事務所からのお知らせや告知向けのカスタム投稿タイプ「お知らせ」。通常の投稿とは異なり、アイキャッチ無しでも公開できるデザインです。
アイキャッチ無しのお知らせページのデザイン
事務所からの簡易的なお知らせならアイキャッチは無しでもいいかもしれません。
カスタム投稿「サービス」
サービス内容を紹介するカスタム投稿「サービス」。サービスのコンバージョンに繋げる役割を担う1カラム仕様のページです。以下の画像で構成をご確認ください。
>> デモのサービスページ
サービスページ内で使える汎用的な要素は、次のようにショートコード化して搭載しています。
タブで切り替えられるタイプのテーブルです（タブ無しも可）。ボタン操作のみで行の追加・削除が可能です。すべてのサービスページの末尾に「料金表」として設置しています。
サービスに関連するお客様の声だけを自動で表示したり、IDで指定表示することも可能です。表示件数も指定できます。すべてのサービスページに「お客様の声」として設置しています。
アクセントカラーが自動反映されるカード型リスト。左右それぞれテキストを入力可能です。
画像とテキストをポイントごとに登録できるポイントリスト。「POINT」という文言は変更可能です。背景色にはサイトのアクセントカラーが反映される仕様です。
>> ポイントリストを設置したサービスページ
>> ポイントリスト、カードリストの両方を設置したサービスページ
順序やステップを表すのに最適なステップリスト。STEPという文言は変更可能。背景色や文字色にはアクセントカラーが反映される仕様です。
項目ごとに吹き出しラベルを登録できる吹き出しリスト。ネイビーの箇所には、アクセントカラーが自動反映されます。
また、次のように3カラムにしたり、吹き出しのデザインを帯状の見出しに変更することも可能です。
このとき、帯見出しのカラーは、アクセントカラーを薄めた色が自動反映される仕様です。
それぞれHTMLやCSSは不要で、テキストや画像を登録してつくります。
例えば、サービスの要点やポイントを伝えたいときには、「ポイントリスト」というショートコードを使います。設定画面は以下のようになっており、
- 画像やテキストを登録する
- ショートコードを本文内の表示したい箇所にコピペする
という流れで利用できます。
用意されているすべてのショートコードについては、こちらの記事でご覧ください。
AIDERには、サービスページとお客様の声を関連づけて掲載する機能が搭載されています。 いずれもWordPressのエディタを使って作成しますが、各所に専用オプションも用意されていますので、基本的なエディタの使い方と併せて当記事でご紹介いたします。 作成方法を知りたいページを以下よりご確認ください。 通常の投稿（ブログ） お知らせページ サービスページ お客様の声ページ 固定ページ 目次新規投稿を…
カスタム投稿「お客様の声」
サービスのクチコミを紹介するカスタム投稿「お客様の声」。関連する「サービス記事」へのリンクを表示できる仕様です。ページ構成は以下を参考にご覧ください。
>> デモのお客様の声ページ
設定方法はシンプルで、お客様の声ページをつくる際に、既存のサービス記事にチェックを入れるのみです。
- サービスページを作成しておく
- お客様の声ページ作成時に❶でサービスにチェックを入れる
- 公開する
という流れで設定すれば、
↓↓↓
「サービスページ（ご利用のサービスや商品紹介ページ）」
という自然な導線がつくれる仕組みです。サービスの実績紹介として機能します。
固定ページテンプレート
リッチな固定ページをつくるための雛形が2種類搭載されています。
タブページ
固定ページテンプレート「タブページ」は、複数の固定ページを1ページにまとめる機能です。親子関係に設定した固定ページを、1ページ内のタブで表示できる仕組みです。
デモサイトでは、以下のように設定しています。
親ページの設定UIは、以下のようになっています。
上記箇所から親に紐づいた子ページを作成できます。
タブページでは、ヘッダー画像やヘッダーコピーも登録できる仕様なので、子ページを未設定のままお使いいただくことも可能です。
>> 子ページ未設定のタブページで作成した「ABOUTページ」
ランディングページ
固定ページテンプレート「ランディングページ」は、TCDテーマお馴染みの、自由度の高い固定ページを作成できる機能です。以下はいずれも同じテンプレートでつくっています。
それぞれヘッダーやフッター、コンテンツ幅などを変更できるので、幅広いバリエーションのページがつくれます。
AIDERではこのランディングページ作成機能にマイナーチェンジが加えられました。
以下のキャッチコピー設定に追加された「こだわり設定」という箇所です。
「文字色」と「下の余白」がこだわり設定内に移動し、「行間」オプション（狭め・標準・広め）が追加されています。
キャッチコピーのフォントサイズによって、行間は大きく変わります。そこをPC・スマホ別で調整できるようにしました。美しい見せ方にこだわる方に向けたオプションです。
ランディングページの詳しい機能はこちらでご紹介しています。
AIDERには、通常の固定ページに加えて「ランディングページ」用のページテンプレートが用意されています。 ランディングページとは 検索結果や広告、SNSやメルマガを経由して、ユーザーが最初に「着地（landing）するページ」のことです。略してLPとも呼ばれます。 当デモは税理士事務所のサイトなので、次のようなページをつくっています。 税金対策セミナー 確定申告サポート 法人設立サポート いずれの…
ナビゲーション
ユーザー導線に大きく関わるヘッダーやフッターなどのナビゲーションについて見ていきます。
ヘッダーバー
デモサイトでは、上記のように設定されているヘッダーバーですが、
- ロゴ
- 電話番号・ボタン（最大3つまで）
- ヘッダーメニュー
を登録できるオプションが用意されています。
また、ボタンの代わりに、オリジナルのバナーも登録可能です。
無料相談や、お問い合わせにつながる重要な導線を設定しておくオプションです。
メガメニュー
ヘッダーバーにはメガメニューを設定できます。例えば、デモサイトのヘッダーメニュー「サービス」にカーソルを当ててみてください。
税理士事務所で展開するサービスが一覧表示されるので、訪問者をスムーズに案内できます。ここには画像・テキスト・URLを任意の数だけ登録できるので、サイト内のナビゲーションとしてはもちろん、外部ページへのリンクも登録可能です。
フッター
AIDERのフッターは、上記3つのエリアに分かれています。
| ボタンエリア | 以下の2タイプから選べるボタンを2つまで表示できます。 ・電話番号を表示するタイプ（スマホからタップで架電できます） ・リンクを表示するタイプ（資料請求やお問い合わせへ繋げる） |
| バナーエリア | 画像・テキスト・リンクを設定して3列で表示されるバナーを設定できます。 パターンも表示できますので、地図や独自のコンテンツを埋め込むことも可能です。 |
| メインエリア | 事務所のロゴや住所・営業時間などの補足情報、メニューを設定するエリアです。 |
サイトを立ち上げたばかりでコンテンツが少ない場合は、「ボタンエリア」「バナーエリア」は非表示にもできます。サイトの規模に合わせて柔軟にカスタマイズできる仕様です。
モバイルデバイスだけで表示される「固定フッターバー」を設定して、スマホユーザー向けの導線をつくる機能も搭載されています。
詳しいオプションはこちらの記事でご紹介しています。
サイト内の全ページで表示されるフッターと、スマホ用固定フッターの設定方法です。CTA（問い合わせなどの行動喚起）につながるパーツを搭載しています。 フッターはサイト訪問者によく見られている重要なパーツです。以下の記事でフッターのもつ役割を再確認しておきましょう。 >> WEBサイトのフッターが重要な理由 目次設定できる内容設定箇所ボタンコンテンツバナーエリアフッターメインエリア固定フッ…
士業のホームページ制作にAIDERという選択肢を
WordPressテーマ「AIDER」の機能概要をご紹介いたしました。
士業のホームページに必要な要素をしっかりと押さえ、コンテンツ制作を効率的にサポートするテーマです。特にカスタム投稿「サービス」と「お客様の声」を組み合わせることで、専門的な業務の実績を効果的に紹介できます。
ホームページを通じて専門性や実績をしっかりと伝えたい士業の方にとって、有効な選択肢となるはずです。
コメント