はじめに
私は 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 にも半分くらい手伝ってもらいながら書いています。