App Launch Kit

App Launch Kit: アイコン・LP・フィーチャーグラフィック・ストア文章・プライバシーポリシーの一気通貫制作

アプリのリリース素材を「アイコン → LP → フィーチャーグラフィック → ストア文章 → プライバシーポリシー」の順で制作するルーチン。 順番に意味がある: アイコンで決めた色・モチーフがLP/フィーチャーグラフィック/プライバシーポリシーのデザイントークンになり、LPで磨いたコピーがストア文章の骨格になる。途中から頼まれた場合も、すでにある素材(既存アイコンの色など)を必ず引き継ぐこと。

> 設定について: このスキルは公開用のジェネリック版です。`(パッケージ名空間)・`(LP/ポリシーの公開先)・ホスティング方法・フォームサービスは、各自の環境に合わせて置き換えてください。末尾の「設定: 自分の環境に合わせる」を参照。

STEP 0: 情報収集

まず以下をチェックする。ユーザーに質問する前に、アップロードされた資料(企画書・コンセプト資料・要件メモなど)と会話履歴から埋められる項目をすべて埋める。 足りない項目だけをまとめて質問する(質問は1回にまとめる)。

必須情報

| 項目 | 用途 | 例 | |---|---|---| | アプリ名(正式名称) | 全成果物 | マイスケール | | アプリの目的・コア機能 | LP・ストア文章 | 生活圏の円を旅先の地図に重ねて距離感をつかむ | | ターゲット層 | コピーの語り口 | 旅行者 | | 対象プラットフォーム | アイコン書き出し形式 | Android / iOS / 両方 | | ブランドカラーの希望 | アイコン・LP | グリーン系 |

命名とパッケージ名（このステップで正式決定する）

• アプリ名はこのスキルで正式名称として確定する。 資料・会話で名前が未確定なら、コンセプトに沿った候補を複数提案し、ユーザーが選んだものを「正式名称」として全成果物で一貫して使う。以後この名前を勝手に変えない。
• パッケージ名（applicationId）は com.. で設定する。 ` は開発者ごとに固定の空間（例: 個人の屋号やハンドル）、 は確定したアプリ名にちなんだ英小文字（ローマ字/英語、記号・スペースなし）。例: マイスケール → com.example.myscale。**この myscale（＝スラッグ）を、公開フォルダ名 app/myscale/・app.env の SLUG`・ファイル配置にもそのまま使い、スラッグを全体で統一する。 ストア文章・Manifest で使用し、LP などエンドユーザー向けの公開面には載せない**（開発者向け識別子のため）。

あれば品質が上がる情報(なければ聞くか、仮置きして明示)

• 差別化ポイント・UXのこだわり(LPの「こだわり」セクションの材料)
• 価格・広告・アプリ内課金の有無(ストア記載に必要。不明なら断定して書かない)
• プライバシーポリシーURL・サポート連絡先(ストア公開の必須要件。なければ「要準備」とTODOで明示)
• スクリーンショットの有無(なければLPはCSSモックで代替)
• ストアの既存掲載文(リライト案件の場合)

STEP 1: アプリアイコン

1. 3案提案: コンセプトの異なる3案をSVGで並べて見せる(インラインプレビューが使える環境では表示、なければSVG/PNGファイル)。各案に短い名前とコンセプト説明を付け、どれが何を伝える案かを言語化する。
2. 収束: ユーザーが選んだ案について、タイポグラフィ・配色・レイヤー順などのバリエーションを2〜3案出して微調整する。1回で決まらなければ繰り返す（モチーフ自体の作り直し要望にも応じる）。
3. 書き出し: 確定後、Pillow で実ファイルを生成する。生成スクリプトはこの環境で都度書き起こす（スキルには同梱しない）。 ネットワーク無効でも動くよう外部依存は Pillow のみ・フォントは任意。

• 確定デザインに合わせて描画関数(背景・図形・文字)を書く。図形だけで表現できるならフォント不要
• フォントを使う場合は fc-list で実在確認してから使う
• 文字グリフが意図と違う形に描画されることがあるので、必ず目視で512px版を確認してから納品する。白い図形は白背景ビューアで見えないので、必要なら背景合成して確認する
• Android: mipmap各密度 + アダプティブアイコン前景/背景(+モノクロ) + Play Store用512px + README(XML設定とflutterlaunchericons手順)
• アダプティブ前景は中央約72%の安全領域に収める（円マスクで切れないか合成確認）
• iOSも対象なら: 1024px(角丸なし・透過なし)を追加
• zip化してまとめて渡す

STEP 2: ランディングページ

フロントエンドデザインのガイドライン（手元にあれば）を併読してから着手する。

• 単一HTMLファイル(CSS/JS同梱)で出力
• アイコンの色をそのままCSS変数に: 背景色・影色・アクセント色を引き継ぎ、ヘッダーとCTA付近にアイコンSVGをインラインで埋め込む
• 構成の基本形(アプリの性質に合わせて取捨選択):

1. ヒーロー: キャッチコピー + アプリ体験を再現する動くデモ(CSSスマホモック+JS)。スクリーンショットがあればそれを使う
2. 問題提起: ターゲットの悩みと、アプリが解く理由
3. 機能紹介: コア機能をカードで(順序性があるならSTEP表記、なければ並列)
4. こだわり: 差別化ポイントを短い言葉で(トーンを変えたバンドセクションが効く)
5. 最終CTA + フッター(コピーライト・ブログリンク・ポリシーリンク)

• フッターに開発者のブログ/サイト `` へのリンクを入れる(LP/ポリシーの公開先)。パッケージ名など開発者向け識別子は公開面に載せない
• ストアバッジ(Google Play / App Store)はリンク先未定なら # プレースホルダーにし、納品時に差し替えが必要なことを必ず伝える
• 品質の床: モバイル対応、prefers-reduced-motion 対応、フォーカスリング、価格や効果を断定する根拠のないコピーを書かない
• ヘッドレスブラウザ(playwright 等)が使えるなら、デスクトップ/モバイル/各セクションを目視確認してから納品する（スクロール演出は一括撮影で発火しないので、各セクションへ scrollIntoView してから撮る）

ウェイティングリストフォーム(ストア公開前のリリース前LPに組み込む)

ストアURLが未確定の段階では Google Play バッジの代わりにメール登録フォームを置く。Formspree などのフォームバックエンドを使うとサーバー不要で実装できる。ユーザーから FORM の送信先URL/IDをもらえている場合は、その場で2か所に埋め込んで差し替え不要にする。

実装パターン（例: Formspree）

  
  登録する

JS: ページリロードなしの非同期送信(必ずこちらを使う)

form.addEventListener('submit', function(e) {
  e.preventDefault();
  fetch(form.action, {
    method: 'POST',
    body: new FormData(form),
    headers: { 'Accept': 'application/json' }
  }).then(function(res) {
    if (res.ok) {
      form.style.display = 'none';
      document.getElementById('wl-success').classList.add('show');
    } else { throw new Error(); }
  }).catch(function() {
    document.getElementById('wl-error').classList.add('show');
    btn.disabled = false;
  });
});

必須のUX要件

• 送信中はボタンを disabled にして「送信中…」と表示(二重送信防止)
• 成功後はフォームごと非表示にして「✓ 登録完了!」メッセージを表示
• エラー時はボタンを復活させてリトライできるようにする
• モバイルではフォームを縦積みレイアウトに切り替える(flex-direction:column)
• フォームが複数(ヒーロー＋最終CTA)あるときは、クラスで一括ハンドリングし各フォームの成功/エラー要素を個別に扱う

納品時に必ず伝えること

1. フォームサービスのアカウントを作成してフォームを作り、発行されたエンドポイント/IDを action のプレースホルダーと差し替える（IDを既にもらっていれば差し替え済みと伝える）
2. 無料プランには送信件数の上限があることが多い。超える場合は有料プランへ
3. ストアが公開されたらフォームを Play Store バッジに差し替える(またはバッジとフォームを並列表示にする)

STEP 3: フィーチャーグラフィック(Google Play)

サイズ: 1024×500px、PNG/JPG、透過なし(Playストアのページ最上部に表示される横長バナー)。

Pillow で生成する。生成スクリプトはこの環境で都度書き起こす（スキルには同梱しない）。 配色はアイコン＝ブランドカラーに必ず合わせる（テンプレの色名に引きずられない。例: ブランドがオレンジならグラフィックもオレンジ系にする）。

レイアウト構成(3ゾーン)

[ アイコン(左) | アプリ名+キャッチ+サブコピー(中央) | 数値パネル群(右端) ]

• 左ゾーン(約28%幅): STEPで確定したアイコンと同デザインを isz = sh * 0.52 のサイズで中央に配置。アイコンの角丸・色・グリフを完全に引き継ぐ
• 中央ゾーン(約42%幅): アプリ名(Noto Sans CJK Black)→ キャッチコピー → サブコピーの3行構成。**右端パネルと被らないよう右端は sw0.75 を超えないこと。* 長い日本語名・長いキャッチは行幅を実測し、被るならフォントを下げるか改行する
• 右ゾーン(約20%幅): アプリを象徴する数値や画面の抜粋を小カード(角丸矩形)で縦並びに配置。強調したい1枚だけ反転(白地+ブランド色文字)でハイライト、他は半透明白の背景+白文字

背景

• 縦方向グラデーション(ブランド色の濃→淡など)をピクセル単位で描画
• 右奥に大きな半透明円を重ねて奥行き感を出す
• 外周に余白を設けず全面塗り(透過なし)

品質チェック

• 必ず目視確認してから納品する(テキスト重なり・カード切れ・グリフ崩れ)
• スーパーサンプリング SS=3 以上で生成し、resize(LANCZOS) で最終サイズに落とす
• フォントは fc-list で実在確認済みのものを使う（日本語は Noto Sans CJK JP = .ttc の index 0）

STEP 4: ストア掲載文(Google Play)

• LPのコピーを骨格に流用しつつ、ストアは検索流入が前提なのでキーワードを自然に織り込む
• 出力は1つのMarkdownファイルにまとめ、各項目に文字数カウントを添える(タイトル30字・簡潔な説明80字は超過しやすい)
• 未確定事項(価格・広告・ポリシーURL・カテゴリ・連絡先・スクショ・レーティング)は「要確認TODO」として末尾にチェックリスト化する
• 医療・健康系は効果効能を断定しない。免責(医師・薬剤師の指示に従う旨)を本文に入れる

STEP 5: プライバシーポリシー(HTML・ホスティングしてURL化)

Google Play 公開にはプライバシーポリシーのURLが必須。アプリの実際のデータの扱いに準じた内容で、LPと同じブランドの単一HTMLとして出力し、他の成果物と一緒に納品する。

• 内容はアプリ構成から導く: 技術スタック・権限・保存先を棚卸しし、該当するものだけ書く。取得しない情報は書かない。よくある観点:
• 位置情報／カメラ・写真／連絡先／通知・アラーム・端末起動時処理 等の権限
• ユーザーが端末内に保存するデータ(設定・スケジュールなど。機微なら明記)
• アプリ内課金(Google Play 決済。決済情報は開発者が取得しない旨)
• 第三者SDK・サービス(地図、Firebase、分析・クラッシュ収集など)。使うなら各社ポリシーへのリンク、使わないなら「使用しない方針」と明記し将来導入時に追記する旨
• Webサイト(LP)の登録フォームで取得するメール(フォームサービス経由、リリース案内のみ)
• デザイン: LPのCSS変数(色)とロゴSVGを引き継ぐ。読みやすい本文レイアウト(幅760px前後)＋見出し・注記。
• 未確定箇所は 【要記入：…】/【要確認：…】 でハイライト表示し、ユーザーが埋める前提にする(事業者名・連絡先メール・最終更新日・分析SDKの有無・対象年齢に子どもを含むか 等)。
• 冒頭に原案バナー: 「これは公開前の原案(雛形)。法的助言ではない。専門家の確認を受け、Google Play『データセーフティ』フォームの回答と一致させること」を明記。
• LP側フッターのポリシーリンクを privacy-policy.html に向ける(相対リンク)。LPとポリシーを同じディレクトリに並べて設置すれば相対リンクで繋がる。
• 注意: あなたは弁護士ではない。必ず雛形であることと専門家レビュー推奨を一言添える。

公開について（スコープ外）

このスキルの仕事は 成果物のファイルを出力するところまで。サーバーへのアップロードやブログ投稿の自動化は、環境差が大きすぎるのでスキルには含めない。出力した LP / プライバシーポリシーは、各自の好きな手段（静的ホスティング、FTP、オブジェクトストレージ、Netlify / GitHub Pages、CI など）で公開し、プライバシーポリシーは Google Play 用にURL化する。

公開を自前のスクリプトで自動化したい場合の設計指針だけ一応:

• 公開スクリプトはスキル/生成物に同梱しない。 認証情報を含むうえ、AIのビルド環境（ネットワーク無効）では実行できない。スクリプトはローカルに常駐させ、認証情報は環境変数経由で渡してハードコードしない。

納品

最後に全成果物(アイコン一式・LP・フィーチャーグラフィック・ストア文章・プライバシーポリシー)をまとめて渡し、「公開前に差し替え・準備が必要なもの」を箇条書きで案内する: フォームの送信先ID(LPのプレースホルダー×2。もらっていれば差し替え済み)、出力ファイルの公開（ホスティングは各自）、プライバシーポリシーの空欄記入とURL化・データセーフティ登録、ストアURL、実機スクリーンショット、ストア文章の要確認TODO、com.. のパッケージ名・事業者名・連絡先メール等。途中ステップだけ頼まれた場合も、次のステップに進めることを一言添える。

---

設定: 自分の環境に合わせる

このスキルをそのまま使う前に、以下を自分の値に置き換えてください。

| プレースホルダー | 意味 | 置き換え例 | |---|---|---| | com. | パッケージ名の固定空間 | com.example | | ` | LPフッターに載せる開発者サイト／ポリシーの公開先 | https://example.com` | | フォームサービス | リリース前LPのメール収集 | Formspree / Google Forms / 自前 |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: hayama20974
• Source: hayama20974/claude-skills
• License: MIT

Install and usage instructions live in the source repository linked above.