← AIバイブコーディングTips 一覧へ Claude Skills 実践 / 個人開発者向け

アプリのリリース素材5点を、
AIに「一気通貫」で
出荷させる手法。

アイコン・LP・フィーチャーグラフィック・ストア文章・プライバシーポリシー。アイコンで決めた一つの色とモチーフを、下流のすべての成果物に流し込む——この5点を同じブランドで一気通貫に作るルーチンを、ひとつのスキルにまとめる手法を公開します。

この記事で手に入るもの

アプリのリリース素材5点を、一度の対話で同じブランドに揃えて生成するルーチン(Claude Skill)の作り方。毎回ゼロから作るのではなく、一度スキルに型を落とし込めば、対話だけで5点が同じ色・同じモチーフで揃います。あとは出力されたファイルを、自分の好きな手段で公開するだけ。

スキルが一度の対話で出力するもの
1
アイコン全密度+512px
2
LP単一HTML
3
フィーチャー
グラフィック
1024×500
4
ストア文章文字数つき
5
プライバシー
ポリシー
HTML雛形
1色 ①で決めたブランド色とモチーフが②〜⑤すべてに引き継がれ、5点が同じブランドで揃う——それが一本の流れ。
01 — この記事が効く人

向いている人と、そうでない人。

先に言い切っておきます。これは「AIにリリース作業を任せる型」を、自分の手で持っておきたい人のための記事です。

向いている

  • 個人・少人数でアプリを開発して公開している
  • 機能は作れるのに、公開直前の素材づくりで毎回消耗している
  • Claude Skills を“使い捨ての指示”でなく再利用できる型にしたい
  • デザインを外注せず、ブランドを揃えて内製化したい

向いていない

  • 設定なしでコピペすれば即完成、という製品が欲しい
  • 自分の環境(ドメイン・サーバー等)に合わせる手間をかけたくない
  • ブランドの一貫性に関心がない

02 — なぜ公開直前で失速するのか

コードは書けた。でも「出荷」で止まる。

個人開発の本当の壁は、機能ではありません。動くアプリができてから先の、誰も楽しくない作業の山です。

全密度のアイコン書き出し、アダプティブアイコンの安全領域、1024×500ぴったりのフィーチャーグラフィック、文字数制限のあるストア文章、そして「弁護士でもないのに書かされる」プライバシーポリシー。どれも単体は小さいのに、合わせると一日では終わらない。ここで多くの開発者がリリースを後回しにして、勢いを失います。

最初から5点セットを作ろうとしていたわけではありません。はじめは、アプリごとにLPだけをAIに作らせていました。でも実際にリリース準備を進めると、結局アイコン、ストア用グラフィック、ストア説明文、プライバシーポリシーを毎回作ることになる。しかも別々に作ると、アプリ名の表記、スラッグ、色、フォルダ名、公開URL、パッケージ名の命名が少しずつズレる。そのズレを後から直すのが地味に面倒でした。だから「LPを作るスキル」ではなく、アプリ1本を公開するための成果物を、同じ命名規則とブランドでまとめて出すスキルに育てました。

この手法が解くのはここ。5点を一つずつ別々に作るのではなく、アイコンで決めた一つの色とモチーフを、下流のすべての成果物に流し込む。手順に順番をつけ、AIエージェントに最後まで走らせる。出荷を「作業」から「対話」に変えます。


03 — 手法の核心

素材を作る話ではない。
“設計判断”を3つ知る話です。

この手法の価値は「5点を作れること」ではありません。多くの自動化が破綻する箇所を、3つの判断で回避していること。ここだけ理解すれば、自分のアプリや別のワークフローにも応用できます。

01

色は下流へ「流れる」

最初にアイコンを確定させ、その配色・角丸・モチーフをそのままCSS変数とPillowの描画パラメータとして後続に引き継ぐ。だからLPもグラフィックもポリシーも、最初から同じブランドで揃う。後から色を合わせにいく作業がゼロになります。

02

スクリプトはスキルに「同梱しない」

アイコンやフィーチャーグラフィックを描くPillowスクリプトは、確定したデザインに合わせてその場で書き起こす。スキルに古いコードを抱え込まないから、デザイン変更にそのまま追従できる。サーバーへの公開(アップロード)は環境差が大きいのでスキルの外に出し、成果物を出すところまでを確実に担当する設計です。

03

AIに「品質の床」を踏ませる

生成しっぱなしにしない。viewで必ず目視確認、fc-listでフォントの実在確認、未確定事項は断定せずTODOチェックリスト化。価格や効果を根拠なく書かせない。AIの“それっぽい嘘”を構造で潰します。

design token inheritance ─ 一色がすべてを貫く
① アプリアイコン--brand: #16B8A3 をここで確定
② ランディングページ背景・影・CTA色として継承
③ フィーチャーグラフィックグラデ・カードの基調色に
④ ストア文章LPのコピーを骨格に流用
⑤ プライバシーポリシー同じCSS変数とロゴで統一
04 — SKILL.md を公開しています

スキル本体は、GitHubで全文公開しています。

ここまでが「何を・なぜ」。実際に動かすための SKILL.md 本体は、そのまま Claude に読み込ませれば動く形で GitHub に置いてあります。MITライセンス。クローンして、自分のアプリ名・公開先・パッケージ名に置き換えるだけで使えます。

▶ リポジトリに含まれるもの
  • SKILL.md 本体の全文:5ステップ(アイコン → LP → グラフィック → ストア文章 → ポリシー)の完全な手順。
  • 成果物の定義:アイコン一式、LP、フィーチャーグラフィック、ストア掲載文、プライバシーポリシー、アプリごとの app.env を何として出すか。
  • フォーム実装コード:リリース前LPに置くウェイティングリストの HTML/JS パターン。
  • 「自分の環境に合わせる」設定表:パッケージ名空間・公開先URL・フォーム・ホスティングの置き換えどころ。
  • AIに確実にスキルを発火させる description の実例。
GitHubでSKILL.mdを見る →

省トークン化した実運用版は app-launch-neo-kit に置いています。

★ Star を付けてもらえると、次のスキル公開の励みになります。

※ 本手法はAIに作業を任せるための“設計図”です。ホスティング先・フォーム・パッケージ名などは各自の環境に置き換えて使ってください。プライバシーポリシーは雛形であり、公開前に専門家の確認を推奨します。

このスキルを実運用したあと、トークン消費を減らすために設計し直した記録は「自作スキルは「適切なトークン量」に設計されていない——その理由と直し方」にまとめています。