📺 ナツミ視聴7本
予習ダイジェスト
AIクリエイティブ実装プログラムのうち「本人が動画を見る価値が大きい」と判定した7本（審美眼1〜4＋第6章LIVE3本）の転写まとめ。先にこれで予習→動画は本番の使い方用。各レッスンの全文md（本文・使いどころ含む）はlinkから。
28 審美眼1 余白
全文：28_審美眼1_余白
概要（3行）
- 余白は「何もない空間」ではなく「意図的に作るオブジェクト」。埋めなきゃという不安に負けず、余白そのものを配置する感覚を持つ。
- 覚えるべき3原則：①全体のバランスを整える
②余白の加減でトーン&マナーを操作する
③余白で情報を整理する（近接・整列）。
- 何かデザインを良くしたいとき、フォントや色を変える前にまず余白を見直すのが最も効くポイント。
コアメッセージ
「余白ってできるものではなくて、作ってあげること」。余白を"結果的にできる隙間"として扱うと、アンバランスな余白から違和感・読みにくさが生まれる。余白そのものを1つのオブジェクトとして配置していく意識が必要。
内容の構造化
原則0：余白の定義（よくある勘違い）
- NG認識：「何もないからとりあえず余白」という、他の要素を配置した結果できるものという捉え方
- OK認識：余白というオブジェクトを主体的に配置していくイメージで作る
- 情報を詰め込みすぎると余白がなくなり、全体に違和感や読みにくさが出る（特に初心者に多い）
- 強調したい要素ほど「大きくする」に頼りがちだが、逆に要素を小さくして余白を持たせた方が伝わりやすい場面が多い（中途半端に大きくすると訴求力もなくなる）
原則①：全体のバランスに気をつける
- チェック対象：上下左右の余白／余白の大きさ／文字間・行間／オブジェクト周りの余白
- あるあるNG：行間が狭いのに文字間が広い（逆も然り）、中央から微妙にズレている
- 対策：パッと見た瞬間に「ズレてるかズレてないか」を判断する感覚＝自問自答の習慣を持つ
- 実務メモ：講師のフィードバックの2〜4割がこのバランスの指摘に集中するほど、意識から抜けやすいポイント
原則②：余白の加減でトンマナを操作する
- 余白が狭い →
安っぽい・ポップ・キャッチー・緊急性（例：スーパーのチラシ、ドン・キホーテのポップ、ユニクロのセール訴求）
- 余白が広い →
高級感・シンプル・洗練（例：ハイブランド〔グッチ〕、Appleのウェブサイト）
- 「若干キャッチー」〜「めちゃめちゃ高級感」の間はグラデーションで捉え、目的の強さに応じて余白量を調整する
原則③：余白で情報整理する
- 4大原則の「近接」「整列」を実現する手段として、線を使わずに余白だけで情報のグルーピングを作る
- 余白は偶然生まれるものではなく、意図として配置するものという捉え方が、この整理機能を使いこなす鍵
- 4大原則（近接・整列・反復・対比）は複合的に絡み合っており、余白はその中で頻繁に顔を出す要素
実務Tips：迷ったらまず余白を見直す
- クライアントから「フォント変えて」「もっと可愛く」と言われても、原因はフォントではなく余白・行間・周りの余白であることが多い
- 何かを良くしたいと思ったら、文字・色・レイアウトを変える前に、まず余白を見直す
印象的な言葉・引用
- 「余白ってできるものではなくて、作ってあげること」
- 「何かしらデザインを手を入れしたい、良くしたいってなったら、文字変えるよりも色変えるよりもレイアウト変えるよりも前に、是非余白を見直してあげてください」
- 「何もない場所が、世界の印象を操作する」
29 審美眼2 文字
全文：29_審美眼2_文字
概要（3行）
- 文字はデザインの一要素ではなく、トンマナ（印象）を左右する"土台"。世の中のデザインの大部分は文字で構成されている。
- フォントは「デザインにおける声」。造形・余白感・トーンによって、同じ文言でも受け手の印象（上品／可愛い／力強い等）が大きく変わる。
- まずは癖のない読みやすいフォントで基礎デザイン力を鍛え、和欧混植・カーニング・トラッキングという実務テクニックで仕上げる、という順序が大事。
コアメッセージ
「文字はデザインにおける声のようなもの」。フォントの造形・余白感・トーンは声色であり、話し方や声の大きさで受け取る印象が変わるのと同じように、フォント選びは無意識レベルでユーザーの第一印象を左右する"縁の下の力持ち"。
内容の構造化
文字の役割（土台としての文字）
- 世の中のデザインは基本的に文字で構成されている（イラストより文字の方が確実に伝わる）
- フォントは「デザインの声」。声の高さ・トーン・テンションのように、フォントの造形や余白感が印象を操作する（例：同じ「花粉がすごいですね」でも、明朝体系は上品、丸文字系は可愛い、極太ゴシックは力強い印象になる）
- フォントのクオリティがデザインのクオリティを決める。広く一般に使われるフォントはクオリティが高く、フリーフォント・癖のあるフォントはクオリティが低いことが多い
- 第一印象は無意識に決まる。その無意識の部分に影響するのが文字
文字の種類の基礎知識
- 大分類：和文（日本語）／欧文（英語）
- 和文：明朝体（横線に対し縦線が太く「うろこ」がある）／ゴシック体（線の太さがほぼ均一）
- 欧文：セリフ体（明朝体に相当、文字の先端に「セリフ」という飾り線がある）／サンセリフ体（ゴシック体に相当、セリフがない）
- その他：筆書体・デザイン書体（キャラクター性の強いフォント）もあるが実務での使用頻度は高くない
目的別の使い分け
- 読む文章（本文）には可読性の高い細い書体＝明朝体・セリフ体が向く（新聞の本文はほぼ明朝体系）
- 見せる文章（タイトル・コピー）には視認性・インパクトの強い太い書体＝ゴシック体・サンセリフ体が向く
- ただし絶対ではない。太めの明朝体をタイトルに使う例（マティス、エヴァンゲリオン等）もある。あくまでトンマナ・目的ベースで判断する
初心者がやりがちなNGと対策
- Canva・Illustrator等で個性の強いフォントを目的なく漁って、そのまま使ってしまう失敗が非常に多い
- まずは「癖がなく読みやすい文字」を使うのが最優先。標準的なゴシック体だけでも余白・レイアウト・装飾次第でどんな印象にも化けられる
- 例外：手書き風の有料フォント「花と蝶」はInstagram投稿で数字が伸びた実例があるように、目的次第で癖のあるフォントが効くケースもある
おすすめフォント一覧（参照用）
- 和文明朝体：源ノ明朝／こぶりん明朝／有明朝／流明朝
- 和文ゴシック体：源ノ角ゴシック（Noto
Sans相当）／LINEシード（LINE社開発のコーポレートフォント）／見出しゴシック／モボ／つなぎ（フリーフォント、モボをさらに崩した書体）
- 欧文セリフ体：ガラモンド／タイムズニューローマン
- 欧文サンセリフ体：ヘルベチカ（世界で最も使われているフォント）／アベニール（王道で馴染みやすい）／ディン（モダン、ビジネス系デザインで多用）／フーツラ（先進的な印象、ハイブランドのロゴのベースにも使われる）
和文・欧文フォントの組み合わせテクニック
- 和文フォントに含まれる英数字はクオリティが低いことが多いため、数字・英字部分だけ欧文フォントに差し替えるのが定番テクニック（例：「100万円」の「100」だけ欧文フォントに変えるとグッと引き締まる）
- 組み合わせの3つのポイント：①スタイルを合わせる（明朝体×セリフ体、ゴシック体×サンセリフ体）
②太さ（ウェイト）を合わせる（漢字は要素が多く複雑に見えるため、同じ太さでもやや細くすると全体のバランスが取れる）
③サイズを合わせる（和文と欧文はベースのサイズが異なることが多く、欧文の方が小さく見えがち）
- 「合成フォント」機能（Illustrator/Photoshop）を使うと、漢字・欧文・数字それぞれのフォント・ウェイト・サイズ比率（例：数字125%・欧文115%）・ベースライン位置を事前に登録でき、都度の手動調整が不要になる
カーニングとトラッキング
- カーニング：特定の2文字間の間隔を調整すること。文字ごとに形が異なるため、均等に並べると間隔がバラバラに見える。読みやすく美しくなるよう個別に微調整する作業
- 有名フォントは基本的にカーニングデータが埋め込み済みのため、通常は自動で問題ない。ロゴやポスターのタイトルなど大きく露出する箇所では手動調整の価値がある
- ショートカット：Mac＝option、Windows＝alt＋矢印キーで文字間隔を送る
- 日本語と英語が混在する文でも、段落の文字組設定（両端の半角スペース等の設定）を調整すればまとめて詰められる
- トラッキング：文章全体の文字間隔を一括で調整すること。世界観の演出に直結する
- 狭い ＝ スピード感・スタイリッシュ・迫力のあるデザインになる
- 広い ＝
高級感・清潔感・おしゃれな印象になる（ハイブランドで多用）
- フリーフォントはカーニング調整が甘いことが多いため、フリーフォント使用時は手動調整の必要性が高い
印象的な言葉・引用
- 「文字っていうのはデザインにおける声のようなもの」
- 「フォントがデザインのクオリティを決める」
- 「(文字の第一印象は)無意識です。パッと見た時になんとなくいいなって思う…この無意識のところに影響するのが文字」
30 審美眼3 配色
全文：30_審美眼3_配色
概要（3行）
- 色はユーザーの感情に最も訴求しやすい要素（フォントが土台なら、色は"衣装"）。色相・彩度・明度（HSB）の3要素で構成される。
- 色が与える印象は本能レベルで働く（自然界の色＝心地よい、原色ばかり＝不自然に見える等）。年齢・性別・業種によって好まれる色の傾向がある。
- 配色に迷ったら「ベースカラー70%・メインカラー25%・アクセントカラー5%」の黄金比に当てはめると、大きく崩れない配色に仕上がる。
コアメッセージ
色はユーザーの感情に訴求し、デザインの印象を左右する要素の中でも特に本能レベルで働きやすい。配色そのものをゼロから理論的に組み立てるのは難しいので、目的から逆算した効果のある色を選び、配色ツール・書籍等のプロの知見を積極的に借りるのが実践的。
内容の構造化
色の役割と基礎知識（色相・彩度・明度）
- 色は感情に強く訴求し、デザインの印象を左右する要素。パッと見のシルエットで本能レベルに働きかける（信号の赤＝注意、のような反応）
- 色を構成する3要素＝色相（Hue）・彩度（Saturation）・明度（Brightness）＝HSB。Illustrator等のカラーピッカーでは、上下が明度、左右が彩度、右端の縦バーが色相に対応する
RGBとCMYK
- RGB（赤・緑・青の光の三原色）＝ネット上の表示用データ
- CMYK（シアン・マゼンタ・イエロー・キーの三原色）＝印刷物用データ
- RGB→CMYK変換すると表現の幅が狭まり色がくすむため、印刷物を作る際は最初からCMYKで作業する
色が与えるイメージ・心理効果（本能レベルの反応）
- 色の印象は本能レベルで働く：自然界に存在する色（緑・空の色等）は落ち着く、原色に近い人工的な色はダサく感じやすい（自然界にない色だから）
- 食品に関する色の心理：暖色（赤・オレンジ）＝食欲増進効果（マクドナルド・ケンタッキーのロゴ配色の理由）、寒色系＝食欲減退効果
- 危険・注意を示す黄色＋黒（標識、危険ロープ等）も本能に働きかける配色の一例
年齢・性別・業種による色の好み
- 年齢：子供はポップで彩度・明度の高い原色系を好みやすく、年齢が上がるにつれ落ち着いた色を好む傾向
- 性別：男女共通で好まれやすい色にオレンジ・黄色がある。LPのCTAボタンでオレンジ・緑のコンバージョン率が良いとされるのも、より多くの人に訴求しやすい色域だからという側面がある
- 業種：彩度・明度を抑えた青系＝信頼感・誠実（士業＝弁護士事務所・税理士等）／緑・ベージュ＝ナチュラル・安心感（オーガニック、健康・医療・介護系）
- ロゴ・コーポレートカラーとの統一：単発のバナーの色で考えるのではなく、企業として一貫したイメージを保つことが重要（コカ・コーラの赤等の例）。色がその場の思いつきでコロコロ変わると、ブランド力が弱まる
配色は難しい：頼れる書籍・ツール
- おすすめ書籍：配色アイデア手帳（配色の図鑑・印象別に大量掲載）／3色だけでセンスのいい色（実例ベースの解説で初心者向け）／世界を彩る、色彩の教科書（文化・伝統色ベースの応用編）
- クライアントとの打ち合わせで配色案を提示するツールとしても使え、ヒアリングのすり合わせ精度を上げられる
- 無料配色ツール：Adobe
Color等（キーワード検索・類似色生成・画像からの配色抽出が可能）
配色の黄金比
- ベースカラー70%：デザインの中で最も面積を占める色。背景等に使われ、全体の印象を決める
- メインカラー25%：ベースカラーに深みや華やかさを与える主役。ベースカラーに近い色を使うことが多い
- アクセントカラー5%：全体を引き締める、目立つ差し色
- Webサイトやブランドのビジュアル（Apple、スターバックス等）を分解すると、この70:25:5前後の比率に沿っていることが多い
印象的な言葉・引用
- 「色は本当に本能レベルで働くんですね」
- 「配色は正直難しい」
- 「目的から逆算した効果のある色を選定してあげること」
31 審美眼4 視線誘導
全文：31_審美眼4_視線誘導
概要（3行）
- デザインの真の力は「視覚情報から逆算的に感情を引き出せること」。視線誘導とは、1枚のデザインの中で「何が最初に目に入り、どんな順番で読まれ、どう感情が動くか」という数秒間の"体験"を設計すること。
- 人間の視線は基本的に左上→右下へ流れる。代表的な型はZ型（横書き基本）・F型（Webサイトに多い）・N型（縦書き）の3つ。
- 視線誘導は型だけでなく、大きさ・太さ・数字・矢印など複数の要素が複合的に絡み合って作られる。既存デザインを型に当てはめて考察する訓練が効果的。
コアメッセージ
「ただ1枚のデザインを作るだけでなく、どこから入ってどこから出ていくか（視線の体験）まで設計するのが視線誘導」。デザインを見る0.5〜1秒の中にも「気づく→共感する→解決策を知る→行動する」という体験の流れがあり、それを意図的に設計できるかがデザインの本質。
内容の構造化
前提：デザインの真の力（視線誘導とのつながり）
- デザインの真の力＝視覚情報から逆算的に感情を引き出せること。デザインは"体験"を提供するもの
- 1枚の画像・見た目の良し悪しだけでなく、「見た瞬間にどんな感情が動き、どんな順番で情報を読み、最終的にどんな行動につながるか」というユーザー体験全体を設計する視点が必要
視線誘導の定義
- 1枚のデザインの中で、最初にどの情報が目に入り、その後どんな順番で読まれ、感情がどう処理されていくかの流れを設計すること
- 有名な視線誘導の実例画像：太字・大きい文字は最初に読まれるが、小さいフォントで書かれた長い説明文はほとんどの人が読み飛ばし、興味がある時だけ拾い読みする
主な視線誘導の型（3パターン）
- 人間の視線は基本的に左上から右下へ流れる。重要な要素は左上、優先度の低い要素は右下に配置するのが基本
- Z型：横書きの文章の基本パターン（左上→右→左下→右下とジグザグに流れる）
- F型：Webサイトに多い。まず上から下へざっと見た後、興味のある箇所を横に見ていく
- N型：縦書きに多い（日本語の縦組みは右から左へ読む）
視線誘導を作る複合要素
- 大きさ：大きい要素から小さい要素の順に視線が動く
- 太さ：太い要素から細い要素の順に視線が動く（4大原則の「対比」と直結。強調すべき部分を強調することが視線を引く力になる）
- 数字・順番：1,2,3と番号が振られているだけで、レイアウト上の配置に関わらずその順番で読まれる
- 矢印：矢印が向いている方向に視線が動く
- これらはZ・F・N型と組み合わさって複合的に働くため、既存デザインの「視線誘導の考察」（型の検証）を重ねることが実践的な鍛え方になる
Q&A由来の実務ポイント
- 読み慣れている層／読み慣れていない層で文章の区切り方を変える必要がある。若年層向け等の媒体では長文を避け、短く区切って見せる
- ターゲット特性の判断材料は基本的にリサーチ（同業種の競合分析）。直接聞く方法もあるが根拠としては弱いため優先度は低い
印象的な言葉・引用
- 「デザインの真の力とは、資格（視覚）情報から逆算的に感情を引き出せること」
- 「ただ1枚のデザインを作ればいいのではなく、ユーザーの体験を設計してあげるイメージを持たなければいけない」
- 「使えない知識はゴミ同然」
36 ClaudeCode
Figmaデザイン制作セミナー
全文：36_ClaudeCode_Figmaデザイン制作セミナー
概要（3行）
コンドウハルキ（Harukaze代表・デザ塾主宰）とヒサシ（Harukaze
COO）が、Claude CodeとFigma
MCP連携を使って0からLPを制作しWeb公開するまでを実況しながら実演したライブセミナー。ストップウォッチ計測での「2分でLP完成」デモを皮切りに、ターミナル／Claude
Codeの基礎理論、Figma MCPでの双方向連携、Figma
Sitesでの即時公開までを一気通貫で見せている。後半はフリートーク形式のQ&Aで、AIへの向き合い方・デザイナーの生存戦略について踏み込んだ議論をしている。
コアメッセージ
ツールの使い方そのものより、「AIが普及した世界でどんなデザイナー・ビジネスパーソンに価値が残るか」を理解することの方が重要。AIには「実行」を全部任せていい。人間が担うべきは、問いを立てること（最初）と、意思決定して責任を取ること（最後）、そして何より「相手が言葉にする前に先回りして提案・提供すること」＝先回り力。
内容の構造化
実演の流れ（ステップ）
- オープニング：音声・配信確認、視聴者数の急増、この記事が「鬼バズった」ことを受けての急遽ライブ開催という経緯説明、視聴者のAIリテラシー（1〜3段階）アンケート
- 自己紹介：コンドウハルキ（Harukaze代表・デザ塾主宰・X発信歴7年・生徒約700名）／ヒサシ（Harukaze
COO・イラレの魔術師・クラウドソーシングで月100万円以上を自身で稼いだ実績あり）
- 【ライブデモ】ストップウォッチ計測で0からLP制作 →
2分21秒で完了（本編前に「どれくらいの速さでできるか」だけ先に体感させる構成）
- 理論編：「ターミナルとは何か」「Claude
Codeとは何か」を、専門知識ゼロの視聴者向けに例え話で解説
- 【実践パート】0からLP制作を詳細解説しながら再実演
- Claude Code起動 → プロンプト投入 → HTML生成（数分・約2000行）→
ローカルでブラウザにドラッグ＆ドロップして確認
- Figma MCPで「これをFigmaに実装して」→ 新規ファイル選択 →
自動でFigmaの編集可能なデザインデータ（レイヤー分解済み）に変換
- SP（スマホ）版も同様の流れで生成 → Figmaに送信
- Figma Sitesにドラッグ＆ドロップ →
公開ボタンを押すだけでその場でWeb公開
- ボタンへのリンク設定（新しいタブで開く等）もFigma上の操作だけで完結
- 費用の話（Claude Pro・Figmaプラン）、無料での代替手段（「HTML to
Design」Figmaプラグイン）の紹介
- バナー生成デモ（文字プロンプトのみで生成、Web用LPと同じ理屈で作れることを示す）
- Q&A：視聴者コメントを拾いながらのフリートーク形式（後半は事前準備した質問リストも消化）
- 参加特典の案内（アーカイブ視聴・LP生成プロンプト集・バナー生成ツール配布など）とクロージング
使ったプロンプト・ツール
- プロンプト①（PC版LP生成）：「美容系の、LPのすごい、すごいやつ。結構雑、雑にメッセージでもOK…お、すごそうなやつとすごいやつをHTML形式で出力してください」（意図的に雑な一言で、AIの実力を体感させる狙い）
- プロンプト②（Figma変換）：「これをフィグマに実装して」（これだけで自動的にFigma
MCP経由の変換が走る）
- プロンプト③（SP版生成）：軽いメッセージのみで追加指示（具体的な文言は画面越しに明示されず、①の延長で依頼）
- ツール：Claude Code（ターミナル上で動作するAIアシスタント）／Figma
MCP（Claude
Code→Figmaへの送信を可能にする公式連携機能・双方向化がポイント）／Figma
Sites（Webflow・STUDIO相当のFigma内蔵Web公開機能）／「HTML to
Design」（Figmaプラグイン・無料で最大10回、HTML→Figma変換を試せる代替手段）
- 実務では実際は30〜50行程度の精度重視プロンプト（世界観・目的・ターゲット等を組み込んだもの）を使っているとのコメントあり（参加特典として配布予定と案内）
出来上がったもの
- 美容系LP（PC版）：セクション構成済み・約2000行のHTMLを数分で生成。装飾多めでリッチな見た目、セクションの内容は一切指定せずにこの完成度
- SP（スマホ）版：PC版とは別に自動生成、レスポンシブ対応
- Figmaデザインデータ：HTMLがレイヤー分解された編集可能なFigmaファイルに変換され、文字・色をその場で打ち替え可能。ただしオートレイアウトは未対応で「まだめっちゃ荒れる」状態のため人の手での調整が必須
- 公開済みWebページ：Figma
Sites経由でその場で公開、ボタンにリンク設定（外部サイトへ新しいタブで遷移）まで実演内で完了
- バナー画像：文字プロンプトのみで生成、クオリティは「人によっては8割超えるかもしれない」水準（AIっぽく見えるものと見えないものが混在）
質疑の学び
- Claude と Claude Code
の違い：Claudeは受け答えするだけの「アドバイザー」、Claude
Codeは実際にファイル作成・実行までする「実行者」
- アプリ開発への応用：Web/ネイティブアプリ問わずClaude
Codeはどんな言語も扱えるため理論上対応可能（例：Swiftを書かせればiOSアプリも）
- Photoshop・イラレとの相性：Photoshopが扱うピクセルデータと、AIの確率的な画像生成は構造的に相性が悪く、無理に連携させる必要はない。AI画像生成は「ラフ出し→方向性の検証」に使い、確定後は人力で仕上げる工程に位置づけるのが実務的という判断
- AIにどこまで任せるか：「全部任せていい」が結論。ただし最初（問いを立てる）と最後（意思決定・責任を取る）は人間が挟む。「マネジメント経験がある人ほどAI活用がうまい」＝部下（AI）への仕事の任せ方と同じ構造という指摘
- デザイナーを目指す人へ：「作れる」だけでは差別化にならない時代。コミュニケーション力・問いを立てる力・理論的にデザインを説明できる力が鍵。AIを使うだけで単価が1.5倍というデータへの言及あり
- AI時代に人間が磨くべきスキル（一言で）：「先回り力」。需要が顕在化する前に提案・制作してしまう力。クライアントが自分でAIを使って考え始めるより先にこちらが動くこと自体が人間にしかできない価値
- デザインシステム管理：スタイル・バリアブル（PC/SP間の統一等）はAIがまだ苦手な領域。UI/UXのコンポーネント管理は当面人間の仕事として残るという見立て
- 未経験からの案件獲得：「デザインの基礎＋AIに製作を任せる」だけでも案件は十分獲得可能（ただしコミュニケーション力を正しく学ぶことが前提という条件付き）
印象的な言葉・引用（予習ハイライト）
- 「ターミナルって要は何かって一言で言うならパソコンにLINEするアプリです。」—
コンドウハルキ（専門用語ゼロで初心者に届ける例え）
- 「AIにできることは本当に何でも任しちゃったらいいんじゃないっていうのが僕の見解です…最初と終わりが人間が挟んでればいい」—
コンドウハルキ（AI活用の役割分担の結論）
- 「先回り力」—
AI時代に人間が磨くべきスキルを一言で問われた際の答え。数秒考え込んだ末に出た回答という点も含めて印象的
見どころ・実演のハイライト（予習メモ・後日視聴用）
- 10:59〜「2分でLP完成デモ」：ストップウォッチで実測、2分21秒で「HTML生成→ブラウザ確認」まで完了する様子（撮り直しなしのガチ実演）
- 33:49〜のFigma
MCP連携シーン：「これをフィグマに実装して」の一言でHTMLがFigmaの編集可能なレイヤーデータに変わる瞬間。本セミナー最大の見せ場
- 43:39〜のFigma
Sitesでの即時Web公開・ボタンリンク設定：ボタンひとつで公開、URLがその場で機能する様子
- 54:32〜のQ&Aで「先回り力」という答えが出てくるまでの数秒の間（一言でまとめようとして考え込む場面）
- 視聴者コメント数がリアルタイムで急増していく様子（開始時「300人」→終了間際「X経由だけで200人弱、YouTube含め合計700人」）から、このセミナー自体への反響の大きさも伺える
37 AI
Figmaスライド制作実演LIVE
全文：37_AI_Figmaスライド制作実演LIVE
概要（3行）
コンドウハルキ・ヒサシによるLIVE実演。台本（過去セミナーの文字起こし）とデザインガイドラインをAI（Claude）に渡してHTML形式のスライドを生成し、Figmaプラグイン「HTML
to
Design」でそのままFigmaの編集可能データに変換するワークフローを、配信トラブルで一度中断しながらもリアルタイムで実演。理論編（ターミナル・Claude
Codeの説明）とQ&A（デザイナーの真の価値・AIに任せる境界線・AI時代の淘汰論）で締めくくる回。
コアメッセージ
「デザインガイドラインを事前に言語化してAIに渡せば、352枚のスライドを25分・編集可能なFigmaデータで量産できる。だが本当に稀少なのは量産力ではなく、"なぜこの色・このフォントにするのか"を説明できる上流の設計力＝デザインの言語化力であり、そこを持つ人だけがAI時代に生き残る」
内容の構造化
実演の流れ（ステップ）
- オープニング（0:00〜）：配信ツールの不具合で一度落ちて復旧、視聴者に「聞こえてますか」の呼びかけから仕切り直し。YouTubeライブのコメント王冠（1〜3位）機能を紹介し、コメントで反応を促す運用トーク
- 視聴者のAI活用レベル調査：コメントで「①たまに使う
②毎日使う
③AIなしでは仕事が成立しない」の3段階アンケート。②が最多という体感結果
- 【1回目の実演・つまずき】：まず「事前に準備した資料（デザインガイドライン＋スライド内容）」をAI（Claude、モデルは「Sonnet」を選択）に投入
→
誤って別データ（2時間分の文字起こしテキスト）を貼り付けてしまうミスが発生。それでも約5分で15枚に圧縮生成された（本来別の目的のデータだったが動作はした、という副産物的な学び）
- 正しいスライド生成フロー（本題）：
- ステップ1：AIに台本（今回は過去セミナーの動画文字起こし）を渡し、「スライド構成（文字だけ）」を作らせる。この時「◯枚に構成して整理してください」という指示だけを送る（データは大量、指示は少なめが良いという方針）
- 失敗と学び：最初の指示が曖昧だったため、AIが気を利かせて勝手にPowerPoint形式まで生成してしまう誤爆が発生
→
「スライドの文字としての構成をしてください」と指示を明確化し、"スライド化・実データ化まではさせない"よう修正。これは「プロンプトが曖昧だと、AIが"良かれと思って"余計な提案（グラデーション・装飾等）をしてくる」という一般原則の実例として語られる
- ステップ2：スライド構成（テキスト）＋デザインガイドライン（フォント・ウェイト・色・フォントサイズ・Googleフォント指定等）を合体させ、「HTML形式で1スライド1セクションとして出力してください」という専用プロンプトを投入。HTML＝Webサイト用のコード形式を"スライド化のための裏技"として使っている点がポイント
- ステップ3：生成されたHTMLをコピーし、Figmaを開いて拡張機能「HTML
to Design」プラグインを起動 →
エディター画面にHTMLを貼り付けて「クリエイト」を押すだけでFigmaの編集可能データに変換完了
- 本番実演の結果：この日は速度重視でモデルを下げて実演したが、本番では352枚を25分で完成（理論値：1分で10枚以上、1日で2,000枚も可能という試算）
- 理論編（25:01〜）：ターミナル＝「パソコンにLINEするアプリ」、Claude
Code＝「ターミナルに住む優秀なアシスタント」という説明（レッスン36と同系統の説明を再掲）。Claude
Codeを使えばパソコンを立てたままスマホから操作してスライド量産も理論上可能という話
- 既存AIスライドツールとの比較：NotebookLM／ジェンスパーク／Canva
AI機能の3つの限界＝①15枚以上出せない、②画像で出力され編集不可、③テンプレ感が強く低品質。今回の手法（AI→HTML→Figma変換）はこの3つを全部克服していると整理
- モデル・ガイドライン有無による品質比較：スクリーンショットを見せながら「モデルが軽い（ライト）と左のような雑然としたデザイン、モデルが高い（プロ）と中央のような整理されたデザインになる」「ガイドラインなしで出すと"謎デザイン"（世界観が謎に統一感を欠く）になる」と解説。Claude・Gemini・GPTの3モデル比較では、今回のスライド生成用途に限ってはClaudeが一番良かったという体感評価
- 質疑の学び（Q&A・54:32〜）：
- Q1「バナー・チラシ・サムネもAIで作れるか」→
作れる（実例をスライドで提示）。同じプロンプトで3回試してもほぼ同じ結果が出るほど精度が高いと紹介
- Q2「誰でもAIを使いこなせる時代の自分の真の価値とは」→
コンドウの回答：「上流の部分から入れる」＝デザインを作る前の設計図＝ガイドラインを「なぜこの色/サイズ/見せ方にするのか」を考えて言語化できる人。これまでのデザイナーは言語化しなくてもプロとして通用したが、これからは「デザインと言葉をつなぐ」ことができる人がプロフェッショナルになる。コンドウ自身の「黒猫大和」ロゴのデザイン考察投稿（100万インプ超のバズ投稿）が実例として言及される
- Q3「AIに任せていい工程/任せてはいけない工程の境界線」→
回答：「入口（指示）と出口（最終チェック）は人間がやる」。実例として、Xで発信している画像投稿のフィードバックで「右の余白が狭いので改善して」と何度指示してもAIが微妙な余白調整に苦戦し続けたエピソードを紹介
→
Figmaに出力できることで人間が手で微調整できる点が大きな利点だと整理
- Q4「デザイナーは終わコン（オワコン）なのか」→
回答：ツールを触るだけのデザイナーは代替されるが、本物のデザイナーは終わらない。理由：AIの学習データは「めちゃくちゃ良いデザイン」のデータ量が絶対的に少なく、「まあまあ」なデザインのデータが一番多いため、AIは構造的に「まあまあ」に収束する（英語のチャート図で解説）。気づかれない細部（UI/UXの使いやすさ等）まで作り込めるのが本物のデザイナーの価値
- Q5「クオリティの高いデザインを作るAI指示の出し方」→
今日やったこと（ガイドライン＋高精度な元データ＋方向性の指示）がそのまま回答。参考画像を入れると近い雰囲気を再現してくれるという補足あり
- 補足：Figmaで爆速生成できても、納品ツールがPowerPoint・Google
Slides指定の場合はツールに合わせた手直しが必要（Figma以外への完全自動化はまだ現場感覚でも難しい）
- 参加特典9個の案内（1:13:30〜）：①本セミナーのアーカイブ動画、②実演で使ったスライドデータ・テンプレート・ガイドライン、③自分好みのデザインガイドラインを生成するためのプロンプト、④スライド生成プロンプト本体、⑤前回LIVE（Claude
Code×Figma・LP編）のアーカイブとスライド、⑥過去のクローズドなコラボスペースのアーカイブ、⑦2人が実際に使っている「イーロンマスクプロンプト」（辛口フィードバックをもらうためのプロンプト）、⑧受け取り用ランディングページ（AIで2分で作成したもの）、⑨完全審査制・5名限定でヒサシによる無料1on1コンサル。受け取り方法：Xで感想を引用ポストしキーワード「AI0326」付きでスクリーンショットをLINEに送る、というスキーム
- クロージング：「一旦知った、で終わらせず、形にする覚悟を決める」「できるとしってるはマジで違う」という締めのメッセージ。4/4に有料のデザ塾内限定講義「AI攻略ライブ」の内容を一部特別公開する予告あり
見どころ・実演のハイライト（予習ポイント）
- 12:02〜：配信復旧直後の1回目実演でデータを貼り間違えるハプニング（2時間分の文字起こしを誤投入）→
それでも動いてしまう様子は「AIの雑な入力耐性」の実例として面白い
- 18:33〜22:49：Figmaプラグイン「HTML to
Design」でHTML→Figmaデータへの変換の瞬間。352枚を25分で完成という具体的な数字が出るシーン
- 37:47〜：曖昧な指示でAIが勝手にPowerPointを生成し始めてしまう「先回りしすぎ」のハプニングと、そこからプロンプトを「スライドの文字構成だけ」に絞り込む修正の実演
- 51:49〜：モデル別（ライト/プロ）・ガイドライン有無別のスクリーンショット比較。「謎デザイン」というキーワードが出る瞬間
- 56:01〜：コンドウの「上流から入れる人が残る」という回答と、自身のバズった「黒猫大和」デザイン考察投稿への言及（実際の投稿を見比べながら視聴すると理解が深まりそう）
印象的な言葉・引用
- 「ターミナルって何かって言うと、そのパソコンにLINEするアプリですよ」（ターミナルの解説・コンドウ）
- 「気づかないデザインこそ僕はクオリティ高いものだと思うので」（UI/UXの本質・ヒサシ）
- 「一旦知ったっていう今日はありますけど、できると知ってるはマジで違うので」（クロージングのメッセージ・コンドウ）
38
Image2デザイン制作解説LIVE
全文：38_Image2デザイン制作解説LIVE
概要（3行）
コンドウハルキ（デザ塾主宰）と社員の加藤氏（ノンデザイナー）が、ChatGPT搭載の画像生成AI「Image
2.0」とCodex（ChatGPT版Claude
Code的ツール）を組み合わせて、参考デザイン画像とコピーだけからLP・スライドを実務レベルで作り切るライブ実演。冒頭で「全部AIで作った」LP・アイキャッチ・告知素材を公開し、驚きを引き出してから制作工程を1つずつ再現する構成。後半はAI時代にデザイナーが生き残るための思考法（意思決定力・審美眼・言語化力）を語り、7点の参加特典配布と5名限定の無料1on1コンサル募集で締めくくる。
コアメッセージ
「Image
2.0の画像生成クオリティ向上×Codexのローカルフォルダ操作力」の組み合わせが、ノンデザイナーでも30分でプロ品質のLPを作れる時代を生んだ。ただし人間の仕事が消えるわけではなく、AIが強くなるほど「良い・悪いを見極めて意思決定する力」「デザインを変数に分解して言語化する力」「ビジネスにどう貢献するかを説明する力」の価値が相対的に上がる、というのが一貫した主張。
内容の構造化
実演の流れ（ステップ）
- 導入トラブル＋自己紹介（0:00〜11:00頃）：配信リンク切替のトラブルで数分空白。コンドウハルキが自己紹介（14歳でデザイン開始、高校生で月収100万、現在21〜22歳、デザ塾生徒700名）。共演者は当初「久しさん（COO）」と予告されていたが、実際は自社マーケ担当の加藤氏（ノンデザイナー）——直近バズった「クロードコード×Figma」「ノンデザイナーが作れるか」企画で実際に手を動かしていた本人、というオチ付きで紹介。
- 完成品の先出し公開：本セミナー自体の告知バナー・LP・X用素材が「全部AI（Image
2.0）で作った」ことを明かし、URLを共有してリアルタイムで見てもらう（ボタンのキラキラ演出・アニメーション動作まで確認）。
- 「デザイン×AI活用
7段階フェーズ」で視聴者に自己診断させる（レベル1〜7、コメントで回答収集）。参加者の多くは3〜4（AIプロンプティングの基礎は分かる〜具体物が作れるレベル）に集中。
- LP実演スタート（21:07〜）：
- 参考デザイン画像1枚＋LP構成（コピー・日程・特典等がまとまったテキスト）を1つのプロンプトにまとめてCodexに送信。「5秒で作れる」くらい簡単、というのが本人談。
- 待ち時間中に、事前収録済みの「サウナLP」（加藤氏がノンデザイナーとして20〜30分で作った実例）を並行解説。
- 2つの制作パターンの提示：
- パターンA（HTML直接生成）：Image
2.0で画像生成→そのままHTML化まで一括で依頼。テキストは編集可能な状態で出力され、Codex内のコメント機能で「ここもっと開業して」「この画像変えて」等、Figmaのコメント機能に近いUIでピンポイント修正できる。
- パターンB（画像LP→HTML化の2段階）：①まず全体を1枚の画像としてLPデザインを生成（＝従来の「画像コーディング」で使うのと同じ画像1枚)。②その画像を渡し「ボタンを機能させ、1枚のLPにしてください」と2つ目のプロンプトを送り、動くLPに変換。今回の実演では「10分程度」を見込んで待ったところ、表示は「99分27秒」（文字起こしママ・実際は9分27秒程度の可能性が高い）で完成。
- 完成デモ：スマホビューで確認、ボタンがキラキラ動き、リンク未設定以外は実配信可能な状態。「文字化けが一切ない」「フォント精度が高い」点を両者で驚きながら確認。
- スライド制作の解説（41:18〜）：LPと同じ3ステップ（構成→画像生成→HTML化→フィードバック）をスライドに適用。今回のセミナースライド自体も「今日の夕方に1時間くらいで作った」と明かす。ただし裏で使ったプロンプトは自社ノウハウのため配布対象外。
- Codexのバッチ生成デモ（43:24〜）：スライドは1枚ずつのやり取りではなく、まとめて30〜40枚分の指示を一度に送信
→
Codexが裏で継続的にファイル生成し続ける。実演では約30枚規模で40分程度。
- Q&A（54:32〜）：ツール比較・料金・SEO・納品可否・大規模案件対応など多岐にわたる質問に回答（詳細は下記）。
- 特典案内＋クロージング（55:12〜）：7点の特典を発表し、受け取り方法（X投稿の引用＋LINE登録＋スクショ送付＋キーワード「0504」）を案内。5名限定の無料1on1コンサル募集をアナウンスして終了（約1時間半）。
使ったプロンプト・ツール（転写内で言及された具体）
- Codex：「ChatGPTの賢いバージョン」「チャットGPT版クロードコード」という説明で紹介。最大の特徴はローカルのファイル・フォルダに直接アクセスできること（フォルダ作成・削除・編集・移動、HTMLファイル生成が可能）。Image
2.0を内部で呼び出せるため、画像生成→コーディングの一気通貫が実現する。
- 1つ目のプロンプトの中身：「参考デザイン画像1枚＋LPの構成（対象・伝えたいこと・日程・価格・特典・CTA等がまとまったテキスト）」をワンセットで送信。過去の類似デザインを参考画像に流用可（アイキャッチ→LP→ホームページへの展開イメージ）。
- 2つ目のプロンプトの中身（パターンB）：「この画像を使って、ボタンなどが動くようにし、実際にボタンを機能させて1枚のLPにしてください」という趣旨（配布特典に実物プロンプトが含まれる旨、本編中で言及）。
- 修正指示の粒度：「上から何番目の、このコピーのところをこう言い換えて」のような、Codexのコメント機能上でピンポイント指定できる。全文を打ち直す必要がない点がノンデザイナーにも扱いやすい理由として強調されていた。
- 料金感：Codexは無料でも試せるが、実務利用には月20ドル（約3,000円）程度の有料プランを推奨。コンドウハルキ本人はProプラン（月1万5000円）にアップグレード済みと発言。目安として「5時間で100枚規模のスライド生成が可能」。
出来上がったもの
- 本セミナーの告知LP・アイキャッチ・X用素材（全てImage
2.0制作、キラキラボタン・アニメーション付き、スマホビュー対応）
- サウナ訴求のLP（加藤氏が事前に20〜30分で制作した実例、高級感のあるビジュアル）
- 特典ページ（プロンプト版／スキル版の2種類を用意し、その場で切り替えて画面共有）
- 本セミナー用スライド一式（約1時間で制作）
質疑の学び
- AIに任せていい工程／任せてはいけない工程の境界：「意思決定するのは人間」という結論。AIがどれだけ強くなっても、良し悪しを見極める審美眼・判断基準・思考は人間側の仕事として残るという立場。
- AI時代に「残る」デザイナーと「消える」デザイナーの差：デザインがビジネスにどう貢献するかを説明できる「ビジネスリテラシー」を持っているかどうか。デザイン経験20年でもここが弱い人は多い、という指摘。
- クロードコード vs
コーデックスの使い分け：画像生成が必要な場面はCodex一択（Image
2.0を内部利用できるため）。実装・リサーチ中心ならClaude
Codeでも問題ない。ローカルフォルダ管理のルーティンを共通化しておけば、どちらのツールを使っても実質的な差は小さくなる。
- ナノバナナ（Gemini）はオワコンか：「オワコンではない、普通にすごい」との回答。ただしChatGPT（Image
2.0）は「雑なプロンプトでも文章とデザインの整合性・説得力があるデザインになる」点が強みとして評価。ナノバナナは「見た目を作るだけ」という印象を持たれがちだった、という比較コメントあり。
- SEOへの影響：画像1枚で作るLP（パターンB）はテキストが画像埋め込みのためSEOに乗りにくい。テキストとして出力されるHTML直接生成（パターンA）はSEO面で有利、という整理。
- クライアント納品の実態：AI生成物をそのまま納品はしていない（ラフ・ワイヤーフレーム段階での活用が中心）と明言。ただし「2週間かかっていた案件が1週間で」「1ヶ月が2週間で」納品できるようになった、という工期短縮の実例として紹介。
- 大規模案件（230ページ規模のサイト）への対応可否：理論上は可能。「情報が一貫してまとまったファイル・データを渡せれば」時間がかかるだけで対応できる、という回答（人間がコーディングするのと同じ作業をAIが行っているだけ、という説明ロジック）。
- WordPress/Shopifyへの組み込み：WordPressは可能という回答。Shopifyは未検証（触ったことがないため保留）。
印象的な言葉・引用
「AIによって楽になるっていう側面もあれば、AIによってなおさら本質的な力を身につけなければいけない時代になるなと思ってるんですよ。」
「同じAIとか同じポテンシャル、同じ能力値があっても、使い方1つで全然変わるんすよね。」
「AI時代のAI活用って、レゴみたいなパーツとパーツをどうやって組み合わせてくかっていう、そういう意味でのクリエイティビティが求められる。」
改訂履歴
- 2026-07-05：初版作成（転写36本の構造化まとめから7本分を抽出）