223 lines
17 KiB
Markdown
223 lines
17 KiB
Markdown
|
# Figmaにインスパイアされたデザインシステム
|
|||
|
|
|
|||
|
|
> Category: デザイン・クリエイティブ
|
|||
|
|
> コラボレーティブデザインツール。鮮やかなマルチカラー、遊び心と専門性を兼ね備えた表現。
|
|||
|
|
|
|||
|
|
## 1. ビジュアルテーマと雰囲気
|
|||
|
|
|
|||
|
|
Figmaのインターフェースは、自らをデザインしたデザインツールだ——カスタム可変フォント（figmaSans）が、極細（ウェイト320）からボールド（ウェイト700）まで、一般的なタイポグラフィシステムでは探求されることのない珍しい中間値（330、340、450、480、540）を経由しながら変調する、タイポグラフィの洗練さを極めた傑作である。この精緻なウェイト制御により、すべてのテキスト要素が正確に調整されたビジュアルウェイトを持ち、「レギュラーとボールド」という粗い手法ではなく、微細な差異によって階層構造が生まれる。
|
|||
|
|
|
|||
|
|
このページには興味深い二重性がある。インターフェースのクローム部分は厳密に白黒（検出される色は文字通り`#000000`と`#ffffff`のみ）なのに対し、ヒーローセクションとプロダクトショーケースは電気的なグリーン、鮮やかなイエロー、深みのあるパープル、ホットピンクといった鮮烈なマルチカラーグラデーションで溢れかえる。この分離により、デザインシステム自体は無色となり、プロダクトのカラフルなアウトプットをヒーローコンテンツとして扱っている。Figmaのマーケティングページはカラフルなアートをディスプレイするホワイトギャラリーの壁、といえるだろう。
|
|||
|
|
|
|||
|
|
可変フォントを超えてFigmaを際立たせるのは、円形とピル形のジオメトリだ。ボタンには50pxのラジウス（ピル）または50%（アイコンボタン用の完全な円）が用いられ、オーガニックでツールパレットのような質感を生み出している。破線のフォーカスインジケーター（`dashed 2px`）は、Figmaエディター自体のセレクションハンドルを参照した意図的なデザイン上の選択だ——ウェブサイトのUIランゲージがプロダクトのUIランゲージを引用している。
|
|||
|
|
|
|||
|
|
**Key Characteristics:**
|
|||
|
|
- カスタム可変フォント（figmaSans）、珍しいウェイト値：320、330、340、450、480、540、700
|
|||
|
|
- インターフェースクロームは厳密に白黒——カラーはプロダクトコンテンツにのみ存在する
|
|||
|
|
- figmaMonoを大文字の技術ラベルに使用し、ワイドなレタースペーシングを適用
|
|||
|
|
- ピル形（50px）と円形（50%）のボタンジオメトリ
|
|||
|
|
- Figmaエディターのセレクションハンドルを参照した破線フォーカスアウトライン
|
|||
|
|
- 鮮やかなマルチカラーヒーローグラデーション（グリーン、イエロー、パープル、ピンク）
|
|||
|
|
- OpenTypeの`"kern"`フィーチャーをグローバルに有効化
|
|||
|
|
- 全体にわたるネガティブレタースペーシング——ボディテキストでも-0.14pxから-0.26px
|
|||
|
|
|
|||
|
|
## 2. カラーパレットと役割
|
|||
|
|
|
|||
|
|
### プライマリ
|
|||
|
|
- **ピュアブラック** (`#000000`): すべてのテキスト、すべてのソリッドボタン、すべてのボーダー。インターフェースの唯一の「カラー」。
|
|||
|
|
- **ピュアホワイト** (`#ffffff`): すべての背景、ホワイトボタン、ダーク面上のテキスト。バイナリのもう一方。
|
|||
|
|
|
|||
|
|
*注記：Figmaのマーケティングサイトは、インターフェースレイヤーにこの2色のみを使用している。すべての鮮やかな色は、プロダクトのスクリーンショット、ヒーローグラデーション、埋め込みコンテンツにのみ現れる。*
|
|||
|
|
|
|||
|
|
### サーフェスと背景
|
|||
|
|
- **ピュアホワイト** (`#ffffff`): メインページの背景とカードのサーフェス。
|
|||
|
|
- **グラスブラック** (`rgba(0, 0, 0, 0.08)`): セカンダリの円形ボタンとグラスエフェクトのための微細なダークオーバーレイ。
|
|||
|
|
- **グラスホワイト** (`rgba(255, 255, 255, 0.16)`): ダーク・カラード面上のボタン用フロストグラスオーバーレイ。
|
|||
|
|
|
|||
|
|
### グラデーションシステム
|
|||
|
|
- **ヒーローグラデーション**: 電気的なグリーン、鮮やかなイエロー、深みのあるパープル、ホットピンクを使用した鮮烈なマルチストップグラデーション。このグラデーションはヒーローセクションのビジュアルシグネチャであり、ツールのクリエイティブな可能性を表現している。
|
|||
|
|
- **プロダクトセクショングラデーション**: 各プロダクトエリア（Design、Dev Mode、Prototyping）は、ショーケースで固有のカラーテーマを使用する場合がある。
|
|||
|
|
|
|||
|
|
## 3. タイポグラフィルール
|
|||
|
|
|
|||
|
|
### フォントファミリー
|
|||
|
|
- **プライマリ**: `figmaSans`、フォールバック: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
|
|||
|
|
- **モノスペース / ラベル**: `figmaMono`、フォールバック: `figmaMono Fallback, SF Mono, menlo`
|
|||
|
|
|
|||
|
|
### 階層
|
|||
|
|
|
|||
|
|
| 役割 | フォント | サイズ | ウェイト | 行高 | レタースペーシング | 備考 |
|
|||
|
|
|------|------|------|--------|-------------|----------------|-------|
|
|||
|
|
| ディスプレイ / ヒーロー | figmaSans | 86px (5.38rem) | 400 | 1.00（タイト） | -1.72px | 最大インパクト、極端なトラッキング |
|
|||
|
|
| セクション見出し | figmaSans | 64px (4rem) | 400 | 1.10（タイト） | -0.96px | フィーチャーセクションのタイトル |
|
|||
|
|
| サブ見出し | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 強調されたセクションテキスト |
|
|||
|
|
| サブ見出しライト | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | ライトウェイトのセクションテキスト |
|
|||
|
|
| フィーチャータイトル | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | ボールドなカード見出し |
|
|||
|
|
| ボディラージ | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | 説明文、イントロ |
|
|||
|
|
| ボディ / ボタン | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | 標準ボディ、ナビ、ボタン |
|
|||
|
|
| ボディライト | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | ライトウェイトのボディテキスト |
|
|||
|
|
| モノラベル | figmaMono | 18px (1.13rem) | 400 | 1.30（タイト） | 0.54px | 大文字のセクションラベル |
|
|||
|
|
| モノスモール | figmaMono | 12px (0.75rem) | 400 | 1.00（タイト） | 0.6px | 大文字の極小タグ |
|
|||
|
|
|
|||
|
|
### 原則
|
|||
|
|
- **可変フォントの精密さ**: figmaSansは多くのシステムが扱わないウェイト値——320、330、340、450、480、540——を使用する。これにより、劇的なジャンプではなく微細なウェイト差によって階層構造が生まれる。330と340の差はほぼ知覚不可能だが、構造的には重要である。
|
|||
|
|
- **ライトをベースに**: ほとんどのボディテキストは320〜340（典型的な400「レギュラー」より軽い）を使用し、デザインツールの美学に合致した、エーテリアルで軽やかな読書体験を生み出している。
|
|||
|
|
- **どこでもカーン**: すべてのテキスト要素でOpenTypeの`"kern"`フィーチャーを有効にする——カーニングはオプションではなく、構造的な要素だ。
|
|||
|
|
- **ネガティブトラッキングをデフォルトに**: ボディテキストでも-0.1pxから-0.26pxのレタースペーシングを使用し、全体的にタイトなテキストを実現する。ディスプレイテキストはさらに-0.96px、-1.72pxまで圧縮される。
|
|||
|
|
- **構造にはモノ**: figmaMonoを大文字でポジティブなレタースペーシング（0.54px〜0.6px）とともに使用することで、技術的な道標ラベルを生み出す。
|
|||
|
|
|
|||
|
|
## 4. コンポーネントスタイリング
|
|||
|
|
|
|||
|
|
### ボタン
|
|||
|
|
|
|||
|
|
**ブラックソリッド（ピル）**
|
|||
|
|
- 背景: ピュアブラック (`#000000`)
|
|||
|
|
- テキスト: ピュアホワイト (`#ffffff`)
|
|||
|
|
- ラジウス: アイコンボタンには円形（50%）
|
|||
|
|
- フォーカス: 破線2pxアウトライン
|
|||
|
|
- 最大エンファシス
|
|||
|
|
|
|||
|
|
**ホワイトピル**
|
|||
|
|
- 背景: ピュアホワイト (`#ffffff`)
|
|||
|
|
- テキスト: ピュアブラック (`#000000`)
|
|||
|
|
- パディング: 8px 18px 10px（非対称の垂直方向）
|
|||
|
|
- ラジウス: ピル（50px）
|
|||
|
|
- フォーカス: 破線2pxアウトライン
|
|||
|
|
- ダーク・カラードサーフェス上の標準CTA
|
|||
|
|
|
|||
|
|
**グラスダーク**
|
|||
|
|
- 背景: `rgba(0, 0, 0, 0.08)` （微細なダークオーバーレイ）
|
|||
|
|
- テキスト: ピュアブラック
|
|||
|
|
- ラジウス: 円形（50%）
|
|||
|
|
- フォーカス: 破線2pxアウトライン
|
|||
|
|
- ライトサーフェス上のセカンダリアクション
|
|||
|
|
|
|||
|
|
**グラスライト**
|
|||
|
|
- 背景: `rgba(255, 255, 255, 0.16)` （フロストグラス）
|
|||
|
|
- テキスト: ピュアホワイト
|
|||
|
|
- ラジウス: 円形（50%）
|
|||
|
|
- フォーカス: 破線2pxアウトライン
|
|||
|
|
- ダーク・カラードサーフェス上のセカンダリアクション
|
|||
|
|
|
|||
|
|
### カードとコンテナ
|
|||
|
|
- 背景: ピュアホワイト
|
|||
|
|
- ボーダー: なし、または最小限
|
|||
|
|
- ラジウス: 6px（小コンテナ）、8px（画像、カード、ダイアログ）
|
|||
|
|
- シャドウ: 微細から中程度のエレベーションエフェクト
|
|||
|
|
- プロダクトスクリーンショットをカードコンテンツとして使用
|
|||
|
|
|
|||
|
|
### ナビゲーション
|
|||
|
|
- ホワイト上のクリーンな水平ナビ
|
|||
|
|
- ロゴ: ブラックのFigmaワードマーク
|
|||
|
|
- プロダクトタブ: ピル形（50px）のタブナビゲーション
|
|||
|
|
- リンク: ブラックテキスト、1px下線デコレーション
|
|||
|
|
- CTA: ブラックピルボタン
|
|||
|
|
- ホバー: CSS変数によるテキストカラー
|
|||
|
|
|
|||
|
|
### 特徴的なコンポーネント
|
|||
|
|
|
|||
|
|
**プロダクトタブバー**
|
|||
|
|
- 水平ピル形タブ（50pxラジウス）
|
|||
|
|
- 各タブはFigmaのプロダクトエリアを表す（Design、Dev Mode、Prototypingなど）
|
|||
|
|
- アクティブタブをハイライト表示
|
|||
|
|
|
|||
|
|
**ヒーローグラデーションセクション**
|
|||
|
|
- 全幅の鮮やかなマルチカラーグラデーション背景
|
|||
|
|
- 86pxディスプレイ見出しのホワイトテキストオーバーレイ
|
|||
|
|
- グラデーション内にフローティングするプロダクトスクリーンショット
|
|||
|
|
|
|||
|
|
**破線フォーカスインジケーター**
|
|||
|
|
- すべてのインタラクティブ要素でフォーカス時に`dashed 2px`アウトラインを使用
|
|||
|
|
- Figmaエディターのセレクションハンドルを参照
|
|||
|
|
- ウェブサイトとプロダクトをつなぐメタデザイン上の選択
|
|||
|
|
|
|||
|
|
## 5. レイアウトの原則
|
|||
|
|
|
|||
|
|
### スペーシングシステム
|
|||
|
|
- ベースユニット: 8px
|
|||
|
|
- スケール: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
|
|||
|
|
|
|||
|
|
### グリッドとコンテナ
|
|||
|
|
- 最大コンテナ幅: 1920pxまで
|
|||
|
|
- ヒーロー: 中央配置コンテンツの全幅グラデーション
|
|||
|
|
- プロダクトセクション: 交互に並ぶショーケース
|
|||
|
|
- フッター: ダークの全幅セクション
|
|||
|
|
- 559pxから1920pxまでレスポンシブ対応
|
|||
|
|
|
|||
|
|
### ホワイトスペースの哲学
|
|||
|
|
- **ギャラリーのようなペーシング**: 余裕のあるスペーシングにより、各プロダクトセクションが独自の展示として息づく。
|
|||
|
|
- **カラーセクションを視覚的な息継ぎに**: グラデーションのヒーローとプロダクトショーケースが、モノクロームのインターフェースセクション間にクロマティックな安らぎを提供する。
|
|||
|
|
|
|||
|
|
### ボーダーラジウスのスケール
|
|||
|
|
- 最小（2px）: 小さなリンク要素
|
|||
|
|
- 微細（6px）: 小コンテナ、区切り線
|
|||
|
|
- 快適（8px）: カード、画像、ダイアログ
|
|||
|
|
- ピル（50px）: タブボタン、CTA
|
|||
|
|
- 円形（50%）: アイコンボタン、円形要素
|
|||
|
|
|
|||
|
|
## 6. 奥行きとエレベーション
|
|||
|
|
|
|||
|
|
| レベル | 処理 | 用途 |
|
|||
|
|
|-------|-----------|-----|
|
|||
|
|
| フラット（レベル0） | シャドウなし | ページ背景、ほとんどのテキスト |
|
|||
|
|
| サーフェス（レベル1） | グラデーション・ダークセクション上のホワイトカード | カード、プロダクトショーケース |
|
|||
|
|
| エレベーテッド（レベル2） | 微細なシャドウ | フローティングカード、ホバー状態 |
|
|||
|
|
|
|||
|
|
**シャドウの哲学**: Figmaはシャドウを控えめに使用する。主要な奥行きのメカニズムは**背景のコントラスト**（カラフル・ダークセクション上のホワイトコンテンツ）と、プロダクトスクリーンショット自体が持つ固有の立体感だ。
|
|||
|
|
|
|||
|
|
## 7. すべきこととすべきでないこと
|
|||
|
|
|
|||
|
|
### すべきこと
|
|||
|
|
- figmaSansを精密な可変ウェイト（320〜540）で使用する——粒度の細かいウェイト制御こそがデザインそのものだ
|
|||
|
|
- インターフェースを厳密に白黒に保つ——カラーはプロダクトコンテンツからのみもたらされる
|
|||
|
|
- すべてのインタラクティブ要素にピル（50px）と円形（50%）のジオメトリを使用する
|
|||
|
|
- 破線2pxフォーカスアウトラインを適用する——シグネチャとなるアクセシビリティパターン
|
|||
|
|
- すべてのテキストで`"kern"`フィーチャーを有効にする
|
|||
|
|
- figmaMonoをラベルに大文字・ポジティブレタースペーシングで使用する
|
|||
|
|
- 全体にネガティブレタースペーシングを適用する（-0.1pxから-1.72px）
|
|||
|
|
|
|||
|
|
### すべきでないこと
|
|||
|
|
- インターフェースにカラーを追加しない——モノクロームパレットは絶対的なものだ
|
|||
|
|
- 標準フォントウェイト（400、500、600、700）を使用しない——可変フォント固有の値（320、330、340、450、480、540）を使用する
|
|||
|
|
- ボタンにシャープなコーナーを使用しない——ピルと円形のジオメトリのみ
|
|||
|
|
- ソリッドフォーカスアウトラインを使用しない——破線がシグネチャだ
|
|||
|
|
- ボディのフォントウェイトを450以上に上げない——ライトウェイトの美学がコアだ
|
|||
|
|
- ボディテキストにポジティブなレタースペーシングを使用しない——常にネガティブであるべきだ
|
|||
|
|
|
|||
|
|
## 8. レスポンシブ挙動
|
|||
|
|
|
|||
|
|
### ブレークポイント
|
|||
|
|
| 名前 | 幅 | 主な変更 |
|
|||
|
|
|------|-------|-------------|
|
|||
|
|
| スモールモバイル | <560px | コンパクトレイアウト、スタック |
|
|||
|
|
| タブレット | 560–768px | マイナーな調整 |
|
|||
|
|
| スモールデスクトップ | 768–960px | 2カラムレイアウト |
|
|||
|
|
| デスクトップ | 960–1280px | 標準レイアウト |
|
|||
|
|
| ラージデスクトップ | 1280–1440px | 拡張 |
|
|||
|
|
| ウルトラワイド | 1440–1920px | 最大幅 |
|
|||
|
|
|
|||
|
|
### 折りたたみ戦略
|
|||
|
|
- ヒーローテキスト: 86px → 64px → 48px
|
|||
|
|
- プロダクトタブ: モバイルで水平スクロール
|
|||
|
|
- フィーチャーセクション: スタックされた単一カラム
|
|||
|
|
- フッター: 複数カラム → スタック
|
|||
|
|
|
|||
|
|
## 9. エージェントプロンプトガイド
|
|||
|
|
|
|||
|
|
### クイックカラーリファレンス
|
|||
|
|
- すべて: 「ピュアブラック（#000000）」と「ピュアホワイト（#ffffff）」
|
|||
|
|
- グラスダーク: 「rgba(0, 0, 0, 0.08)」
|
|||
|
|
- グラスライト: 「rgba(255, 255, 255, 0.16)」
|
|||
|
|
|
|||
|
|
### コンポーネントプロンプトの例
|
|||
|
|
- 「鮮やかなマルチカラーグラデーション（グリーン、イエロー、パープル、ピンク）上にヒーローを作成する。ヘッドラインは86px figmaSans ウェイト400、行高1.0、レタースペーシング-1.72px。ホワイトテキスト。ホワイトピルCTAボタン（50pxラジウス、8px 18pxパディング）。」
|
|||
|
|
- 「ピル形ボタン（50pxラジウス）のプロダクトタブバーをデザインする。アクティブ: ブラック背景、ホワイトテキスト。非アクティブ: 透明、ブラックテキスト。figmaSans 20px ウェイト480。」
|
|||
|
|
- 「セクションラベルを作成する: figmaMono 18px、大文字、レタースペーシング0.54px、ブラックテキスト。カーン有効。」
|
|||
|
|
- 「ボディテキストを20px figmaSans ウェイト330、行高1.40、レタースペーシング-0.14pxで作成する。ホワイト上のピュアブラック。」
|
|||
|
|
|
|||
|
|
### イテレーションガイド
|
|||
|
|
1. 可変フォントのウェイト値を精密に使用する: 320、330、340、450、480、540、700
|
|||
|
|
2. インターフェースは常にブラック＋ホワイト——クロームにカラーを追加しない
|
|||
|
|
3. フォーカスアウトラインは破線、ソリッドではない
|
|||
|
|
4. ボディのレタースペーシングは常にネガティブ、モノラベルは常にポジティブ
|
|||
|
|
5. ボタン・タブにはピル（50px）、アイコンボタンには円形（50%）
|