ネタアプリ作業会@京都 #1 集客LP Concept Board

共通セクション骨子 (LP構成案.md §2 — 3案共通の直列9ブロック)

勝利条件 = オプチャ参加ボタンを押す (単一CTA)。解消する不安の順: 怪しくない? → 自分に作れる? → 行って何が残る? (v2 — Codex敵対的レビューCONDITIONAL反映済み・採否はLP構成案.md §5)

HERO — 「AIに指示して、自分のネタアプリが動き出す。」+ 9/26 SAT + 京都駅3分 + 3点バッジ (経験不問・¥3,000・13-18時) + 主催名先出し + CTA
WHAT — 差別化1行 + 約束3行
SHOWCASE — 「主催者が実際に作ってきたネタアプリ」スクショ (くだらないけど動く証拠。解説はしない — 一言キャプションまで)
FLOW — セミナー60分 → 仕様ワーク → 作業2.5h → 成果とズレのLT
HONEST — 向いている人 / 向いていない人
OVERVIEW — 日時・会場・定員・持ち物・参加費・支払い (一般¥3,000主表示)
AFTER+HOSTS — 懇親会18:30〜実費 / はなパパ×りゅうせい
FAQ — 経験・聴講・PC・支払い (キャンセル/オプチャ運用は規定確定後に追加)
FINAL CTA — 申込3ステップ図 (①オプチャ→②フォーム→③支払い)。リンクボタン主役・QRはPC補助

G-A裁定 (8/22): Direction C (作業会の情景) 採用。調整指示反映=①人物テイスト: フラットベクター調 (ChatGPT画像風) 不可→細ペン線画+淡彩スポットカラーのイラストエッセイ調へ差し替え ②背景トーン: 純白は眩しいため、ごく薄い柔らかなオフホワイト (#FAFAF7前後) へ (STYLE_ANCHOR改訂)。A/Bはrejected_directionsとしてchosen-direction.jsonに記録。
board v4 (8/22): G-Aフィードバック第2弾を反映 — **A標本箱を棄却**: 作業主体は参加者であり、主催の実物を主役に据えるのは作業会の目的とズレ。実物はSHOWCASE (証拠役) へ退け、Aを「あなたのネタが動き出す」(参加者のビフォーアフター) に差し替え。3案は参加者への3問に1対1で答える: A=何を得られる?なぜ参加したい? / B=何を渡す? / C=どんな場か?
board v3 (8/22): A=「標本を解説する内容」への傾きを修正 / B=題材を創作モチーフ (どんぶりタイマー) から「スマホ画面そのもの」へ差し替え / C=駅貼り時刻表は意味不明のため棄却→「作業会の情景」案に全差し替え。
体験ゴールの正 (ユーザー言明): 「自分の意志と出力の差を埋めて、結果に近づける」。
背景は純白統一 (8/22裁定): セピア・生成り・クリーム地は全案禁止 (STYLE_ANCHORに固定)。3案の--bgは#FFFFFF。
注: reference packはE11フィルタ4軸0件→purpose単独緩和 (580件) からの選定で視覚参照として弱い。イベントLP系視覚参照の手動補充はS4 TODO。

Direction A: あなたのネタが動き出す — 主役は「参加者の変化」

AD Declaration — どこで大胆になるか

ヒーローを「参加者自身のビフォーアフター」に全振りする — 持って来るのはくだらない思いつきひとつ、AIに指示して動き出すところまで今日やる

一点豪華: HEROビフォーアフター (左=鉛筆の落書きメモ / 右=動き出した実機画面。スライダーでメモ⇄画面を行き来) / 非対称: 左=紙と余白のモノクロゾーン・右=発色ゾーンの対角 / タイポ主役: Mochiy Pop One 極太見出しを本文の4倍スケールで

Constraint Declaration

角丸: 0 (既定)。実機フレームの角丸は imagery 描写であり、UI面の角丸は0のまま。

画像リッチ: 本案の kv を S6 実装へ必ず引き継ぐ (HERO全面)。

誠実統制: after像は「動き出し」まで — 完成品の提示をしない (facts§3 完成保証禁止)。「完成はストレッチ目標」の誠実注記をHERO直下に置く。

役割分担 (v3棄却の学び): 主催の実物スクショはSHOWCASE=証拠役に置き、HEROの主役にしない。HEROの主語は常に参加者。

Palette

--bg
#FFFFFF

--ink
#1A1A1A

--accent
#FF4D00

surface (鉛筆)
#9AA0A6

PROVISIONAL — ブランド既定色なし (mode=new)。G-A選択後にS4で確定

Type

その思いつき、動き出す。

Noto Sans JP / くだらない思いつきをひとつ持って来てください。AIに指示して、動き出すところまで — 今日やるのはそこです。(完成はストレッチ目標)

Key Visual (kv_runner 生成・実画像必須)

Direction A key visual: あなたのネタが動き出す (落書きメモ→動く画面)

Layout Sketch (非対称: 左=紙モノクロ / 右=発色)

before: 落書きメモ (鉛筆)after: 動き出した画面 (発色)→CTA

WHAT 約束3行 (道筋の明確化を含む)

SHOWCASE: 主催実物=証拠 (一言キャプション・解説なし)

FLOW→OVERVIEW: 端正な直列 (信頼回復ゾーン)

Pattern / Reference Cases

pattern: before-after-hero / extracted_from: reference_pack.json (purpose緩和選定=弱参照)

case:row-0437-awwwards-loop-008-awwwards-0437 / role: conversion_reference / doNotCopy: 配色・英字コピー / whySelected: conversionClarity=1.0の単一CTA反復構造をオプチャCTAに移植するため

case:row-0167-parts-loop-003-parts-0172 / role: proof_content_reference / doNotCopy: 企業向けトーン / whySelected: 「導入するまでの流れ」を主要証拠に使う構造がFLOW/OVERVIEW設計の参照になるため

case:row-0411-sankou-loop-007-sankou-0411 / role: anti_pattern_reference / doNotCopy: — / whySelected: before側の紙質感だけ作り込んで中身が薄い (contentDepth=0.26)「雰囲気LP」化=本案の失敗形として

Interaction Candidates

id: drag-slider-range-scrubber / family: drag-gesture / approach: vanilla-css / demoUrl: https://interaction-encyclopedia.pages.dev/ / offlineSafe: true / reducedMotionFallback: 左右並置の静的表示に退化 (HEROのbefore⇄afterスクラブ・一点豪華)

id: fade-up-reveal / family: scroll-reveal / approach: vanilla-js / demoUrl: https://interaction-encyclopedia.pages.dev/ / offlineSafe: true / reducedMotionFallback: 即時表示 (約束3行・FLOWの入場)

id: card-lift / family: hover-focus / approach: vanilla-css / demoUrl: https://interaction-encyclopedia.pages.dev/ / offlineSafe: true / reducedMotionFallback: transition none + :focus-visible維持 (SHOWCASEスクショカード)

Target Emotion

「自分のあの思いつき、動くんだ」— 参加動機の直撃。不安③(行って何が残る?)に「動き出した自分のネタ+完成までの道筋」で答える。

Direction B: 意志と出力の版ズレ — 主役は「体験の芯」

AD Declaration — どこで大胆になるか

ヒーローを「手描きの思いつき (意志) と端正なUI (出力) が版ズレで重なり、右端で一致して動き出す」1枚に全振りする — 体験ゴール「自分の意志と出力の差を埋めて結果に近づける」をそのまま絵にする

一点豪華: HERO版ズレ (スクロールに連動して見当が合っていき、最後にボタンが押されて動き出す) / 非対称: 左=ズレ大→右=一致の勾配構図・余白を左上へ偏らせる / タイポ主役: 手描き (Yusei Magic) × 幾何 (Archivo Black) の2声混植 — 「自分の意志」と「AIの出力」を書体でも対にする

Constraint Declaration

角丸: 0 (既定)。採用する場合は data-corner-policy="intentional" + デザイン意図明記。

画像リッチ: 本案の kv を S6 実装へ必ず引き継ぐ。

題材規律 (G-Aフィードバック反映): 版ズレの題材は「スマホ画面そのもの」。実在しないアプリ (どんぶりタイマー等) を創作しない。画面内モチーフは実アプリ由来 (笑う口=ゲラカウンター系) に限定。

可読性統制: 二重ぶれ表現はHERO+見出し装飾に限定。本文・OVERVIEW・FAQは単版で端正に組む。メタファー初見難度はHEROコピーの言語補助 (S5) で必ず埋める。

Palette

--bg
#FFFFFF

--ink
#21201C

--accent
#D93A2B

surface
#2145C9

PROVISIONAL — ブランド既定色なし (mode=new)。G-A選択後にS4で確定

Type

ズレを、埋めに行く。

Noto Sans JP / 自分の意志とAIの出力の差を埋めて、結果に近づける。その型を持ち帰る作業会。

Key Visual (kv_runner 生成・実画像必須)

Layout Sketch (非対称: ズレ→一致の勾配)

HERO: 版ズレkv (左=ズレ大)右端=一致・動き出す→CTA

余白 (手書き注釈)

WHAT: 約束3行=差を埋める図解

FLOW→OVERVIEW: 単版・端正 (ぶれ演出なし)

Pattern / Reference Cases

pattern: value-metaphor-hero / extracted_from: reference_pack.json (purpose緩和選定=弱参照)

case:row-0233-gsap-loop-004-gsap-0233 / role: motion_interaction_reference / doNotCopy: 教材コンテンツの構成 / whySelected: motionEvidence=1.0のスクロール連動を「版の見当が合っていく」1演出に翻訳するため

case:row-0437-awwwards-loop-008-awwwards-0437 / role: conversion_reference / doNotCopy: 英字コピー・エージェンシートーン / whySelected: 余白の多い構成でconversionClarity=1.0を保つCTA配置の実例として

case:row-0411-sankou-loop-007-sankou-0411 / role: anti_pattern_reference / doNotCopy: — / whySelected: washi_japanese質感+contentDepth=0.26=「質感は美しいが中身が薄い」本案最大の失敗形として

Interaction Candidates

id: css-scroll-driven-reveal / family: scroll-reveal / approach: vanilla-css / demoUrl: https://interaction-encyclopedia.pages.dev/ / offlineSafe: true / reducedMotionFallback: reduced時は見当が合った完成状態で静止表示 (HERO版ズレがスクロールで合っていく)

Target Emotion

「差が埋まって、最後に動き出す。気持ちいい」— 不安③(行って何が残る?)に体験ゴールの可視化で正面から答える。

Direction C: 作業会の情景 — 主役は「場 (人と空気)」

AD Declaration — どこで大胆になるか

ヒーローを「当日の部屋そのもの」の俯瞰イラストに全振りする — 誰かの画面で何かが動き、周りが笑っている瞬間で「この輪に混ざりたい」を起こす

一点豪華: HERO情景イラスト (立ち上がって画面を見せる人=笑いの中心へ視線収束) / 非対称: 笑いの中心を右寄せ・左に窓 (京都タワー) と余白 / タイポ主役: 情景が濃いぶんタイポはNoto Sans JP 900の端正な極太に抑え、情景と競わせない

Constraint Declaration

角丸: 0 (既定)。採用する場合は data-corner-policy="intentional" + デザイン意図明記。

画像リッチ: 本案の kv を S6 実装へ必ず引き継ぐ (HERO全面)。

固有化統制: 「よくある勉強会イラスト」化への対策として、画面内の中身は実アプリ由来モチーフ限定 (笑う口・覗き穴ドア・カウンター)。人物は記号的イラストに留め、実在人物風・フォトリアルは不可。

人物テイスト規律 (G-A調整 8/22): フラットベクター調・コーポレートイラスト調 (ChatGPT画像風) も不可 — 細ペン線画+淡彩スポットカラーのイラストエッセイ調に固定。背景はごく薄い柔らかなオフホワイト (#FAFAF7前後・純白の眩しさを避ける)。

証拠性の補完: イラストは実物証拠にならない — SHOWCASE (実スクショ) を必ず厚く保ち、情景=空気 / スクショ=証拠と役割分担する。

Palette

--bg (やわらかオフホワイト)
#FAFAF7

--ink
#241F1A

--accent
#E8482B

surface
#35A29F

PROVISIONAL — ブランド既定色なし (mode=new)。G-A選択後にS4で確定

Type

この部屋で、動き出す。

Noto Sans JP / 経験不問・聴講だけでもOK。誰かのネタが動くたび、部屋が笑う5時間。

Key Visual (kv_runner 生成・実画像必須)

Direction C key visual: 作業会の情景 (ペン線画+淡彩)

Layout Sketch (非対称: 笑いの中心=右・窓と余白=左)

窓・余白 (見出し重ね)情景kv: 笑いの中心→CTA

WHAT 約束3行

SHOWCASE: 実スクショ (証拠担当)

FLOW: 13:00→18:00 を情景の時系列で / OVERVIEW端正

Pattern / Reference Cases

pattern: scene-immersion-hero / extracted_from: reference_pack.json (purpose緩和選定=弱参照)

case:row-0167-parts-loop-003-parts-0172 / role: proof_content_reference / doNotCopy: 企業向けB2Bトーン / whySelected: 「導入するまでの流れ/FAQ」型の情報構造がFLOW/OVERVIEW設計の参照になるため

case:row-0411-sankou-loop-007-sankou-0411 / role: anti_pattern_reference / doNotCopy: — / whySelected: 賑やかしイラストだけで中身が薄い (contentDepth=0.26) 「雰囲気LP」化=本案最大の失敗形として

Interaction Candidates

id: css-scroll-driven-reveal / family: scroll-reveal / approach: vanilla-css / demoUrl: https://interaction-encyclopedia.pages.dev/ / offlineSafe: true / reducedMotionFallback: animation none で全表示 (FLOW時系列の線が引かれていく)

Target Emotion

「この輪に混ざりたい」— 仲間と作って笑う空気 (社会ジョブ直撃)。不安②(自分に作れる?)に「経験不問の空気」で答える。