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

Category: メディア＆コンシューマー エンタープライズ技術。Carbonデザインシステム、構造化されたブルーパレット。

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

IBMのウェブサイトは、Carbonデザインシステムの上に構築されたエンタープライズ権威のデジタル体現です。このデザイン言語は極めて体系的に構造化されており、まるでウェブページとして描画されたエンジニアリング仕様書のように読めます。ページは鮮明な二元性で動作します。明るい白（#ffffff）のキャンバスと、ほぼ黒（#161616）のテキスト、そして唯一の揺るぎないアクセント——IBMブルー60（#0f62fe）。これはスタートアップ的なポップなミニマリズムではなく、企業の精密さをピクセルに凝縮したものです。すべての要素はCarbonの厳格な2xグリッドの中に存在し、すべての色はセマンティックトークンにマッピングされ、すべてのスペーシング値は8pxベースユニットにスナップします。

IBM Plexタイプファミリーはこのシステムの骨格です。ライトウェイト（300）のIBM Plex Sansをディスプレイ見出しに使用すると、大きなサイズで予想外に軽やかで、ほぼ繊細な質感が生まれます。これはIBMの企業的重厚さへの意図的なカウンターポイントです。ボディサイズでは、14pxキャプションに0.16pxのレタースペーシングを持つレギュラーウェイト（400）が、細部にわたるマイクロトラッキングを導入し、Carbonのテキストを設計されたものではなく、エンジニアリングされたものに感じさせます。IBM Plex Monoはコード、データ、技術ラベルに使用され、稀にしか使われないIBM Plex Serifとともにファミリーの三位一体を完成させます。

IBM のビジュアルアイデンティティを「モノクローム＋ブルー」を超えて定義するのは、Carbonのコンポーネントトークンシステムへの依存です。すべてのインタラクティブな状態は、--cds-（Carbon Design System）プレフィックスを持つCSSカスタムプロパティにマッピングされます。ボタンはハードコードされた色を持ちません。--cds-button-primary、--cds-button-primary-hover、--cds-button-primary-activeを参照します。このトークン化されたアーキテクチャは、ビジュアルレイヤー全体が深く体系化された基盤の上の薄いスキンであることを意味します——設計における型付けのしっかりしたAPIのようなものです。

主な特徴：

• ディスプレイサイズにはIBM Plex Sansウェイト300（ライト）——タイポグラフィの抑制による企業の重厚感
• コードとテクニカルコンテンツにはIBM Plex Mono、小サイズで一貫した0.16pxレタースペーシング
• 単一アクセントカラー：IBMブルー60（#0f62fe）——すべてのインタラクティブ要素、すべてのCTA、すべてのリンク
• Carbon トークンシステム（--cds-*）がすべてのセマンティックカラーを駆動し、変数レベルでのテーマ切り替えを可能に
• 8pxスペーシンググリッドに厳格に準拠——任意の値なし、すべて整列
• #f4f4f4グレー10サーフェス上のフラットでボーダーレスなカード——影ではなく背景色のレイヤリングで奥行きを表現
• ボトムボーダーインプット（ボックス型ではない）——Carbonフォームの象徴的なパターン
• プライマリボタンのボーダー半径0px——一切の柔らかさなし、妥協なき矩形

2. カラーパレット＆役割

プライマリ

• IBMブルー60（#0f62fe）：唯一のインタラクティブカラー。プライマリボタン、リンク、フォーカス状態、アクティブインジケーター。これはコアUIパレット中の唯一の有彩色です。
• ホワイト（#ffffff）：ページ背景、カードサーフェス、ブルー上のボタンテキスト、--cds-background。
• グレー100（#161616）：プライマリテキスト、見出し、ダークサーフェス背景、ナビバー、フッター。--cds-text-primary。

ニュートラルスケール（グレーファミリー）

• グレー100（#161616）：プライマリテキスト、見出し、ダークUIクロム、フッター背景。
• グレー90（#262626）：セカンダリダークサーフェス、ダーク背景上のホバー状態。
• グレー80（#393939）：ターシャリダーク、アクティブ状態。
• グレー70（#525252）：セカンダリテキスト、ヘルパーテキスト、説明文。--cds-text-secondary。
• グレー60（#6f6f6f）：プレースホルダーテキスト、無効テキスト。
• グレー50（#8d8d8d）：無効アイコン、ミュートラベル。
• グレー30（#c6c6c6）：ボーダー、ディバイダーライン、インプットボトムボーダー。--cds-border-subtle。
• グレー20（#e0e0e0）：サブトルボーダー、カードアウトライン。
• グレー10（#f4f4f4）：セカンダリサーフェス背景、カードフィル、交互行。--cds-layer-01。
• グレー10ホバー（#e8e8e8）：グレー10サーフェスのホバー状態。

インタラクティブ

• ブルー60（#0f62fe）：プライマリインタラクティブ——ボタン、リンク、フォーカス。--cds-link-primary、--cds-button-primary。
• ブルー70（#0043ce）：リンクホバー状態。--cds-link-primary-hover。
• ブルー80（#002d9c）：ブルー要素のアクティブ/プレス状態。
• ブルー10（#edf5ff）：ブルーティントサーフェス、選択行の背景。
• フォーカスブルー（#0f62fe）：--cds-focus — フォーカス要素上の2pxインセットボーダー。
• フォーカスインセット（#ffffff）：--cds-focus-inset — ダーク背景上のフォーカス用白内リング。

サポート＆ステータス

• レッド60（#da1e28）：エラー、危険。--cds-support-error。
• グリーン50（#24a148）：成功。--cds-support-success。
• イエロー30（#f1c21b）：警告。--cds-support-warning。
• ブルー60（#0f62fe）：情報。--cds-support-info。

ダークテーマ（グレー100テーマ）

• 背景：グレー100（#161616）。--cds-background。
• レイヤー01：グレー90（#262626）。カードとコンテナサーフェス。
• レイヤー02：グレー80（#393939）。昇格サーフェス。
• プライマリテキスト：グレー10（#f4f4f4）。--cds-text-primary。
• セカンダリテキスト：グレー30（#c6c6c6）。--cds-text-secondary。
• サブトルボーダー：グレー80（#393939）。--cds-border-subtle。
• インタラクティブ：ブルー40（#78a9ff）。コントラスト確保のためリンクとインタラクティブ要素は明るくなります。

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

フォントファミリー

• プライマリ：IBM Plex Sans、フォールバック：Helvetica Neue, Arial, sans-serif
• モノスペース：IBM Plex Mono、フォールバック：Menlo, Courier, monospace
• セリフ（限定使用）：IBM Plex Serif、エディトリアル/表現的なコンテキスト用
• アイコンフォント：ibm_icons — 20pxの専用アイコングリフ

階層

原則

• ディスプレイサイズではライトウェイト：Carbonの表現型タイプセットは42px以上でウェイト300（ライト）を使用します。これは独特の緊張感を生み出します——コンテンツは企業の権威をもって語りかける一方、レターフォームはタイポグラフィの軽やかさでささやきます。
• 小サイズでのマイクロトラッキング：14pxで0.16pxのレタースペーシング、12pxで0.32px。これらのわずかな値は、コンパクトなサイズでの可読性に対するCarbonの秘密兵器です——密なIBM Plexのレターフォームをちょうどよく開きます。
• 3つの機能的ウェイト：300（ディスプレイ/表現的）、400（ボディ/読み取り）、600（強調/UIラベル）。ウェイト700は本番タイプスケールから意図的に除外されています。
• プロダクティブvs.エクスプレッシブ：プロダクティブセットは密なUIのためにタイトな行高（1.29）を使用します。エクスプレッシブセットはマーケティングやエディトリアルコンテンツのために余白を持たせます（1.40-1.50）。

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

ボタン

プライマリボタン（ブルー）

• 背景：#0f62fe（ブルー60）→ --cds-button-primary
• テキスト：#ffffff（ホワイト）
• パディング：14px 63px 14px 15px（非対称——末尾アイコン用スペース）
• ボーダー：1px solid transparent
• ボーダー半径：0px（シャープな矩形——Carbonのシグネチャ）
• 高さ：48px（デフォルト）、40px（コンパクト）、64px（エクスプレッシブ）
• ホバー：#0353e9（ブルー60ホバー）→ --cds-button-primary-hover
• アクティブ：#002d9c（ブルー80）→ --cds-button-primary-active
• フォーカス：2px solid #0f62feインセット + 1px solid #ffffffインナー

セカンダリボタン（グレー）

• 背景：#393939（グレー80）
• テキスト：#ffffff
• ホバー：#4c4c4c（グレー70）
• アクティブ：#6f6f6f（グレー60）
• プライマリと同じパディング/半径

ターシャリボタン（ゴーストブルー）

• 背景：transparent
• テキスト：#0f62fe（ブルー60）
• ボーダー：1px solid #0f62fe
• ホバー：#0353e9テキスト + ブルー10背景ティント
• ボーダー半径：0px

ゴーストボタン

• 背景：transparent
• テキスト：#0f62fe（ブルー60）
• パディング：14px 16px
• ボーダー：なし
• ホバー：#e8e8e8背景ティント

デンジャーボタン

• 背景：#da1e28（レッド60）
• テキスト：#ffffff
• ホバー：#b81921（レッド70）

カード＆コンテナ

• 背景：ホワイトテーマで#ffffff、昇格カードで#f4f4f4（グレー10）
• ボーダー：なし（フラットデザイン——ほとんどのカードにボーダーや影なし）
• ボーダー半径：0px（矩形ボタンの美学に合わせて）
• ホバー：クリッカブルカードは背景が#e8e8e8（グレー10ホバー）にシフト
• コンテンツパディング：16px
• 区切り：影ではなく背景色レイヤリング（白 → グレー10 → 白）

インプット＆フォーム

• 背景：#f4f4f4（グレー10）— --cds-field
• テキスト：#161616（グレー100）
• パディング：0px 16px（水平のみ）
• 高さ：40px（デフォルト）、48px（ラージ）
• ボーダー：サイド/トップなし — ボトム2px solid transparent
• ボトムボーダーアクティブ：2px solid #161616（グレー100）
• フォーカス：2px solid #0f62fe（ブルー60）ボトムボーダー — --cds-focus
• エラー：2px solid #da1e28（レッド60）ボトムボーダー
• ラベル：12px IBM Plex Sans、0.32pxレタースペーシング、グレー70
• ヘルパーテキスト：12px、グレー60
• プレースホルダー：グレー60（#6f6f6f）
• ボーダー半径：0px（トップ）——インプットはシャープコーナー

ナビゲーション

• 背景：#161616（グレー100）— 全幅ダークマストヘッド
• 高さ：48px
• ロゴ：IBM 8バーロゴ、ダーク上のホワイト、左揃え
• リンク：14px IBM Plex Sans、ウェイト400、#c6c6c6（グレー30）デフォルト
• リンクホバー：#ffffffテキスト
• アクティブリンク：ボトムボーダーインジケーター付き#ffffff
• プラットフォームスイッチャー：左揃え水平タブ
• 検索：アイコントリガーのスライドアウト検索フィールド
• モバイル：左スライドパネル付きハンバーガー

リンク

• デフォルト：#0f62fe（ブルー60）、アンダーラインなし
• ホバー：#0043ce（ブルー70）、アンダーライン付き
• 訪問済み：ブルー60のまま（訪問済み状態の変化なし）
• インラインリンク：本文中はデフォルトでアンダーライン

特徴的なコンポーネント

コンテンツブロック（ヒーロー/フィーチャー）

• 全幅で白/グレー10背景帯が交互に
• 60pxまたは48pxディスプレイタイプで左揃えの見出し
• 矢印アイコン付きブループライマリボタンをCTAとして
• 画像/イラストはモバイルで右揃えまたは下部に

タイル（クリッカブルカード）

• 背景：#f4f4f4または#ffffff
• 全幅ボトムボーダーまたはホバー時の背景シフト
• ホバー時に右下に矢印アイコン
• 影なし——フラットさがアイデンティティ

タグ/ラベル

• 背景：10%不透明度のコンテキスト色（例：ブルー10、レッド10）
• テキスト：対応する60グレードカラー
• パディング：4px 8px
• ボーダー半径：24px（ピル——0pxルールの例外）
• フォント：12px ウェイト400

通知バナー

• 全幅バー、通常ブルー60またはグレー100の背景
• ホワイトテキスト、14px
• 閉じる/消すアイコンを右揃え

5. レイアウト原則

スペーシングシステム

• ベースユニット：8px（Carbon 2xグリッド）
• コンポーネントスペーシングスケール：2px、4px、8px、12px、16px、24px、32px、40px、48px
• レイアウトスペーシングスケール：16px、24px、32px、48px、64px、80px、96px、160px
• ミニユニット：8px（最小使用可能スペーシング）
• コンポーネント内パディング：通常16px
• カード/タイル間のギャップ：1px（ヘアライン）または16px（標準）

グリッド＆コンテナ

• 16カラムグリッド（Carbonの2xグリッドシステム）
• 最大コンテンツ幅：1584px（最大ブレークポイント）
• カラムガター：32px（モバイル16px）
• マージン：16px（モバイル）、32px（タブレット以上）
• コンテンツは読みやすい行長のため通常8〜12カラムにまたがる
• 全幅セクションと制限コンテンツが交互に

ホワイトスペース哲学

• 機能的密度：Carbonは広大なホワイトスペースよりもプロダクティブな密度を好みます。セクションはコンシューマーデザインシステムと比べてタイトに詰まっています——これはIBMのエンタープライズDNAを反映しています。
• 背景色ゾーニング：セクション間に大きなパディングを置く代わりに、IBMは交互の背景色（白 → グレー10 → 白）を使用して最小限の縦スペースで視覚的な区切りを作ります。
• 一定の48pxリズム：主要セクションの遷移には48pxの縦スペーシングを使用します。ヒーローセクションは80px–96pxを使用する場合があります。

ボーダー半径スケール

• 0px：プライマリボタン、インプット、タイル、カード——支配的なトリートメント。Carbonは根本的に矩形です。
• 2px：小さなインタラクティブ要素（タグ）に時々使用
• 24px：タグ/ラベル（ピル形——唯一の丸みある例外）
• 50%：アバターサークル、アイコンコンテナ

6. 深度＆エレベーション

影の哲学：Carbonは意図的に影を避けます。IBMは主に背景色のレイヤリングで奥行きを実現します——影を追加するのではなく、徐々に暗くなるグレーのサーフェスを積み重ねます。これにより、階層が模擬光ではなく色の値で伝えられる、フラットで印刷物インスパイアの美学が生まれます。影はコンテンツの上に本当に浮かんでいる要素（ドロップダウン、ツールチップ、モーダル）にのみ使われます。この抑制により、稀な影が意味のあるインパクトを持ちます——Carbonで何かが浮かんでいるとき、それは重要です。

7. すべきこと・避けること

すべきこと

• ディスプレイサイズ（42px以上）にはIBM Plex Sansのウェイト300を使用——軽やかさは意図的なもの
• 14pxボディテキストに0.16pxのレタースペーシング、12pxキャプションに0.32pxを適用
• ボタン、インプット、カード、タイルには0pxのボーダー半径——矩形がシステムの言語
• 実装時には--cds-*トークン名を参照（例：--cds-button-primary、--cds-text-primary）
• 影ではなく背景色レイヤリング（白 → グレー10 → グレー20）で奥行きを表現
• インプットフィールドのインジケーターにはボトムボーダー（ボックスではない）を使用
• 48pxのデフォルトボタン高さとアイコン対応のための非対称パディングを維持
• ブルー60（#0f62fe）を唯一のアクセントカラーとして適用——一つのブルーですべてを制する

避けること

• ボタンのコーナーを丸めない——0px半径がCarbonのアイデンティティ
• カードやタイルに影を使わない——フラットさが重要
• 追加のアクセントカラーを導入しない——IBMのシステムはモノクローム＋ブルー
• ウェイト700（ボールド）を使わない——スケールは600（セミボールド）まで
• ディスプレイサイズのテキストにレタースペーシングを追加しない——トラッキングは14px以下のみ
• フルボーダーでインプットをボックス化しない——Carbonのインプットはボトムボーダーのみ
• グラデーション背景を使わない——IBMのサーフェスはフラットなソリッドカラー
• 8pxスペーシンググリッドから逸脱しない——すべての値は8で割り切れるべき（微調整には2pxと4px）

8. レスポンシブ動作

ブレークポイント

タッチターゲット

• ボタン高さ：48pxデフォルト、最小40px（コンパクト）
• ナビゲーションリンク：タッチ用48px行高
• インプット高さ：40pxデフォルト、48pxラージ
• アイコンボタン：48px正方形タッチターゲット
• モバイルメニュー項目：全幅48px行

折りたたみ戦略

• ヒーロー：ビューポートが縮まるにつれ60pxディスプレイ → 42px → 32px見出し
• ナビゲーション：全水平マストヘッド → スライドアウトパネル付きハンバーガー
• グリッド：4カラム → 2カラム → シングルカラム
• タイル/カード：水平グリッド → 垂直スタック
• 画像：アスペクト比を維持、max-width 100%
• フッター：マルチカラムリンクグループ → スタックシングルカラム
• セクションパディング：48px → 32px → 16px

画像の動作

• max-width: 100%のレスポンシブ画像
• 製品イラストは比率を維持して拡縮
• ヒーロー画像はサイドバイサイドからスタック下部にシフトする場合も
• データビジュアライゼーションはモバイルでアスペクト比を維持し水平スクロール

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

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

• プライマリCTA：IBMブルー60（#0f62fe）
• 背景：ホワイト（#ffffff）
• 見出しテキスト：グレー100（#161616）
• ボディテキスト：グレー100（#161616）
• セカンダリテキスト：グレー70（#525252）
• サーフェス/カード：グレー10（#f4f4f4）
• ボーダー：グレー30（#c6c6c6）
• リンク：ブルー60（#0f62fe）
• リンクホバー：ブルー70（#0043ce）
• フォーカスリング：ブルー60（#0f62fe）
• エラー：レッド60（#da1e28）
• 成功：グリーン50（#24a148）

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

• “白背景にヒーローセクションを作成。60px IBM Plex Sansウェイト300の見出し、行高1.17、色#161616。16pxウェイト400の副見出し、行高1.50、色#525252、最大幅640px。ブルーCTAボタン（#0f62fe背景、#ffffff テキスト、0pxボーダー半径、48px高さ、14px 63px 14px 15pxパディング）。”
• “カードタイルをデザイン：#f4f4f4背景、0pxボーダー半径、16pxパディング。タイトルは20px IBM Plex Sansウェイト600、行高1.40、色#161616。ボディは14pxウェイト400、レタースペーシング0.16px、行高1.29、色#525252。ホバー時：背景が#e8e8e8にシフト。”
• “フォームフィールドを構築：#f4f4f4背景、0pxボーダー半径、40px高さ、16px水平パディング。上部ラベルは12pxウェイト400、レタースペーシング0.32px、色#525252。ボトムボーダー：デフォルト2px solid transparent、フォーカス時2px solid #0f62fe。プレースホルダー：#6f6f6f。”
• “ダークナビゲーションバーを作成：#161616背景、48px高さ。IBMロゴをホワイトで左揃え。リンクは14px IBM Plex Sansウェイト400、色#c6c6c6。ホバー：#ffffff テキスト。アクティブ：2pxボトムボーダー付き#ffffff。”
• “タグコンポーネントを構築：ブルー10（#edf5ff）背景、ブルー60（#0f62fe）テキスト、4px 8pxパディング、24pxボーダー半径、12px IBM Plex Sansウェイト400。“

イテレーションガイド

1. ボタン、インプット、カードには常に0pxのボーダー半径——Carbonでは交渉の余地なし
2. レタースペーシングは小サイズのみ：14pxで0.16px、12pxで0.32px——ディスプレイテキストには決して
3. 3つのウェイト：300（ディスプレイ）、400（ボディ）、600（強調）——ボールドなし
4. ブルー60が唯一のアクセントカラー——セカンダリアクセントを導入しない
5. 奥行きは背景色レイヤリング（白 → #f4f4f4 → #e0e0e0）から、影ではない
6. インプットはボトムボーダーのみ、フルボックス化しない
7. Carbon互換性を保つため--cds-プレフィックスのトークン命名を使用
8. 48pxがユニバーサルなインタラクティブ要素の高さ