メインコンテンツまでスキップ

デザインシステムのエステティクススキル

デザインシステムのエステティクススキルは、サイトのビジュアルアイデンティティを洗練させるためのガイド付きアプローチです。タイポグラフィ、色、余白、モーションのトークンといった、デザインシステムを定義する要素について、一貫性のある決定を下すのに役立ちます。

デザインシステムのエステティクスとは？​

デザインシステムのエステティクスとは、以下の要素を網羅する構造化されたスキルです。

  • タイポグラフィ: フォントファミリー、サイズ、ウェイト、行の高さ
  • カラー: プライマリ、セカンダリ、アクセント、ニュートラルパレット
  • スペーシング: パディング、マージン、ギャップのスケール
  • ボーダー: ラディウスと幅のトークン
  • シャドウ: エレベーションと深さのトークン
  • モーション: アニメーションとトランジション

これらの決定は、テーマの theme.json ファイルに記録され、一貫性のあるビジュアルシステムが構築されます。

デザインシステムのエステティクスを使う理由​

一貫性​

デザインシステムは、以下のことを保証します。

  • すべてのテキストが同じタイポグラフィスケールを使用する
  • 色がサイト全体で一貫して使用される
  • 余白が予測可能なパターンに従う
  • アニメーションが統一感を持つ

効率性​

ページごとにデザインを決定する代わりに、以下のことができます。

  • トークンを一度定義する
  • すべての場所で適用する
  • 値を一つ変更するだけでグローバルに更新する

柔軟性​

以下のことが可能です。

  • デザインシステム全体を素早く調整する
  • 異なるエステティクスを試す
  • 進化しつつもブランドの一貫性を維持する

デザインシステムのエステティクススキルの起動​

手動での起動​

いつでもこのスキルを開始できます。

"デザインシステムを洗練するのを手伝って"

または

"サイトのエステティクスを改善しよう"

または

"デザインシステムに関する決定をガイドしてほしい"

自動的な提案​

以下の状況で、エージェントがこのスキルの使用を提案する場合があります。

  • デザインの変更を依頼した場合
  • 「モダン」または「プロフェッショナル」な再設計をリクエストした場合
  • ビジュアルの一貫性を向上させたい場合
  • サイトのローンチ準備をしている場合

デザインシステムのエステティクスプロセス​

ステップ 1: タイポグラフィ​

エージェントがフォントの選択について尋ねます。

好みのタイポグラフィのスタイルはどれですか？
- セリフ体（伝統的、エレガント）
- サンセリフ体（モダン、クリーン）
- モノスペース（技術的、コード向け）

見出しフォントについて：
- 個別の見出しフォントを希望しますか、それとも本文と同じものを使用しますか？
- 好み：太字、エレガント、遊び心がある、ミニマル？

本文フォントについて：
- 可読性が重要です。どれを好みますか？
  - 大きく、ゆとりのあるテキスト
  - コンパクトで効率的なテキスト
  - 標準的なサイズ

その後、エージェントが以下を定義します。

  • 見出しフォント: タイトルや見出しのプライマリフォント
  • 本文フォント: 段落や本文のフォント
  • モノスペースフォント: コードや技術的なコンテンツのフォント
  • サイズスケール: 事前定義されたサイズ（small, base, large, XLなど）
  • ウェイトスケール: フォントウェイト（regular, medium, boldなど）
  • 行の高さ: 可読性のための行間隔

ステップ 2: カラーパレット​

カラーパレットを定義しましょう。

プライマリカラー（ブランドカラー）：
- 現在：[既存の色が表示される]
- 変更先：[カラーピッカーまたは16進数コード]

セカンダリカラー（サポートカラー）：
- 現在：[既存の色が表示される]
- 変更先：[カラーピッカーまたは16進数コード]

アクセントカラー（ハイライトやCTA）：
- 現在：[既存の色が表示される]
- 変更先：[カラーピッカーまたは16進数コード]

ニュートラルパレット（テキスト、ボーダー、背景用のグレー）：
- ライト：[色]
- ミディアム：[色]
- ダーク：[色]

エージェントは、以下の要素を含む完全なパレットを作成します。

  • プライマリ、セカンダリ、アクセントカラー
  • ニュートラルグレー（ライト、ミディアム、ダーク）
  • セマンティックカラー（成功、警告、エラー）
  • ホバーおよびアクティブ状態

ステップ 3: スペーシング​

どれくらいの「呼吸する余白」が欲しいですか？

スペーシングスケールの好み：
- コンパクト（タイトで効率的なレイアウト）
- ノーマル（バランスの取れた余白）
- スペーシィ（ゆとりのあるホワイトスペース）

これは以下の要素に影響します：
- ボタンやカード内のパディング
- セクション間のマージン
- グリッドアイテム間のギャップ

エージェントがスペーシングトークンを定義します。

  • ベースユニット（通常4pxまたは8px）
  • スケール：xs, sm, md, lg, xl, 2xl
  • パディング、マージン、ギャップの具体的な値

ステップ 4: ボーダーとシャドウ​

視覚的な深さと定義：

ボーダーラディウスの好み：
- シャープ（角丸なし）
- サブティル（小さなラディウス）
- ラウンド（中程度のラディウス）
- 非常に丸い（大きなラディウス）

シャドウの深さ：
- フラット（シャドウなし）
- サブティル（軽いシャドウ）
- プロナウンズド（強いシャドウ）

エージェントが以下を作成します。

  • ボーダーラディウスのトークン（ボタン、カード、入力フィールド用）
  • エレベーションレベルのシャドウトークン
  • ボーダー幅のトークン

ステップ 5: モーションとアニメーション​

サイトはインタラクティブなとき、どのように感じられるべきですか？

アニメーションの好み：
- ミニマル（アニメーションなし）
- サブティル（穏やかなトランジション）
- 遊び心がある（目立つアニメーション）

特定のアニメーション：
- ページ遷移：フェード、スライド、またはなし？
- ボタンのホバー：スケール、色変更、または両方？
- ローディング状態：スピナー、スケルトン、またはプログレスバー？

エージェントが以下を定義します。

  • トランジションの持続時間（速い、ノーマル、遅い）
  • イージング関数（ease-in, ease-out, ease-in-out）
  • 一般的なインタラクションのためのアニメーションキーフレーム

デザインシステムのエステティクスの適用​

自動適用​

スキルを完了すると、エージェントが以下の処理を行います。

  1. テーマの theme.json にすべてのトークンを更新する
  2. アクティブなテーマにデザインシステムを適用する
  3. 新しいシステムに合わせるためにブロックスタイルを再生成する
  4. 更新されたテーマをアクティブ化する

手動適用​

theme.json を直接編集することもできます。

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#0066CC",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Body",
          "slug": "body"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "size": "0.5rem",
          "name": "Small",
          "slug": "sm"
        }
      ]
    }
  }
}

デザインシステムの確認方法​

エージェントに尋ねる​

"私のデザインシステムを見せて"

または

"現在のデザインのトークンは何ですか？"

エージェントがタイポグラフィ、カラー、スペーシング、その他のトークンを表示します。

theme.json を見る​

テキストエディタで /wp-content/themes/[テーマ名]/theme.json を開くと、生のトークン定義を確認できます。

デザインシステムの更新​

クイックアップデート​

エージェントに特定の変更を依頼します。

"プライマリカラーを濃くして"

または

"スペーシングスケールを20%増やして"

または

"見出しフォントをセリフ体に変更して"

フルリデザイン​

デザインシステムのエステティクススキルを再実行します。

"デザインシステム全体を再設計しよう"

これにより、現在の値からすべての決定プロセスを再度ガイドしてもらえます。

部分的な更新​

特定の側面のみを更新します。

"カラーパレットだけを更新して、他はそのままにして"

デザインシステムのベストプラクティス​

一貫性​

  • すべての場所で同じトークンを使用する
  • 一回限りの色やサイズを作成しない
  • 値をハードコーディングするのではなく、トークンを参照する

名前付け​

明確でセマンティックな名前を使用します。

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

スケーラビリティ​

スケールするようにシステムを設計します。

  • ピクセルではなく、相対単位（rem, em）を使用する
  • 任意の値を指定するのではなく、スケール（xs, sm, md, lg, xl）を作成する
  • 将来の追加に備えて計画する

ドキュメント化​

デザインシステムを文書化します。

  • 特定の色を選んだ理由
  • 各トークンをいつ使用すべきか
  • 例外的なケースやエッジケース

一般的なデザインシステムパターン​

モダンミニマリスト​

  • サンセリフ体（Inter, Helvetica）のタイポグラフィ
  • 限定的なカラーパレット（2〜3色）
  • ゆとりのあるスペーシング
  • サブティルのシャドウ
  • 滑らかで速いアニメーション

温かみがありフレンドリー​

  • セリフ体とサンセリフ体のミックス
  • 温かいカラーパレット（オレンジ、温かいグレー）
  • 丸みを帯びた角
  • ソフトなシャドウ
  • 遊び心のあるアニメーション

プロフェッショナルな企業向け​

  • クリーンなサンセリフ体（Roboto, Open Sans）
  • アクセントカラーを持つニュートラルパレット
  • 構造化されたスペーシング
  • ミニマルなシャドウ
  • サブティルのトランジション

クリエイティブで大胆​

  • 個性的なタイポグラフィ
  • 鮮やかなカラーパレット
  • 多様なスペーシング
  • 強いシャドウ
  • 目立つアニメーション

トラブルシューティング​

デザインシステムの変更が反映されない

  • ブラウザのキャッシュをクリアする
  • 静的ジェネレーターを使用している場合はサイトを再構築する
  • theme.json が有効なJSONであることを確認する
  • テーマがアクティブであることを検証する

ページによって色が異なるように見える

  • プラグイン内の競合するCSSがないか確認する
  • すべてのページが同じテーマを使用しているか検証する
  • キャッシュプラグインをクリアする

以前のデザインシステムに戻したい

  • エージェントに「私のデザインシステムの履歴を見せて」と尋ねる
  • theme.json を手動で以前の値に編集する
  • 異なる選択肢でスキルを再実行する

次のステップ​

デザインシステムを定義した後：

  1. サイトのレビュー: サイトにアクセスして新しいデザインを確認する
  2. さらなる洗練: スキルを再度使用して調整を行う
  3. テンプレートの作成: デザインのトークンを使用してカスタムのブロックテンプレートを構築する
  4. ドキュメント化: チームメンバーとデザインシステムを共有する