📝 今回の内容 「デザインを自分の資産にする」シリーズ第2回。第1回で「DESIGN.mdとは何か」の概略をつかんだ前提で、Telechatと AI を使って DESIGN.md を実際に自分の手で作るところまでをサポートします。「Awesome Design MD」など既存リソースから3つほど参考を集めてフォーマット化し、URLやスクショで自分のイメージを流し込む2ステップを実演。別物（架空の音楽フェスLP）で動作検証して、修正は1ページではなくDESIGN.md側に反映するという「資産化の運用」までを体感できます。 🎯 動画トピック 🗺️ DESIGN.md作成の2ステップ全体像 ・ステップ1：フォーマット作り（項目／プロットの枠組み） ・ステップ2：コンテンツ入れ込み（オリジナル要素を流し込む） ・「読んでわかる」から「自分で作って使える」への橋渡し 🔍 Step 1 ― 既存のDESIGN.mdを集める ・「Awesome Design MD」GitHubプロジェクトから参考例を取得 ・3つくらい集めるとAIが共通項を抽出しやすい ・サービスのカテゴリが決まっているなら同カテゴリから集めるのがおすすめ 🤖 AIにフォーマットを作ってもらう ・3つの参考をTelechatに渡して「フォーマット化して」と依頼 ・デザイン哲学・カラー・タイポグラフィ・スペーシング・コンポーネントなど一通り生成 ・コンポーネントが含まれていればフォーマットとしてOKの目安 🎨 DESIGN.mdの主要構成要素 ・カラーシステム：プライマリ／セカンダリの優先順位 ・タイポグラフィ：フォント・サイズの定義 ・スペーシングとレイアウト：余白でサイトの印象を左右 ・コンポーネント：どこでも使えるセットを1要素として規定 📥 Step 2 ― コンテンツを入れ込む3つの方法 ・自然言語で話す（明るさ・フォントなどを言語化） ・URLで渡す（参考サイトから抽出） ・画像で伝える（スクショ複数枚でトーンを伝える） 🖼️ 実演 ― URLとスクショで雰囲気を伝える ・URLは取得失敗するケースもある ・複数枚のスクショで「ポップ」「カラフル」「縦組み見出し」などの特徴をAIが読み取る ・1枚だけより複数枚送るのが効果的 🎵 デザインシステムの動作検証 ・架空の音楽フェスLPを同じDESIGN.mdで生成して確認 ・縦書きや枠の縁取りなど、元サイトの特徴が反映されているかをチェック ・動かなければ調整して、変更をDESIGN.md側にも反映する運用 🌱 継続的な更新で資産にしていく ・1ページではなくDESIGN.mdに反映すれば、全ページに波及する ・次回以降はウェブ／紙媒体／アプリの媒体別運用を予定 🔑 今回のキーメッセージ 「ゼロから作らず、既存を集めて共通項を抽出する」 → 3つくらいの参考をAIに渡せば、安定したフォーマットがすぐ手に入る 「自然言語／URL／画像のどれでも伝えられる」 → 状況に合わせて手段を組み合わせれば、自分のイメージは確実に反映できる 「1ページではなくMDに反映する」 → 1ヶ所のルールを直せば全ページに波及する。これがデザインを資産化するということ 「『わかる』と『使えるようになる』は違う」 → 別物で検証して、調整をMDに戻す循環があってこそ「使える」状態になる 📑 タイムスタンプ 00:00 オープニング・挨拶 00:35 DESIGN.md作成の2ステップ 01:11 Step 1：既存のDESIGN.mdを探す（Awesome Design MD） 02:22 ClaudeのDESIGN.mdの中身を見る 04:20 AIにフォーマット化を依頼 05:13 同じカテゴリから参考を集めるコツ 05:58 生成されたフォーマットの解説 09:09 Step 2：コンテンツを入れ込む3つの方法 10:17 実演 ― URLとスクショで雰囲気を伝える 13:29 デザインシステムの動作検証（音楽フェスLP） 15:30 継続的な更新で資産にしていく 15:36 締め ご不明点や質問はコメント欄までどうぞ！ ┈┈┈┈┈┈┈┈┈┈ 『セナリ学院』とは？🏫✨ ┈┈┈┈┈┈┈┈┈┈ SNS総フォロワー数4.1万人 平野友康が校長を務める 生成AIに特化したオンラインスクールです。 講師の得意分野はデザイナー、開発分野、業務改善、まちづくりなど幅広く、 多角的なアドバイスが可能です！ 今だけ14日間無料体験キャンペーン中！ 下記HPより詳細をご確認ください。 セナリ学院HP: https://www.teleport.jp/scenari/ ┈┈┈┈┈┈┈┈┈┈ ◆公式SNS Instagram: https://www.instagram.com/scenari.teleport/ X(旧Twitter): https://x.com/scenari_AI Facebook: https://www.facebook.com/people/%E3%82%BB%E3%83%8A%E3%83%AA%E5%AD%A6%E9%99%A2-Teleport/61576632806665/ note: https://note.com/scenari_teleport #セナリ学院 #teleport_ai #生成AIスクール #DESIGNmd