AIと対話しながら会計事務所のホームページをリニューアルした実録｜企画から公開後の修正まで

ホームページをリニューアルしたいと思っても、掲載するサービス、文章、デザイン、スマートフォン表示、問い合わせフォーム、SEOなど、考えることは少なくありません。

制作会社へ依頼する方法もありますが、今回はGemini、Claude、ChatGPTで全体方針を検討し、Codexで最初のファーストビューを作成した後、ChatGPTと対話しながら新星パートナーズ会計事務所のホームページをリニューアルしました。

AIに「ホームページを作って」と一度依頼して完成したわけではありません。

サービス内容や料金を整理し、文章とデザインを検討し、モックアップで完成イメージを確認しました。その後、修正を重ねてXserverへ公開し、公開後にも表示やリンク、問い合わせフォームなどの問題を一つずつ直しています。

この記事では、複数の生成AIで方針を検討した過程やAIの使い分けを含め、ホームページリニューアルの全体像と、実際に進めて分かったことを紹介します。

最終確認日：2026年9月13日

なぜホームページをリニューアルしたのか

以前のホームページにも、事務所案内やサービス、料金などの情報は掲載していました。

しかし、サービスの追加や変更を重ねたことで、事務所として現在どのような会社を支援し、何を提供しているのかが分かりにくくなっていました。

また、当事務所ではfreee会計やマネーフォワード クラウド会計を使った税務・会計支援に加え、AIの活用も進めています。以前のホームページでは、こうした現在の事務所の特徴を十分に表現できていませんでした。

そこで、今回のリニューアルでは、単にデザインを新しくするのではなく、次の点から見直すことにしました。

• 誰に向けた事務所なのか
• どのような悩みに対応するのか
• サービスをどのように分けるのか
• 料金と対応範囲をどう伝えるのか
• クラウド会計とAIの活用をどう表現するのか
• お役立ち情報を継続的に発信する仕組みをどう作るのか

ホームページ制作の前に、事務所のサービスそのものを整理する必要がありました。

Gemini・Claude・ChatGPTで全体方針を検討

ホームページのリニューアルに着手するにあたり、最初からChatGPTだけを利用すると決めていたわけではありません。

まずはGemini、Claude、ChatGPTとそれぞれ対話し、事務所の特徴、今後力を入れたい業務、想定する顧客層などを伝えながら、リニューアルの全体方針を検討しました。

複数のAIから提案を受けた結果、ChatGPTが示した案が、今回実現したリニューアルの方向性に最も近いものでした。サービス内容を整理するだけでなく、事務所全体の見せ方やページ構成についても、対話を重ねながら具体化できそうだと感じました。

これは、GeminiやClaudeよりもChatGPTがあらゆる場面で優れているという意味ではありません。今回の目的、進め方、必要としていた機能に、ChatGPTが合っていたということです。

ファーストビューはCodexで作成

全体方針を検討した後、ホームページを開いたときに最初に表示されるファーストビューはCodexで作成しました。

Codexを利用したのは、このファーストビューの作成のみです。その後のサービス整理、文章作成、画像生成、モックアップ、デザイン調整、WordPressへの登録、公開後の修正などは、ChatGPTと進めました。

今回のリニューアルは、全体方針の検討、ファーストビューの作成、その後の制作・修正という段階に応じて、複数のAIを使い分ける形になりました。

画像生成とモックアップでイメージを具体化

その後の作業をChatGPTで進めることにした理由の一つは、文章や構成案の作成に加えて、ホームページで使用する画像も生成できたことです。

今回のリニューアルでは、つばめ、ふくろう、はやぶさのイラストを使用し、3つのサービスを視覚的に分かりやすく整理しました。

さらに、ページのモックアップを作成し、配色、見出し、画像、ボタン、サービス案内などを画面上で確認できました。

文章だけで検討するよりも完成後の姿を想像しやすくなり、「どのようなホームページにするか」という抽象的な話を、具体的な画面として詰められたことが大きな利点でした。

デスクトップアプリからWeb版へ移行

作業を始めた当初は、ChatGPTのデスクトップアプリを利用していました。

その後、WordPressへの記事登録や設定画面の確認など、ブラウザー上の作業も進めてもらうため、Web版のChatGPTへ切り替えました。

Web版へ移行したことで、ホームページの構成や文章を相談するだけでなく、WordPressの画面を確認しながら投稿や設定を進めるなど、実際の公開作業まで一連の流れとして取り組めるようになりました。

ただし、ブラウザー上の操作をAIに任せた場合も、登録内容や設定結果は人が確認し、必要に応じて修正しています。

最初に行ったのは、サービスの整理

リニューアル前は、ホームページ内に複数のサービスページや過去に作成したランディングページがありました。

個別に見ると必要な情報でも、全体として見るとサービス同士の違いが分かりにくく、現在は提供していないサービスも残っていました。

AIと対話しながら、現在の業務内容、対象となる会社、料金、契約形態、対応範囲を一つずつ確認し、最終的にサービスを次の3つへ整理しました。

つばめバックオフィス

代表者1人・従業員なしの法人を主な対象として、経理、給与、決算・申告をまとめて支援するサービスです。

ふくろうクラウド顧問

freee会計またはマネーフォワード クラウド会計を利用する会社に向けた、継続的な税務・会計顧問サービスです。

はやぶさオンライン

一定の条件を満たす小規模法人を対象とした、オンライン完結型の法人税申告サービスです。

AIは、サービス同士の重複や説明の不整合を見つけ、比較表や料金表の案を作る作業に役立ちました。

一方で、どこまでを基本料金に含めるか、どの業務を追加料金にするか、どのような会社を対象外とするかは、実際の業務負担や責任を踏まえて人が判断する必要がありました。

AIに任せたこと、人が判断したこと

今回の制作では、複数のAIがさまざまな作業を支援しました。

AIが支援した主な作業

• Gemini、Claude、ChatGPTによる全体方針の検討
• Codexによる最初のファーストビューの作成
• サイト全体の構成案
• サービス名や見出しの検討
• ページ本文の下書き
• 料金表や比較表の整理
• 配色やレイアウトの提案
• ページのモックアップ作成
• 鳥を使ったサービスイメージの制作
• スマートフォン表示の調整
• ヘッダーやフッターの修正
• ページ内リンクやメニューの修正
• 問い合わせフォームの実装
• 旧ページから新ページへの転送設定
• ファビコンやサイトマップの設定
• Google Analytics 4の導入
• SEOに必要なタイトルや説明文の整理
• WordPressへの記事登録

文章、デザイン、画像、技術、公開後の確認まで、幅広い作業を一連の流れの中で進められたことは、AIを利用する大きな利点でした。

ただし、AIの提案をそのまま採用したわけではありません。

人が判断した主な事項

• 実際に提供するサービスの範囲
• 料金と追加報酬
• 対象となる会社と対象外となる会社
• 面談や回答期限などの運用条件
• 税務上、誤解を招かない表現
• 事務所として約束できること
• 公開する情報と掲載しない情報
• デザインの最終的な見え方
• 公開の可否

AIが文章を整えても、実際のサービスより広い範囲に対応するように読める場合があります。

たとえば、「毎月面談する」「年度の着地を予測する」「専門家がすべて対応する」といった表現は、読み手には魅力的でも、すべての契約で必ず実施するとは限りません。

そのため、サービス仕様と照らし合わせながら、表現を何度も修正しました。

デザインも対話しながら決めた

デザインでは、事務所サイトとはくちょうジャーナルを一体的に運営していることが伝わるよう、色、文字、メニュー、フッターなどの共通化を進めました。

基本色には、落ち着きと信頼感のあるティール系の色を使用しています。

3つのサービスには、それぞれ次の鳥を割り当てました。

• つばめバックオフィス
• ふくろうクラウド顧問
• はやぶさオンライン

鳥の種類は、サービスの特徴と結び付けています。

バックオフィス業務を軽やかに支える「つばめ」、継続的に会社を見守る「ふくろう」、必要な申告を速やかに進める「はやぶさ」という考え方です。

ChatGPTが作成したモックアップをプレビューで確認し、文字の大きさ、余白、改行、画像の位置などを調整しました。

パソコンでは整って見えても、スマートフォンでは見出しが不自然に改行されたり、メニューが画面外に開いたりすることがあります。そのため、パソコンとスマートフォンの両方で確認する作業が欠かせませんでした。

事務所サイトとWordPressを分けて運営

今回のリニューアルでは、事務所案内やサービスページを静的なサイトとして構築し、はくちょうジャーナルはWordPressで運営する構成にしました。

事務所サイトには、サービス内容や料金など、頻繁には変更しない情報を掲載します。

一方、税務、クラウド会計、AI・業務効率化に関する記事は、WordPressを利用して継続的に追加します。

両方のサイトでヘッダー、フッター、検索、色、文章表現をそろえることで、閲覧者からは一つのサイトとして利用できるようにしました。

サイト内検索では、事務所サイトとはくちょうジャーナルの両方を検索できます。

公開すれば終わりではなかった

制作中のプレビューで問題がなくても、本番環境へアップロードすると別の問題が起きることがあります。

今回も、公開後に次のような課題が見つかりました。

• スマートフォンのメニューが正しい位置に開かない
• メニューを選択しても閉じない
• ページ内リンクの移動後にスクロールできなくなる
• 虫眼鏡の検索ボタンが表示されない
• フッターの修正が一部のページに反映されない
• ファビコンが表示されない
• 問い合わせフォームからメールを送信できない
• 問い合わせメールの本文が文字化けする
• ファイルのアップロード後にサイトが真っ白になる
• 廃止した旧ページが検索結果やサーバー上に残る
• 旧URLから新しいページへ転送されない

ChatGPTと一緒に原因を確認し、修正データを作り、再度アップロードして動作を確認しました。

特に問い合わせフォームは、「送信できたと表示されること」だけでは確認が不十分です。

問い合わせ者への受付メールと、事務所への通知メールが実際に届くか、文字化けしていないか、迷惑メールに振り分けられていないかまで確認する必要がありました。

SEOとアクセス解析もリニューアルの一部

新しいホームページを公開した後は、Googleにページの存在を伝える作業も行いました。

主に実施したのは次の内容です。

• XMLサイトマップの作成と送信
• Google Search ConsoleでのURL検査
• 主要ページのインデックス登録リクエスト
• 旧URLから新URLへのリダイレクト
• 404ページの確認
• Google Analytics 4の導入
• 問い合わせ完了イベントの計測

ホームページは、公開しただけですぐ検索結果へ正しく反映されるとは限りません。

旧ページの情報が残る場合もあるため、公開後もSearch Consoleやアクセス解析を確認しながら整えていく必要があります。

AIを使って良かったこと

今回、AIを利用して最も良かったのは、文章、デザイン、画像、技術、SEOを別々の作業として分断せず、同じ目的に向けて進められたことです。

たとえば、サービス内容を修正すると、その変更を料金表、FAQ、フッター、紹介文などへ展開できます。

スマートフォン表示で問題が見つかった場合も、画面の画像を見せながら修正内容を伝えられます。

また、「なぜこの表現にするのか」「ほかの案はないか」と対話を重ねることで、最初から完成形を決められなくても、徐々に考えを整理できました。

ファーストビュー作成後の作業を継続してChatGPTと進めたため、それまでに決めたサービス内容、デザイン、表記ルールなどを踏まえて、次の作業へ移れたことも利点でした。

AIは、明確な指示を受けて作業するだけでなく、考えを言葉にし、具体的な形にしていくための相手としても役立ちました。

AIだけでは難しかったこと

一方、AIだけでホームページを完成させるのは難しいとも感じました。

AIは、事務所の実際の業務量や責任、顧客との関係、過去の経緯を、最初からすべて理解しているわけではありません。

一見きれいな文章でも、実際のサービスと異なっていたり、対応を保証するように読めたりすることがあります。

また、プレビューで正しく表示されても、本番サーバーでは設定やファイルの配置によって問題が起きます。

今回の経験から、AIによるホームページ制作には次の確認が必要だと考えています。

• 掲載内容が実際のサービスと一致しているか
• 料金や対象条件に矛盾がないか
• 誤解を招く断定表現がないか
• パソコンとスマートフォンで正しく表示されるか
• すべてのリンクが正しく移動するか
• 問い合わせフォームが実際に送受信できるか
• 旧ページが適切に整理されているか
• 公開後のアクセスを計測できるか
• バックアップや復旧方法を用意しているか

AIが作ったものを、人が確認せずにそのまま公開するのは避けるべきです。

生成AIへ入力する情報の選び方や、顧客情報・税務判断を扱う際の基本ルールについては、「会計事務所が生成AIを安全に利用するためのルール｜顧客情報・税務判断の注意点【2026年版】」で詳しく解説しています。

まとめ

今回のリニューアルでは、最初にGemini、Claude、ChatGPTと対話し、ホームページの全体方針を検討しました。

その中で、今回目指していた方向性に最も近い案が得られ、画像生成やモックアップによって完成イメージも具体化できたことから、ChatGPTを中心に作業を進めることにしました。

全体方針を決めた後、最初のファーストビューはCodexで作成しました。Codexを利用したのはこの部分のみで、それ以降のサービス整理、文章作成、画像生成、モックアップ、デザイン調整、WordPressへの登録、公開後の修正などはChatGPTと進めました。

作業の途中では、WordPressなどのブラウザー上の操作も行うため、ChatGPTのデスクトップアプリからWeb版へ切り替えています。

AIは、文章、デザイン、画像、技術、SEO、WordPress登録など、幅広い作業を支援しました。ただし、AIへ一度依頼すれば完成するものではありませんでした。

サービス内容を整理し、AIの提案を確認し、修正し、実際の画面でテストし、本番公開後の問題にも対応する必要があります。

AIは、ホームページを自動的に完成させる道具というより、人と対話しながら制作を進める実務担当者に近い存在でした。

そして、次の部分は人が担い続ける必要があります。

• 何を提供するのか
• 誰に届けるのか
• どこまで約束するのか
• 掲載内容が事実と一致しているか
• 最終的に公開してよいか

AIを活用すると、専門の制作担当者がいない中小企業や1人法人でも、自社の考えをホームページへ反映しやすくなります。

一方で、作業内容に応じてAIを使い分け、AIに任せる範囲と人が判断する範囲を明確にすることが、安心して活用するための重要なポイントです。

次回は、複数あったサービスを「つばめ・ふくろう・はやぶさ」の3つへ整理した過程と、AIを使ってサービス内容や料金を具体化した方法を紹介します。