要約

このツールは、1つのブランドカラーから WordPress のブロックテーマ用 theme.json を生成します。パレットを計算し、本文テキスト、リンク、ボタンの WCAG コントラストを確認し、モジュラー型のタイプスケールを設定します。計算ルールは固定されているため、出力は予測可能でテストできます。ファイルをブロックテーマにコピーし、サイトエディターで仕上げてください。

WordPress テーマ 生成 AI で、theme.json のパレットとタイプスケールを数秒で作成

WordPress 向けの AI テーマ生成ツールは、サイト全体を作ると約束することが多いものです。このツールは、検証できる部分に絞っています。WCAG のコントラストを確認したカラーパレット、モジュラー型のタイプスケール、ブロックテーマにそのまま使える theme.json を生成します。

フォリオを設定する

ブロックテーマ用スターター生成ツール

ブランドカラー、ベース、フォントの組み合わせを選んでください。パレット、コントラストレポート、theme.json は、入力を変えるたびに更新されます。

パレット

ベース
サーフェス
コントラスト
プライマリ
アクセント

コントラストチェック（WCAG 2.x）

ベース上の本文テキスト
ベース上のリンク
プライマリ上のボタンテキスト
ベース上のアクセント

プレビュー

スケール上の見出し

本文はベースカラーの上に表示されます。リンクカラーのリンクも本文の流れに沿って表示されます。

theme.json

仕組み

生成ツールが実際に計算する内容

1つの色からパレットを作成

ブランドカラーがプライマリになります。ツールはその色相を読み取り、HSL でベース、サーフェス、コントラストを作ります。ライトベースでは明度 97、93、11 パーセント、ダークベースでは 9、14、92 パーセントです。アクセントは色相環で 150 度ずらした色になります。

確認できるコントラスト

WCAG 2.x の輝度計算式で、本文テキスト、リンク、ボタンテキスト、アクセントの4組を測定します。それぞれに比率と評価が付きます。リンクが AA を満たさない場合は、明度を1段階ずつ動かして合格するまで調整します。

モジュラー型のタイプスケール

Medium は 1rem です。Large、Extra large、Huge は比率を1回、2回、3回掛けた値で、Small は比率で割った値になります。比率 1.2 の場合、0.833、1、1.2、1.44、1.728 rem になります。

余白の注記

パターンより先にデザイントークンを決める理由

ヒーロー、カードグリッド、フッターは、どれも同じパレットのスラッグを参照します。そのスラッグの値がコントラストに不合格だと、すべてのパターンが同じ不具合を引き継ぎます。結果として、クライアントのスマートフォンで初めて問題に気づくことになります。だからトークンを先に直すのです。Pattern Forge で生成するパターンも、合格した色から始まります。結果は、サンドボックスではなく実際のクライアントサイトで確かめてください。

  • パレットのスラッグは、すべてのブロックとパターンで共有されます
  • フォントサイズのスラッグで、テンプレート間の見出しを揃えられます
  • theme.json を1回編集すると、サイト全体に反映されます
タイプの見本シートと小さな紙のカラーチップが、木製のテーブルに置かれている様子
実践

生成ファイルから公開中のテーマまで

  1. 1

    入力を選ぶ

    クライアントのロゴからブランドカラーを選ぶところから始めます。ブランドがもともと暗い場合を除き、ライトベースを選びます。そのうえで、トーンに合うフォントの組み合わせを選びます。

  2. 2

    コントラストレポートを読む

    「不合格」または「大きな文字のみ合格」と表示された行がないか確認します。本文テキスト、リンク、ボタンテキストがすべて AA に合格するまで、ベースまたはニュートラルの色味を変えてください。

  3. 3

    ファイルをテーマにコピーする

    「theme.json をコピー」を押し、ブロックテーマのルートに貼り付けます。その後サイトエディターを開き、カラーピッカーにパレットが表示されるか確認します。

  4. 4

    手作業で仕上げる

    出力は出発点です。スラッグをデザインシステムに合わせて名前を変え、スペースやレイアウトの設定を追加して、ほかのテーマファイルと一緒にコミットしてください。

制限事項

このツールができないこと

ページレイアウトは作らない

作るのはトークンであり、テンプレートではありません。ヘッダー、フッター、ページ構造は、ブロックテーマかサイトエディターで作るパターンが担当します。

Web フォントは読み込まない

2つの組み合わせはどちらもシステムフォントのスタックを使い、フォントのリクエストを避けます。ブランドの書体には、セルフホストの可変フォントと fontFace の記述が必要です。それは自分で追加してください。

デザインの良さは保証しない

すべてのコントラストチェックに合格しても、平坦に見えることがあります。結果は安全な基準値として扱い、実際のページでアクセントと中間色を目で見て調整してください。

生成ツールについてのよくある質問

これは本当に AI のテーマ生成ツールですか？
いいえ。最初にそのことを明記しています。パレット、コントラストチェック、タイプスケールは固定ルールから得られます。HSL での色計算、WCAG のコントラスト計算式、モジュラースケールです。そのため出力は予測可能で、テストもできます。言語モデルを組み込みたい場合は、Pattern Forge がプロンプトから Gutenberg パターンを生成します。このツールは、その下にあるデザイントークンを担当します。
無料ですか。入力した色は保存されますか？
無料で、アカウントも不要です。すべてブラウザ内で動作します。送信されるのは、ツールが使われたことを記録する匿名のカウンターだけです。色の値やフォームのテキストは送信されません。
コントラスト比はどこから来ていますか？
WCAG 2.x の相対輝度の計算式からです。sRGB の各チャンネルを線形化し、0.2126、0.7152、0.0722 で重み付けします。比率は（明るい色の輝度 + 0.05）を（暗い色の輝度 + 0.05）で割った値です。本文テキストの AA 基準は 4.5:1、AAA は 7:1、大きな文字の AA 基準は 3:1 です。
リンクの色がブランドカラーと違うのはなぜですか？
ブランドカラーは、ほぼ白または黒のベースに対して 4.5:1 を満たさないことが多いためです。ツールはブランドカラーをボタンや塗りつぶし用のプライマリとして残し、リンク用の派生色は選んだベース上で AA に合格するまで、明度を1段階ずつ調整します。
出力はどの WordPress バージョンを対象にしていますか？
ファイルは theme.json のバージョン 3 を使います。これは WordPress 6.6（2024 年 7 月）で導入された形式です。古いインストールではバージョン 2 が必要な場合がありますが、パレットとタイポグラフィの構造は同じなので、番号を変えるだけで残りはそのまま使えます。
フォントのスタックはウェブから何か読み込みますか？
いいえ。2つの組み合わせはどちらもシステムフォントと Georgia 系のスタックを使うため、フォントのリクエストも、後から届くウェブフォントによるレイアウトのずれもありません。後でセルフホストの可変フォントを使う場合は、fontFamily の値を置き換え、スラッグはそのまま残してください。
右から左に読む（RTL）サイトでも使えますか？
出力には left や right の値がなく、色、フォントサイズ、フォントファミリーは方向に依存しません。アラビア語やヘブライ語のフォントのフォールバックは別途確認してください。システムフォントのスタックはプラットフォームごとに異なります。
ファイルはテーマのどこに置けばよいですか？
ブロックテーマのルートに theme.json という名前で保存し、サイトエディターを開いてください。パレットはカラーピッカーに、サイズはタイポグラフィのパネルに表示されます。styles のセクションがサイト全体の既定値を設定します。

白紙からではなく、トークンをパターンに渡す

theme.json を置いたら、Pattern Forge が、あなたのパレットとタイプスケールを使う Gutenberg パターンを下書きします。Monk は無料、Scribe は月額 $12 です。

サイトを照らす
Noon