charles-unslop

Unslop

Damir Sokolovsky（@heydamir）の unslop をベースに、Emil Kowalski の unslop-design スキルと、Charles Liu の「Removing AI Slop」シリーズからのフィードバックを組み合わせたものです。変更点：引き算を軸にパスの順序を入れ替え、背景、ブランドアイコン、マテリアルに関するルールを書き直しました。複製する際は、このクレジットを残してください。

画面を生成されたように見せる要素を、ひとつだけ指摘することはできません。モデルはあらゆる判断で最も一般的な選択肢を選び、その中央値の選択が50個重なると、ウォーターマークのように現れます。だから、ひとつの要素を直しても効果はありません。画面全体を順番に見ていきましょう。

それらしい特徴を取り除くのは、仕事の半分にすぎません。どの製品にも当てはまりそうな、きれいな画面が次のテンプレートになります。スロップは装飾全体に豊かさを広げます。優れたデザインは装飾を控えめにし、ひとつの瞬間に力を注ぎます。

実行方法

1. レンダリングします。 画面を実際のサイズでスクリーンショットに撮り、コードではなく、その画像を見て判断します。小さく表示される場合（スマートフォン、動画、サムネイル）は、そのサイズでも判断します。
2. 監査します。 references/signs.md を確認します。該当する特徴をすべて、場所とともに1行ずつ列挙します。
3. 監査結果をもとに範囲を決めます。
   • 色、文字、アイコン、コピーにまたがって特徴がある → 以下のすべてを実行します。
   • デザイン済みの画面に特徴がいくつかある → それらだけを修正します。配色、文字、レイアウト、ビジュアルは維持します。大きなアイデアはレポートに記載します。
   • 特徴がない → その旨を伝え、具体的な値を添えた改善案を最大3つ提案して、そこで止めます。優れた画面を、違いを出すためだけに変更してはいけません。
4. 方向性をまとめます（以下を参照）。監査結果と方向性を提示し、回答を待ちます。誤った方向性ではすべてやり直しになるためです。「そのまま実行して」と指示された場合のみ、待機を省略します。
5. 引き算します。
6. **パスを順番に実行し、**画面全体に対して各パスを完了させます。
7. 最終監査を実施します。 不合格の項目は、該当するパスに戻します。

製品らしさを保ちます。機能、実際のコンテンツ、セクションの順序は維持し、製品名も変えません。機能や、実在する製品の主張・事実を作り出してはいけません。製品がすでに提供している機能を新しい見せ方で提示するのはデザインであり、機能の捏造ではありません。デモやモックのプレースホルダーコンテンツは、具体的な内容に置き換えてもかまいません。「AI を活用」や「お得な情報をチェック」のような埋め草は機能ではないので、削除できます。

方向性

製品のトレンドではなく、製品が何をするかから導き出す5つの要素です。

• 製品： 誰のために何をするのかを、一文で表します。
• キャラクター： 落ち着いた、正確な、少し温かみのあるのように、具体的な言葉を2つか3つ挙げます。クリーン、モダン、洗練、ミニマル、プレミアムは、どのテンプレートにも当てはまるため使いません。
• 世界観： 製品が属する場所や素材です。潮汐表アプリなら塩、海図、薄暗さの近くにあり、税務ツールなら罫線入りの台帳の近くにあります。世界観によって、ニュートラルな色合いとアクセントが決まります。必ずしも絵にする必要はありません。
• 見せ場： 画面に豊かさをもたらす1、2か所です。パス8を参照してください。動作、実際のコンテンツ、比率、文字、オブジェクトなどが該当します。
• シグネチャー： この製品だけにある小さなディテールを1つだけ、常に一貫して使います。

次にコンセプトを書きます。後から行うすべての選択を照らし合わせられる一文です。例：「すべての請求書は、ある人から別の人への手紙のように読める。」採用する前に、次の2点を確認します。

• 次の状態でも成り立ちますか？ 空の状態、使用中、完了の状態で確認します。最初の画面でしか機能しないコンセプトは、コンセプトではなくポスターです。
• すでにやりたかったことを正当化するために書いていませんか？ そうなら、何も選別できていません。少なくとも、本来ならするはずだったことを1つは却下できるものでなければなりません。

画面に製品名がない場合は、 尋ねてください。尋ねられない場合や、とにかく作るように言われた場合は、次のようにします。

• モックやデモの場合：具体的でありそうな製品を1つ想定し、全体の方向性をその製品に合わせて定めます。覆せるように、Product (assumed):を付けます。コピー内の単語をそのまま世界観にしてはいけません。また、SaaSを既定の選択肢にしないでください。特定の世界観を持つものを想定してください。それがパレット、文字、アクセントの出発点になるからです。残す機能と整合している必要があります。GitHubボタンがあるなら、パン屋は選べません。世界観を画面上のオブジェクトにする必要はありません。理由もなく白、黒、システムフォントを使うのもテンプレートです。
• 実在する製品で、詳しく知らない場合：中立的に保ち、断定せず、知る必要があることを列挙します。

実際のブランドマークや色は残します。紫から青へのグラデーション、きらめくタイル、光沢のある球体は、ユーザーがそう言わない限りブランドとは見なしません。

まず削る

エージェントは要素を追加します。見出しを言い換えるキャプション、すべてのラベルに付いたアイコン、余白ですでに区切られている場所の仕切り、影のある面に付いた境界線、2つ目のCTA、入力欄の下の補足文。それぞれには理由がありますが、すべてが一緒になると互いに競合します。

すべてのアイコン、線、バッジ、キャプション、コンテナ、単語について、こう問いかけます。これがなくなると何が困りますか？ 「何もない」なら削除します。「興味を引く」「空間を埋める」はモデルがそこに置いた理由なので、理由にはなりません。削除によって別の要素も不要になるため、2回確認します。方向性にあるシグネチャーは例外ですが、それだけです。要素が必要な情報（パスワードのルールや価格など）を伝えている場合は、場所を移す、小さくする、または見せ場にします。情報を失ってはいけません。

生成された画面で特に必要となる削除項目：

• 仕切り。 余白で代用できる仕切りはすべて削除します。近接している要素はすでにまとまりを作っており、線はノイズを加えます。リスト、設定の行、候補チップに仕切りが必要なことはほとんどありません。台帳や表で、行を横方向に追う助けになる線は残してかまいません。
• タイトルの下のサブタイトル。 タイトルでは伝えられない内容を述べている場合を除き、削除します。
• 入れ子構造。 コンテナの中にコンテナがあり、その中にカードがあるのは、ありがちな兆候です。地図、画像、グラフがコンテンツなら、親要素の端まで広げます。各面に役割ができるまで、ラッパーを削除します。
• 1つの役割に対する2つの仕組み。 プログレスバーとステップカウンター、トーストと目に見える変化、同じことを示すアイコンとラベルなどです。より適切なほうを残します。これは機能を削ることではありません。その役割は引き続き果たされます。
• 後付けのコントロール。 フィールドの横に浮かぶボタンは、そのフィールドの空の状態またはフォーカス状態の一部として、フィールド内に配置します。
• 見せ場に不要なクローム。 たとえば、まだ共有できるものが何もない画面の共有ボタンです。

パス

順番が重要です。リズムによってほかのすべての見え方が変わり、コピーの長さによって文字サイズとレイアウトが決まります。ビジュアルとモーションは最後に加えます。なくてもすでに機能する画面に合わせるためです。正確な開始値はreferences/tokens.mdにあります。

1. 余白

• すべてを4pxのグリッドに配置します。mt-[13px]のような個別指定は置き換えます。
• 同じ種類の要素には同じサイズを使います。1セットにつき、行の高さ、間隔、カードのパディングをそれぞれ統一します。
• グループ内の間隔はグループ間の間隔より小さくします。そうすれば、線を使わなくてもグループ分けが伝わります。
• アイコンは縦一列に並べ、ラベルの開始位置をそろえ、数値は右揃えにします。どの要素も位置をずらしません。

2. 色

• 世界観に合わせて色味を調整したニュートラルな色の段階と、3つのテキストロールを使います。ラベンダーが5色もあるなら、誰も選んでいないということです。
• クリーム色の紙と落ち着いたアースカラーは、かつてのインディゴのように、AI時代のデフォルトになっています。世界観が求める場合に限って使い、上品に感じるからという理由では使いません。キャラクターに合うなら、高彩度の色、純白、黒に近い色も問題ありません。
• クロームにはアクセントカラーを1色だけ使い、画面の数パーセント程度にとどめます。選ばれた理由のない紫は、最も目立つ手がかりになるため、世界観から色相を導きます。
• ユーザーがじっと見る作業画面（アプリ、ダッシュボード）では、背景をニュートラルに保ち、色はコンテンツに使います。
• グラデーション文字、色付きのグローやシャドウ、ネオンの枠線、コンテンツの背後にあるブロブは削除します。
• 背景の上に重ねる場合も含め、テキストのコントラスト比は4.5:1を保ちます。

3. アイコン

• 絵文字は、1つのセットから選んだ線画アイコンに置き換えます。サイズと線の太さを統一し、テキストロールの色を使います。絵文字はパレットに合わず、プレースホルダーのように見えてしまいます。
• 例外：サードパーティのロゴは実際の色を保ちます。 GoogleのマルチカラーやFacebookの青は、読み取る前に認識されます（再認より認識が先です）。ロゴをグレーにすると、人はロゴを読み取ることになります。
• ✨はAIを意味しません。AIが重要なら、何をするのかをコピーで説明します。
• アイコンの完成形は、20–24 pxで単独でも意味が伝わる必要があります。アニメーションがないと意味が通じないなら、描き直します。

4. コピー

• 競合他社がこの見出しをそのまま使えるなら、このプロダクトならではの名詞を使って書き直します。
• 感嘆符、挨拶の見出し、誇張表現、ラベルやボタンの末尾の句点は使いません。
• 変化を示す場合は、何と比較した数値かを明記します。+12% vs last month
• 画面上のほかの要素と並べて各行を読みます。近くの数値や単語と重複する場合は削除します。気の利いた印象を狙う短い文はAIらしく見えるため、率直に書きます。
• モックコンテンツは具体的にします。 Maya、Sarah、Alex、Acme、John Doeは使いません。こうした名前があると、画面が生成されたものだとわかります。実在しそうな人物と具体的な内容を使います。「最初のバッチは焦がしてしまったので、お客様の商品は2回目のバッチのものです」は、「ご購入ありがとうございます」よりも伝わります。
• 根拠のない主張は削除します。確認できない主張は質問し、具体化するか削除します。実際の数値に勝るコピーはありません。

5. 文字

• 文字のキャラクターに合わせて書体を選びます。インターフェース用のファミリーを1つと、必要なら組み合わせ用を最大1つ使い、組み合わせ用は特徴を際立たせる場面に限ります。ディスプレイ書体は1回だけ使います。
• ウェイトは400–500を使い、600はまれな強調に限ります。階層はサイズと色で作り、800–900は使いません。
• 文頭のみ大文字にします。トラッキングを広くした大文字表記も文頭のみ大文字に直します。ただし、スタンプ付きのタグや搭乗券のように、元になった実物が大文字表記の場合は例外です。
• 画面全体でtabular-numsを使い、数値の書式を統一します。負のトラッキングはディスプレイサイズに限ります。

6. レイアウト

• すべてを縦に積んで中央揃えにする、同じサイズのカードを3枚並べる、ベンタグリッドにする、画像パネルの横にフォームの列を置く。これらはどれもデフォルトのレイアウトです。最後の配置を避けるには、フォームを素材の横ではなく、素材の中に配置します。コンテンツに合わせてサイズを決めましょう。重要な要素には広いスペースを与え、コンテンツによって対称性が崩れることも受け入れます。
• 最も大きなビューポートも確認しましょう。デッドスペースとは、素材も役割もない空白です。表面や実際のコンテンツで空間を埋めるか、フォームを組み込んでください。文字を大きくするだけでは解決しません。
• メインアクションは1つにし、セカンダリアクションは多くても1つにします。
• アプリは実際のアプリらしいプロポーションを保ちます。ヒーローは、デッドスペースのない最初の画面全体として構成します。
• 最小の表示サイズもレイアウトの一部です。動画やサムネイルの場合に限り、24～32 pxの余白を確保し、意図的にはみ出させる場合を除いてフレームの端に要素を接触させず、そのサイズで読ませたい文字はすべて16 px以上にします。

7. ディテール

• 内側の角丸は「外側の角丸 − パディング」とし、4未満にはしません。すべてをピル型にする必要はなく、rounded-2xlも答えにはなりません。
• コントロールの形はトークン一覧ではなく、デザインの個性から決めます。正確で技術的な印象なら2～6 pxの薄いフィールド、柔らかく人間的な印象なら大きな角丸または完全なピル型、エディトリアルな印象なら下線付きフィールドやテキストボタンにします。形の理由をデザインの個性に基づいて一文で説明できるようにします。「標準だから」という理由で半径を12 pxにするのは不適切です。
• 1つの表面に使う奥行きの手掛かりは1つだけにします。境界線、影、リング、グラデーションを重ねるのは、モデルが判断をためらっているようなものです。
• 対象が実際にミシン目付きでない限り、点線や点線の区切り線は使いません。チャートやフォームが自動生成されたように見える、最も手っ取り早い方法です。
• 統計カードでは数値を主役にします。空白を埋めるためのスパークラインやアイコンは不要です。チャートごとにメインチャートを1つ、アクセントを1つにします。
• ホバーとフォーカスの状態は設け、パレットの範囲内に収めます。

8. ひととき

エージェントは、次の2つのテンプレートのどちらかに飛びつきがちです。プロダクトの世界にあるものを平面的に描いたイラストか、ありふれたフォームの上に大きな文字を置くものです。どちらも静止画としてはデザインされているように見えますが、何も意味していません。最初に表示できた案を採用しないでください。次の項目から1つずつアイデアを選び、それぞれ1文でスケッチしてください。

1. 振る舞い： このプロダクトだけが行う、インターフェースの動きです。静止時には地味に見えるかもしれません。
2. 実際のコンテンツ： プロダクトのデータを丁寧に描くか、実際の出力を使います。
3. プロポーション： 重要なものが画面の70％を占め、それ以外は邪魔にならないようにします。
4. タイポグラフィ： サイズのコントラストを1つ、大きな数字を1つ、または画面全体に配置したコピーを1行使います。意味を担う必要があります。数字が答えになっている、または状態に応じて文が変わる、といった形です。大きな「ログイン」では不十分です。その言葉自体が何も伝えていないからです。
5. 表面またはオブジェクト。 下のツリーを参考にしてください。

次の両方のテストに合格するものを残してください。

• アイデアになっていますか？ 装飾を取り除いて、誰かに説明してみてください。「巨大なセリフ体の見出し」ではアイデアになりません。「請求書の合計金額がページそのもので、支払い済みの行には取り消し線が引かれる」ならアイデアです。
• 静止状態だけでも成立していますか？ ほとんどの人が目にするのは最初の状態だけです。そのため、入力後にしか現れないアイデアには、すでに構成が整い、このプロダクトの世界観が表れている静止状態が必要です。小さなコントロールの上に大きな文字を置き、画面の残りを空白にする案は、次の状態がどれほど気の利いたものでも不合格です。

次の状態も作ってください。描いただけのコンセプトではテストになりません。

トークンにあるディスプレイ用の文字サイズはデフォルトです。タイポグラフィを主役にする演出では、それを上書きしてください。

How long do people stay on this screen?
├── Minutes or daily (app, dashboard, settings, chat in use)
│   → neutral surface. The moment is content.
└── Seconds, as a doorway (login, empty state, confirmation, hero)
    → a field or object is allowed if it passes all five:
      1. Reason: someone who hasn't seen your concept can guess why it's here.
      2. Palette of at most three hues, taken from the world.
      3. Real structure: light, depth, focus. A two-stop wash is not a field.
      4. The UI on top stays quiet and legible.
      5. Stock check: at the viewing size, could this come from an illustration pack or a template gallery? Layered flat hills, gradient suns and a dashed trail fail. If it does and two attempts don't fix it, go back to 1–4.

グラデーションは、装飾として使えば凡庸ですが、素材として使えば工夫になります。違いを決めるのは、使う理由があり、パレットが選ばれていて、その上のUIが控えめかどうかです。

テクスチャは必須ではありません。 追加するレイヤーは最大1つにし、バンディングが起きるグラデーションを改善するなど、具体的な問題を解決する場合に限ってください。

テクスチャ	使う場面	不適切な場面
粒子や点描	グラデーションにバンディングが起きる、またはデジタル感が強い場合。温かみのある、物質感のある世界観	単色に流行りのレイヤーとして一様に適用する場合
ハーフトーンのドットグリッド	柔らかな写真の色の上に重ね、構造を加える場合	ドットがテキストと競合する場合
地形図の等高線	地形、ルート、データを扱う世界観	模様として認識されるほど明るい、または密集している場合
同心円	放射状に広がる中心となるオブジェクトがある場合	中心となるオブジェクトがない場合
型板ガラス	その背後にコントラストの高いものがある場合	屈折させる対象がなく、縞模様のプリントのように見える場合
ピクセルまたは反応拡散	エディトリアル、ヘリテージ、コントラストの強いブランド	フィルターのように見える、シンプルでモダンなインターフェース

素材には使う理由が必要です。 すりガラスを使うなら、その背後に意味のあるものが必要です。屈折させるなら曲げる対象が必要で、テキストは砕けずにその中を曲がって見えるべきです。液体金属、クローム、光沢のある3Dは、抽象的な題材でAIがデフォルトとして選びがちな表現です。このプロダクトにおいてオブジェクト自体に意味がある場合に限り、使ってかまいません。輝くロゴより、役割を果たすロゴのほうが優れています。たとえば、バックアップの実行中に光線が動く灯台のマークは、クロームの球体よりも優れています。

オブジェクトの性質を尊重してください。 実物を取り入れるなら、その物らしく振る舞わせてください。紙は薄れません。錠前のピンは正しい方向に動きます。受け取った手紙に返信を書いてはいけません。

キャラクターやイラストは、このページのために描かれたように見える必要があります。ページのパレットから色を選び、ページのインクに合った特徴を持たせ、線の太さを統一し、黒一色の塊や手袋のような手は避けてください。ステッカーや絵文字のように見えるなら、描き直すか削除してください。

シーンやオブジェクトの選び方と生成方法についてはreferences/visuals.md、コードでの表現についてはreferences/effects.mdを参照してください。

9. モーション

• モーションはデフォルトで削除してください。ライブではないもののループするパルス、見出しのきらめき、明滅するグロー、パララックス、transition-all、カードのhover:scale、スクロール時にすべてのセクションをフェードインさせる動きなどです。
• 何かを説明するモーションは残してください。残したモーションを調整するのが、仕上げのスキルです。

最終監査

1. 別の製品名に置き換えます。それでも画面がしっくりくるなら、コピー、ビジュアル、シグネチャーをさらに際立たせます。（想定製品がある場合は、その製品名を使います。本当に中立的な画面なら、この手順は省略します。）
2. モデルがこれを作ったのではないかとデザイナーに疑われそうな点はどこですか？修正して、もう一度だけ確認します。参考資料が与えられている場合は、自分の画面を同じサイズで並べ、差を明確にして修正します。
3. 競合他社には真似できない選択を一つ挙げます。答えがなければ、まだ完成ではありません。（本当に中立的な画面なら、見た目ではなく、この画面の役割に基づく選択を挙げます。）
4. もう一つ削除します。何かが壊れたら元に戻し、そこで止めます。
5. 監査リストと照らし合わせ、方向性、各パスで変更した内容、作成したプロンプトがあれば報告します。