image2.0 rich visual to editable LP
一枚絵で終わらせない、編集できるリッチLP制作キット
image2.0で作った見栄えのよいHeroを、HTMLテキスト、個別PNG、CSS配置、素材manifest、ブラウザQAへ分けます。これは実案件LPを出さずに工程を説明するための汎用Full LP検証デモです。
HTMLで直せる文字
Problem / Story
リッチな画像ほど、あとから直せない問題が起きる
一枚画像LPは最初の印象を作りやすい一方で、見出し、CTA、価格、導線、スマホ余白を変えるたびに画像生成へ戻りがちです。制作過程を商品化するには、見た目と編集性を分けて記録する必要があります。
Method
Phaseを分けると、対話ベースでも再現しやすくなる
コンセプト、イメージボード、セクション設計、素材生成、透過PNG管理、実装、インタラクション、ブラウザ微修正を混ぜずに進めます。各Phaseの入力と出力を固定することで、途中で迷っても戻れる状態を作ります。
BriefImage BoardSection DesignAsset PNGManifestHTML/CSSInteractionBrowser QA
Proof
言える範囲と、まだ言わない範囲を分ける
現時点で証跡があるのは、Hero、最小複数セクション、package local smoke、case pageのローカル表示、匿名Mika素材の汎用Full LPデモです。実案件LP全体の同品質再現や実購入者の自題材完走は、別レーンの検証が必要です。
Contents
購入者へ渡すものは、完成品ではなく再現用の作業台
note本文に実名LPを載せなくても成立するように、匿名デモ、素材、テンプレート、QAコマンド、参加者検証パケットを分けて渡します。
Phase Template
各Phaseの入力、作業、出力、完了条件をまとめた手順。
Image Assets
image2.0由来の透明PNG、参照画像、manifest。
Editable Demo
HTMLテキストとPNG素材を分けたHero/LPデモ。
QA Evidence
desktop/mobile確認、anchor、overflow、consoleの検証ログ。