FLOW-WEBで制作するホームページには、士業サイト向けに開発した独自のWordPressテンプレート「FLOW-FLEX 2」を使用しています。
テンプレートと聞くと、「どの事務所も同じ見た目になるもの」という印象を持たれるかもしれません。FLOW-FLEX 2は、見た目をそろえるためのものというより、士業事務所のホームページに必要な仕組みを、あらかじめ組み込んでおくための土台です。
このページでは、FLOW-FLEX 2にどのような仕組みが入っているのか、それが事務所にとってどのような意味を持つのかを、項目ごとにご紹介します。制作サービス全体の内容や料金については、次のページをご覧ください。
事務所情報は1か所に入力すれば全ページに反映される
ホームページを長く運用していると、電話番号や受付時間が変わることがあります。そのとき、ヘッダー、サイドバー、お問い合わせページ、各ページの末尾と、書き換える場所がいくつもあると、どこか1か所だけ古い情報が残ってしまいがちです。
FLOW-FLEX 2では、事務所の基本情報を設定画面の1か所にまとめています。
- 事務所のロゴマーク
- 事務所名
- ヘッダーに表示するサイトのタイトル
- 電話番号と受付時間
- お問い合わせフォーム
- お問い合わせ欄に添える案内文
ここに入力した内容は、次の場所に自動で表示されます。
- ヘッダー（ロゴ、事務所名、電話番号、受付時間、お問い合わせボタン）
- トップページの途中に入るお問い合わせ欄
- サイドバーのお問い合わせ欄
- 全ページの最下部にある相談・お問い合わせ欄
- スマートフォンの画面下部に固定されるボタン
- トップページの事務所案内
電話番号が変わったときも、設定画面の1か所を書き換えれば、全ページの表示が切り替わります。電話番号は、スマートフォンでタップするとそのまま発信できる形に自動で整えられますので、リンクの書き方を気にする必要もありません。
電話のみ・フォームのみの事務所にも自動で適合
「電話での相談は受けず、フォームからのみ受け付けたい」「メールは使わず、電話で受けたい」という事務所もあります。
FLOW-FLEX 2のお問い合わせ欄は、電話番号とフォームのどちらが設定されているかを見て、表示を切り替えます。両方が設定されていれば「お電話・メールにてご相談ください」、電話番号だけであれば「お電話にてご相談ください」と、案内の文言も変わります。ヘッダーのお問い合わせボタンや、スマートフォンの固定ボタンも、設定されているものだけが表示されます。
業務が忙しくなって電話の受付をやめる、スタッフが増えたので電話も受け付ける、といった方針の変更があったときも、設定を変えればサイト全体の表示が合わせて切り替わります。
設定が抜けたまま公開されにくい
ホームページで避けたいのが、押しても何も起きないボタンや、行き先のないリンクが残ってしまうことです。
FLOW-FLEX 2では、お問い合わせフォームが設定されていない場合、フォームへ移動するボタンは表示されません。そのうえで、ログイン中の管理者にだけ「お問い合わせフォームが未設定です」という注意書きが表示されますので、設定漏れに気づきやすくなっています。ホームページの訪問者には、この注意書きは表示されません。
弊社で制作させていただく際、トップページに配置することの多い「代表者のインタビューを読む」「その他のご質問はこちら」といったボタンも、リンク先のページを設定したときにだけ表示されます。ページがまだ用意できていない段階で公開しても、行き先のないボタンが並ぶことはありません。
どのページからでもすぐに相談へ進める
訪問者が「相談してみようか」と思うのは、トップページを見ているときとは限りません。検索から直接たどり着いた記事を読み終えたときかもしれませんし、料金のページを見ているときかもしれません。
FLOW-FLEX 2では、お問い合わせフォームと電話番号を、すべてのページの最下部に表示します。ヘッダーやサイドバーの「お問い合わせ」ボタンは、別のページへ移動するのではなく、同じページの中のフォームまでそのままスクロールします。ページの切り替えを待つ必要がなく、読んでいた内容から離れずに入力へ進めます。
パソコンでは、メニューがスクロールに合わせて画面の上部に残り、サイドバーのお問い合わせ欄も画面内に表示され続けます。
スマートフォンでは画面下部にボタンを固定可能
スマートフォンでは、画面の最下部に「電話する」「お問い合わせ」のボタンを固定して表示します。ページをどこまで読み進めても、親指の届く位置から電話をかけたり、フォームへ移動したりできます。
このボタンは、設定画面でオン・オフを選べますので、用途や考え方、業務の内容に応じて表示の有無を選択できます。画面下部に操作バーのある機種でも重ならないよう余白を取り、「ページ上部へ戻る」ボタンとも位置がぶつからないようにしています。
フォームの入力欄も端末に合わせて調整
お問い合わせフォームの入力欄は、スマートフォンでも押しやすい大きさにそろえています。
誰が書いた情報なのかを記事ごとに示せる
士業のホームページでは、その情報を誰が書いたのか、誰が内容を確認したのかが、訪問者の安心感に大きく関わります。
FLOW-FLEX 2には、執筆者・監修者のプロフィールを表示する仕組みが入っています。設定画面で次の項目を入力すると、記事にプロフィールの欄が表示されます。
- 顔写真
- 氏名
- 事務所名
- 資格・肩書き・登録番号
- 自己紹介文
表示する位置は、記事の冒頭、本文の下、その両方から選べます。ブログ記事（投稿）にだけ表示するのか、固定ページにも表示するのかも選べます。見出しの文言も、「この記事を書いた人」「この記事の監修者」など、事務所の実態に合わせて変更できます。
一度入力しておけば、新しく書いた記事にも自動で表示されますので、記事ごとにプロフィールを貼り付ける必要はありません。資格を追加で取得したとき、所属が変わったときも、設定画面を書き換えれば全記事に反映されます。
誰が書いたのかが明示されていることは、訪問者だけでなく、検索エンジンやAIに事務所の内容を把握してもらううえでも意味があります。
情報の鮮度を保ちやすい
法改正や報酬額の改定などで、士業のホームページの情報は古くなりやすいものです。訪問者にとっても、その記事がいつの時点の情報なのかは気になるところでしょう。
FLOW-FLEX 2では、記事に公開日を表示し、内容を更新した場合は更新日もあわせて表示します。記事の一覧でも、更新した記事には更新日が表示されます。
管理画面の側にも工夫があります。投稿と固定ページの一覧に「最終更新日」の列を加えており、日付の順に並べ替えられます。古い順に並べれば、長いあいだ手を入れていないページが上から順に並びますので、年に一度の見直しのときなどに、どこから確認すればよいかが分かりやすくなります。
記事から業務のページへ案内しやすい
解説記事を読んだ訪問者に、関連する業務のページや、別の記事も見てもらいたい。そのための仕組みも入っています。
URLを書けばカードの形に自動成形
記事の中に、紹介したいページのURLを決まった形で1行書くと、そのページのタイトルと画像が入ったカードが表示されます。いまご覧のこのページで、上のほうに表示されている別記事を紹介するリンクの枠がこのカードです。
サイト内のページであれば、タイトルと画像はリンク先から自動で取得されます。あとからリンク先のページのタイトルを変えた場合も、カードの表示は合わせて変わります。
官公庁のページなど、外部のサイトを紹介する場合も同じ書き方で表示できます。外部のサイトへのカードには「別サイトへ移動」と表示され、新しいタブで開きますので、訪問者が気づかないうちに事務所のホームページを離れてしまうことを防げます。
パンくずリストを自動で表示
各ページの上部には、「ホーム ＞ 業務案内 ＞ 建設業許可」のように、そのページがサイトのどこにあるのかを示すパンくずリストが自動で表示されます。固定ページは親子関係に、ブログ記事はカテゴリーに沿って組み立てられますので、ページを追加するたびに手で書く必要はありません。
検索から直接記事にたどり着いた訪問者が、ひとつ上の階層の業務案内へ移動する手がかりにもなります。
記事の下に共通の案内を置くことが可能
ブログ記事の本文の下には、すべての記事に共通して表示できる欄を用意しています。業務のご案内や、よく読まれている記事への誘導など、記事を読み終えた訪問者に見てもらいたいものを、まとめて配置できます。
余計なものを読み込まない軽量表示
業務によっては、閲覧の半数以上をスマートフォンが占めます。外出先など通信環境のよくない場面でも待たせずに表示できるよう、テンプレート自体を軽く作っています。
- 電話やメールのアイコンは、外部のサービスから読み込まず、テンプレートの中に持たせている
- 文字は、訪問者の端末に入っている標準の書体で表示し、書体のデータを別途読み込まない
- メニューの開閉などの動きは、必要な分だけを実装し、大きな部品の読み込みに頼らない
- WordPressが標準で出力する絵文字用のプログラムなど、士業のホームページでは使わないものを省く
- 画面の外にある画像は、スクロールして近づいたときに読み込む
画像には、あらかじめ表示する大きさを指定しています。読み込みの途中で文章の位置が動いてしまい、読んでいた場所を見失う、ということが起きにくくなります。
プラグインに頼る部分を減らして軽量化・セキュリティ向上
WordPressには、機能を追加する「プラグイン」が数多くあります。便利な反面、数が増えるほど更新の手間がかかり、プラグイン同士の相性で不具合が起きたり、脆弱性の入口になったりすることがあります。
FLOW-FLEX 2では、士業のホームページで必要になる次の機能を、テンプレートの側に持たせています。
- パンくずリスト
- 関連ページをカードの形で紹介する機能
- 記事一覧のページ番号
- 執筆者・監修者のプロフィール欄
- スマートフォンの固定ボタン
- 管理画面の最終更新日
これらのためにプラグインを追加する必要がありませんので、公開後に事務所で更新・管理しなければならないものが少なくて済みます。お問い合わせフォームについては、使い方に困ったときウェブ上の情報を確認しやすい、利用者の多いフォーム用のプラグインを使用しています。
編集画面でも公開時に近い見た目で書ける
記事を書く画面と、公開されたページとで見た目が大きく違うと、「公開してみたら見出しの印象が違った」「表が思ったより窮屈だった」ということが起こります。そのたびにプレビューを開いて確認するのは手間がかかります。
FLOW-FLEX 2では、編集画面にもホームページと同じ見出しや表のデザインを反映しています。書いている段階で、公開したときの見え方をおおよそ確認できます。
文字や背景の色を選ぶ画面にも、そのホームページで使っている色があらかじめ並びます。記事ごとに違う色が使われて、ホームページ全体の印象がばらついてしまうことを防ぎやすくなります。
読みやすさと操作のしやすさに配慮
士業事務所には、ご高齢の方や、パソコンやスマートフォンの操作に慣れていない方からの相談も少なくありません。FLOW-FLEX 2では、次のような点に配慮しています。
- キーボードだけで操作する方のために、いま選択している場所が分かるよう表示する
- 画面を読み上げるソフトを使う方のために、ボタンやメニューに説明を付けている
- 端末の設定で画面の動きを減らしている方には、スクロール時の動きを抑えて表示する
- スマートフォンのメニューは、開いた状態から迷わず閉じられる
いずれも目立つ機能ではありませんが、相談しようとした方が操作でつまずいて離れてしまうことを、少しでも減らすためのものです。
テンプレートであることの制約
ここまでFLOW-FLEX 2の特徴をご紹介してきましたが、テンプレートである以上、できないこともあります。
ページ全体の構造は共通ですので、ほかにない独自のレイアウトにしたい場合や、部分ごとに細かく作り込みたい場合には向いていません。FLOW-WEBでは、構造の部分にテンプレートを使って工程を抑え、その分を集客の方向性の検討やお打ち合わせに充てる、という考え方で制作しています。
一方で、テンプレートを使っているからといって、すべての事務所のホームページが同じになるわけではありません。色、写真、トップページに入る内容と順番は、事務所ごとに異なります。また、最初に画面内に入るエリアのデザインはそれぞれの事務所で大きく変わりますので、「またこのホームページだ」と思われることは少ないはずです。
違いの幅については、今後公開予定の制作事例からご判断いただければと思います。
