📝 今回の内容 生成AI基礎講座A [A-12-4]。シリーズ「自分のデザインを資産にする 〜DESIGN.mdの活用法〜」全6回の第4回。第3〜5回は「同じDESIGN.mdを使い回して、LP・ZINE・アプリと媒体を変えていく」実践編で、その第2弾。前回のLPと同じDESIGN.md・同じチャットを引き継ぎ、今回は紙媒体のZINE（小冊子）を作ります。画面（ピクセル）を土台にしたデザインMDを紙（ポイント）へ持っていくには一工夫が必要 ― そこで本回は「フォーマット先行ではなくコンテンツ先行」という進め方の工夫を実演。物理仕様から決め、台割りをHTMLラフで確認し、ZINE用のデザインMDと補足MDを起こして、最後にPDFまで書き出す流れを「3分クッキング方式」で振り返ります。 🎯 動画トピック 🚀 第4回の位置づけ ― 同じDESIGN.mdを「紙」へ持っていく ・第3回でLP、第4回はZINE、第5回はアプリと媒体を切り替える実践編 ・これまでのデザインMD/LPは画面（ソフトウェア）が土台、紙への再現には一工夫が必要 ・その「紙媒体の例」としてZINEを採用 📐 ZINEとは何か ― フォーマットが「ない」媒体 ・ZINE＝出版社を介さず個人やグループが発行する小冊子 ・ウェブと違い定番レイアウトがなく、テキスト量も画像量も決まっていない ・この「フォーマットが定まっていない」性質が進め方を工夫する出発点 🔄 進め方の工夫 ― フォーマット先行ではなくコンテンツ先行 ・前回と同じチャットを引き継ぎ「3分クッキング方式」で完成物を遡る ・通常の「フォーマット→素材を当てはめる」ではなく、コンテンツから決める ・コンセプト→中身/プロット→レイアウト→ZINE用デザインMD→統合の順で進める 🧱 物理仕様から決める ― 制約はAIに提案させる ・AIから「先に物理仕様を」と聞かれ、A6・ページ数・カラーを回答 ・ZINEは物理オブジェクト、印刷方法やページ数の制約が設計すべてに効く ・画面用のピクセルを紙用のポイントへ変換、「A6は小さすぎ？」の提案も ・「紙でちゃんと作りたい、制限はあなたから提案して」という態度で臨む ・A6/8ページ、表紙と裏表紙を除く実質6ページ。手元に紙を置いてサイズ確認 📓 コンセプトとプロットを決める ― 概念と実践のガイドブック ・「なぜ必要か／歴史／構成要素／実践例」の4トピックを先に提示 ・タイトルや実践例の見せ方を決めながら大枠のプロットを作る 🗂️ 台割りをHTMLラフで作る ― レイアウトを「見て」確認する ・チャットの文字だけではレイアウトを決めにくい ・「雑誌 台割り」を参考に渡し、画像かテキストか／配置をラフで見せてもらう ・台割りグラフで全体構成を確認、マインドマップやチェックリストの中身を調整 ・完璧に作る前にHTMLラフで壁打ちするのはUIでも使える手法 🧬 ZINE用デザインMDと補足MD ― 画面用の規範を紙へ翻訳する ・「HTMLやウェブリサーチして作って」と伝えてZINE用デザインMDを生成 ・継承するものとZINE用に作るものを切り分ける ・ブレークポイント削除／ボタン非存在／印刷可読性基準のコントラストへ 🛠️ PDF実装と再修正 ― 「本当にデザインMDに沿ってる？」 ・「一気に作って」とPDF実装。初回はチェックリストの重なりや背景の白化 ・「これ本当にデザインMDに沿っていますか？」を軸に理想へ近づける 🔑 今回のキーメッセージ 「フォーマットが定まらない媒体は、コンテンツの枠組みを先に固める」 → ZINEのように定番レイアウトがないものは、中身を決めてからレイアウトを話し合う 「物理仕様から決め、紙ならではの制約はAIに提案させる」 → サイズ・ページ数・カラーが設計すべてに効く。態度ひとつで注意点を出してくれる 「テキストではなくHTMLラフで、レイアウトと中身の一致を判断する」 → 完璧に作る前に台割りラフで目線合わせするのが、UIでも使える壁打ち手法 「修正は『デザインMDに沿っているか』を軸にする」 → 見た目を場当たり的に直さず、規範に戻して理想へ近づける 📑 タイムスタンプ 00:00 オープニング・第4回「ZINEを作ろう」の背景 01:11 ZINEとは何か（出版社を介さない小冊子） 01:33 今回の進め方・3分クッキング方式 02:06 作ったZINEの紹介（A6／概念と実践のガイド） 04:06 進め方の工夫 ― コンテンツ先行で進める 04:57 なぜこの順序か ― ZINEはフォーマットがない 05:57 物理仕様を先に決める ― AIから質問が飛んできた 07:09 ピクセルからポイントへの変換と紙ならではの注意点 08:07 A6・8ページ・実質6ページの構成 08:33 手元に紙を置いてサイズ感を確認する 09:08 コンセプト・テーマを決める（概念と実践のガイドブック） 10:42 中身とレイアウト ― 台割りをHTMLラフで作る 11:21 「雑誌 台割り」を参考に渡す 12:17 台割りグラフで全体構成を確認 12:33 ラフ段階で気になる点を指摘する 13:38 ZINE用デザインMDと補足デザインMDを作る 15:18 PDF実装と崩れの修正 16:12 今回のまとめ ― 2つのポイント 17:06 クロージング・第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スクール