【先着100名】コードは書かない。「.mdファイル」1つでWebサイトの品質が変わる｜「Gemini × Stitch」 Vibe Coding入門

🔽 最新のセミナー情報はこちら

前回「画像」を作った。次回は「Webサイト」を作る。

前回の川合初の自主企画ウェビナーに参加してくださった皆さん、ありがとうございました。

満足度「4.76/5」、「すぐ使いたい」76%という
嬉しすぎる結果をいただきました。

あのウェビナーで最も反応が大きかったのは、プロンプトを「分割」して指示するだけで、AIの出力精度が劇的に変わるという話でした。

今回のVol.2も、同じ「言われてみれば当たり前だけど、やってない」系の話をします。

テーマはVibe Coding。

コードを1行も書かずに、AIだけでWebサイトを作ります。

noteメンバーシップに参加すると600本以上の記事が読み放題です。

書籍「AIでゼロからデザイン」好評発売中

お問い合わせ先（セミナー登壇・書籍化など）

「ポートフォリオサイトがほしい。でもコードが書けない。」

この悩み、実はめちゃくちゃ多いです。

前回のアンケートでも「デザイン初心者だがAIで副業案件に繋げたい」「マーケティング業界でデザインとは関係しないが、AI活用に興味がある」という声をいただきました。

Webサイトを作るには、これまで3つの壁がありました。

1. コーディング（HTML/CSS/JavaScript）

2. サーバー（ホスティング、ドメイン設定）

3. デザインツール（Figma、Adobe XD）

2026年、この3つの壁は全てAIが溶かしました。

GoogleのAIツール「Gemini Canvas」と「Google Stitch」を使えば、日本語で「こういうサイトを作りたい」と指示するだけで、コードを1行も書かずにWebページが完成します。

ただし「AIに丸投げ」では品質が低い

ここからが本題です。

「ポートフォリオサイトを作って」とだけAIに頼むと、
たしかにそれっぽいものはできます。

でも、どこかで見たことがある、ありがちなデザイン。
個性がない。プロに見えない。

なぜか？

AIは「何を作るか」を自分で決められないからです。

あなたが「何を作りたいか」を言語化しないかぎり、
AIは「なんとなくそれっぽいもの」を出すしかありません。

世界のプロは「.mdファイル」で型を決めている

では、世界中のVibe Codingのプロたちはどうしているか。

答えはシンプルです。

たった1つのテキストファイル（.md）で
「型」を決めてから、AIに渡している。

具体的には「PRD.md」というファイルに、こう書きます。

• 誰のためのサイトか

• 何ができるサイトか

• 色は何色か、フォントは何か、余白は何pxか

• 作らないものは何か

たったこれだけ。

でも、これがあるかないかで、AIの出力は全く違うものになります。

同じ「ポートフォリオを作って」のBefore/After

今回のウェビナーでは、まったく同じお題を2回作ります。

1回目: 「ポートフォリオサイトを作って」とだけ指示。
2回目: PRD.md + design-tokens.md を渡してから指示。

この2つの差を、40分のライブ実演で目の前でお見せします。

ポイントは3つ。

1. 形容詞を数値に置き換える

「モダンなデザインで」と指示しても、AIは困ります。

「モダン」の定義は人によって違うからです。

代わりに、こう書きます。

「背景白、ゴシック体、余白24px以上、アクセントカラー#2563EB」

形容詞を消して、数値を書く。

これだけで、AIの出力がブレなくなります。

2. 「作らないもの」を書く

PRD.mdで最も重要なセクションは、実は「スコープ外」です。

AIは親切なので、書いていない機能を「良かれと思って」追加します。

ブログ機能、お問い合わせフォーム、アニメーション……頼んでないのに。

「作らないもの」を明示するだけで、AIは余計なことをしなくなります。

3. ゴールデンリファレンス画面を1つ決める

理想のWebサイトのスクリーンショットを1枚、AIに渡します。
「このトーンで作って」と添えるだけ。

これで色・余白・雰囲気の「基準点」が決まり、複数ページを作っても一貫性が保たれます。

使うツール

どちらもGoogleアカウントがあれば今日から使えます。

開催概要

こんな人に来てほしい

• ポートフォリオサイトやサービスページを作りたいけどコードが書けない

• 「自社のLP、内製できない？」と上司に聞かれて困っている

• AIでWebサイトを作ってみたけど、なんか「素人っぽい」仕上がりになった

• Vibe Codingって聞いたことはあるけど、何から始めればいいかわからない

アンケート回答者限定特典

ウェビナー後のアンケート（2〜3分）にご回答いただいた方だけに、メールで特典URLをお送りします。

前回（Vol.1）の参加者の声

Vol.1は「画像」、Vol.2は「Webサイト」

コードは書けなくていい。

「何を作りたいか」だけ、持ってきてください。

ランチタイムの40分間、画面越しに
お会いできるのを楽しみにしています。

⬇️ 参加枠の確保はこちらから