design-elevation

デザインの洗練システム

このスキルは、体系的なデザイン思考と洗練のプロトコルを適用することで、機能的なビジュアル出力を洗練されたプロフェッショナルなデザインへと変換します。

デザイン哲学

Alla Kholmatova のデザインシステムのフレームワークに従います。すべてのデザイン上の決定は、機能的パターン（ユーザーが操作するもの――構造、レイアウト、コンポーネント）か、知覚的パターン（感じられ方――色、タイポグラフィ、余白、モーション）のいずれかです。どちらのレイヤーも意図的に設計する必要があります。

標準デザイントークン：Tailwind CSS

すべてのデザイン上の決定は、共通のデザイン言語である Tailwind CSS に対応させます。具体的には、次のようにします。

• Tailwind のパレットから色を選びます（gray、blue、emerald、amber、rose、violet など）
• Tailwind のスケールから余白を選びます（1 = 0.25rem/4px、2 = 0.5rem/8px、4 = 1rem/16px など）
• Tailwind のタイプスケールを使います（text-xs から text-9xl まで）
• Tailwind のシステムから角丸を選びます（rounded-sm から rounded-2xl まで）
• Tailwind のエレベーションからシャドウを選びます（shadow-sm から shadow-2xl まで）

CSS または HTML を記述するときは、Tailwind のユーティリティクラスを使用します。プレゼンテーションやドキュメントなど、ほかの形式向けにデザイントークンを定義する場合は、Tailwind の値を対象の媒体に合わせて変換します。

適用プロトコル

あらゆるビジュアル出力を作成するときは、次の手順に従います。

1. 機能から始める — まず動作するバージョンを作成します
2. 機能的パターンを定義する — ユーザーが操作するものは何か、構造はどうするかを決めます。references/grid-systems.md を使用します
3. 知覚的パターンを定義する — どのような印象にするか、どのような個性を持たせるかを決めます。references/elevation-protocol.md を使用します
4. 問い直す — references/design-interrogation.md を使って、すべての既定の選択肢を検討します
5. 手法で洗練させる — references/technique-catalog.md の具体的な手法を使用します
6. データビジュアライゼーションを磨く — グラフやデータがある場合は、references/data-visualization.md を適用します
7. 最終確認を行う — テンプレートではなく、手作業で丁寧に作られた印象になっていることを確認します

出力形式ごとの機能的パターン

プレゼンテーション（PPTX）の場合

• 装飾ではなく、情報の階層から始めます
• references/grid-systems.md のグリッドシステムを適用します
• 1 スライドにつき 1 つのアイデアにします。2 つのアイデアが必要なら、スライドを 2 枚にします
• スライドの流れに沿って、複雑さを段階的に高めます

ダッシュボードとデータビジュアライゼーションの場合

• グラフの種類ではなく、データの関係性から始めます
• references/data-visualization.md の Tufte のデータインク比を適用します
• 構成：KPI バー → メインのグラフ → 補助グラフ → 詳細テーブル
• 4 つ以上のカテゴリーを比較する場合は、複数系列のグラフよりスモールマルチプルを使用します
• データ以外の要素には Tailwind のグレースケールを標準で使用し、色はデータ用に確保します

ドキュメントとレポートの場合

• 明確なタイポグラフィ階層で構成します
• references/grid-systems.md のドキュメント用グリッドを適用します
• 一貫したサイズ設定のために Tailwind のタイプスケールを使用します

Web/HTML アーティファクトの場合

• レスポンシブグリッドを基盤にしてデザインします（Tailwind の grid/flex ユーティリティ）
• Tailwind のユーティリティクラスを直接使用します
• アニメーションは控えめにし、標準として transition-all duration-200 ease-out を適用します

知覚的パターン

優れたタイポグラフィ

Tailwind のタイプスケールを基盤として、次の調整を加えます。

• UI には font-sans（Inter/system）、エディトリアルな用途には font-serif を使用します
• ディスプレイテキスト（text-3xl 以上）には tracking-tight を適用します
• 本文には leading-relaxed を適用します
• 強調には font-bold より控えめな階層を作れる font-semibold を使用します
• データ内の数値には、常に tabular-nums を使用します
• スケールの選択については、references/typography-scales.md を参照します

洗練された配色

Tailwind のパレットを信頼できる基準とします。

• gray のニュートラルカラーをベースにします（純粋な黒や白は使いません）
• 主要テキストには text-gray-900、二次テキストには text-gray-500、三次テキストには text-gray-400 を使用します
• 背景には bg-white または bg-gray-50 を使用し、真っ白な背景に真っ黒な文字を組み合わせないようにします
• アクセントカラーは、Tailwind のパレットから 1 色だけ選びます（blue、emerald、violet など）
• 60-30-10 の比率を適用します：ニュートラルカラー 60％、二次色 30％、アクセントカラー 10％
• システム全体については、references/color-systems.md を参照します

空間システム

Tailwind のスペーシングスケールでリズムを整えます：

• 基本単位：ほとんどの UI で 4（1rem / 16px）
• コンポーネントのパディング：p-4 ～ p-6（16～24px）
• セクションの間隔：py-12 ～ py-20（48～80px）
• ギャップ：詰める場合は gap-4、ゆとりを持たせる場合は gap-6、広く取る場合は gap-8
• Tailwind のスペーシングスケールのみを使用し、任意の値は使いません
• パターンについては references/spacing-systems.md を参照してください

ビジュアルの仕上げ

• 角丸：カードのデフォルトは rounded-lg、ボタンは rounded-md
• 境界線：カードをさりげなく区切るには border border-gray-100
• シャドウ：カードには shadow-sm、モーダル／オーバーレイには shadow-lg を使用します
• ホバー状態：インタラクティブ要素には hover:bg-gray-50
• トランジション：デフォルトは transition-colors duration-150

デザインの好例

これらはシステムそのものではなく、原則を示す例として使用してください。システムは Tailwind と Kholmatova のフレームワークです。これらの例から、優れたデザインがどのようなものかを確認できます：

• Stripe：洗練されたグラデーション、精密なタイポグラフィ、美しく表現された技術的なコンテンツ
• Linear：卓越したダークモード、キーボード優先、ミニマルで精密
• Apple：スケールのコントラスト、写真の統合、高級感を生む抑制
• Swiss/International Style：グリッドの規律、客観的な明瞭さ、数学的な間隔
• IBM Carbon：シャープな角（半径 0px）、IBM Plex フォントファミリー、2x グリッド、4 種類のテーマ構成
• Shopify Polaris：マーチャントに優しい、温かみのあるニュートラルカラー、ダークなプライマリボタン、本文 13px、角丸カード
• Adobe Spectrum：4 種類のカラーテーマ、2 種類のスケールモード、3 層のトークン構成、クリエイティブツールのパターン
• Salesforce Lightning：CRM に最適化、ブランドブルー #0176d3、slds- ユーティリティクラス、レコード詳細のパターン

取り入れる具体的なテクニックについては references/design-exemplars.md を参照してください。

IBM Carbon の上書き

IBM 製品向けに構築する場合、または Carbon のスタイルが指定されている場合は、Carbon のトークンが Tailwind のデフォルトを上書きします：

• フォント：IBM Plex Sans（Inter ではありません）、本文は 14px
• プライマリ：#0f62fe Blue 60（Tailwind blue-600 ではありません）
• 角丸：すべて 0（rounded-lg ではありません）— Carbon を象徴するシャープな角
• テキスト：#161616 Gray 100（Tailwind gray-900 ではありません）
• レイヤー：奥行きを出すため、白と gray-10（#f4f4f4）を交互に使用
• 詳細は references/carbon-design-system.md を参照してください

Shopify Polaris の上書き

Shopify アプリ向けに構築する場合、または Polaris のスタイルが指定されている場合は、Polaris のトークンが Tailwind のデフォルトを上書きします：

• フォント：Inter、本文は 13px（16px ではありません）
• プライマリボタン：ダークな #303030（青ではありません！）
• インタラクティブ要素／リンク：#005bd3
• ページ背景：#f1f1f1（白ではありません）
• 角丸：カードは 8px、ボタンは 6px
• 詳細は references/polaris-design-system.md を参照してください

Adobe Spectrum の上書き

Adobe 製品向けに構築する場合、または Spectrum のスタイルが指定されている場合は、Spectrum のトークンが Tailwind のデフォルトを上書きします：

• フォント：Adobe Clean / Source Sans Pro、本文は 14px
• アクセント：#0D80D8（ライト）／#2A9AF4（ダーク）
• 角丸：コントロールは 4px、カードは 8px
• 4 種類のテーマ：Lightest、Light、Dark、Darkest
• 2 種類のスケール：Medium（デスクトップ）、Large（タッチ）
• 詳細は references/spectrum-design-system.md を参照してください

Salesforce Lightning の上書き

Salesforce アプリ向けに構築する場合、または Lightning／SLDS のスタイルが指定されている場合は、SLDS のトークンが Tailwind のデフォルトを上書きします：

• フォント：Salesforce Sans、本文は 13px
• ブランド：#0176d3（Tailwind blue-600 ではありません）
• 角丸：すべて 4px（0.25rem）
• テキスト：#181818（Tailwind gray-900 ではありません）
• slds- プレフィックスのユーティリティクラスを使用
• 詳細は references/lightning-design-system.md を参照してください

重要なデザインの工夫（クイックリファレンス）

意図が感じられるデザインにする

• #000000 を text-gray-900 に置き換えます
• 背景の #ffffff を bg-gray-50 に置き換えます
• 角丸を混在させず、一貫して rounded-lg を使用します
• 全体を通して 1 つのスペーシングスケールを適用します

プレミアムな印象にする

• 余白をたっぷり取る — ヒーローセクションには p-8 または p-12
• ディスプレイテキストの字間を詰める：tracking-tight
• 色付きのシャドウを使う：黒ではなく shadow-blue-500/10
• 控えめなボーダーにする：border-gray-300 ではなく border-gray-100

すっきりした印象にする

• ボーダーを取り除き、余白で区切る
• 1つの画面で使う文字サイズを最大2〜3種類に抑える
• アクセントカラーは1色にする
• 補足テキストには、小さい文字サイズではなく text-gray-500 を使う

データをわかりやすく見せる

• タイトルにはグラフの種類ではなく、明らかになった内容を示す
• 凡例ではなく、データに直接ラベルを付ける
• 重要度の低い系列はグレーアウトする
• すべての数値列に tabular-nums を適用する
• 出典表記には text-xs text-gray-400 を使う

リソース読み込みの優先順位

効率よく作業するため、次の順序でリソースを読み込みます。

1. references/elevation-protocol.md — 必ず最初に読み込む
2. references/data-visualization.md — データやグラフを扱う場合に読み込む
3. references/technique-catalog.md — 特定のテクニックを使う場合に読み込む
4. references/design-interrogation.md — 品質を確認する場合に読み込む
5. references/carbon-design-system.md — IBM／Carbon のスタイリングを求められた場合に読み込む
6. references/polaris-design-system.md — Shopify／Polaris のスタイリングを求められた場合に読み込む
7. references/spectrum-design-system.md — Adobe／Spectrum のスタイリングを求められた場合に読み込む
8. references/lightning-design-system.md — Salesforce／Lightning のスタイリングを求められた場合に読み込む
9. 必要に応じて、色、タイポグラフィ、余白、グリッドなど、コンテキストに応じたリファレンスを読み込む

出力基準

納品するすべてのビジュアルで、次の点を満たします。

• Tailwind のデザイントークン（またはそれに相当するもの）を一貫して使う
• 明確な機能パターン（構造、階層、インタラクション）を示す
• 一貫性のある視覚パターン（色、文字、余白、モーション）を表現する
• データの整合性を保つ（データがある場合は、Tufte の原則に従う）
• デフォルトのままではなく、意図を持ってデザインされている
• 大胆さと節度のバランスを取る

サイレント実行

明示的に求められない限り、デザインに関する検討はすべて内部で行います。ユーザーに提示するのは、磨き上げた成果物だけです。HTML／CSS ではコードコメントに、プレゼンテーションでは発表者ノートにデザイン上の判断を記録しますが、求められない限りプロセスは説明しません。

優れたデザインは、正しく仕上がれば意識されません。ユーザーには、努力の跡を見せることなく品質を感じてもらうべきです。