Phase手順
BriefからPackageまで、各Phaseの入力、作業、出力、完了条件を確認できます。
image2.0 rich image pipeline
リッチなAI画像を、あとから直せるLP構造へ分解する
image2.0で作った一枚絵のHeroを、HTMLテキスト・個別PNG・素材管理・ブラウザQAへ分ける先行検証デモです。Mikaは実名LPに依存しない匿名デモ名です。
この公開caseは、note本文なしでも工程の価値と検証境界を確認できるようにした補足ページです。購入先と最終価格は販売ページ側を正とします。
このページで分かるのは工程デモと検証境界です。購入条件、価格、更新版の案内はnote販売ページ側で確認してください。
この公開デモに含まないもの: 実名案件LP本体 / 実名案件LPの同品質保証 / 購入者の自題材完走証明。
Verified: local Hero / CTA / generic Full LP QA summary
Pending: public URL check until deployment QA passes / buyer self-topic completion
Before / After
画像を貼るだけでは、直せるLPにならない
Beforeは一枚絵としてはきれいでも、見出し、CTA、人物、装飾を個別に直しにくい状態です。Afterでは、見出しやCTAをHTMLテキストとして扱い、人物や装飾を個別PNGとして配置します。
- 文字はできるだけHTMLで編集する
- 人物、装飾、背景を役割ごとに分ける
- 素材名と用途をmanifestに残す
- desktop/mobileで崩れを確認する
Phase Flow
プロンプト集ではなく、制作工程として扱う
生成して終わりにせず、BriefからPackageまでを小さな完了条件で区切ります。迷ったら前のPhaseへ戻れることが、このキットの価値です。
Brief
Image Board
Section Design
Asset Generation
Transparent PNG
Manifest
HTML/CSS
Interaction
Browser Fix
Package
Asset Breakdown
リッチ画像を、あとから直せる単位へ分ける
どこを画像に残し、どこをHTML文字にするかを先に決めます。素材が増えても、manifestで役割、サイズ、状態を追えるようにします。
HTML見出し、本文、CTA、吹き出し文
PNG人物、装飾、背景blob、アクセント
manifestfile、role、status、確認メモ
Browser QA
作った、ではなく、確認したところまで残す
desktop/mobileのスクショ、CTAの到達先、console error、横はみ出しを確認します。修正したら、何を直したかをfix logへ残します。
0console errors
0horizontal overflow
2CTA anchors
Local QA checked desktop 1440px and mobile 390px on 2026-05-22. Public URL check is still separate.
Verified / Not Verified
検証済み範囲だけを、販売文に使う
このページは、先行検証版の境界を見せるためのデモです。できたことと、まだ言わないことを分けます。
Verified
- Hero単体のHTMLテキスト + 個別PNG再構成
- Hero + 2 CTA到達先の最小複数セクション
- 匿名Mika素材の汎用Full LPデモのQA概要（本公開exportには本体未同梱）
- desktop/mobile表示
- CTA/anchor到達
- console errorなし
- 横はみ出しなし
Not Verified
- 実名案件LP全体を同品質で再現
- 購入者が自分の題材で完走済み
- 公開URLでのcase page確認
- 特定ツール単独で常に同品質
Tool Roles
Codexだけ、Claude Designだけ、とは言わない
実制作ログから言えるのは、ツールごとの役割分担です。image2.0はリッチな見た目と素材生成、Codexは実装・検証・整理に強く使いました。
- ChatGPTはコンセプト、コピー、FAQ補助
- Claude Designは初期ビジュアル探索の候補
- 必須/不要は、現時点では断定しない
What Buyers Get
購入後に渡すもの
このページは無料で見られる事例デモです。有料キットでは、自分の題材に置き換えるための手順、テンプレート、検証コマンド、記録用ファイルを渡します。
Buyer Templates
brief、image_board、section_design、asset_generation_log、fix_log、READMEの空テンプレート。
Manifest / QA
素材statusの語彙、desktop/mobileスクショ、CTA/anchor、console、overflowの確認手順。
Demo / Template
Mika HeroのBefore/After、HTMLテキスト + 個別PNGのHero、汎用Full LPデモの概要、購入者が差し替えるgeneric template。
Buyer Fit
向いている人、向いていない人
このキットは完成代行ではなく、生成画像をあとから直せる単位へ分ける作業台です。購入前に、必要な前提と渡さないものを確認してください。
向いている人
AIでLP画像までは作れるが、HTML文字、個別PNG、manifest、ブラウザ確認へ分けるところで止まる人。
必要な前提
テキストファイルを開き、HTMLの見出しやCTAを1箇所だけ差し替える軽い編集を許容できること。
渡すもの
START HERE、30分/60分ガイド、Phase手順、Buyer templates、QAカード、Mikaデモ、検証ログ。
渡さないもの
完成LP納品、案件化保証、実名案件LP同品質保証、Codex単独保証、Claude Design必須/不要の断定。
Next Step
Phase管理キットで、自分の題材に置き換える
先行検証版は、Hero、最小CTAセクション、匿名Mika素材の汎用Full LPデモのQA概要を、ローカル検証済みの範囲として工程化します。買った直後は、START HEREと最初の30分ガイドから入り、brief作成とHTML 1箇所差し替えまで進めます。
購入前に確認してください。この公開デモは販売ページ本文を補足する事例ページです。価格・購入条件・更新版の案内は販売ページを正とします。渡すのは置き換え手順であり、購入者が自題材で完走済み、特定ツール単独で常に同品質、実名案件LP全体の同品質再現はまだ主張しません。