@devlinkhubposted at 2026-04-16

狙い通りのコードをAIだけを使って作りたい

Discussion

はじめに

去年の12月あたりにdevlinkhub.netというドメインを買ってAIに造らせたサイトを使っていたのですがそろそろもっちゃんとしたホームページを作りたくなったので今回はどうやったらAIに狙い通りのサイトを作ることができるかを色々やっていきたいと思います

元プロンプト

DevLinkHubのホームページを作ってください
言語:HTMLとCSSを使用してください
そして1つのファイルで完結させてください

サーバースペックの掲載を行なってください
OS:Proxmox VE
CPU:Ryzen 5 5500
RAM:DDR4 3200 8GB
自己紹介
私が行っていることは、主に Proxmox を使った自宅サーバーの運用とWebサービスの構築です。これまでは Python を少し触ってチャットサービスなどを動かしてきましたが、今は新しく Rust の勉強を始めたところです。ゆくゆくは自作サービスのバックエンドに Rust を活用できるようになることを目指しています。

そして以下のリンクを乗せてください
https://qiita.com/devlinkhub
https://zenn.dev/codseowner
https://note.com/codseowner
https://github.com/DevLinkHub2026

プロンプトは書いて欲しいことと使用言語のみを記載しているとてもシンプルなものです。書いて欲しい内容は以外は書いていないとてもシンプルな形式です。

プロンプトをそのまま実行

そのままプロンプト通りにAIにサイトを作らせると以下のようなサイトができました。(サイトの縮小を少し行なっています)

これはいつも使っているアカウントで使用して作ったものなので念の為アカウントにログインせずに作ってみると...

2回目

やっぱり似た形式のサイトが出てくる...
これは結構言われていて認知されてることではありますがやはりAIは同じようなものを作る習性があることがわかりました。なぜこのようになるのか調べてみるとなぜ全部同じになるのかという記事を発見一部引用させていただくと

AIが生成するコンテンツがなぜ似たようなものになってしまうのか。その答えは、LLM（Large Language Model）の学習メカニズムにあります。

LLMは膨大なテキストデータから統計的パターンを学習します。しかし、ここに重要な特性があり>ます。LLMは訓練データ中で最も頻繁に現れるパターンにより強く引っ張られる傾向があるのです。これを distributional convergence（分布収束）と呼びます。

とはっきりと記させていました。このことからAIの根本的な仕組み的にこのようなことが起こっていることがわかりました。じゃあ他のAIだったらどうなるのだろうとchatgptにも同じ質問を投げかけると
やっぱり一緒...

もう一度参考にした記事を見てみると

フレームワーク偏重

Web開発の現場では、特定のフレームワークが支配的です：

React: component-based architecture
Tailwind CSS: utility-first styling
Next.js: 特定のフォルダ構造とコンベンション

という文章がありました。なら画像ならだいぶ違ったものが出るのか気になったので両AIで【無料】AI 画像生成ができるおすすめサイト 10 選【2026年最新】のプロンプトをお借りして実行してみると

夕暮れの都市を背景に、風に揺れる黒髪の女性がこちらを振り返る瞬間を切り取った、超高精細なポートレート。暖色系の斜光が頬を照らし、髪の1本1本が透明感を持って写り込む。背景には濡れた路面の反射、細密なビルの窓、歩行者のシルエットなど複数のディテールが自然に溶け込んでいる。皮膚の質感、瞳のハイライト、衣服の布地の質感までリアルに表現された写真風の描写。

Gemini

ChatGPT

となりまったく違う画像が生成されました。なので狙い通りのサイトを作るにはAIを使い分けるというよりかは思ってるホームページをどうAIに伝えるのが重要かを考えることが重要なことがわかりました。

〇〇のようなサイトにして

なので今度は定番の〇〇のようにしてという命令でサイトを作ってもらおうと思います。
まずは全体はクラウドフレアのようなサイトに仕上げてくださいという命令だけ追加してみると

あれ?大して変わらない...
やっぱりDevLinkHubのホームページを作ってくださいに引っ張られている感じがあるので消してみると

多少は変わったか全然クラウドフレアみたいなサイトになってない..もっとガラッと変わってくれることを期待していたのですが...

詳しく説明

何を言ってるんだという感じですがプロンプトを見てもらったほうが早いと思うのでプロンプトを下に貼り付けておきます。

DevLinkHubのホームページを作ってください
言語:HTMLとCSSを使用してください
そして1つのファイルで完結させてください

テーマはクラウドフレアと同じいろんなオレンジ色を使ってください。
サーバースペックの掲載を行なってください
サーバー掲載はクラウドフレアのようにやや左寄りで大きく表示してください「接続、保護、構築をど⁠こででも」の部分に当たります。
そしてそこの背景はアニメーションでだんだんオレンジ色のものに覆われていく形で作ってください。
そしてOSは白文字でCPU,RAMは黒文字で書いてください。
OS:Proxmox VE
CPU:Ryzen 5 5500
RAM:DDR4 3200 8GB
自己紹介
自己紹介はオレンジ色ではなく黒い場所に表示させてくださいクラウドフレアでいう「従業員、AIエージェント、アプリ、インフラをつなぐCloudflare Oneは、アジャイルなSASEプラットフォームです。コンポーザブルでプログラム可能な当社プラットフォームで、AIのセキュアな導入とゼロトラストアクセスを迅速に実現。設計段階から統合されたSASEアーキテクチャでイノベーションを加速。詳細を見る  」の部分です。右側にはアニメーション付きで通信しているようなものを画像なしで作ってください
私が行っていることは、主に Proxmox を使った自宅サーバーの運用とWebサービスの構築です。これまでは Python を少し触ってチャットサービスなどを動かしてきましたが、今は新しく Rust の勉強を始めたところです。ゆくゆくは自作サービスのバックエンドに Rust を活用できるようになることを目指しています。

そして以下のリンクを乗せてください
リンクはクラウドフレアでいうニュースとリソースのようにタイル上でおいてください
そして画像、種類、内容の順で書いてください
https://qiita.com/devlinkhub
https://zenn.dev/codseowner
https://note.com/codseowner
https://github.com/DevLinkHub2026

当たり前なのですが思ったよりもそれぽくできました。

しかしこれではサクッとはできないのでもう一踏ん張りして探してみようと思います。

画像を渡す

以下の画像と一緒に**以下の画像をもとに作成を行なってください。**を追加したプロンプトで十個すると

DevLinkHubのホームページを作ってください
言語:HTMLとCSSを使用してください
そして1つのファイルで完結させてください
以下の画像をもとに作成を行なってください。

サーバースペックの掲載を行なってください
OS:Proxmox VE
CPU:Ryzen 5 5500
RAM:DDR4 3200 8GB
自己紹介
私が行っていることは、主に Proxmox を使った自宅サーバーの運用とWebサービスの構築です。これまでは Python を少し触ってチャットサービスなどを動かしてきましたが、今は新しく Rust の勉強を始めたところです。ゆくゆくは自作サービスのバックエンドに Rust を活用できるようになることを目指しています。

そして以下のリンクを乗せてください
https://qiita.com/devlinkhub
https://zenn.dev/codseowner
https://note.com/codseowner
https://github.com/DevLinkHub2026DevLinkHubのホームページを作ってください
言語:HTMLとCSSを使用してください
そして1つのファイルで完結させてください

サーバースペックの掲載を行なってください
OS:Proxmox VE
CPU:Ryzen 5 5500
RAM:DDR4 3200 8GB
自己紹介
私が行っていることは、主に Proxmox を使った自宅サーバーの運用とWebサービスの構築です。これまでは Python を少し触ってチャットサービスなどを動かしてきましたが、今は新しく Rust の勉強を始めたところです。ゆくゆくは自作サービスのバックエンドに Rust を活用できるようになることを目指しています。

そして以下のリンクを乗せてください
https://qiita.com/devlinkhub
https://zenn.dev/codseowner
https://note.com/codseowner
https://github.com/DevLinkHub2026

とても簡単に作れました。

まとめ

しっかりと情報を渡さないとAIに仕組み的にダメなことがわかりました。

意見交換したいこと

【意見交換したいこと】
今回はWebサイトの「見た目」にフォーカスしましたが、アプリ開発などより複雑なプロジェクトでは、皆さんはどこまで細かく指定していますか？

ロジックやディレクトリ構成は、あえてAIに任せずにガチガチに指定しているなど

「自分はこう使い分けている」というノウハウがあれば、ぜひコメントで教えてください！

1 likes

@SurferOnWww posted at 2026-04-17

今回はWebサイトの「見た目」にフォーカスしましたが、アプリ開発などより複雑なプロジェクトでは、皆さんはどこまで細かく指定していますか？

デザインの話ではなくて、AI を Web アプリ開発に使うことに関して自分が思っていることを書きます。

まず基本的なこととして意に留めておくべきは、少なくとも現時点では AI に丸投げして完璧なコードができることはないということだと思います。さらに、今後 AI がどのように進化しようと、AI が作った成果物に対して、AI が主体的な責任を負ってくれるいうことはあり得ないということも (特にセキュリティ関係は問題かも)。

AI にはペアプログラマーとしての役割を担ってもらい、力を合わせて開発を加速するという考え方を基本として、どのようにしたら効果的に AI に支援させられるかということを質問者さんが考えながら、「指示」⇒「応答」⇒「検証」⇒「改良」のループを回して開発を行い、成果物を完成させるという方向で考えるべきと思います。

AI にコードを作ってもらう場合、AI が作ったコードはたたき台として形にしたものだとの認識を持って、そのたたき台をレビューし、理解し、検証し、最終成果物に対して、質問者さんが当事者意識を持った主体的な責任を持てるようにするという基本姿勢が重要だと思います。

で、「どこまで細かく指定」ということですが、必須情報を与えるのは当然として、AI にどこまでやって欲しいのかによります。当然それには Web アプリとそれを作るためのフレームワーク・言語に関する深い技術的な知識が必須になります。

多くの生成 AI はまず作業を進めて役に立つコードを返すことを優先します。プロンプトに曖昧な点があっても、一般的な（最小限で動作する）仮定を置いてコードを生成することで、すぐに動かせる形を提供することが多いです。必須情報を最初からきちんと与えておかないと、AI が勝手に想像して走って行ってしまい、意図しない、場合によっては役に立たないどころか混乱を招くだけの結果となることがあります。

例えば、DB のテーブルの CRUD を行うためのコード生成には、対象テーブルのスキーマ情報は絶対必要なのですが、プロンプトにその情報を含めなくても、自分が使っている GitHub Copilot の場合ですが、勝手に想像してとりあえずビルドはできるたたき台を作ってきます。でも、実際のテーブルのスキーマと AI が想像して作ったコードが異なるので実環境では動きません。

では、スキーマ情報を与えれば期待通りの結果になるかと言えば、それはどこまで期待しているかによります。DB のテーブルの CRUD を行う際にはユーザー入力の検証は必須ですが、黙ってるとそこまでは実装してくれないと思います。

1Like

Are you sure you want to delete the question?