━━━━━━━━━━━━━━━━━━━━ ■ ひとことで言うと ━━━━━━━━━━━━━━━━━━━━ 「AI に渡すだけで、文字のデザインが垢抜ける」レシピ集です。 ChatGPT・Gemini・Claude など、普段お使いの AI にそのまま使えます。 AI に画像やチラシを作ってもらうと、文字の書体・大きさ・配置が、どこか素人っぽくなりがちです。 それは AI が「どう組めばきれいに見えるか」を、毎回その場で推測しているからです。 そこで、プロの文字の組み方をテキストにまとめました。これが DESIGN.md(デザイン・エムディー)です。 AI に一緒に渡すだけで、推測ではなく、レシピどおりに文字を組んでくれます。 専門知識も、ソフトのインストールも要りません。 ━━━━━━━━━━━━━━━━━━━━ ■ 使い方(コピー&ペーストだけ) ━━━━━━━━━━━━━━━━━━━━ 1. 同梱の index.html をブラウザで開き、好きな見本を選んで「DESIGN.md をコピー」 2. いつも使っている AI(ChatGPT・Gemini・Claude など)のチャットに貼り付ける 3. 続けて、作りたいものを書く 例:「この DESIGN.md のとおりに、カフェの新メニュー告知の画像を作って」 見本の画像も保存できるので、参考画像として一緒に AI に渡すと、イメージがより伝わります。 ━━━━━━━━━━━━━━━━━━━━ ■ こんな方に ━━━━━━━━━━━━━━━━━━━━ ・ChatGPT や Gemini でチラシ・SNS 画像・サムネを作っているが、文字だけ素人っぽくなる ・リールやショート動画のテロップ・表紙を、毎回それっぽく整えたい ・カフェ・店舗・会社のチラシ、メニュー、お知らせを、AI で手早く作りたい ・デザインの知識がなくても、見た目を整えたい ・After Effects / Premiere Pro / Photoshop / Canva で使える数値の指定がほしい ━━━━━━━━━━━━━━━━━━━━ ■ 中身 ━━━━━━━━━━━━━━━━━━━━ ・DESIGN.md 278 種 × 2 版(動きあり 278 ファイル + 動きなし 278 ファイル) ・見本ページ(index.html)… 265 枚の見本をブラウザで見ながらコピーできます ・18 ジャンル カバー・一枚完結 / テロップ・字幕 / ロワーサード / チャプター・数字 / メニュー / パッケージ・ラベル / エディトリアル / イベント告知 / 広告 / 学校・学園 / お知らせ / 店内ポスター・POP / 雑誌 / カフェ / 社内共有 / ブランド販促チラシ / 商品告知 / セール・プロモーション ・キャンバス:縦動画 1080×1920 / 横動画 1920×1080 / フィード 4:5・3:4・1:1 / A4 ポスター ・使用フォント 55 書体(すべて Google Fonts の無料フォント。ダウンロードリンクつき) ━━━━━━━━━━━━━━━━━━━━ ■ 見本ページでできること ━━━━━━━━━━━━━━━━━━━━ ・カーソルを合わせて「DESIGN.md をコピー」 ・「動きあり(動画用)」と「動きなし(画像・印刷用)」を切り替え ・見本の画像をコピー・PNG で保存(AI に参考画像として渡せます) ・編集画面:文字の書き換え・移動・大きさ・色、背景写真の差し替えと回転、サイズ変更(9:16 / 4:5 / 3:4 / 1:1 / 16:9 / A4)→ そのまま PNG で書き出し ・編集画面はキーボード操作に対応(Delete で削除、⌘Z / Ctrl+Z で戻る、⇧⌘Z / Ctrl+Y で進む、矢印キーで 1px 移動) ・「セーフエリアにすべて収める」で、SNS の UI やグリッドの切り抜きで隠れない範囲にデザイン全体を寄せられます ・お気に入り登録と、お気に入りの DESIGN.md を ZIP でまとめて保存 ・ジャンル・和文/欧文の絞り込み、▶ で動きのプレビュー ━━━━━━━━━━━━━━━━━━━━ ■ DESIGN.md に入っている内容 ━━━━━━━━━━━━━━━━━━━━ Google の DESIGN.md 仕様に沿った形式で、公式のチェックツールでエラー・警告 0 件です。 ・色と書体のトークン(YAML) ・サイズ・ウェイト・行送り・字間と、After Effects / Photoshop / Figma / 印刷(pt)の換算値 ・セーフエリアと配置の座標、1 行の最大文字数 ・影・縁取り・帯など、読みやすくするための指定 ・動きのフレーム数・イージング・表示時間(動きあり版) ・その組み固有の Do's and Don'ts と、AI への指示 ━━━━━━━━━━━━━━━━━━━━ ■ 動作環境 ━━━━━━━━━━━━━━━━━━━━ ・見本ページ:Chrome / Edge 80 以降、Safari 16.4 以降、Firefox 113 以降(パソコン推奨。スマホでも閲覧・コピー・編集できます) ・フォントの表示と画像の書き出しにはインターネット接続が必要です ・DESIGN.md は、文章を読める AI ならどれでも使えます(ChatGPT / Gemini / Claude / Copilot など) ・Claude Code や Cursor などの AI エージェントをお使いの方は、プロジェクトに DESIGN.md として置き、AGENTS.md(または CLAUDE.md)に「映像に文字を入れるときは @DESIGN.md の組み方に従うこと。」と 1 行書く使い方もできます(上級者向け) ━━━━━━━━━━━━━━━━━━━━ ■ ご注意 ━━━━━━━━━━━━━━━━━━━━ ・フォントは同梱していません(すべて無料でダウンロードできます) ・AI のサービスや種類によって、仕上がりの再現度は変わります。文字をきれいに描くのが得意な AI ほど、よく仕上がります ・見本の背景はすべて CSS で描いたオリジナルで、店名・人名・数字などはすべて架空です ・編集画面で使う写真はブラウザの中だけで処理され、外部には送信されません ・デジタル商品のため、購入後の返品・返金はお受けできません ━━━━━━━━━━━━━━━━━━━━ ■ ライセンス(概要) ━━━━━━━━━━━━━━━━━━━━ ・購入者本人(個人、または購入した法人の中)が、自分やクライアントの制作物に使えます ・DESIGN.md を使って作った動画・画像・印刷物は、商用利用 OK・クレジット不要です ・ファイルそのものの再配布・転売・共有、公開リポジトリや SNS への掲載は禁止です ・詳しくは同梱の LICENSE.txt をご覧ください ━━━━━━━━━━━━━━━━━━━━ ■ 更新履歴 ━━━━━━━━━━━━━━━━━━━━ v1.0 リリース(DESIGN.md 278 種・18 ジャンル・編集画面・画像の書き出し・お気に入りつき)