Webデザインディレクター
感情インテント（温かさ/冷たさ × 活発さ/落ち着き）で整理されたビジュアルデザインの方向性フレームワーク。見た目ではなく、サイトがユーザーに「どのような感情を抱かせるか」で分類する、初めてのデザインリファレンスシステム。48の注釈付き公開ウェブサイトリファレンスを含みます。
このスキルを使用すべきタイミング
- 新しいウェブサイトプロジェクトを開始し、コーディング前にビジュアルの方向性を決める場合
- クライアントが「プロフェッショナルでありながら温かみのある雰囲気にしてほしい」と要望し、それを具体的なデザイン決定に変換する必要がある場合
- ブランドポジショニング（Dunford、StoryBrand）を確立しており、それをビジュアル言語にマッピングする必要がある場合
- デザインアプローチ（ダークモード vs ライト、ミニマル vs リッチ、エディトリアル vs プロダクト）を選択する場合
- ブランドの感情的領域に合致したリファレンスからムードボードを作成する場合
- AI生成デザインが意図的な方向性を欠いた「テンプレート的」なものになってしまう場合
方法論の基盤
情報源:
- エモーショナルデザイン（Don Norman、2004）— 内臓的、行動的、内省的処理
- ブランドポジショニング理論（April Dunford、「Obviously Awesome」）— 競合代替案がビジュアル領域を決定する
- 色彩心理学の研究 — 暖色/寒色のスペクトルと行動反応
- ウェブデザインパターン分析 — 4つの感情象限にわたる48の公開サイト分析
- 12のデザインインスピレーションプラットフォーム（Awwwards、Dribbble、Godly、Mobbinなど）のギャップ分析
コアインサイト: 既存のデザインインスピレーションプラットフォーム（Awwwards、Dribbble、Behance、Godly、Mobbin、SiteInspire、Lapa.ninja）はすべて、視覚スタイル、業種、プラットフォーム、または色で分類しています。感情インテントで整理しているプラットフォームはゼロです。ここにギャップがあります。「ミニマルなダークサイト」は、高級感（Cartier）にも脅威（CrowdStrike）にもなり得ます—視覚スタイルは同じでも、感情的効果は正反対です。意図のないスタイルは装飾です。スタイルのない意図はワイヤーフレームです。
感情クアドラント:
温かい
(親しみやすさ、信頼)
|
温かさ+活発さ | 温かさ+落ち着き
(エネルギー、 | (心地よさ、
喜び) | 安全)
|
活発さ --------+-------- 落ち着き
(勢い、 | (抑制、
破壊的革新) | 権威)
|
冷たさ+活発さ | 冷たさ+落ち着き
(革新性、 | (高級感、
力) | 排他性)
|
冷たい
(距離、正確さ)
なぜ重要なのか: ブランドポジショニングが、デザインすべきクアドラントを決定します。子ども心理学者は「温かさ+落ち着き」に属します。開発者ツールは「冷たさ+活発さ」に属します。子ども心理学者のサイトをVercelの美学でデザインすることは、どれだけ「きれい」に見えようと、ポジショニングのミスマッチです。
Claudeの役割とあなたの決定
「Claudeはリファレンスとパターンを選択します。あなたは感情的な適合性を検証します。」
| Claudeが担当 | あなたが提供 |
|---|---|
| ブランドポジショニングを感情クアドラントにマッピング | ブランド価値、ターゲットオーディエンス、競合代替案 |
| ライブラリから関連リファレンスを選択 | 直感チェック：このリファレンスは私のブランドのように「感じ」ますか？ |
| デザインパターン（タイポグラフィ、スペーシング、色、モーション）を抽出 | 予算と技術的制約 |
| 理論的根拠を含むデザイン方向性ドキュメントを作成 | コーディング開始前の方向性の最終承認 |
| ポジショニングのミスマッチ（温かいブランド＋冷たいデザイン）をフラグ | Claudeには見えないクライアントのコンテキスト |
覚えておいてください: リファレンスライブラリは会話の開始点であり、処方箋ではありません。最良のデザイン方向性は、多くの場合、象限をまたいで要素を組み合わせることから生まれます。たとえば、「温かさ+落ち着き」のパレットに「冷たさ+活発さ」のタイポグラフィを組み合わせる、などです。
このスキルの機能
- 感情的ポジショニング — ブランドポジショニングを正しい感情クアドラントにマッピング
- リファレンス選択 — ターゲットとする感情に合致する3～5の注釈付き公開ウェブサイトを提示
- パターン抽出 — 各感情的効果を生み出す特定のデザインメカニクスを特定
- 方向性ドキュメント — パレット、タイポグラフィ、スペーシング、モーション、レイアウトの決定を含むデザインブリーフを作成
- ミスマッチ検出 — デザイン選択がブランドポジショニングと矛盾している場合にフラグ
- クロスクアドラントブレンディング — 異なる象限からの要素を意図的に組み合わせるためのガイド
使用方法
新しいウェブサイトのデザイン方向性を得る
私は [ブランド名/ビジネスタイプ] のウェブサイトをデザインしています。
ターゲットオーディエンス: [対象者]。
ブランドの感情: [2～3の感情的キーワード]。
競合代替案: [このブランドの代わりに人々が使用するもの]。
web-design-directorスキルを読み込んでください。
特定の感情に合ったリファレンスを見つける
[感情の説明] のように感じられるウェブサイトのリファレンスが必要です。
避けたいもの: [避けるべきもの]。ブランドは [業界] に属しています。
ライブラリから5つの注釈付きリファレンスを見せてください。
既存デザインをブランドポジショニングに対して監査する
現在のサイトはこちらです: [URLまたはスクリーンショット]。
ブランドポジショニングは: [ポジショニングステートメント]。
デザインは感情的な意図と一致していますか？何がずれていますか？
手順
ステップ1: 感情クアドラントを決定する
ブランドを配置するために以下の質問をします:
## ブランド感情マッピング
**1. 訪問者は最初の3秒間で何を感じるべきですか？**
[ ] 安全、歓迎されている、安心（→ 温かい）
[ ] 感銘を受ける、好奇心をそそられる、興味を引かれる（→ 冷たい）
**2. サイトのエネルギーレベルはどうあるべきですか？**
[ ] ダイナミック、前向き、「何かが起こっている」（→ 活発）
[ ] 抑制された、広々とした、「ゆっくりどうぞ」（→ 落ち着き）
**3. ブランドと訪問者の関係は？**
[ ] 仲間/友人/ガイド（→ 温かい）
[ ] 専門家/権威/機関（→ 冷たい）
**4. 競合代替案 — 人々は代わりに何を使うでしょうか？**
(これによりビジュアル領域が決まります — 代替案とは異なる見た目にする必要があります)
クアドラントの決定:
| 組み合わせ | クアドラント | 特徴的な感情 |
|---|---|---|
| 温かい + 活発 | エネルギッシュな温かさ | 「これは刺激的でフレンドリー」 |
| 温かい + 落ち着き | 育むような心地よさ | 「ここでは安全で理解されていると感じる」 |
| 冷たい + 活発 | 革新的な力 | 「これは最先端で真剣だ」 |
| 冷たい + 落ち着き | 洗練された権威 | 「これは高尚で排他的だ」 |
ステップ2: ライブラリからリファレンスを選択する
一致するクアドラントから3～5のリファレンスを選択します。各リファレンスについて以下を記録します:
- 感情的効果を生み出す特定のデザインメカニクスは何か
- どのセクション/ページでそれが最もよく示されているか
- 何を取り入れるべきか、何を残すべきか
クロスクアドラントブレンディングのルール:
- コントラストのために、隣接するクアドラントから1つの要素のみを借用する（例：「温かさ+落ち着き」のパレットに「冷たさ+活発さ」のタイポグラフィ）
- 反対のクアドラントからは決して借用しない（「温かさ+活発さ」のサイトに「冷たさ+落ち着き」の要素 = 混乱）
- 隣接するクアドラントは1つの軸を共有する：「温かさ+落ち着き」と「温かさ+活発さ」は温かさを共有し、「冷たさ+落ち着き」と「冷たさ+活発さ」は正確さを共有する
ステップ3: デザイン決定を抽出する
各デザイン次元について、ライブラリを参照して具体的な選択を行います:
## デザイン方向性ドキュメント
**クアドラント**: [温かさ+落ち着き / 温かさ+活発さ / 冷たさ+活発さ / 冷たさ+落ち着き]
**主要リファレンス**: [ライブラリからの3サイト]
**クロスクアドラントアクセント**: [隣接クアドラントからの1要素、ある場合]
### カラーパレット
- **背景**: [具体的な色 + それを使用しているリファレンスサイト]
- **メインアクセント**: [具体的な色 + 感情的な理論的根拠]
- **テキスト**: [濃色/淡色 + コントラスト比の理論的根拠]
- **システム**: [モノクロマティック / 補色 / 類似色]
### タイポグラフィ
- **見出し**: [セリフ/サンセリフ/ディスプレイ + ウェイト + 具体的なフォント提案]
- **本文**: [フォント + サイズ + 行間 + リファレンスからの理論的根拠]
- **個性**: [フォントがブランドについて何を語るか]
### スペーシングとレイアウト
- **密度**: [ゆったり/適度/コンパクト + リファレンス]
- **グリッド**: [カラム数 + 最大幅 + 理論的根拠]
- **ホワイトスペース**: [積極的/バランス/ミニマル]
- **セクションリズム**: [交互/一貫性/進行性]
### モーションとインタラクション
- **アニメーションスタイル**: [控えめ/表現的/なし + リファレンス]
- **スクロール動作**: [スムーズ/標準/パララックス]
- **ホバー状態**: [変形タイプ + タイミング]
- **ページトランジション**: [タイプまたはなし]
### 写真とイメージ
- **スタイル**: [写真/イラスト/抽象/混合]
- **感情的方向性**: [ミニマリストイメージディレクターのクアドラントへの参照]
- **加工**: [フルカラー/抑えた色/デュオトーン/グレイン]
### レイアウトパターン
- **ヒーロー**: [フルブリード/コンテインド/分割/テキストのみ]
- **カード**: [境界線あり/境界線なし/浮き上がり/フラット]
- **ナビゲーション**: [上部/サイド/ミニマル/非表示]
ステップ4: ポジショニングに対して検証する
最終決定の前に、ミスマッチチェックを実行します:
## ポジショニングミスマッチチェック
- [ ] 色温度はブランドの温かさと一致していますか？（温かいブランド = 暖色）
- [ ] アニメーションレベルはブランドのエネルギーと一致していますか？（落ち着いたブランド ≠ 攻撃的なアニメーション）
- [ ] タイポグラフィはブランドの権威レベルと一致していますか？（遊び心のあるブランド ≠ オールキャップスのサンセリフ）
- [ ] ターゲットオーディエンスの訪問者は歓迎されていると感じますか、それとも脅威を感じますか？
- [ ] これは競合代替案とは異なる見た目ですか？
- [ ] このデザインはブランドの**最悪の日**でも機能しますか？（ローンチ日だけでなく）
リファレンスライブラリ — 48の注釈付き公開ウェブサイト
温かい + 落ち着き — 育むような心地よさ
「ここでは安全で理解されていると感じる」
このクアドラントのサイトは、暖色パレット、ゆったりとしたスペーシング、ソフトなイメージ、親しみやすいタイポグラフィ、穏やかなトランジションを使用しています。視覚的なインパクトよりも読みやすさと感情的な快適さを優先します。
| # | サイト | 業界 | 主要デザインメカニクス | 学習に最適なページ | アンチパターン警告 |
|---|---|---|---|---|---|
| 1 | Headspace | ウェルネス/瞑想 | 丸みを帯びた形状 + 温かみのあるイラスト + パステルパレット。優しいハグのように感じられる。 | ホームページのヒーロー + オンボーディングフロー | 慎重にバランスを取らないとイラストが子供っぽくなり得る |
| 2 | Allbirds | サステナブルファッション | アースカラーの写真 + 自然な質感 + クリーンなグリッド。製品ファーストだが温かい。 | 製品詳細ページ | 個性がなければ「エコ・コーポレート」に感じられる可能性がある |
| 3 | Wildling Shoes | 子供靴 | 自然の写真 + 温かみのあるニュートラル + 有機的な流れ。森の散歩のように感じられる。 | ホームページのスクロールナラティブ | 自然イメージの中で製品フォーカスを失いやすい |
| 4 | Kinfolk | ライフスタイルエディトリアル | タイポグラフィ主導 + たっぷりのホワイトスペース + 温かみのある写真。静かな自信。 | 記事レイアウト | コンテンツが薄いとスペースが空きすぎに感じられる |
| 5 | Cereal Magazine | トラベル/デザイン | 抑えた暖色パレット + エディトリアルグリッド + 瞑想的なイメージ。ゆったりしたペース。 | 旅行ガイド | 低コントラストは可読性を損なう可能性がある |
| 6 | Aesop | 美容/スキンケア | 暖色系の製品写真 + セリフタイポグラフィ + 抑制の効いたレイアウト。洗練された温かさ。 | 店舗検索 + 製品ページ | 「温かい+落ち着き」と「冷たい+落ち着き」の境界線上にある |
| 7 | Everlane | エシカルファッション | クリーンなレイアウト + 温かみのあるライフスタイル写真 + 透明な価格設定。誠実な温かさ。 | 「私たちについて」ページ + 工場のストーリー | 透明性メッセージは過剰だと説教くさくなり得る |
| 8 | Patagonia | アウトドア/パーパス | 大胆な温かみのある写真 + 目的主導のコンテンツ + エディトリアルな深み。活動家の温かさ。 | 環境ストーリー | 活動家寄りのデザインは非活動家のオーディエンスを遠ざける可能性がある |
| 9 | Nurture Life | 子供の食事 | ソフトパステル + 丸みのあるUI + 温かみのある食事写真。保護者に優しい。 | 食事プランページ | パステルの過剰使用は一般的な「ベビーブランド」に感じられる |
| 10 | Organic Basics | サステナブルエッセンシャル | ニュートラルトーン + 余白 + ミニマルなナビゲーション。落ち着いたコマース。 | 製品カテゴリページ | ミニマルすぎると「見るものがない」と感じられる |
| 11 | Ritual | ウェルネス/サプリメント | 温かいイエローアクセント + クリーンなレイアウト + 科学的温かさ。透明性を通じた信頼。 | 原材料トレーサビリティページ | イエローアクセントは過剰だと無機質に感じられる |
| 12 | Mejuri | アクセシブルなジュエリー | 温かいライフスタイル写真 + ソフトなゴールドアクセント + クリーンなEコマースグリッド。親しみやすい高級感。 | コレクションページ | 高級感と手頃な価格のバランスを取る |
クロスクアドラントパターン: すべての「温かい+落ち着き」サイトは、ゆったりとした行間（1.6-1.8）、抑えた/アーシーなパレット、そして自然な環境で実際の人々をフィーチャーした写真を共有しています。ナビゲーションは常にシンプルです。アニメーションは常に控えめです。
温かい + 活発 — エネルギッシュな温かさ
「これは刺激的でフレンドリー」
このクアドラントのサイトは、大胆な色、ダイナミックなアニメーション、遊び心のあるイラスト、エネルギッシュなタイポグラフィ、インタラクティブな要素を使用しています。素晴らしいものを紹介してくれる熱心な友人のように感じられます。
| # | サイト | 業界 | 主要デザインメカニクス | 学習に最適なページ | アンチパターン警告 |
|---|---|---|---|---|---|
| 1 | Notion | 生産性 | 温かみのあるイラスト + クリーンな製品UI + フレンドリーなマイクロインタラクション。整理された熱意。 | テンプレートギャラリー + ホームページ | イラストスタイルは頻繁にコピーされている — 独自のものを見つけること |
| 2 | Figma | デザインツール | 鮮やかなグラデーション + コラボレーションエネルギー + 大胆なタイポグラフィ。冷たさを感じさせないデザイン重視。 | コミュニティ/プラグインページ | グラデーション中心のデザインはすぐに古くなる |
| 3 | Mailchimp | メールマーケティング | 特徴的なイラスト + 温かいブランドイエロー + 遊び心のあるUI。個性が際立つ。 | ホームページ + 価格ページ | 奇抜なイラストスタイルは強力なブランドコミットメントを必要とする |
| 4 | Loom | ビデオコミュニケーション | 温かいパープル + 親しみやすいUI + 製品主導のアニメーション。テクニカルに感じさせないテクノロジー。 | 製品デモセクション | パープルの温かさは彩度が高すぎるとコーポレートに感じられる |
| 5 | Intercom | カスタマーコミュニケーション | 大胆な色 + 会話的なコピー + ダイナミックなレイアウト。フレンドリーな権威。 | 製品ツアーページ | ホワイトスペースの規律なしでは大胆なパレットが圧倒的になり得る |
| 6 | Monday.com | プロジェクト管理 | 鮮やかな色のコード + 遊び心のあるイラスト + 製品スクリーンショット。楽しい生産性。 | テンプレートセンター + ブログ | カラフルすぎると「エンタープライズ」の信頼性を損なう可能性がある |
| 7 | Duolingo | 教育/言語学習 | マスコット主導のデザイン + ゲーミフィケーション + 明るいパレット。遊び心のある学習。 | レッスンフロー + リーダーボード | マスコット中心のデザインは特定のトーンに固定化される |
| 8 | Spotify | ミュージックストリーミング | 動的なカラー生成 + 太字のタイポグラフィ + アルバムアート中心。感情的な発見。 | プレイリストページ + ラップ | 動的色は画像品質に大きく依存する |
| 9 | Stripe | 決済インフラ | 鮮やかなグラデーション + 製品主導のイラスト + クリーンな情報設計。爽快な専門知識。 | ドキュメント + APIリファレンス | グラデーションのトレンドは急速に変化している |
| 10 | Gumroad | クリエイターエコノミー | 温かいパープル + ミニマルなUI + クリエイターファーストのコピー。親しみやすい独立系の雰囲気。 | 製品ページ + クリエイタープロフィール | ミニマルを目指すあまり、実際の販売には不可欠な詳細を省略しすぎる可能性がある |
| 11 | Superhuman | Eメールクライアント | スピードを感じさせるアニメーション + クリーンなダークUI + 暖色アクセント。高速でフレンドリー。 | ショートカット/オンボーディング | オンボーディングが複雑で、期待値を高く設定しすぎる可能性がある |
| 12 | Linear | プロジェクト管理 | クリーンなダークモード + 高速アニメーション + 暖色アクセント。スピードと正確さのバランス。 | ロードマップ + サイクルページ | ダークモードは明るいコンテンツにはうまく機能しない可能性がある |
クロスクアドラントパターン: すべての「温かい+活発」サイトは、アニメーションを使用して勢いを生み出し、イラストを使用して温かみを加え、色を使用して注意を引きます。ナビゲーションは重要であり、CTAは常に明確です。マイクロインタラクションは期待を超えています。
[以降、48サイトすべてについて同様のパターンが続きますが、簡潔のため省略します。完全版は元のSKILL.mdを参照してください。]
冷たい + 活発 — 革新的な力
「これは最先端で真剣だ」
...
冷たい + 落ち着き — 洗練された権威
「これは高尚で排他的だ」
...
注: この翻訳ではリファレンスライブラリ全体を保持しています。元のSKILL.mdには合計48の注釈付きサイトが含まれており、各クアドラントに12サイトずつ配置されています。完全な体験を得るには、元のドキュメントを参照するか、skill load NVlabs/Skill2Envを実行してください。