design-playful-app-icons

遊び心のあるアプリアイコンをデザインする

テキストのみのデザインルールから、個性的なアプリアイコンを作成します。ランチャーで小さく表示されても認識できる、大胆なオブジェクト、マスコット、またはグリフで、製品の約束をひとつ伝えましょう。

リファレンスを読み込む

• すべてのタスクで references/style-profile.yaml を読みます。数値範囲と不変条件を信頼できる基準として扱います。
• コンセプトの検討、ビジュアルの方向性の選択、生成プロンプトの作成では、references/design-recipes.md を読みます。
• 批評、改善、比較、または本番用アセットの準備では、references/evaluation.md を読みます。

同梱のリファレンス画像を要求したり、前提にしたりしないでください。既存のアイコンの批評や編集をユーザーが希望する場合に限り、画像を求めてください。

ワークフローに従う

1. ブリーフを オブジェクト + アクション + 感情 にまとめます。
   • オブジェクト：製品を端的に表す、最もシンプルで具体的なメタファー。
   • アクション：ユーザーが得られるメリットや変化。
   • 感情：アイコンが伝えるべき個性。
2. 選択によるリスクが低い場合は、製品カテゴリから不足情報を推測します。製品のメタファーが恣意的になってしまう場合に限り、簡潔な質問をひとつ尋ねます。
3. style-profile.yaml からビジュアルの方向性をひとつ選びます。すべての方向性を組み合わせないでください。
4. メタファーやシルエットが異なる3つの案を作ります。色だけを変えた案にはしません。
5. レンダリング前に、製品の意味、シルエット、独創性の観点から各案を採点します。最も優れた案を選び、その理由を述べます。
6. 選んだレシピを使って最終的な生成プロンプトを組み立てます。形状、構図、配色の役割、表情の表現、素材、光、除外事項を明確に指定します。
7. 画像ツールが利用できる場合はアイコンを生成します。利用できない場合は、最終プロンプトと制作仕様を提示します。
8. 1024、180、60、32 px で evaluation.md に基づいて結果を評価します。実際のラスター画像がない場合は、構図とディテールの数から慎重に判断します。
9. 最も低い評価項目から改善します。アイデンティティがぶれないよう、各パスで対象を絞った変更は1〜2点にとどめます。
10. 最終アセットまたはプロンプトに、パレット、方向性、制作メモ、簡潔な品質レポートを添えて提出します。

コアとなるアイデンティティを保つ

• 主役はひとつにし、補助的な小道具は最大ひとつにします。
• 顔とシグネチャーディテールを保護しながら、正方形の約70〜85％を埋めます。
• 2〜5個の幅広く丸みのあるパーツでシルエットを構成します。
• 顔は製品のメタファーを強める場合にのみ使います。目ふたつに、口ひとつまたはジェスチャーを組み合わせる表現を優先します。
• 主役となる色相をひとつ、コントラスト用の色相をひとつ、ニュートラルカラーとしてインクまたは柔らかな白を使います。
• 明確な平面的な分離か、一貫した柔らかな立体感のどちらかを選びます。中途半端な描写は避けます。
• 印象に残るフックをひとつだけ加えます。表情豊かな視線、形状を使った言葉遊び、意図的な非対称トリミング、意味のある小道具、または独特なプロポーションなどです。
• 背景は端まで塗り、視覚的に控えめにします。

ありきたりな仕上がりを防ぐ

• かわいらしさを加える前に、アイコンでアプリの役割が伝わるようにします。
• 汎用的な塊、星、きらめき、笑顔より、製品固有の具体的なオブジェクトを優先します。
• 瞳孔、まぶた、傾き、ポーズを工夫し、独自の雰囲気を作ります。
• グラデーションは、立体感、奥行き、または意図的な暖色から寒色への移行を表現する場合にのみ使います。
• 無関係な複数のアプリを表しているように見える案は却下します。

独創性と安全性のルールを守る

• アーティスト、スタジオ、既存アプリ、ロゴ、マスコット、または著作権で保護されたキャラクターの名前を挙げたり、模倣したり、引用したりしないでください。
• 「in the style of」のような表現や、既知のアイコンを再現するようモデルに求める指示は使わないでください。
• リファレンス固有のシルエット、顔、配色、または小道具の組み合わせを再構成しないでください。
• ユーザーの製品機能と対象ユーザーをもとに、独自のメタファーを考案します。
• ユーザーがそのマークを所有し、提供している場合を除き、目に見えるテキスト、ブランド名、透かし、商標を連想させるモノグラムは避けます。

適切な回答を提示する

コンセプト開発

次の項目を含む方向性を3案提示します：名前、メタファー、デザインの方向性、シルエット、表情またはフック、パレットプリセット、小サイズでの視認性の根拠。1案を推奨します。

画像生成

ツールが利用できる場合は、選択した方向性の画像を生成します。再現可能にするため、最終プロンプト、ネガティブ制約、選択した方向性、パレットもそのまま提示します。

批評と改良

最も影響の大きい問題から指摘します。すべての評価項目を採点し、具体的な修正案を提案してから、改訂したプロンプトまたは仕様を提示します。

制作引き継ぎ

キャンバス、安全領域、レイヤー順、パレット値、光の方向、奥行きの表現、マスクの挙動、書き出し要件を指定します。iOS では、透明度なし、角丸マスクの焼き込みなしの、不透明な 1024 x 1024 sRGB ラスター画像をデフォルトにします。Android のアダプティブアイコンでは、前景と背景を分け、現在のプラットフォームのセーフゾーンテンプレートで検証します。

プロンプトは次の順序で作成します

1. 成果物と対象プラットフォーム
2. 製品の目的と選択したメタファー
3. ポーズ、トリミング、シルエット
4. デザインの方向性と各パーツの構成
5. 表情と1つの特徴的なフック
6. パレットの役割と控えめな背景
7. 素材、光、奥行き、影
8. 32 px での視認性要件
9. ネガティブ制約と独自性のガードレール

形容詞だけに頼らないでください。「かわいい、モダン、洗練された」ではなく、見て分かる具体的な構成上の決定に置き換えます。