01 / 26
今日のゴール
同じAI。同じお題。
違うのは「頼み方」だけ。
BEFORE
「モダンでおしゃれに作って」
→ ありがちなデザイン
AFTER
PRD.md + design-tokens.md を渡す
→ プロ品質
覚える用語は3つだけ
PRD
＝ 企画書
何を作るか書いた紙
デザイン
トークン
＝ ルール表
色・フォント・余白の決め事
CTA
＝ 押してほしい
ボタン
お問い合わせ等
他に難しい用語は使いません。テンプレートは最後に全て配布します。
03 / 26数字で見る
外注費
30〜50万円
＋ 更新のたびに追加費用
今日の方法
0円
ツールは全て無料
従来の制作期間
2週間
今日の方法
30分
Before: 雰囲気で作る
「ポートフォリオサイトを作って。
モダンでおしゃれに。」
フリーランスのマーケターのポートフォリオサイトを作ってください。
モダンでおしゃれなデザインにしてください。
セクション: ヒーロー / 自己紹介 / 実績 / お問い合わせ
名前は「田中真由」、肩書きは「マーケティングコンサルタント」
→ Gemini Canvas にこのまま貼ります
05 / 26「モダンでおしゃれ」は
人によって違う。
AIにとって「大きめ」は曖昧。
48px は曖昧さゼロ。
頼み方を変えるだけで、出力が変わる。
やることは3つだけ。
今日の3原則
形容詞を数値に置き換える
「作らないもの」を書く
ゴールデンリファレンス画像を渡す
この3つを守るだけで、プロ品質になる。
07 / 26形容詞を数値に置き換える
NG
「大きめのフォント」
「落ち着いた色」
「ゆったりした余白」
OK
48px
#1C1917
80px
Figmaのスタイルガイド = design-tokens.md と同じ発想。
08 / 26色は5色に絞る。
プロが作ったサイトは例外なく3〜5色。
背景
カード
テキスト
サブ
アクセント
「これ以外禁止」と書くだけで
AIはプロの色使いになる。
「作らないもの」を書く
AIは親切なので、頼んでいない機能を
「良かれと思って」追加する。
スコープ外（PRD.mdに書く）
「やらないこと」を書くからスコープが決まる。
10 / 26ゴールデンリファレンス画像を渡す
理想のサイトのスクショ1枚を
AIに渡す。「このトーンで」と添えるだけ。
言葉にできないニュアンス ——
余白の取り方、要素の密度、色のトーン。
画像で渡すのが最も正確。
企画書のテンプレート
PRD.md の構造
ルール表のテンプレート
design-tokens.md
Colors
5色のみ
「これ以外禁止」
Typography
Noto Sans JP のみ
サイズは全てpx指定
Spacing
8の倍数のみ
8, 16, 24, 32, 48, 64, 80
Border Radius
card: 12px
button: 8px
Layout
max-width: 960px
3列 → モバイル1列
Button
高さ 48px
accent色 + 白文字
ここまで大丈夫ですか？
PRD ＝ 企画書
デザイントークン ＝ ルール表
この2つのテキストファイルを
AIに渡すだけです。
ツールの使い分け
Google Stitch
デザインを作る
参照画像 → UIモックアップ生成
Gemini Canvas
コードを作る
テキスト指示 → HTML/CSS生成
Stitch でビジュアルを決める → Canvas でコード化
どちらもGoogleアカウントがあれば無料で使えます
15 / 26After: 型を渡して作る
Stitch にリファレンス画像 + tokens → UIモック生成
Canvas にスクショ + PRD.md + tokens → コード生成
→ 同じ「ポートフォリオサイトを作って」で、どれだけ変わるか
16 / 26Before / After 比較
| Before | After | |
|---|---|---|
| 色数 | 8色以上 | 5色だけ |
| 余白 | バラバラ | 8の倍数で統一 |
| フォント | 複数混在 | Noto Sans JP 一本 |
| 実績の数値 | テキストに埋もれる | 48px Bold で目立つ |
| 余計な機能 | ブログ、フォーム… | 4セクションだけ |
変わったのはmdファイルを書いたかどうかだけ。
17 / 26修正も自分でできる
アクセントカラーを #2563EB から
#059669 に変更してください。
日本語で指示するだけ。数秒で反映。
外注なら見積もり→修正依頼→確認。それが数秒に。
18 / 26既存サイトを改善する
スクショ1枚 + デザインルール
＝ 情報そのまま、デザインだけ改善
既存サイトのスクショを Stitch にアップ
design-tokens.md のルールを貼る
Canvas でコード化
社内ポータルやLPにもそのまま使えます
19 / 26言語化力が全て。
道具より覇気を研げ。
mdファイルで「型」を決めれば、
プロ品質になる。
おさらい
今日やったこと
形容詞を数値に置き換えた
「モダン」→ #FAFAF9, 余白80px, Noto Sans JP
「作らないもの」を書いた
ブログ禁止、フォーム禁止、アニメーション禁止
リファレンス画像を渡した
「このトーンで」と添えるだけで一貫性が生まれる
作ったサイトを公開する
GitHub + Cloudflare Pages
Canvas が生成したHTMLをダウンロード
GitHub にアップロード（ドラッグ&ドロップ）
Cloudflare Pages と連携（ボタン数回）
無料 / HTTPS自動 / 独自ドメイン可 / Git push で自動更新
詳しい手順は需要があれば別回で開催します。チャットで教えてください。
22 / 26必要なスキル
日本語で
企画書が
書ければOK
コード不要
デザイン経験不要
制作時間
30分
従来: 2週間
→ 30分
得意領域
LP
ポートフォリオ
1ページサイト
複雑なWebアプリは
守備範囲外
Gemini CanvasはセマンティックHTML出力。Stitchの出力はFigmaにも持っていけます。
23 / 26月曜朝の最初の一歩
テンプレ（PRD.md + tokens）をコピー
名前と肩書きを自分のものに書き換え
Gemini Canvas に貼る
15分でできます。
24 / 26上司に一言で伝えるなら
「AIにmdファイルで仕様書を渡すだけで、
外注なしでLP作れます。
制作コスト0円、制作時間30分。」
25 / 26
アンケート回答者限定特典
アンケート（2〜3分）にご回答いただいた方にメールでお送りします
PRD.md + tokens テンプレ
ポートフォリオ用・LP用・改善用の3種
Canvas × Stitch ガイド
使い分けと連携を1枚に
品質10秒チェックリスト
余白・フォント・導線など10問
カスタマイズ用プロンプト
名前・色を書き換えるだけの版
#VibeCoding入門 #AIでサイト作成
ありがとうございました。— 川合 卓也
26 / 26