albatrosary's blog

UI/UXとエンタープライズシステム

AI に会社ホームページを作らせた

AI

AI に会社ホームページを作らせた

Semantic Prompting × Web開発のリアルな実践ログ

ashiras.io

概要

本記事は、実際にAIに会社のホームページを設計・生成させた過程を、技術者視点で詳細に記録します。
特に、セマンティックプロンプティングを活用し、単なるUIの生成ではなく「意味構造に基づく設計」を実現した点が特徴です。 まさに ノーコード・ローコード。自分でコードを書くのが馬鹿馬鹿しくなる。

1. まず議論から始める：目的と世界観の共有

AIにWebサイトを「作らせる」と言っても、目的や雰囲気を曖昧に伝えるだけでは期待したものは出てきません。
そこで最初に行ったのは、AIとの対話による要件定義でした。

  • このサイトは何を伝えたいのか？
  • 対象ユーザーは誰か？
  • デザインの方向性は？
  • 企業の雰囲気（堅め？柔らかめ？）

☑️ ポイント

このステップでは「見た目」よりも「意味構造」を重視しました。
すなわち、Semantic Promptingによって、
“どんなコンテンツが、どのような文脈で表示されるべきか” をAIが理解するよう促しました。

2. セマンティックプロンプティングで構造を誘導

微米な配置の指示ではなく、下記のような「意図的構造」をJSONで与えました：

{
  "sections": [
    { "name": "hero", "intent": "ブランドの第一印象を伝える", "elements": ["catchphrase", "backgroundImage", "ctaButton"] },
    { "name": "about", "intent": "事業の目的と文化を伝える" },
    { "name": "products", "intent": "主要な提供サービスや特徴" },
    { "name": "contact", "intent": "連絡展開としてのUI設計" }
  ]
}

AIはこのJSONをベースに、HTML/CSS/JSを意図単位で組み立てました。

3. バック画像はAIに相談して決めた

Heroセクションの背景画像は「宇宙的な雰囲気の幻想系パターン」にしたく、 「どこでフリー素材を探すべき？」をAIに質問＝複数のサイトを提案。

  • Unsplash
  • Pexels
  • Pixabay

実際に画像を取得し、background-image に組み込みました。ファイルの圧縮は AI はできないが、圧縮サイトも紹介。

4. 約 1 時間で MVP 完成

  • 要件定義：25分
  • 構造定義：10分
  • コード生成：3分
  • デバッグ＆調整：25分

総合：UIコードが動くWebページが完成。サイトに掲載する文言は、キーワードを提示すれば AI が口調も含め調整。長め短めも AI の持つ同相（数学のトポロジー）で意味を保ち補正。

5. 触っているうちに欲しくなる機能

  • ボタン押しでページ内スクロール
  • モーダルで問い合わせフォーム
  • さりげなくフェードイン

この手の要求もその場でAIに依頼できる。

6. 微調整は人間がやる

AI生成コードはコメント付きで非常に美しい。
ただし、パディングやフォントサイズの調整は、人間のさりげな感性が活きます。

7. 結果：コードが美しすぎる

  • CSS：BEM風 + コメントつき
  • JS：状態遷移が明示的
  • HTML：Semantic Tag を馴染して構造化

デザイナーやWebエンジニアが書く以上の綺麗な書きっぷり。

🚀 おまけ：次はこうしたい（AIパイプライン化）

今回は半自動化に近いフローでしたが、次はこの一連の流れを「AIパイプライン」として統合したくなります。

パイプライン例

[Semantic Prompt] → [JSON構造] → [HTML/CSS/JS生成]
    → [GitHub Pages自動デプロイ]
    → [ログ分析 + 意味フィードバック]

Web開発が一回限りの作業ではなく、意味に基づく進化系統になる時代。