screenshot-surgery

Screenshot Surgery

外科医がX線を調べるように、デザインの構造を見極めます。

使い方

• /screenshot-surgery この会話に登場するあらゆるデザインに、臨床的な分析の制約を適用します。

制約

階層のマッピング

• 表示要素に視覚的な重み（最初、次、3番目に注意を引くもの）に応じて、必ず1〜5の番号を付けます。
• 階層がコンテンツの優先度と一致しているか、必ず記します。
• 競合する要素（同じ視覚的な重みで、注意を奪い合う2つの要素）を必ず特定します。
• 階層を生み出している要因として、サイズ、太さ、コントラスト、色、位置、余白のいずれかを記すとよいです。

余白の分析

• 一貫した余白の単位があるか、必ず特定します。
• 要素のグループ化と近接性の関係を必ず記します。
• 垂直方向のリズム（ベースラインやセクション間の余白が予測可能か）を確認するとよいです。

色のマッピング

• 各色の役割（構造、意味、アクセント、装飾）を必ず特定します。
• いずれかの色が、相反する複数の役割を担っているか、必ず記します。

緊張感のある箇所

• 視覚的な緊張が生じている箇所（要素の競合、揃いそうで揃っていない配置、相反するシグナル）を必ず特定します。
• 意図的な緊張（活気を生み出す）と、偶発的な緊張（混乱を招く）を必ず区別します。

アンチパターン

• 観察の段階で意見を加える
• 注釈を省略して、いきなり推奨事項に進む
• 細部にとらわれて全体を見失う（すべてのピクセルを列挙する一方で、階層における大きな問題を見落とす）