静的サイトとWordPressを一体運営するまで｜デザインと導線をそろえたリニューアル実録

新星パートナーズ会計事務所のホームページリニューアルでは、サービス内容を整理するだけでなく、事務所サイトと「はくちょうジャーナル」を一体的に見せることも大きな課題でした。

事務所サイトは静的なHTMLで運営し、記事を掲載する「はくちょうジャーナル」はWordPressを使用しています。仕組みの異なる2つのサイトを、利用者から見て一つのサイトとして自然に行き来できるようにする必要がありました。

前回の記事「会計事務所のサービスを3つに整理するまで｜AIとの対話で料金と提供範囲を具体化した実録」では、つばめバックオフィス、ふくろうクラウド顧問、はやぶさオンラインの3つへサービスを整理した過程を紹介しました。

今回は、整理したサービスをどのようにホームページ上で見せたのか、配色、イラスト、スマートフォン表示、静的サイトとWordPressの連携、公開後の修正について紹介します。

事務所サイトと記事サイトで仕組みが異なる

リニューアル後のサイトは、大きく2つに分かれています。

• 事務所案内、サービス、料金、お問い合わせなど：静的なHTMLサイト
• 税務、クラウド会計、AI活用などの記事：WordPressの「はくちょうジャーナル」

事務所サイトは shinseipartners.com、はくちょうジャーナルは同じドメインの /tankentai/ で運営しています。

仕組みが異なるため、そのままではヘッダー、フッター、文字の大きさ、余白、メニューの動きなどに違いが出ます。利用者がページを移動したときに、別のサイトへ移ったように感じる可能性がありました。

そこで、システムを完全に同じにすることよりも、見た目と導線をそろえることを優先しました。

ティールを中心に配色を統一した

リニューアルでは、サイト全体の基調色をティール系に統一しました。

主に使用した色は次のとおりです。

• ボタンや強調：#008080
• 見出し：#005F60
• 本文：#263E3E
• 淡い背景：#E8F4F3
• ページ背景：#FAFCFB
• 枠線：#D4E5E4

税理士事務所のサイトでは、信頼感を重視する一方で、堅くなりすぎると相談しにくい印象になります。

濃いティールには落ち着きがあり、淡い背景色と組み合わせると、文字を読みやすくしながら柔らかさも出せます。新星パートナーズが重視する「スッキリ」と「安心」にも合う色だと考えました。

AIには、配色の組み合わせ、ボタンと背景のコントラスト、各ページで色がずれていないかの確認を手伝ってもらいました。最終的な色は、実際の画面を見ながら私が判断しました。

3羽の鳥でサービスの違いを見せた

サービスを3つへ整理した後、それぞれの違いを文章だけでなく、視覚的にも伝える必要がありました。

そこで、つばめ、ふくろう、はやぶさのイラストを作成し、同じタッチで統一しました。

• つばめ：経理や給与など、日々のバックオフィスの負担を軽くする
• ふくろう：会計データを慎重に確認し、税務や経営を丁寧に支援する
• はやぶさ：オンラインを活用し、申告まで速やかに進める

つばめバックオフィスでは「軽さ」、ふくろうクラウド顧問では「静かさ、慎重さ、丁寧さ」を特に意識しました。はやぶさはリニューアル前から使用していた名称で、鳥のイメージどおり「速さ」を重視しています。

イラスト、名称、説明文、色の使い方をそろえることで、別々のサービスでありながら、一つの会計事務所が提供する3本柱であることを表現しました。

ヘッダーとフッターをそろえて一つのサイトに見せた

静的な事務所サイトとWordPressの間で、特に重要だったのがヘッダーとフッターです。

ロゴの大きさや位置、メニューの並び、背景色、文字サイズが少し違うだけでも、ページを移動したときの印象が変わります。

そこで、事務所サイトとはくちょうジャーナルで、次の要素をできるだけ統一しました。

• ロゴとサイト名
• ティール系の配色
• メニューの文字サイズ
• スマートフォンのメニュー構成
• フッターの背景色と余白
• サービスページへの導線
• お問い合わせへの導線

フッターには、事務所案内と、はくちょうジャーナルの両方のメニューを掲載しました。どの記事を読んでいても、3つのサービス、料金、事務所案内、お問い合わせへ移動できます。

反対に、事務所サイトからも、カテゴリー、新着記事、運営・編集方針へ移動できるようにしました。

記事とサービスページを別々に運営するのではなく、記事で得た知識を実際の相談やサービスにつなげる構成です。

スマートフォン表示は何度も調整した

パソコンで整って見えるページでも、スマートフォンでは同じように表示されるとは限りません。

今回のリニューアルでも、次のような問題が発生しました。

• ロゴの大きさや位置が事務所サイトとはくちょうジャーナルで異なる
• メニューの配置がそろわない
• フッターの文字サイズやボタンの見た目が違う
• ページ内リンクを押した後の停止位置が不自然になる
• 見出しや文章の改行位置が意図と異なる
• 表や長い文字列が画面幅に収まりにくい

実際のスマートフォン画面を確認し、問題を一つずつ修正しました。

例えば、3つのサービスへのフッターリンクは、白い1pxの枠、角丸なし、透明な背景、白文字で統一しました。ホバー時は白背景と濃いティール文字に切り替わります。

また、ページ内リンクは、移動時のアニメーションよりも、目的の場所がすぐに表示されることを優先しました。

AIはコードや設定の候補を作れますが、「実際にスマートフォンで見たときに自然か」は、画面を見て判断する必要があります。

公開して初めて分かる問題も多かった

確認用の画面で問題がなくても、実際のサーバーへ公開すると別の問題が発生することがあります。

今回も、Xserverへファイルを上書きした後にページが真っ白になったり、お問い合わせフォームが送信できなくなったり、内部リンクが表示されなかったりしました。

トップページへ追加した「町田市で法人税理士を選ぶ6つのポイント」というテキストリンクも、データ上には入っているのに、実際の画面には表示されない状態が続きました。

最終的には、リンクをボタンと同じコンテナ内の3段目へ配置し、確実に表示される構造へ変更しました。

WordPressの記事でも、本文を一つのHTMLとして登録したため、目次が記事の先頭へ移動してしまう問題が発生しました。本文をGutenbergの見出し・段落・リストの各ブロックへ分け直すことで、導入文の後に目次が表示されるようになりました。

こうした問題は、コードだけを見ていても気付きにくいものです。公開後のページをパソコンとスマートフォンの両方で確認する工程が欠かせませんでした。

画像アップロードではクラウド側と手元のPCの違いもあった

AIとブラウザーを使った作業では、ファイルがどこに保存されているかも重要です。

町田市の行政機関と事務所の位置関係を示す地図を記事へ掲載した際、クラウドブラウザーの「Choose File」から、私のMacに保存したファイルを選択することはできませんでした。

そこで、地図画像は私の通常のブラウザーからWordPressのメディアライブラリへアップロードし、その後、記事本文への挿入を進めました。

AIが作成したファイル、クラウドブラウザーが参照できる場所、手元のパソコンにあるファイルは、同じように扱えるわけではありません。

作業の役割分担だけでなく、データの受け渡し方法も事前に考えておく必要があると分かりました。

AIは制作だけでなく、横断確認にも役立った

今回、AIが特に役立ったのは、一つのページを作ることだけではありません。

複数ページにまたがる表現や設定を確認する作業にも役立ちました。

例えば、次のような確認です。

• 「代表」「代表税理士」「代表・税理士」の表記を統一する
• ふくろうクラウド顧問に「毎月面談」と誤解される表現がないか確認する
• 各ページのサービス名と料金をそろえる
• 古いサービスページの転送先を整理する
• 事務所サイトと記事サイトのフッターメニューをそろえる
• 内部リンクのリンク先が正しいか確認する

ページ数が増えるほど、一つの変更が別のページへ影響します。AIは、変更箇所の候補を洗い出し、確認項目を一覧化する作業に向いていました。

一方、どの表現が事務所の実態に合うか、利用者にどう見えるか、どの条件でサービスを提供するかは、人が判断しなければなりません。

静的サイトとWordPressを分けても一体運営できる

今回のリニューアルでは、事務所サイトと記事サイトを一つのシステムへ統合したわけではありません。

事務所サイトは静的HTML、はくちょうジャーナルはWordPressという構成を維持しながら、デザインと導線をそろえました。

重要だったのは、使用するシステムが同じかどうかではなく、利用者が迷わず移動できるか、同じ事務所が運営していると分かるか、必要な情報へたどり着けるかという点です。

そのために、ロゴ、配色、メニュー、フッター、CTA、記事からサービスページへのリンクを統一しました。

まとめ

ホームページを一体的に運営するには、デザインを似せるだけでは不十分でした。

• サービスの役割をイラストと名称で分かりやすくする
• 配色と文字の見せ方を統一する
• ヘッダーとフッターで相互に移動できるようにする
• スマートフォンでの表示を実機で確認する
• 公開後にリンク、フォーム、目次などを再確認する
• 記事からサービスへ自然につながる導線を作る

こうした細かな調整を積み重ねることで、静的な事務所サイトとWordPressのはくちょうジャーナルを、一つのサイトとして運営できる形になりました。

AIは、デザイン案、コード、文章、確認項目の整理に役立ちました。しかし、公開後の画面を見て違和感を見つけ、事務所の実態に合わせて最終判断する作業は、人が行う必要があります。

次回は、ホームページ公開後に行ったSEOとアクセス解析の初期設定を紹介します。XMLサイトマップ、Search Console、インデックス登録、旧URLの転送、GA4、お問い合わせ完了の計測など、サイトを公開した後に必要となった基本的な設定と確認作業を振り返ります。