今回、YMWorksのWebサイトをリニューアルしました。
今回の目的は、見た目を新しくすることだけではありません。公開した後も、事業の変化やお客様の反応に合わせて育てられるサイトをつくることでした。
ホームページは、公開すれば完成というものではありません。サービス内容を見直し、記事を増やし、分かりにくい説明や問い合わせまでの流れを改善していくことで、少しずつ事業に役立つものになります。
そこで新しいサイトでは、Notionによる記事管理、AIエージェントを活用した制作・更新、Googleのアクセス・検索データを組み合わせました。
なぜ、サイトを作り直したのか
これまでのサイト運用では、アクセスを分析する人、改善内容を考える人、実際にページを修正する人が分かれ、それぞれに説明と引き継ぎが必要になることがありました。小さな修正でも、分析、計画、制作、確認に時間がかかります。
AIエージェントを使うと、これらの作業を一つの流れとして進めやすくなります。
ただし、AIにサイトを丸ごと任せるわけではありません。YMWorksの事業内容、対象となるお客様、文章や情報管理のルール、プロジェクトの方針を、AIが作業前に参照できる形で整理しました。そのうえで、AIをサイト改善の作業チームとして使います。
この仕組みによって、一般的な正解を当てはめるだけでなく、YMWorksが何を目指し、誰に何を届けたいのかに沿って改善しやすくなりました。
リニューアルで大切にした3つのこと
今回のリニューアルでは、次の3点を軸にしました。
- 相談できる内容が、初めての方にも伝わること
- お知らせやコラムを無理なく更新できること
- 感覚だけでなく、実際の反応を見ながら改善できること
YMWorksの主なサービスであるAI活用・業務改善、ホームページ制作、経営・サービス設計、オンラインストア、PC・Macサポートを整理し、それぞれの相談内容が分かるページを用意しました。
スマートフォンでの読みやすさや問い合わせのしやすさも重視しています。画像を軽くし、ページのタイトルや説明、サイトマップなど、検索エンジンが内容を理解するための基本情報も整えています。
サイトの土台は、速さと育てやすさを重視
新サイトは、ReactとViteというWeb制作の技術を使い、Netlify上で公開しています。
難しい言葉に見えますが、役割はシンプルです。
| 仕組み | 主な役割 | 利用者にとっての意味 |
|---|---|---|
| React | ページやボタンなどを部品として管理する | 表示や操作を統一しやすい |
| Vite | サイトのデータを公開用に組み立てる | 軽く、速く表示しやすい |
| Netlify | サイトの公開、フォーム、画像配信などを担う | 安定した公開と安全な運用につながる |
Reactでは、ボタン、サービス紹介、問い合わせ案内などを「部品」として管理できます。同じ部品を複数のページで使えば、表示をそろえやすく、変更も一か所ずつ行えます。小規模なサイトでも、ページが増えたときに管理が複雑になりにくいことが利点です。
これは、最初から大きな仕組みを作るという意味ではありません。今必要な内容はシンプルに保ちながら、サービスや記事が増えたときには無理なく広げられるようにしておくということです。事業の成長に合わせて、サイトも成長させやすい土台を用意しました。
固定ページは軽い状態で配信します。一方、コラムは検索エンジンにも記事内容が伝わるよう、記事ごとのタイトル、説明、URL、本文をサーバー側で整えて返します。
また、問い合わせフォームには迷惑送信を減らす仕組みを設けています。通信時の安全性を高める設定や、他のページへ不正に埋め込まれにくくする設定なども追加しました。
Notionをコラムの編集画面として使う
お知らせとコラムは、普段から使いやすいNotionで管理します。
記事には、タイトル、概要、URL用の文字列、カテゴリ、公開状態などを設定します。サイト側はNotion APIを通じて、公開状態になった記事だけを読み込みます。下書きや編集中の記事は、確認が終わるまでサイトには表示されません。
記事本文で使えるのは、見出し、箇条書き、表、引用、注意書き、画像などです。Notion上で原稿を編集すると、サイトのデザインに合わせた読みやすい形へ変換されます。
Notionとの接続情報は、閲覧者のブラウザへ渡しません。公開サーバー側の環境変数として管理し、必要な処理だけをサーバー経由で行います。Notionへ添付した画像も、そのまま固定して使うのではなく、公開時にWeb向けの軽い画像へ変換して配信します。
AIエージェントは、サイトを育てる「作業チーム」
今回のリニューアルでは、AIエージェントを制作だけでなく、公開後の運用にも使える形にしました。
AIエージェントとは、質問に文章で答えるだけでなく、決められた資料やルールを読み、必要な道具を使いながら複数の作業を進められるAIです。
YMWorksでは、事業内容や対象者、サイトに掲載してよい事実、文章の方針、情報管理のルールを資料として整理しています。AIエージェントは作業のたびにそれらを確認するため、サイトの目的から外れにくくなります。
このサイトでは、AIエージェントが次のような仕事を補助しています。
- 事業内容と対象者の整理
- ページ構成や文章のたたき台づくり
- デザイン案と実装内容の比較
- プログラムの作成と修正
- 表示、SEO、フォーム、セキュリティに関するテスト
- Notionでのコラム下書きとレビュー
- アクセスデータをもとにした改善案の整理
これまでは別々になりやすかった「データを読む」「改善方法を考える」「修正する」「結果を確認する」という仕事を、同じ事業情報とルールを参照しながら一続きで進められることが、大きな変化です。
ただし、AIが独自にサービス内容を決めたり、確認なしで記事を公開したりする仕組みではありません。
事業の方針、掲載する事実、公開の可否、最終的な文章は人が判断します。AIには、情報整理、比較、下書き、実装、確認など、結果を人が見直せる仕事を任せています。
なお、現在のサイトに、閲覧者との会話を自動処理するAIチャットは設置していません。通常のアクセス情報や問い合わせ内容を、生成AIへ自動送信する仕組みも実装していません。
Google CloudのAPIで、反応を改善へつなげる
公開後の改善には、Google Analytics 4とGoogle Search Consoleのデータを使います。
新サイトでは、Google Cloudで用意したサービスアカウントを使い、次の2つのAPIへ読み取り専用で接続する仕組みを用意しました。
- Google Analytics Data API： 利用者数、訪問数、よく見られたページ、流入経路、利用端末、地域、お問い合わせなどの成果を確認する
- Google Search Console API： 検索結果への表示回数、クリック数、クリック率、平均掲載順位、検索された言葉を確認する
認証情報は公開サーバー側で管理し、ブラウザには表示しません。また、データを変更する権限ではなく、分析に必要な読み取り権限だけを使用します。
運用画面では、直近7日、28日、90日を切り替え、前の同じ日数と比較できます。単にアクセス数を見るだけでなく、例えば次のような判断へつなげます。
- 訪問が多いのに次の行動につながりにくいページは、冒頭の説明や問い合わせ導線を見直す
- 検索結果には表示されているのにクリック率が低い場合は、タイトルや説明文を改善する
- 順位が上がり始めた検索語句があれば、関連するコラムやサービス説明を充実させる
- スマートフォンだけ閲覧状況が弱い場合は、文字、表示速度、ボタンの押しやすさを確認する
ここで表示する改善の着眼点は、現在のところ生成AIが自由に判断しているものではありません。表示回数、順位、クリック率などの条件をもとに、あらかじめ決めた規則で候補を整理しています。数字の意味を確認し、実際にどこを変えるかは人が判断します。
分析から改善までを、一つの流れにする
従来は、アクセス分析、改善計画、仕様づくり、実際の修正が別々の作業になり、途中の説明や引き継ぎに時間がかかることがありました。
新サイトでは、AIエージェントが同じ事業情報とルールを参照することで、分析から修正案づくり、実装、確認までを一つの流れとして進めやすくしています。
具体的には、次のように運用します。
- Notionでお知らせやコラムの下書きを作る
- AIエージェントが構成、読みやすさ、事実関係、公開条件の確認を補助する
- 人が内容を確認し、承認した記事だけを公開する
- Google Analytics 4とSearch Consoleで反応を確認する
- データから改善候補を整理する
- AIエージェントが文章やページ修正の案を作り、必要な実装とテストを行う
- 人が内容と結果を確認し、次の改善を決める
| 担当 | 主な役割 |
|---|---|
| 人 | 目的、優先順位、事実、公開、最終判断 |
| AIエージェント | 整理、下書き、比較、実装、テスト、改善案 |
| Googleのデータ | 利用者と検索の反応を確かめる材料 |
| Notion | 原稿、公開状態、編集履歴の管理 |
この役割分担により、AIだけに任せるのでも、人がすべて手作業で行うのでもない、現実的な運用を目指しています。
実際に苦労したのは、AIの操作より「ゴールの整理」
今回の制作で難しかったのは、AIを動かす操作そのものより、何を実現したいのかを明確にすることでした。
AIがどれだけ高性能になっても、目指す場所が曖昧では、適切な提案や作業はできません。高性能な車と優秀なカーナビがあっても、自分がどこへ行きたいのか決まっていなければ、目的地には着けないのと同じです。
サイト制作では、例えば次のような目的を先に整理する必要があります。
- 誰にサイトを見てほしいのか
- どのサービスを、どのように伝えたいのか
- 見た人に、次に何をしてほしいのか
- 公開後に、何を数字で確かめたいのか
もう一つ必要なのが、現在地の把握です。
目的地が決まっていても、今どこにいるのか分からなければ、正しい道順を選べません。現在のサイトにどの情報があり、何が不足し、どの仕組みが動いていて、どこに問題があるのかを確認する必要があります。
Web技術の細かな仕様をすべて覚える必要はありません。しかし、今の状態と次に必要な作業を判断できる程度の理解は必要です。分からない部分はAIに調査や説明を任せられますが、その結果が目的に合っているかを判断するのは人です。
この経験から、AI活用で最初に必要なのは高度な操作方法ではなく、目的、現状、判断基準を整理することだと改めて感じました。
このリニューアル自体が、AI活用の実践例
小規模事業者のAI活用では、大きな仕組みを一度に導入する必要はありません。
まず目的と業務を整理し、AIに任せる部分と人が判断する部分を分け、小さく作って試します。その後、実際のデータや使った人の声を見ながら改善していく。この考え方は、今回のサイト制作にもそのまま当てはまります。
新しいYMWorksサイトも、今回の公開が完成ではありません。どのサービスページが読まれるのか、どの検索語句から相談につながるのか、どの説明が分かりにくいのかを確認しながら育てていきます。
そして、この制作・運用で得た知見を、ホームページ制作だけでなく、小規模事業者向けのAI導入や業務改善支援にも生かしていきます。
ホームページやAI活用を、目的から整理したい方へ
「ホームページを作り直したいが、何から整理すればよいか分からない」「AIを使いたいが、自社のどの業務に向いているか分からない」という段階からご相談いただけます。
YMWorksでは、松阪・伊勢・津周辺の事業者さまを中心に、サービス整理、ホームページ制作、AI活用、業務改善を、目的と運用方法から一緒に考えます。