imagery

写真、イラスト、スクリーンショット、アイコン、アップロードされたメディアの使い方を評価して改善し、意図が伝わり、読みやすく、適切に収まるようにします。

必須の準備

ユーザーは /imagery を使ってこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込みます。ここにはデザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。先に進む前にこのプロトコルに従ってください。デザインのコンテキストがまだない場合は、必ず最初に $setup を読み込みます。さらに、画像がここでどのような役割を果たすのか（ブランド、説明、証拠、装飾、コンテンツ）を確認します。

画像によって読みやすさに問題が生じている場合、オーバーレイが必要な場合、またはカラーパレットとの調和が必要な場合は、カラーとコントラストのリファレンスを参照してください。 画像がステータス、アラート、意味、または純粋な雰囲気づくりではなく色付きのコンテキストサーフェスに関係する場合は、セマンティックカラーを参照してください。 オーバーレイ、スクリーンショットのサイズ調整、アイコンの拡大縮小、メディアの収め方、背景のはみ出し防止については、共通の参照元となる画像処理を参照してください。 画像やメディアを周囲のサーフェスから明確に分離する必要がある場合は、サーフェスの分離を参照してください。

---

画像の問題を評価する

ビジュアルメディアが役立っている箇所と、妨げになっている箇所を分析します。

1. 写真の品質と適切さ：

   • 画像の品質は、意図するブランドを支えるのに十分ですか？
   • ありきたりだったり、場違いだったり、明らかな仮画像に見えたりしませんか？

2. 画像上のテキスト：

   • 背景画像の上のテキストは読みやすいですか？
   • コントラストの問題は、タイポグラフィではなく画像が原因ですか？

3. スクリーンショットとアイコン：

   • スクリーンショットは小さく縮小されすぎて、判読不能になっていませんか？
   • 小さなアイコンを、本来の視覚サイズを超えて拡大していませんか？
   • 細部の多いアイコンを縮小しすぎて、ぼやけていませんか？

4. ユーザーがアップロードしたコンテンツ：

   • ユーザーの画像が縦横比のばらつきによってレイアウトを崩していませんか？
   • 背景がインターフェースにまで侵入していませんか？

5. 調和：

   • 写真、イラスト、スクリーンショット、アイコンは、同じ製品の一部として統一感がありますか？

コードベースから判断できない点があれば、推測できない内容を明確にするため、ユーザーに直接質問してください。

重要：画像の質が悪いと、それ以外が優れたデザインでも台無しになることがあります。画像は階層構造と情報伝達を支えるべきであり、読みやすさの問題や視覚的な混乱を生み出すべきではありません。

画像の改善を計画する

次の観点に基づいて計画を立てます。

• 役割：画像は雰囲気づくり、説明、製品の証拠、ユーザーコンテンツのどれを目的としていますか？
• 収め方：画像をどのようにトリミング、拡大縮小、フレーミングしますか？
• 読みやすさ：重ねて表示するテキストを読みやすくするには、何が必要ですか？
• 視覚的な一貫性：写真、イラスト、スクリーンショット、アイコンを、スタイル面でどのように調和させますか？

画像を体系的に改善する

適切な写真を使う

• 製品の品質や対象ユーザーの期待に本当に合った写真を使います
• インターフェースの質を損なうような、仮画像のような写真は避けます
• 製品の感情的なトーン（遊び心のあるもの、エディトリアルなもの、プロフェッショナルなものなど）に合わせます

画像上のテキストのコントラストを改善する

• 画像の明暗差が大きすぎる場合は、オーバーレイを追加します
• テキストをより安定して見せる必要がある場合は、画像のコントラストを下げます
• ブランドのカラーパレットになじませるのに役立つ場合は、画像に色を加えます
• テキストの局所的な読みやすさが向上し、効果が目立ちすぎない場合に限り、控えめなテキストシャドウを使います

スクリーンショットの使用ルール

• アプリ全体のスクリーンショットを、インターフェースが判読不能になるまで縮小しないでください
• 細部が重要な場合は、範囲を絞ったトリミング、一部だけのスクリーンショット、または元のレイアウトを小さくしたキャプチャを優先します
• 細部ではなく構造を示すことが目的の場合は、すべてを小さなスペースに詰め込まず、スクリーンショットを簡略化します

アイコンのスケーリングルール

• 小さなアイコンを、描画時のサイズを大幅に超えて拡大しないでください
• 細部の多いアイコンを、ぼやけたり過密になったりするまで縮小しないでください
• より大きな視覚的存在感が必要な場合は、小さなアイコンを大きな形状のコンテナ内に配置することを検討してください

ユーザーがアップロードしたメディアの収め方

• アップロードされた画像は、アスペクト比を統一した意図的なコンテナに収めてください
• 元の寸法を維持するとレイアウトが損なわれる場合は、coverスタイルのトリミングを使用してください
• 元の画像の端をすべて残すことより、コンテナ内に適切に収めることを優先してください

画像の境界が背景に溶け込むのを防ぐ

• 画像がページの背景に溶け込む場合は、控えめな内側のシャドウまたは内側の境界線を加えてください
• 目立たない収め方を優先してください。強い境界線は画像そのものとぶつかることがよくあります

イラストと写真の調和

• プロダクト全体でイラストのスタイルを統一してください
• イラストと写真が、無関係なブランドのものに見えないようにしてください
• 写真とイラストを組み合わせる場合は、配色、フレーミング、または使用状況を通じて統一感を持たせてください

絶対にしないでください：

• 読めない文字を情報量の多い画像に載せて、書体のせいにすること
• ユーザーが目を凝らして拡大したくなるほど小さなスクリーンショットを使うこと
• 小さなアイコンを、ずんぐりして素人っぽく見えるほど拡大すること
• ユーザーがアップロードした画像にレイアウトの形を決めさせること
• 統一する理由もなく、写真、イラスト、アイコンのスタイルを混在させること

画像の品質を確認する

• 読みやすさ：画像上の文字は常に読みやすいですか？
• 収まり：ユーザーがアップロードした画像や編集用画像は、レイアウト内に自然に収まっていますか？
• サイズ：スクリーンショットやアイコンは適切なサイズで表示されていますか？
• 調和：すべてのビジュアルメディアが、ひとつのシステムの一部として感じられますか？
• 適切さ：画像はプロダクトの品質や個性に合っていますか？

覚えておいてください。画像はデザインのメッセージと階層を支えるものです。UIとぶつかり始めたら、画像の扱いを見直す必要があります。