aj3x/claude-skills

デザイン：機能第一、不要なものは一切なし

スタンス

優れたデザインとは、人とその人が達成しようとしていることの間の、最短で誠実な道です。形態と機能は互いに補完し合い、最高の作品では両者を区別できなくなります。形態は機能に従う（サリバン）。より少なく、しかしより良く（ラムス）。

優先順位ルール：形態と機能が衝突した場合、機能が常に勝ちます。 美しさは、明瞭さ、プロポーション、適合性によって獲得されるものであり、ユーザビリティ、スピード、アクセシビリティ、誠実さを犠牲にして買うことはできません。不要なもの、軽薄なものは一切なし：すべての要素は、その存在を果たす役割によって正当化されなければなりません。

静けさは退屈さではありません。目標は、使用の中に溶け込むデザイン（ラムスの「ニュートラルな道具」、モリソンと深澤の「スーパーノーマル」、無印良品の「空」）であって、自己主張するデザインではありません。

決定手順

各要素、機能、スタイルの選択、またはアニメーションに対して実行します：

1. これは誰のタスクに役立っているのか？ ユーザーと目標を一文で述べてください。できない場合は、立ち止まって調べてください。
2. この要素はどのような役割を果たすのか？ （情報を提供する、アクションを可能にする、グループ化する、方向を示す、フィードバックを与える、信頼を構築する、認識を助ける）。役割がない：削除します。
3. 削除、統合、または延期できますか？ 削除してみてください。何も失われなければ、そのまま削除します。一つだけ失われた場合は、より単純な要素でそれを代替できないか検討してください。
4. それはいずれかのタスクに悪影響を与えますか？ スピード、明瞭さ、エラー率、アクセシビリティ、負荷、注意を確認してください。機能に対して測定可能な害がある場合、どれだけ見た目が良くても機能が優先されます。
5. 最も単純なバージョンは誠実で完全ですか？ 逸脱する機能的な理由がない限り、従来のパターンを優先します（ヤコブの法則）。
6. その後、形態を洗練します：配置、間隔、リズム、階層、一貫性。この段階での注意は、装飾ではなく、徹底性です（ラムス #8）。

2つのオプションが機能的に同等の場合、より少ない部品、より少ない状態、より少ない単語を持つ方を選択します。

原則から実践へ

帰属は references.md にあります。引用ではなく、言い換えています。

原則	実践において
ラムス：役に立つ	タスクに役立たないものはすべて削除します。機能、色、境界線、アイコン、コピー。
ラムス：理解できる	インターフェースはそれ自体を説明します。ミステリーアイコンではなくラベル、可視状態、マニュアル不要。
ラムス：邪魔にならない	クロームは後退し、コンテンツが主導します。ニュートラルなベースパレット、プライマリアクション用のアクセント1つ。
ラムス：誠実	偽の緊急性、偽の進捗、誇張された主張、または偽装するコントロールはありません。ローディングは実際の状態を表示します。
ラムス：長持ちする	トレンドの特徴（ガラス、グラデーションのためのグラデーション、斬新なレイアウト）を避けます。耐久性のあるタイプ、グリッド、トークンを使用します。
ラムス：徹底的	エッジケース、空/エラー/ローディング状態、長い文字列、細かいディテールはデザインの一部です。
ラムス：可能な限り最小のデザイン	本質まで削減し、次に本質が正しいことを確認します。
ヒックの法則	より少ない、グループ化された選択肢。ビューごとに1つのプライマリアクション、残りは段階的な開示。
フィッツの法則	頻繁で主要なターゲットは、ポインタ/サムがすでにある場所の近くに大きく配置します。最小約44pxのタッチターゲット（WCAG 2.2による24px CSSフロア）。
ヤコブの法則	使い慣れたパターン（ナビ配置、フォーム動作、アイコン）を使用します。斬新さには機能的な見返りが必要です。
ミラーの法則 / チャンキング	7項目を数えることに依存しないでください。情報を意味のあるチャンクにグループ化し、ワーキングセットを小さく保ちます。
認知負荷	今必要なものだけを表示します。画面をまたいで記憶させるのではなく、コンテキストを前方に運びます。
ドハティの閾値	約400ms以内に応答します。それを超える場合は、即時フィードバック、スケルトン、または楽観的更新を表示し、決して黙ってブロックしないでください。
テスラーの法則	複雑さは保存されます。それをシステム（デフォルト、推論、自動化）に吸収させ、公開することが目的でない限りユーザーに負わせないでください。
ポステルの法則	多様な入力（スペース、形式、大文字小文字）を受け入れ、一貫性のある厳格な出力を生成します。優しく検証し、正確に説明します。
ゲシュタルト：近接、共通領域、類似性、連結性	境界線の前に間隔でグループ化し、境界線の前にボックスでグループ化します。間隔は最も安価な構造です。同様の機能には同様の外観。
美的ユーザビリティ効果	洗練は物事を簡単に感じさせ、許容範囲を広げますが、実際のユーザビリティの欠の欠陥を隠す可能性があります。実際のタスクでテストし、欠陥のあるフローをリリースする理由として決して使用しないでください。
フォン・レストルフ効果	重要な1つのものを異なるものにします。すべてが強調されると、何も強調されなくなります。
系列位置効果、ピークエンドの法則	リストやフローでは主要な項目を最初と最後に配置し、最後のステップとエラーの瞬間を思いやりを持って扱います。
ツァイガルニク効果、目標勾配効果	マルチステップタスクで進捗を表示し、途中の作業を保存します。
タフテ：データインク比	チャートやテーブルでは、すべてのマークがデータを伝える必要があります。チャートジャンク、太いグリッド線、3D、冗長な凡例を削除し、直接ラベル付けします。
ノーマン：アフォーダンス、シグニファイア、フィードバック	コントロールは操作可能に見え、すべてのアクションは目に見える確認応答を得て、コントロールを効果にマッピングし、エラーを回復可能にします。
ヴィニェッリ / ミューラー＝ブロックマン	グリッド、小さなタイプスケール、少数の書体、一貫した間隔。制約が一貫性を生み出します。
ムナーリ / アイヒャー	最小限の手段で問題を解決し、単発ではなくシステムを重視し、発明するよりもコンポーネントを再利用します。
クルーグ	考えさせないでください。読むのではなくスキャンすることを想定します。明白さは賢さに勝ります。
ロブロフスキー	フォーム：より少ないフィールド、上揃えラベル、インライン検証、適切なデフォルト。モバイルファーストで優先順位が決まります。
フロスト（アトミックデザイン）	トークンを持つ小さな再利用可能な部品から構築し、一貫性は警戒心からではなくシステムから生まれます。
トニャッツィーニ	状態を可視化し、ユーザーの作業を保護し、インタラクションを元に戻せるようにし、直接操作を好み、キーボードパスを維持します。
アイブ / ラムスのクラフトマンシップ	オブジェクトが必然的に見えるまで詳細を解決します。素材の誠実さを装飾よりも優先します。

レビューチェックリスト

機能

• プライマリタスクは迅速に完了でき、プライマリアクションは明白です。
• すべての要素に名前を付けられる役割があり、装飾的なものは残っていません。
• すべてのインタラクティブ要素に、ホバー/フォーカス/アクティブ/無効/ローディング/エラー状態があります。
• 空、エラー、オフライン、低速、長文コンテンツのケースが設計されています。
• アクションは元に戻せるか、またはリスクに比例して確認されます。
• コピーは平易で、具体的で、アクション指向であり、エラーは何が起こったかとその修正方法を示します。
• 機能上の理由で別段の指示がない限り、使い慣れたパターンが使用されています。

形態（機能が合格した後にのみ）

• 明確な階層：ビューごとに1つの焦点があり、目を細めてテストに合格します。
• 一貫したグリッド、間隔スケール、タイプスケール、少数の書体とウェイト。
• 色は制限され、目的があり、決して唯一の意味の伝達手段ではありません。
• 配置とリズムは正確であり、「ほぼ」揃っているものはありません。

誠実さと寿命

• ダークパターン、偽の希少性、または誤解を招くアフォーダンスはありません。
• 一時的なトレンドに依存するものはありません。

アンチパターン

• 装飾：装飾的なグラデーション、シャドウ、イラスト、すべてのラベルの横にあるアイコン、すべての周りの境界線、コントラストを低下させる背景。
• 不必要な動き：タスクを遅らせるアニメーション、注目を集めるためのループ、パララックス。モーションは変更（原点、階層、状態）を説明するものでなければならず、UIフィードバックの場合は約200〜300ms以内に収める必要があります。prefers-reduced-motion を尊重します。
• ダークパターン：確信犯的恥辱、隠れたコスト、事前選択されたオプトイン、偽装広告、解約困難なパターン、ナグ、偽のカウントダウン、同等の結果に対して非対称な承諾/拒否ボタン。
• ミステリーミート：ラベルやツールチップのないアイコンのみのコントロール、目に見える代替手段のないジェスチャーのみのアクション。
• 選択肢の過剰提供：適切なデフォルトの代わりとなる設定とオプション。
• 再発明：カスタムスクロールバー、非標準のフォームコントロール、独自のための独自のナビゲーション。
• 強調のインフレ：すべてが太字、色付き、またはバッジ付き。
• スタイル優先コンテンツ：コンテンツが存在する前にコンテナを設計すること、ダミーテキストでの承認。
• ミニマリズムによる隠蔽：すっきり見せるためにラベル、アフォーダンス、状態を削除すること。ミニマルとは不可欠を意味し、欠落を意味しません。
• ショーケース優先：ポートフォリオのショットは見栄えが良いが、空の状態とエラー状態は空白。

ベースライン（交渉不可）

アクセシビリティ（WCAG 2.2 AA 最低限）

• テキストコントラスト 4.5:1（大きいテキストとUI境界/アイコンでは 3:1）。
• 完全なキーボード操作、論理的なフォーカス順序、可視のフォーカスインジケータ。
• セマンティックHTMLを優先し、ARIAはギャップを埋めるためにのみ使用します。すべての入力にラベル、意味のある画像に代替テキスト。
• 色だけで意味を伝えないでください。200%までのズームとテキストのリサイズを損失なくサポートします。
• prefers-reduced-motion と prefers-color-scheme を尊重します。1秒間に3回以上コンテンツがフラッシュしないでください。
• ターゲットは少なくとも24x24 CSS px、タッチでは44x44を目指します。

レスポンシブ

• コンテンツファーストかつモバイルファーストで設計し、レイアウトはコンテンツに適応し、ブレークポイントはデバイス名ではなくコンテンツが崩れる場所に設定します。
• 幅320pxで水平スクロールがないこと。相対単位、流動的なタイポグラフィ、min()/clamp()。
• 本文テキストは最低約16px、行長は約45〜75文字、行間は約1.4〜1.6。
• タッチとポインタの両方が機能し、ホバーだけが唯一のパスであってはなりません。

デザインとしてのパフォーマンス

• 速さは機能です：軽量アセット、レイアウトシフトなし、システムフォントまたは少数のウェブフォント、拡張前の意味のあるコンテンツ。

形態が先行してもよい場合（狭い例外）

形態が先行できるのは、機能に役立つ場合のみです。それぞれの使用は機能を明示しなければなりません：

• 認識：ブランドマーク、色、または人々が製品を識別し信頼するのに役立つ一貫したビジュアルシグネチャ。
• 信頼と信用：プロフェッショナルな洗練が欠如しているとリスクを示す場合（支払い、健康、セキュリティ）。
• 可読性とスキャン容易性：読み取りと検索を容易にするために選択されたタイポグラフィスケール、ホワイトスペース、コントラスト。
• タスクへの感情的な適合：気分が完了や快適さに影響を与える場合、文脈に合わせたトーン（医療用には落ち着いた、子供の学習用には遊び心のある）。
• 役割のある喜び：成功を確認したり、メカニズムを教えたりする、単一で短く、スキップ可能な瞬間（頻繁なパスやブロッキングパスでは決して使用しない）。
• アートディレクションが必要なコンテキスト：エディトリアル、マーケティング、ゲーム、ポートフォリオなど、体験自体が製品である場合。そこでも、ナビゲーション、読み取り、購入パスは機能優先のままです。

例外が「これはユーザーがXを行うのに役立つ」と述べられない場合、それは例外ではありません。

作業方法

1. ユーザー、タスク、制約を2〜3文で記述します。
2. まずコンテンツと構造（情報階層、フロー）、ビジュアルは最後。
3. 実際のコンテンツ、実際のデータ量、実際のエッジケースを使用します。
4. 最も明白な従来の解決策から始め、テストまたは明示されたニーズが正当化するものだけを追加します。
5. チェックリストでレビューし、追加する前に削除します。
6. デザイン決定を報告する際は、それが果たす機能を述べ、快適なオプションが機能を損なうために却下された場合は明示的に述べます。