# App Launch Kit

> アプリのリリース素材5点セット(①アプリアイコン ②ランディングページ ③Google Playストア掲載文 ④フィーチャーグラフィック ⑤プライバシーポリシー)を、一貫したブランドで一気通貫に制作するスキル。 「アイコンを作って」「LPを作って」「ストアの説明文を書いて」「フィーチャーグラフィックを作って」「プライバシーポリシーを作って」「リリース準備をしたい」「アプリの宣伝素材が欲しい」など、アプリの公開・宣伝素材に関する依頼では必ずこのスキルを使うこと。 5点のうち1つだけ頼まれた場合もこのスキルを使い、残りも続けて作れることを案内する。 アプリ名はこのスキルで正式名称として確定し、パッケージ名は com.<your-namespace>.<スラッグ> 形式(例: com.example.myscale)で設定する。 企画書やコンセプト資料が渡された場合、それを情報源として最優先で…

- **Type:** Skill
- **Install:** `agentstack add skill-hayama20974-claude-skills-app-launch-kit`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [hayama20974](https://agentstack.voostack.com/s/hayama20974)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [hayama20974](https://github.com/hayama20974)
- **Source:** https://github.com/hayama20974/claude-skills/tree/main/skills/app-launch-kit

## Install

```sh
agentstack add skill-hayama20974-claude-skills-app-launch-kit
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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設定とflutter_launcher_icons手順)
   - アダプティブ前景は中央約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）
```html

  
  登録する

```

#### JS: ページリロードなしの非同期送信(必ずこちらを使う)
```javascript
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行構成。**右端パネルと被らないよう右端は sw*0.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](https://github.com/hayama20974)
- **Source:** [hayama20974/claude-skills](https://github.com/hayama20974/claude-skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-hayama20974-claude-skills-app-launch-kit
- Seller: https://agentstack.voostack.com/s/hayama20974
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.