📝 今回の内容 生成AI基礎講座A [A-12-3]。シリーズ「自分のデザインを資産にする 〜DESIGN.mdの活用法〜」全6回の第3回。今回から第3〜5回までは「同じDESIGN.mdを使い回して、LP・ZINE・アプリと媒体を変えていく」実践編。その第1弾として、本回ではLPをHTMLで作っていきます。鍵になるのは4つの要素 ― ① 媒体フォーマット、② マスターデザインMD、③ 媒体別補足デザインMD、④ コンテンツ ― を分けて持ち、「変えないもの」と「媒体ごとに変えるもの」を意識的に切り分けること。参考サイトのURLとスクショからマスターMDを固め、LP特有のフォーマットと補足MDを起こし、最後にHTMLへ流し込むという一連の流れを実演します。 🎯 動画トピック 🚀 第3〜5回の位置づけ ― 同じDESIGN.mdを媒体別に使い回す ・第1回でDESIGN.mdの背景、第2回で作り方、第3回からは実践編 ・実践編は3回構成で、LP/ZINE/アプリと媒体を切り替えていく ・同じDESIGN.mdと同じ素材を使い回すことで「資産化の効き目」を体感する 🧩 制作の核となる4つの要素 ― 変えるものと変えないもの ・①媒体フォーマット ②マスターMD ③媒体別補足MD ④コンテンツ ・マスターMDとコンテンツは固定、媒体フォーマットと補足MDは媒体ごとに作る ・進め方の合言葉は「変えないものから固める」 🎨 マスターデザインMDを固める ― URL＋スクショで色を抽出 ・最初は成果物ではなく「進め方」をClaudeに相談する ・参考URLは構造には強いが、色味は読み違える（「ほぼモノクロ」と返ってきた） ・スクショで補完すると、ビビッドなオレンジ＋青の差し色を再抽出できる ・ピル型ボタン、ソラール系フォント、有機的シェイプも採用 📐 LP用フォーマット ― 黄金パターンを「目的・要素・コピー」で整理 ・LPの黄金パターンはタイトル→Problem→Promise→3点訴求→FAQ→Final CTA ・最初の出力にはレイアウト記述が混在していたので補足MDへ寄せる ・フォーマットは「目的・要素・コピーの掟」だけに絞ると軽くなる 🧪 LP補足デザインMDとコンテンツ本案 ― 実装前のもうひと押し ・LP特有のレイアウト・ビジュアル・状態（ホバー等）は補足MDに集約 ・「HTMLで実装する前提」を明示しておくと補足MDの粒度が揃う ・実装の前に「コンテンツ本案」フェーズを挟み、コピーを確定させてから組む 🏗️ HTML実装と再修正 ― 3階層を同期させて反映する ・最初の出力は背景が白ばかりで参考サイトのグレーの使い分けが落ちていた ・抜け落ちの原因を①マスター未記載／②補足未記載／③実装ミスで切り分ける ・マスターMD→補足MD→index.htmlの順で3層を同期して修正する 🌱 LP1本では見えない「資産化の効き目」 ・1媒体だけだと「DESIGN.md意味あるの？」と感じやすい ・第4回ZINE、第5回アプリと媒体を増やすほど味が染み出てくる ・媒体ごとの補足MD運用が、HTMLの限界を切り分ける判断軸にもなる 🔑 今回のキーメッセージ 「制作は4要素 ― マスターMDとコンテンツは固定、フォーマットと補足MDは媒体別」 → 変えないものから先に固めることで、媒体を横断したときに資産が効く 「URLで構造、スクショで雰囲気 ― 抽出ソースを分業させる」 → ソース1本に頼らず、足りない情報を別形式で補うのが定石 「フォーマットは目的・要素・コピーの掟だけに絞り、ビジュアルは補足MDへ」 → 責務を分けることでフォーマットが軽くなり、トークン消費も抑えられる 「修正は3階層を同期して反映する ― HTMLだけ直すと一発芸で終わる」 → マスターMD／補足MD／実装の3層に戻すことが、資産化の本体 📑 タイムスタンプ 00:00 オープニング・第3回の位置づけ 00:51 制作の4要素（媒体フォーマット／マスターMD／補足MD／コンテンツ） 06:32 実演開始 ― 素材とゴールをAIに渡す 11:28 進め方の相談・「変えないものから固める」 14:00 LPのテーマと参考デザインを共有 16:00 マスターMD生成 ― URLからスクショで色情報を補完 19:30 マスターデザインMD完成 21:11 LP用フォーマットの作成依頼 21:50 LPの黄金パターン（Hero→Problem→Promise→FAQ→CTA） 23:52 フォーマットと補足MDの責務分担を整理 27:03 LP用補足デザインMDの生成 28:13 HTMLで実装する前提を共有 30:08 コンテンツ本案フェーズを差し込む 32:23 HTML実装の初回アウトプット 33:01 参考サイトと比較しての再修正（グレー／青／ヘアライン） 35:19 マスターMD／補足MD／HTMLの3層同期修正 37:49 今回のまとめ・第4回／第5回への接続 ご不明点や質問はコメント欄までどうぞ！ ┈┈┈┈┈┈┈┈┈┈ 『セナリ学院』とは？🏫✨ ┈┈┈┈┈┈┈┈┈┈ 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スクール