Pinterest にインスパイアされたデザインシステム

Category: メディア・コンシューマー ビジュアル探索。レッドアクセント、マソングリッド、画像ファースト。

1. ビジュアルテーマと雰囲気

Pinterest のウェブサイトは、ビジュアル探索をライフスタイル誌のように演出する、温かくインスピレーション溢れるキャンバスです。デザインは柔らかくやや温かみのある白い背景を基調とし、Pinterest レッド（#e60023）を唯一の大胆なブランドアクセントとして使用しています。多くのテックプラットフォームのクールなブルーとは異なり、Pinterest のニュートラルスケールには明確な温かみが感じられます——グレーはクールなスチールではなく、オリーブ/サンドトーン（#91918c、#62625b、#e5e5e0）に傾いており、居心地よくクラフト感のある雰囲気を作り出し、ブラウジングへの誘いを高めています。

タイポグラフィには Pin Sans を使用しています——日本語フォントを含む幅広いフォールバックスタックを持つカスタムプロプライエタリフォントで、Pinterest のグローバルなリーチを反映しています。ディスプレイサイズ（70px、ウェイト 600）では、Pin Sans は大きく親しみやすいヘッドラインを生み出します。小さいサイズではシステムはコンパクトです：ボタン 12px、キャプション 12–14px。CSS 変数の命名システム（--comp-*、--sema-*、--base-*）は、洗練された3層のデザイントークンアーキテクチャを示しています：コンポーネントレベル、セマンティックレベル、ベースレベルのトークンです。

Pinterest の特徴は、寛大なボーダーラジウスシステム（12px–40px、円形には 50%）と温かみのあるボタン背景です。セカンダリボタン（#e5e5e0）はコールドグレーではなく、明確に温かみのあるサンドトーンを持ちます。プライマリレッドボタンは 16px のラジウスを使用——丸みがありますが、ピル形ではありません。温かみのあるバッジ背景（hsla(60,20%,98%,.5)——微妙なイエロー温色調）と写真主体のレイアウトを組み合わせることで、コーポレートでステリルではなく、手作り感があり個人的なデザインが生まれています。

主な特徴：

• オリーブ/サンドトーンのニュートラルカラーを持つ温かい白いキャンバス——居心地よく、クリニカルではない
• Pinterest レッド（#e60023）を唯一の大胆なアクセントとして——控えめにならず、常に自信に満ちている
• グローバルフォールバックスタック（CJK を含む）を持つ Pin Sans カスタムフォント
• 3層トークンアーキテクチャ：--comp-* / --sema-* / --base-*
• 温かみのあるセカンダリサーフェス：サンドグレー（#e5e5e0）、温かいバッジ（hsla(60,20%,98%,.5)）
• 寛大なボーダーラジウス：標準 16px、大きなコンテナには最大 40px
• 写真ファーストのコンテンツ——ピン/画像が主要なビジュアル要素
• ダークに近いパープルのテキスト（#211922）——温かみがあり、プラムのヒントを持つ

2. カラーパレットとロール

プライマリブランド

• Pinterest レッド（#e60023）：プライマリ CTA、ブランドアクセント——大胆で自信に満ちた赤
• グリーン 700（#103c25）：--base-color-green-700、成功/ネイチャーアクセント
• グリーン 700 ホバー（#0b2819）：--base-color-hover-green-700、プレスされたグリーン

テキスト

• プラムブラック（#211922）：プライマリテキスト——プラムのアンダートーンを持つ温かいニアブラック
• ブラック（#000000）：セカンダリテキスト、ボタンテキスト
• オリーブグレー（#62625b）：セカンダリ説明、ミュートテキスト
• ウォームシルバー（#91918c）：--comp-button-color-text-transparent-disabled、無効テキスト、入力ボーダー
• ホワイト（#ffffff）：ダーク/カラーサーフェス上のテキスト

インタラクティブ

• フォーカスブルー（#435ee5）：--comp-button-color-border-focus-outer-transparent、フォーカスリング
• パフォーマンスパープル（#6845ab）：--sema-color-hover-icon-performance-plus、パフォーマンス機能
• レコメンデーションパープル（#7e238b）：--sema-color-hover-text-recommendation、AI レコメンデーション
• リンクブルー（#2b48d4）：リンクテキストカラー
• Facebook ブルー（#0866ff）：--facebook-background-color、ソーシャルログイン
• プレストブルー（#617bff）：--base-color-pressed-blue-200、プレスした状態

サーフェスとボーダー

• サンドグレー（#e5e5e0）：セカンダリボタン背景——温かみがあり、クラフト感がある
• ウォームライト（#e0e0d9）：円形ボタン背景、バッジ
• ウォームウォッシュ（hsla(60, 20%, 98%, 0.5)）：--comp-badge-color-background-wash-light、微妙な温かいバッジ背景
• フォグ（#f6f6f3）：ライトサーフェス（50% 不透明度）
• ボーダー無効（#c8c8c1）：--sema-color-border-disabled、無効ボーダー
• ホバーグレー（#bcbcb3）：--base-color-hover-grayscale-150、ホバーボーダー
• ダークサーフェス（#33332e）：ダークセクションの背景

セマンティック

• エラーレッド（#9e0a0a）：チェックボックス/フォームエラー状態

3. タイポグラフィルール

フォントファミリー

• プライマリ：Pin Sans、フォールバック：-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial

階層

原則

• コンパクトなタイプスケール：範囲は 12px–70px で劇的なジャンプ——ほとんどの機能的テキストは 12–16px で、密度の高いアプリのような情報階層を作ります。
• 温かいウェイト分布：見出しに 600–700、ボディに 400–500。超軽量ウェイトなし——テキストは常に実質感があります。
• 見出しのネガティブトラッキング：28px 見出しの -1.2px により、居心地よく親密なセクションタイトルが生まれます。
• シングルフォントファミリー：Pin Sans がすべてを担当——セカンダリディスプレイやモノスペースフォントは検出されませんでした。

4. コンポーネントスタイリング

ボタン

プライマリレッド

• 背景：#e60023（Pinterest レッド）
• テキスト：#000000（黒——赤に対するコントラストとしては珍しい選択）
• パディング：6px 14px
• ラジウス：16px（寛大な丸み、ピル形ではない）
• ボーダー：2px solid rgba(255, 255, 255, 0)（透明）
• フォーカス：CSS 変数によるセマンティックボーダー + アウトライン

セカンダリサンド

• 背景：#e5e5e0（温かいサンドグレー）
• テキスト：#000000
• パディング：6px 14px
• ラジウス：16px
• フォーカス：同じセマンティックボーダーシステム

サーキュラーアクション

• 背景：#e0e0d9（ウォームライト）
• テキスト：#211922（プラムブラック）
• ラジウス：50%（円形）
• 用途：ピンアクション、ナビゲーションコントロール

ゴースト/トランスペアレント

• 背景：透明
• テキスト：#000000
• ボーダーなし
• 用途：第三のアクション

カードとコンテナ

• 寛大なラジウス（12px–20px）を持つ写真ファーストのピンカード
• ほとんどのカードに従来のボックスシャドウなし
• 白または温かいフォグ背景
• 一部の画像コンテナに 8px の白い太いボーダー

インプット

• メール入力：白い背景、1px solid #91918c ボーダー、16px ラジウス、11px 15px パディング
• フォーカス：CSS 変数によるセマンティックボーダー + アウトラインシステム

ナビゲーション

• 白または温かい背景上のクリーンなヘッダー
• Pinterest ロゴ + 検索バーを中央に
• ナビリンクに Pin Sans 16px
• アクティブ状態に Pinterest レッドアクセント

画像処理

• ピンスタイルのマソングリッド（Pinterest のシグネチャレイアウト）
• 画像の角丸：12px–20px
• 写真をプライマリコンテンツとして——すべてのピンは画像
• フィーチャード画像コンテナに太い白いボーダー（8px）

5. レイアウト原則

スペーシングシステム

• ベースユニット：8px
• スケール：4px、6px、7px、8px、10px、11px、12px、16px、18px、20px、22px、24px、32px、80px、100px
• 大きなジャンプ：セクション間隔に 32px → 80px → 100px

グリッドとコンテナ

• ピンコンテンツにマソングリッド（シグネチャレイアウト）
• 寛大な最大幅を持つ中央揃えのコンテンツセクション
• フルワイドのダークフッター
• プライマリナビゲーション要素としての検索バー

ホワイトスペース哲学

• インスピレーション密度：マソングリッドはピンをぎっしりと詰め込みます——コンテンツ密度自体が価値提案です。ホワイトスペースはグリッド内ではなく、セクション間に存在します。
• 上で呼吸し、下で密度を：ヒーロー/フィーチャーセクションには寛大なパディングを。ピングリッドはコンパクトでイマーシブ。

ボーダーラジウススケール

• スタンダード（12px）：小カード、リンク
• ボタン（16px）：ボタン、入力、中サイズカード
• コンフォータブル（20px）：フィーチャーカード
• ラージ（28px）：大きなコンテナ
• セクション（32px）：タブ要素、大パネル
• ヒーロー（40px）：ヒーローコンテナ、大型フィーチャーブロック
• サークル（50%）：アクションボタン、タブインジケーター

6. 奥行きと高さ

シャドウ哲学：Pinterest は最小限のシャドウを使用します。マソングリッドは、エレベーション効果ではなくコンテンツ（写真）に依存して視覚的な興味を作り出します。深度は、サーフェスカラーの温かみとコンテナの寛大な丸みから生まれます。

7. やること・やらないこと

やること

• 温かいニュートラル（#e5e5e0、#e0e0d9、#91918c）を使用する——温かいオリーブ/サンドトーンがアイデンティティ
• Pinterest レッド（#e60023）はプライマリ CTA のみに適用する——大胆でシングル
• Pin Sans のみを使用する——すべてに一つのフォント
• 寛大なボーダーラジウスを適用する：ボタン/入力に 16px、カードに 20px 以上
• マソングリッドを密に保つ——コンテンツ密度が価値
• 温かいバッジ背景（hsla(60,20%,98%,.5)）を微妙な温かいウォッシュに使用する
• プライマリテキストには #211922（プラムブラック）を使用する——純粋な黒より温かい

やらないこと

• クールなグレーのニュートラルを使用しない——常に温かい/オリーブトーン
• プライマリテキストに純粋な黒（#000000）を使用しない——プラムブラック（#211922）を使用する
• ピル形のボタンを使用しない——16px ラジウスは丸みがあるが、ピル形ではない
• 重いシャドウを追加しない——Pinterest はデザイン上フラットで、深度はコンテンツから
• カードに小さなボーダーラジウス（<12px）を使用しない——寛大な丸みが核心
• 追加のブランドカラーを導入しない——赤 + 温かいニュートラルが完全なパレット
• 細いフォントウェイトを使用しない——Pin Sans は最低 400

8. レスポンシブ動作

ブレークポイント

折りたたみ戦略

• ピングリッド：5+ カラム → 3 → 2 → 1
• ナビゲーション：検索バー + アイコン → 簡略化されたモバイルナビ
• フィーチャーセクション：サイドバイサイド → スタック
• ヒーロー：70px → 比例的にスケールダウン
• フッター：ダークマルチカラム → スタック

9. エージェントプロンプトガイド

クイックカラーリファレンス

• ブランド：Pinterest レッド（#e60023）
• 背景：ホワイト（#ffffff）
• テキスト：プラムブラック（#211922）
• セカンダリテキスト：オリーブグレー（#62625b）
• ボタンサーフェス：サンドグレー（#e5e5e0）
• ボーダー：ウォームシルバー（#91918c）
• フォーカス：フォーカスブルー（#435ee5）

コンポーネントプロンプト例

• 「ヒーローを作成：白い背景。ヘッドラインは 70px Pin Sans ウェイト 600、プラムブラック（#211922）。レッド CTA ボタン（#e60023、16px ラジウス、6px 14px パディング）。セカンダリサンドボタン（#e5e5e0、16px ラジウス）。」
• 「ピンカードをデザイン：白い背景、16px ラジウス、シャドウなし。写真が上部を埋め、下に 16px Pin Sans ウェイト 400 の説明、#62625b で。」
• 「円形アクションボタンを構築：#e0e0d9 背景、50% ラジウス、#211922 アイコン。」
• 「入力フィールドを作成：白い背景、1px solid #91918c、16px ラジウス、11px 15px パディング。フォーカス：セマンティックトークンによるブルーアウトライン。」
• 「ダークフッターをデザイン：#33332e 背景。白い Pinterest スクリプトロゴ。12px Pin Sans リンク、#91918c で。」

イテレーションガイド

1. いたるところに温かいニュートラル——オリーブ/サンドグレー、クールスチールは決して使わない
2. Pinterest レッドは CTA のみ——大胆でシングル
3. ボタン/入力に 16px ラジウス、カードに 20px 以上——寛大だがピル形ではない
4. Pin Sans が唯一のフォント——UI は 12px でコンパクト、ディスプレイは 70px
5. 写真がデザインを担う——UI は温かくミニマルを保つ
6. テキストにはプラムブラック（#211922）——純粋な黒より温かい