エンジニアが作った「Vibe Coding」なサイト、まるでプロのデザイナー作に見せる魔法のコツ

最近流行りの「Vibe Coding」を駆使して、デザイン知識ゼロのエンジニアでもプロ級のUIを爆速で実装する方法をまとめました。単なるコードの羅列ではなく、デザインの直感を言語化し、AIを相棒にすることで「デザイナーが作り込んだような洗練されたサイト」に仕上げるための実践テクニックです。

答え：人間が反復的なプロセスで設計したからだよ。LLMはただコードを書いただけ。

デザイナーがちゃんと作ったんだよ！君が取り組んだプロセスこそが「デザイン」って呼ばれるものなんだから！

確かに。もしそのデザイナーの名前がClaudeかAstraだったら、まさにそのデザイナーが作ったように見えるね。

これすごくいい。人がAIを嫌う時、実は「低品質なAIのゴミ」を嫌ってるだけなんだって思い出させてくれる。

このサイトには膨大な人間の努力が詰まってるし、最終結果に至るまでの反復的なデザインプロセスが読み取れる。インスピレーションを得て、アイデアを試し、いじり倒す。それこそがデザインだよ。

記事の前提を踏まえて、ちょっと嫌な言い方になっちゃうけど勘弁して。開発者を責めてるわけじゃないから誤解しないでほしい。自分ももっと酷い「AI感丸出し」のフロントエンドをリリースしてきたUI屋の端くれとして言わせてもらうと、AIアンチとかそういう話じゃないんだ。

正直、君のサイトはAIが作ったように見えるよ。

でも、修正は簡単だ。ガラスパネルやタブを、他のデザインと調和するものに置き換えるだけでいい。そうすれば人間が設計したって信じられるし、実際その通りになる。コードを書いたのがAIだったとしてもね。

それ以外はかなりクールだし、よくできてると思う。

投稿主、君は図らずもデザインスクールで教えるデザインプロセスを発明したね。もう正式に自分を「デザイナー」と名乗っていいよ。

1. 高いレベルの機能目標を立てる
2. インスピレーションを得てモチーフを考える
3. そのモチーフの中で広く探索する
4. 方向性を一つに絞って反復する
5. 創造的に満足し、最初の目標を達成するまで細部を調整する

やっぱり「AIっぽさ（vibecoded）」が拭えないな。まだLLM特有のクセが残ってる。

初期の試作はGPTやClaudeが出力するデザインと似た「あの匂い」がするね。でも最近の「画像→HTML」のフローがどれだけ優秀か、みんな過小評価してる気がする。

Geminiにこのウェブページをプロンプトとして記述させて、それを画像→コードのパイプラインに流し込んでみたのがこれ。僕の介入はゼロだよ：

https://html.non.io/railcode-example

これはOpus 5.5で適当に作ったものだけど、元のサイトのスペックを元にしてるとはいえ、紫のグラデーションやClaude特有の茶色を出さずに0から1を生み出すのは、今や十分可能なんだよ。