「AIで開発が速くなるって言うけど、実際どうなの？」
そう思っている方に、一番わかりやすい答えをお伝えできます。このヨコハマラボのサイト自体が、AIを活用して制作されました。「どんな工程で作ったの？」「どのくらいの時間がかかったの？」という疑問にそのままお答えする形で、制作の流れをご紹介します。
まずサイトの目的を言葉にするところから
制作の出発点は、「何のためのサイトか」を整理することです。ターゲットは誰か、どんな行動を促したいか、他社と何が違うのか——これらを一つひとつ言葉にしていきました。
目的が明確になると、自然と「必要なコンテンツ」と「不要なコンテンツ」が見えてきます。今回のサイトでは、「選ばれる理由」「サービス内容」「制作の流れ」「料金」「お問い合わせ」の5つを軸に構成を組みました。「ブログ」や「会社概要」などの周辺コンテンツも、この時点で必要性を確認しながら追加していきました。
目的から逆算してコンテンツを決めるこの工程は、どんなに優秀なAIでも代わりにはできません。「何を作るか」は人間が考え、「どう作るか」をAIに任せる——この役割分担がポイントです。
フォームの項目を確定して、開発を指示
お問い合わせフォームは、見た目はシンプルでも裏側の処理が意外と複雑です。今回は以下の内容を事前に決めてから開発を指示しました。
- 必須・任意の項目を整理（会社名・氏名・ふりがな・メール・電話・住所・URLなど）
- 郵便番号を入力すると都道府県・住所が自動入力される機能
- 送信後の自動返信メールと管理者への通知メール
- スパム対策（ハニーポット・送信速度チェック・reCAPTCHA・レート制限）
「何を作るか」が決まっていれば、AIへの指示もスムーズです。逆に、曖昧な状態で開発を始めると後から修正が膨らみます。フォームひとつ取っても、事前に詰めておくことの大切さを実感しました。
デザインのプロトタイプを修正しながらコーディング
最初からいきなり完成品を作るのではなく、まずブラウザで確認できるHTMLのプロトタイプを作成。実際に画面で見ながら「ここのフォントをもう少し大きく」「このボタンの色を変えて」「背景の円のデザインが他の要素に被ってしまっているので修正して」と修正を繰り返していきました。
デザインツールとコードを行き来するのではなく、最初からコードで動くものを作って修正するスタイルが、AIを活用した開発の特徴です。確認→指示→修正のサイクルが非常に速く回るため、「なんか違う」という感覚を素直に伝えながらどんどん形にしていけます。
イラストは別途ピックアップして配置を指示
ヒーローエリアや各セクションのアイコン・イラストは、ストックサービスで候補をピックアップして別途購入。「このイラストをヒーローの下に全幅で配置して」「このアイコンをフローの各ステップに使って」と指示するだけで、レイアウトへの組み込みをスムーズに進めることができました。
どのイラストを選ぶか、どこに配置するか——こうしたクリエイティブな判断は人間が行い、実装はAIに任せるという自然な役割分担が生まれます。
HTMLからWordPressテーマへ変換
デザインが固まったHTMLファイルを、WordPressで動作するテーマファイルへ変換しました。
- LP本体（front-page.php）
- ヘッダー・フッター（header.php / footer.php）
- ブログ一覧（home.php / archive.php）
- 記事個別ページ（single.php）
- 固定ページ（page.php）
- 404ページ・フォーム送信完了ページ
それぞれのテンプレートをWordPressの仕様に合わせて変換し、フォームの送信処理・郵便番号の自動入力・スパム対策なども `functions.php` にまとめました。テーマとして完結した状態で納品できる形にしています。
動作確認・デバッグをしながら最終調整
実際にWordPressにアップして動作確認。レイアウト崩れ・フォームの挙動・スマホ表示・ページ遷移など、細かい修正を繰り返しました。
エラーが出たときは内容をそのままAIに共有して原因と修正コードを確認するだけ。「エラーメッセージをコピペして聞く」だけで解決できるのは、エンジニアではない方にとって特にありがたいポイントです。「なぜ起きているのか」「どう直すのか」を毎回説明してもらいながら進められるので、作業しながら知識も身についていきます。
全工程、実質1.5日で完了
今回の制作工程をまとめるとこうなります。
| 工程 | 内容 |
|---|---|
| 目的・構成の整理 | ターゲット・コンテンツ・フォーム項目の確定 |
| プロトタイプ制作 | HTML/CSSでデザイン確認・修正を繰り返す |
| イラスト組み込み | SVGイラストのピックアップ・配置指示 |
| WordPressテーマ変換 | 各テンプレートファイルの作成・フォーム処理実装 |
| ブログ・固定ページ対応 | 一覧・個別・固定ページのテンプレート制作 |
| 動作確認・デバッグ | レイアウト・フォーム・スマホ対応の最終調整 |
| 合計 | 実質1.5日 |
通常のWeb制作では数週間〜1ヶ月かかるような工程が、AIを活用することで大幅に短縮できます。もちろん、要件定義や判断・確認は人間が行います。AIはあくまで「実装を速くする道具」。その使い方次第で、スピードと品質を両立することができます。
公開後も、改善は続く
サイトが公開されたら終わり——ではありません。このサイトも、公開後に気づいた改善点を少しずつ反映させながら、より良い状態に育て続けています。
- スマホ表示のレイアウトを細かく調整
- ブログ一覧のカードデザインを修正
- フッターのリンクや法的ページをモーダルで開く仕様に変更
- ナビのハンバーガーメニューのアニメーションを改善
- サービス・フローのアイコンを実イラストに差し替え
Webサイトは「作って終わり」ではなく、使いながら気づいて、改善して、育てていくものです。AIを活用することで、こうした細かい修正も気軽に素早く対応できます。「ここ直したい」と思ったらすぐに動ける環境が、サイトの質を継続的に高めてくれます。
「自社のサービスや事業でも、こんな風に作れる？」と思った方は、ぜひ一度ご相談ください。まずどんなサイトが必要かを一緒に整理するところから始めましょう。