士業サイトのトップページは、本でいえば「表紙」のような存在です。どのようなビジネスであるかを印象付ける重要な役割があります。
Webサイトの構築はプロに頼むこともできますし、自分で作ることもできます。どのような方法で事務所サイトを作ったとしても、戦略的に活用するには自社で運用していく必要があるでしょう。
私は初めて社労士事務所のホームページを作ったときに、有料のCMSを使いました。ですが、日々の運用をしていくと使いにくさを感じるようになり、WordPressに変更したという経験があります。
WordPressは専門知識がない人でも使いやすく、何より日々の運用がしやすいのがおすすめポイントです。
ここでは、士業サイトのトップページをWordPressで作る方法について、社労士事務所を例にしてご紹介します。
士業サイトのホーム
トップページは、Webサイトの「ホーム」となるページです。士業サイトを構築するうえでも、思い入れがあるはずです。
多くの人は、まずトップページから作りたくなるのではないでしょうか。私はそうでした。
ですが、トップページから作業を始めると、すぐに中断せざるを得なくなると思います。文章を書くのと違って、Webサイトの構築には効率的な手順があります。
トップページは他のページの内容が決まってから、最後に作業することをおすすめします。
Webページの作成順序については、こちらの記事でご紹介します。
準備編：WordPressの設定
WordPressでWebサイトを作成するには、次のような準備が必要です。これらを事前に準備することで、安全かつ信頼性の高い事務所サイトを運営できます。
どのようなトップページができるのかは、ビジネス向けテーマ「Lightning」のデモサイトが参考になります。
事前準備
- ドメインの取得
事務所名やサービスに合ったドメイン - レンタルサーバーの契約
信頼性の高いレンタルサーバー - WordPressのインストール
サーバーの管理画面から簡単にセットアップ可能 - SSL設定
セキュリティ向上のため必要
WordPressの事前準備については、こちらの記事でご紹介します。
WordPressの入門書
WordPressを初めて操作する人は、入門書などを確認しながら自社サイト用にカスタマイズすると、スムーズに進められると思います。
サイト設計：トップページの役割
社労士事務所サイトのトップページには主に次のような役割があります。役割を理解して、ページ構成を決めることで効果的なトップページにすることに役立ちます。
- 第一印象の決定
訪問した人がサイトを開いた瞬間に、事務所の信頼感や専門性を伝える。 - サービス内容の提示
対応業務や強みを明確にして、必要な情報をすぐに見つけられるようにする。 - 次の行動を促す
関心を持った人が行動に移しやすいようにページリンクを貼る。
サイト設計：トップページの構成
社労士事務所のトップページには、次のような要素があると効果的です。これらを整理して、わかりやすいページ構成を考えましょう。
ページの構成
- ファーストビュー
事務所の特徴が一目で分かる画像＋PR文を掲載する。 - 主要ページへのリンク
事務所概要やサービス案内などのページへのリンクを貼る。 - 無料相談やお問い合わせボタン
相談・お問い合わせを受け付けるボタンを作成する。 - 最新のお知らせやブログの新着情報
クライアントに有益な情報を提供する。
実践編：トップページの作成
WordPressには「投稿」と「固定ページ」という2種類のページタイプがあります。
投稿はブログ記事などを作成する機能で、時系列で整理されます。頻繁に更新される情報提供などのページ作成に向いています。
固定ページは、時系列に左右されないコンテンツを作成するための機能です。トップページや事務所概要など、あまり情報は変更されない内容に向いています。
トップページは、固定ページで作成します。
固定ページを追加
WordPressの管理画面にログインして、画面左のメニュー「固定ページ」→「新規追加」で、固定ページを追加します。
ファーストビューを設定する
ファーストビューとは、ユーザーがウェブサイトを訪れたときに最初に目にする部分のことです。
直感的に「ここには、ほしい情報がありそう」「この事務所は、信頼できそう」と思ってもらうことが重要です。
メインビジュアル
メインビジュアルは、トップページの一番上に表示される部分です。ウェブサイトの第一印象を決める重要な要素です。
この部分には、画像やPR文を設定して、事務所の強みや専門性を伝えます。
WordPressのビジネス向けテーマ「Ligthning」では、スライドショーを設定できる機能があります。
オフィスの写真、スタッフのイメージ、または落ち着いたオフィス街の風景など、複数の画像を交互に表示して印象的なトップページにすることができます。
- 清潔感のあるオフィス風の画像を選ぶ
- 社労士の業務に関連したイメージ（書類・会議室など）にする
- 画像素材サイトなどを活用する
PR文
トップページ（ホーム）は固定ページで作成しますので、メニュー「固定ページ」→「新規追加」して、画像やスライドショーの下にPR文を入力します。
PR文はシンプルでわかりやすい表現にして、サイトを訪問した人に何を提供できるのかが一目でわかるようにしましょう。
ひと言で伝わる短いフレーズの例：「企業の成長をサポートするDXに強い社労士事務所」
主要ページへリンクを貼る
トップページでは、Webサイトを訪れた人が求める情報へスムーズに移れるように適切なリンクを配置します。
事務所サイトの主なページを簡潔に紹介して、アイコンや画像をわかりやすく配置すると視覚的に伝わりやすくなります。シンプルで明確なデザインにすると効果的です。
主なページの例
- サービス紹介ページ
対応可能な社労士業務（就業規則作成、労務相談、給与計算など） - 事務所紹介ページ
事務所の理念、実績、代表者の挨拶 - ブログ・コラムページ
労務関連の最新情報やノウハウ記事
サービス紹介
- 就業規則作成・変更
- 労務相談
- 給与計算
事務所紹介
- 事務所の理念
- 代表あいさつ
ブログ・コラム
成長する企業の労務管理について発信しています！
設置方法
例えば、上記のように「カラム」ブロックと「画像」ブロックを使って、主要ページへのリンクを掲載することができます。（上記にリンクは貼っていません）
画像だけでなく、画像の下に段落を追加して、テキストにもリンクを貼ることができます。
- 「＋」をクリックして、「カラム」ブロック→「3カラム均等割」を選択する
- 「カラム」に「画像」を追加する
- 「画像」ブロックから画像の追加方法を選んで挿入する
- 画面右のサイドバー「ブロック」タブで画像を編集する
- ツールバーのリンクアイコンをクリックして、リンク先を入力する
- ２～５を繰り返して、それぞれ画像を追加してリンクを設定する
CTAボタンを設置する
事務所サイトに訪れた人のアクションを促すために、無料相談やお問い合わせボタンをわかりやすい位置に配置します。
興味を持った人がすぐに問い合わせできるように目立つ位置にCTA（Call to Action）ボタンを設置しましょう。「ボタン」ブロックを使えば、簡単に作成できます。
問い合わせはメールや電話でもできますが、お問い合わせボタンがあった方が親切です。
ボタン文言の例
- 「無料相談」
- 「お問い合わせ」
- 「無料相談はこちら」
- 「お気軽にお問い合わせください」
ボタンデザインのポイント
- サイトのトーンに合った見やすい色を選ぶ
- ページの複数箇所に設置する
- クリックしやすいサイズにする
ボタンの作成方法
- 「＋」をクリックして、「ボタン」ブロックを追加
- ボタンに文言を入力する
- ツールバーのリンクアイコンをクリックして、リンク先を入力する
- 画面右のサイドバー「ブロック」からボタンの形や色を設定する
お知らせや新着情報を掲載する
訪問した人にリピーターになってもらうために、労務に関連する最新情報やブログの新着情報など役立つ情報を提供します。
掲載の例
- 最新記事をトップページに表示する。
- カテゴリーごとに分けて掲載する（例：「労務ニュース」「社労士コラム」）。
- 人気記事ランキングを設置する。
表示方法
「クエリーループ」ブロックを使うと、さまざまな表示設定ができます。例えば、コラムの最新情報を掲載したい場合には、次のように設定します。
- 「＋」をクリックして、「見出し」ブロックを追加する。
- 見出しに「コラム新着情報」や「News」などの文言を入力する。
- 見出しの下に「＋」をクリックして、「クエリーループ」ブロックを追加する。
- 「選択」をクリックして、表示させたいパターンを選ぶ。
まとめ
社労士事務所サイトのトップページは、訪問した人に信頼感や安心感を持ってもらい、他のページの情報を見たり、お問い合わせにつなげることが役割です。
適切なページ構成にして、見やすくわかりやすいデザインにすることが重要です。最初に事務所サイトを作るときには、洗練されてかっこいいページにしたいと思うかもしれません。ですが、見た人にわかりやすいページにすることが何より重要です。
社労士事務所の業務は、一般的にわかりやすいとはいえません。ネット上の事務所サイトを見ていても専門的な用語が並び、具体的に何ができて、どんなメリットがあるのか伝わりにくいサイトも少なくありません。
同業者にとっては、トレンドな人事用語でも企業の経営者や担当者にはピンとこないものが多いでしょう。
社労士の専門性を専門用語を使わずに伝えることは簡単ではないのですが、そこを工夫することで他との差別化につながるはずです。効果的なトップページ作成の参考になれば幸いです。
ビジネスサイトの効率的な作成順序
①事務所概要ページ
（基本情報の記載のみで作成しやすい）
②お問い合わせページ
（プラグインを活用すれば短時間で作成可能）
③サービス案内ページ
（情報の整理が必要だが、内容が決まればスムーズ）
④トップページ
（他のページをもとにデザインし、全体の統一感を持たせる）
⑤ブログ記事
（必須コンテンツができたら、投稿で情報発信をしていく）
事務所サイトの運用については、こちらの記事でご紹介します。
