AppStoreのスクショを半自動作成！ClaudeCodeへ「App Store Screenshots」スキルの導入方法

Xのタイムラインを流し読みしていると、ひとつの投稿が目に止まりました。

@ParthJadhav8 さんの投稿で紹介されていた「App Store Screenshots」というClaudeCodeスキルです。「スキルを追加するだけで、App Storeのスクリーンショット用エディタが自動生成される」という内容でした。

読んだ瞬間に思ったのは、「これ、DoneLayerにそのまま使えるやつだ」でした。DoneLayerはすでにApp Storeにリリース済みですが、スクリーンショットは「とりあえず」で用意した仮素材のまま。ずっと「ちゃんと作らないと」と思いながら、今までは素人流でFigmaでゼロから作っており、非常に非効率と感じていました。

DoneLayerで即タスク化した

このX投稿のURLをそのままDoneLayerに貼りました。

AIが実践タスク候補を3件提示してくれたので、その中から選んで、タイトルを自分の言葉に直してコミット。

「ClaudeCodeにapp-store-screenshotsスキルを導入し、DoneLayerのスクリーンショットを作成する」

コミットした瞬間から、「いつかやろう」が「今日やる」に変わります。これがDoneLayerを自分でも毎日使っている理由です。情報を読んだだけで終わらせない——その仕組みが、自分自身の開発にも確実に効いていると実感しています。

「App Store Screenshots」スキルとは

まず、このスキルがどんなものか整理しておきます。

製作者のParthJadhav さんのサイトでは、以下のように紹介されています。

• Next.js + ShadCN製のスクリーンショットエディタをローカルに展開
• ドラッグ＆ドロップでスライドの並び替えが可能
• インラインで文字編集（クリックしてその場で書き換え）
• ワンクリックで全解像度PNG書き出し（iPhone 6.9" / 6.5" / 6.3" / 6.1" すべて対応）
• デバイスフレーム付き（iPhone / iPad / Android Phone）
• 自動保存（app-store-screenshots.json + localStorage）

スクリーンショットを「UIのドキュメント」ではなく「広告」として設計するための考え方（1スライド1メッセージ原則、ナラティブアークなど）もスキルの中に組み込まれており、Claude Codeがその観点でコピーの提案もしてくれます。

インストール手順

1. ターミナルでコマンドを実行する

npx skills add ParthJadhav/app-store-screenshots

実行すると、インストール設定の対話が始まります。

2. Claude Codeを選択する

どのAIに対してスキルを追加するか聞かれます。ここでは Claude Code を選択します。

3. インストール領域をグローバルに設定する

スキルのインストール先として、プロジェクトローカルかグローバルかを選べます。Claude Codeと同じグローバル設定にしておくと、どのプロジェクトでも使えるようになります。

以下をYesにすればインストール完了です。

4. セッションを再起動する

インストール後は、Claude Codeのセッションを一度再起動します。これでスキルが認識されます。

実際のやり取り：Claude Codeとの対話

セッションを再起動したら、Claude Codeに対してスキルを起動します。

app-store-screenshots スキルを使って、このアプリのStore用スクリーンショットを作りたい

スキルが起動すると、Claude Codeが順番に対話形式で色々聞いてくれます。主に確認されたのは以下の内容です。

① スクリーンショット素材はあるか

DoneLayerの場合、シミュレーターで撮影済みの画像が Planning/ProMotion_IMG/ 以下にありました。iphone-01-paste.png〜iphone-06-settings.pngまでの6枚を指定しました。

② アプリアイコン

/assets/donelayer-icon.png をそのまま指定。

③ 対象ストアとスライド枚数

Apple App Storeのみ、6枚で依頼しました。

④ スタイルの方向性

ここで「カスタム（ブランドカラーを教えて）」を選択。ここでは、従前ClaudeDesignで作成していたプロジェクト内の /handoff/01_DESIGN_TOKENS.md を参照するよう伝えたところ、DoneLayerのカラーパレットを読み込んで独自テーマを自動生成してくれました。

背景:   #0a0a0b（ほぼ黒）
アクセント: #a8cc00（ライムグリーン）
テキスト:  #f0f0f2（オフホワイト）

ここまでやると、こんな感じで報告してくれます。

このあと、ローカルサーバーの `http://localhost:3000/` が起動します。ここで細かい調整が出来る形になります。

⑤ スライドのラベル

DoneLayerのLP)に「01 / 05 · INPUT — URL」のような付番ラベルがあったので、それを参考に // INPUT - URL 形式で統一するよう伝えました。各スクリーンショットに対応するラベルが自動で割り当てられました。

ここまでを行うと、気を利かせて勝手にローカル環境にて画像の編集画面を立ち上げてくれます。編集画面はこんな感じ。実は初手では文字がちょとズレておりました…。

一発では上手くいかなかった

正直に書きます。最初の起動では、思い通りの状態にはなりませんでした。

発生した問題とやり取りの例：

• 背景の色が違う：デフォルトのテーマ（ダークボルド＝紫系）が適用されたままになっており、「背景の紫っぽいグラデーションを #a8cc00 のカラーコードにしたい」と追加指示
• スライドのレイアウトが混在：自動生成の初期状態ではレイアウトが hero / device-top / two-devices など複数混在していたため、「全スライドを Device Bottom で統一して」と修正依頼
• スクリーンショットの割り当て直し：各スライドに割り当てるスクリーンショットを明示的に1枚ずつ指定し直した
• 文字サイズが小さい：エディタのプレビューで見ると文字が小さく感じたため、「上下左右に余白を取り、サイズを大きく修正して」と指示
• ブラウザのキャッシュ問題：変更後もブラウザに古いテーマが残ることがあり、DevTools → Application → Clear site data でlocalStorageをクリアする必要があった

それぞれ1〜2回のやり取りで修正されましたが、「一発でゴール」という感じではなく、「要望を伝えて → 確認して → また伝える」というループを繰り返しました。

最終的には自分で文字を調整した

エディタが立ち上がったあと、コピー（ヘッドライン）は自分で直しました。

Claude Codeが初期生成したヘッドラインは、こんな感じです。

URLを貼るだけ
記事が実践になる

これ自体は悪くないのですが、実際にエディタ上でプレビューしてみると、DoneLayerの世界観としてもう少し言い切りたい感覚がありました。エディタはインラインで直接編集できるので、「ここかな」と感じたらクリックして書き換えるだけです。Figmaのように別ツールに戻る必要はありません。

自動化できる部分（テーマ設定・スライド初期化・スクリーンショット配置）はClaude Codeが一気にやってくれて、最後の「言葉の感覚合わせ」は自分でやる。この分担が、思ったよりちょうどよかったです。

ローカルで確認・書き出し

調整が終わったらエディタを開いて最終確認します。

エディタ右上の Export bundle ボタンを押すと、選択したデバイス × 必要な全解像度のPNGがzipでダウンロードされます。iPhoneの場合、6.9" / 6.5" / 6.3" / 6.1" の4サイズが一括で書き出されます。App Store Connectにそのままアップロードできる形式です。

書き出し成功！このサイズで全部書き出してくれる！

成果物は管理画面の見た目通りです。

但し、このまま審査に出そうとするとハマる

成功！と喜んで早速審査に出そうとすると、エラーが発生しました。どうやらPNG形式だと背景透過が入っており、審査基準を満たしていないとの事。これは、Xで愚痴を投稿したら優しい先輩がたが教えてくれました。JPGで書き出すか、ClaudeCodeに直接修正指示を出す事で解決するそうです。個人開発界隈は優しい世界です。

まとめ：やってわかったこと

「完全自動でゴール」ではなく「半自動＋自分の感覚で仕上げる」というイメージが正確です。それでも、Figmaでゼロから作る場合と比べると、作業量は大きく削減できました。何より「仮素材のまま放置」から「その日のうちに完成」まで持っていけたのは、DoneLayerでコミットしたからこそだったと思っています。

App Storeのスクリーンショットが整備できていないアプリを持っている方は、ぜひ試してみてください。

DoneLayerは、URLを貼るだけでAIが実践タスクを提案し、コミット・追跡・完了まで一気通貫で管理できるiOSアプリです。「読んだのに行動が変わらない」に悩む方は、ぜひ使ってみてください。

iOS版のアプリはこちら