imagery

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

必須の事前準備

frontend-designを読み、そのContext Gathering Protocolに従ってください。利用可能なコンテキストを再利用し、重要な情報が不足している場合にのみ質問してください。さらに、画像がここでどのような役割を果たすのか（ブランド、説明、証拠、装飾、コンテンツ）を確認してください。

画像によって読みやすさに問題が生じる場合、オーバーレイが必要な場合、または配色との調和が必要な場合は、color and contrastを参照してください。 画像がステータス、アラート、意味、または純粋な雰囲気づくりではなく、色味を付けたコンテキスト用サーフェスに関係する場合は、semantic colorを参照してください。 オーバーレイ、スクリーンショットのサイズ調整、アイコンの拡大縮小、メディアの収まり、背景のはみ出し防止についての共通の基準として、image treatmentを参照してください。 画像やメディアを周囲のサーフェスから明確に区別する必要がある場合は、surface separationを参照してください。

承認済みのビジュアルリファレンスを使用する場合は、reference fidelityに従ってください。リファレンスの意味を形づくる被写体とメディアの種類を保ち、特徴を決定づける素材がない場合は、汎用的な形に黙って置き換えるのではなく、その不足を報告してください。

---

画像の問題を評価する

ビジュアルメディアがどこで役立ち、どこで妨げになっているかを分析してください。

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

   • 画像の品質は、意図するブランドイメージを支えるのに十分ですか？
   • 汎用的に見えたり、ちぐはぐだったり、明らかな仮置き素材に見えたりしませんか？

2. 画像上のテキスト：

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

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

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

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

   • ユーザー画像のアスペクト比がばらばらで、レイアウトが崩れていませんか？
   • 背景がインターフェースにはみ出していませんか？

5. 調和：

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

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

重要：質の悪い画像は、ほかの点では優れたデザインを台無しにすることがあります。画像は視覚的な階層と情報伝達を支えるものであり、読みやすさの問題や視覚的な混乱を引き起こしてはいけません。

画像の改善を計画する

次の点を中心に計画を立ててください。

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

画像を体系的に改善する

適切な写真を使う

• 製品の品質やユーザーの期待に本当に合う写真を使ってください
• インターフェースの質を下げるような、仮置き素材のような画像は避けてください
• 製品の感情的なトーン（遊び心のある、エディトリアル、プロフェッショナルなど）に合わせてください

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

• 画像内の明暗差が大きすぎる場合は、オーバーレイを追加してください
• テキストを安定して読みやすくする必要がある場合は、画像のコントラストを下げてください
• ブランドの配色との調和に役立つ場合は、画像に色味を加えてください
• その場の読みやすさが向上し、効果が目立ちすぎない場合に限り、控えめなテキストシャドウを使ってください

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

• アプリ全体のスクリーンショットを縮小しすぎて、インターフェースが読めなくならないようにしてください
• 詳細が重要な場合は、より狭い範囲をトリミングする、一部だけを表示する、または元のレイアウトを小さくして撮影したスクリーンショットを優先してください
• 目的が詳細ではなく構造を示すことなら、すべてを小さなスペースに詰め込むのではなく、スクリーンショットを簡略化してください

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

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

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

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

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

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

イラストと写真の調和

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

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

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

画像の品質を確認する

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

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