使い方は、これだけ
-
1見本を選ぶ
作例ギャラリーから、気に入った雰囲気を目で選びます
-
2ブリーフをコピー
ページ下部のボタンひとつで、AIに渡す指示文がまるごとコピーされます
-
3Codexに貼る
コピーした指示文を、Codexにそのまま貼り付けます
-
4答えて完成
お店のことをいくつか聞かれるので、答えるだけ。あなたのサイトができあがります
この感じになりそうです
※入力ワードからの近い作例。実際の選定はAIが図鑑全体から行います
ピンとくるものがない？
1作例ギャラリー
イメージに近い作例を選ぶ
業種で絞り込み、あなたがつくりたいサイトの雰囲気に近い作例を選んでください。選ぶと下に採用方針が出ます。
※掲載の作例はすべて、この図鑑のために制作したオリジナルの見本画像です（実在の企業・ブランドのサイトではありません）。
該当するサンプルがありません。業種フィルタを変えてみてください。
2この雰囲気で作る
選んだ作例の採用方針
左（スマホは上）が作例サイトの見本画像。クリックまたは「拡大して見る」で大きく確認できます。右が、この作例から借りる設計（配色・書体・構成・避けること）です。下のボタンで、AIに貼るだけの制作プロンプトになります。
配色（この3色で組みます）
トーンを変える（トンマナ図鑑の86トーンから）
構成・書体はこのサンプルのまま、色（トーン）だけ別候補に差し替えます。系統で絞り込むか、雰囲気の言葉で検索してください。
該当するトーンがありません。系統や検索語を変えてみてください。
書体
本文はこの書体で組みます。読みやすさと雰囲気の両立を確認してください。
密度・形・CTA
構成（想定セクション）
コピーの方向性
この構成が効く理由
避けること（回避NG）
コピーしたら、次はこれだけ
コピーした指示文を Codex に貼って送信すると、作り始める前にお店についての質問がいくつか返ってきます。たとえば——
- 商品・サービス（何を売っているか・メニューと価格）
- 誰に届けたいか（どんなお客さんに来てほしいか）
- いちばんの強み（他のお店と違うところ）
チャットで答えるだけで、この雰囲気であなたのサイトが建ちます。分からない質問は「おまかせで」と返してOKです。
できあがったら、ここを確認（この図鑑が防いでいること・あなたの目で見てほしいこと）
できあがるのは「見本そのもの」ではありません。配色・書体・間取り（写真と文字の配置）は見本を再現し、文章・写真・価格はあなたのお店の情報に置き換わります。
指示文に組み込み済みの防止策
- 架空の口コミ・実績を書かない（無い場合は「掲載準備中」の枠になります）
- 実態のない割引・締切カウントダウンを作らない
- プライバシーポリシー・特定商取引法の表記の入れ忘れ
- 同じ画像の使い回し・画像の作り忘れ
- スマホで最初の画面が崩れる、空白になる
あなたの目で見てほしいこと（AIの得意不得意が出るところ）
- 余白の品 …… 足しすぎていませんか？
- 流れ ………… 上から順に読んで、話がつながっていますか？
- 画像 ………… あなたの商品に見えますか？
気になった箇所は「◯◯を直して」とAIにそのまま伝えれば直ります。
もっと確実にしたいとき
おまかせサイト工房をお持ちの方は、工房ルートで使ってください。できあがったページに工房の自動検査（スマホ崩れ・誤字・リンク切れ等）がそのまま掛かります。図鑑=設計図、工房=検査場、の分担です。