はじめに

私は IT 業界で 20 年ほど働いており、今もたまにフリーランスエンジニアとして働くこともある個人事業主です。
とはいえ、ここ 10 年くらいは ERP パッケージの会計アプリの上流工程が中心で、自分で実装まで行うことはほとんどありませんでした。
HTML も、実務レベルではなく「お勉強レベルで少し触ったことがある」程度です。

そんな状態で、個人事業主としてのサイトを自分で運営していく中で、今回 AI に頼ってサイトを構築し直している ところです。

2022年に個人事業を始めた際には、ココナラで 1 万円の WordPress サイト制作 を依頼し、その後は事業の変化に合わせて自分でなんとか変更してきました。
その間、事業内容が パソコン教室 → プレゼン講座 に変わり、次第にコンテンツとのズレが目立つようになってきました。

最近、Web に詳しい知人にサイトを見てもらったところ、複数の問題点が指摘されました。
そこで、AI（Gemini / Claude ）を用いたローコード構築 でリニューアルを進めることにしました。

本記事は、その 途中経過の技術メモ です。

背景：1万円サイトの4年間

当時依頼したサイトには Elementor が組み込まれており、その後の運用は自分で見よう見まねで補完してきました。

具体的には、次のような運用をしていました。

無料予約サイトをボタンに埋め込んで予約させる
無料フォームサービスを埋め込む
WordPress テーマを途中で変更する
必要な機能はその都度プラグインで追加する

一応運用はできていたものの、継ぎ接ぎ構成のまま 4 年が経過しました。

ブログの PV は、

PowerPoint のコネクタについて
Excel の XLOOKUP の動作の重さについて

といった記事が主に伸びていましたが、集客導線と連動していない 状態でした。

※上記 2 つのキーワードで検索していただければ、どこのサイトかは分かると思います。

指摘された課題

1. 予約導線が分かりにくい

知人からまず指摘されたのは、予約まわりの導線でした。

そもそも「どこから予約できるのか」が分かりにくい
無料ツールを複数併用している
営業日カレンダーには予約が入っているのに、その時間に予約することができる
（営業日カレンダと予約カレンダが連動してないため）
予約用のボタンやリンクがページ内のあちこちに散らばっている
いったん予約サイトに行くと、その後は戻れない

2. UI/UX の統一性がない

次に、画面全体の統一感についても問題がありました。

Elementor で作ったエリア
テーマ変更の残骸（XやFaceBookなどへのシェアボタンがついている）
無料フォームサービスごとのデザイン差
ページごとにデザインが微妙に違う
（作った時期によって影響を受けたサイトがことなっていたため）

などが混在しており、全体として 一貫した設計思想がない ことが明確になりました。

リニューアル方針（AI 活用）

知人と相談する中で、

「Elementor を見よう見まねで触ってきて構造が自分でもよく分からないなら、
いっそ HTML / CSS に寄せてしまったほうが管理しやすいのでは？」

という話になりました。

たしかに、Elementorをどうこうするよりも自分としてもそっちが楽。
思い切って1から作り直すことにしました。

そこで、リニューアルの方針としては、次のように整理しました。

● 予約システムの一本化

無料ツールの混在を避け、有料の予約サービスに統一する 方針にしました。
これにより、サイトとしての動きを整理していきます。

● Elementor をやめて HTML / CSS で組む

もともと Elementor 自体をきちんと理解して使いこなしていたわけではなく、

「見よう見まねで作ってきた結果、自分でもどこで何をどう設定したのか分かりづらい」

状態になっていました。

そこで今回は、

レイアウトや装飾の中身を自分でも追いやすくする
必要であれば後から手で修正できるようにする

という目的で、Elementor ではなく HTML / CSS で組む 方針にしました。

このとき、「すべてを手書きする」のではなく、Gemini にコードを書いてもらう ことを前提にしています。

● Gemini で HTML/CSS 生成 → カスタム HTML に貼る

最終的な構成としては、

Gemini で HTML / CSS を生成し、WordPress のカスタム HTML / CSS に貼り付けて使う

というシンプルな形を採用することにしました。

実装開始：トップページのみ変更

まずは「トップページだけでも」と、知人とのZOOM会議の直後に着手
・自社の HP から Elementor を外す
・Gemini にデザインを考えた **カスタム HTML と追加 CSS **を作ってもらったら、私がWordPressに反映する

ファーストビューに使う画像については、Midjourney で抽象的なイメージを生成するためのプロンプトも Gemini に作ってもらいました。

作業自体は、ものの 2 時間程度でシンプルなトップページが出来上がりました。

このとき正直、

「AI、やばいな……」

と思いました。

Gemini の「非エンジニア扱い」問題

トップページの構築を進めていく中で、途中から Gemini からの提案もあり、
テストサイトを別ドメインで構築する 方針に切り替えました。

確かに、いろいろ試したいこともあったので、それ自体には納得し、テスト用のドメインを取得しました。

格安ドメインを取得
noindex を設定し、本番とは切り離して構築
ここで AI 生成コードの検証を実施

という形で、検証環境を整えました。

一方で、Gemini を新しいスレッドで立ち上げ直し、
HP のブランドの方向性やキーメッセージを一緒に考えてもらおうとしたところ、今度は

「外観 → カスタマイズ → ◯◯を開いてください」

という UI 操作ベースの手順 が返ってくるケースが多発しました。

AI 側が「ユーザーは非エンジニア」と推測している可能性もありますが、
このフェーズでは、ひとまず Gemini の指示どおりに WordPress を操作してみることにしました。

予約サイトの有料プラン問題

予約まわりについては、利用している予約サイトの 有料プラン にすると、次のような機能が使えることが分かりました。

Google カレンダーとの相互連携
自社サイトへの予約カレンダーの埋め込み

この 2 点は、サイト全体の動きや導線設計に大きく影響するため、有料プランを試してみることにしました。

ただし、ここで想定外だったのは、

管理画面のボタンひとつで即有料化、ではなく
問い合わせフォームから申し込み
その後、返信待ちで 1 週間待ち

というフローになっていたことです。

技術的な検証よりも前に、サービス側の都合で待ち時間が発生する 流れになっていました。

根本的な見直し：ブランド再設計（Claude）

こうして構築を進めていくうちに、

「技術的な修正だけでなく、そもそも事業構造そのものを整理し直したほうがよいのでは？」

という結論に至りました。

そこで、Claude を用いてブランド戦略を再定義 することにしました。

現在、整理している内容は次のとおりです。

ブランドメッセージ
提供価値の要約
ペルソナの再設定
トップページの導線設計
サービス構成の見直し

サイト構築の前段階として、情報設計の精度を上げるフェーズ に入っている状態です。

現状：Gemini Pro 3 のデザイン性能に期待しつつ進行中

Gemini が Pro 3 にアップデートされ、デザイン面が向上したという話もあり、
今後、UI 部分の生成にどこまで活用できるかを検証していく予定です。

現時点での AI の役割分担は、ざっくり次のようなイメージです。

Claude Opus4.1：ブランド設計、文章構造の再整理
Gemini 3 Pro：デザイン案、HTML / CSS の生成

Claudeだけでも全てできるようです。
が、微調整のためにトークンを消費するのがいやなので、WebのコーディングはGeminiにまかせようという考えです。

引き続き、ローコードでどこまで整備できるか を試しながら進めていきます。

ちなみに、ChatGPT Plus にも課金していて、このままではもったいないので、
この記事の文章は ChatGPT にも半分くらい手伝ってもらいながら書いています。