83.3K+ダウンロード
公共サービス・教育 · 新しいリソース

KERN デザインシステム.

タイポグラフィ、セマンティックなテーマ、開閉パネル、元に戻せる確認フローを備えたネイティブなKERNインターフェースを構築します。

OpenDesign をダウンロード DESIGN.md をダウンロード
OpenDesign ガイド8章リファレンス項目 16 件オリジナルアプリケーションガイド
01

KERN デザインシステムのインターフェースプレビュー

メモを編集し、破棄をキャンセルまたは確定してから、メモを復元し、表示モードを切り替えます。

メモ、開閉式の補足情報、安全な確認ダイアログ完全な例を開く
ネイティブの @kern-ux/native 2.8.2 CSSと Fira Sans を使用。アプリの動作はオリジナルで、ローカルでのみ実行されます。· 実装リファレンス
02

KERN デザインシステムのデザインリファレンス

@kern-ux/native 2.8.2 から抽出。アプリのレイアウト上の選択は、別途明記しています。

タイポグラフィと形状

ソース
名前 / ルール値 / 設定用途
Default fontFira Sansパッケージに含まれる font-face ファイルを読み込んでください。CSSだけではフォントファイルは読み込まれません。
Static sizes16 / 18 / 21px小、中、大サイズの静的テキスト。
Adaptive sizes below 768px21 / 26 / 32 / 48px中サイズから 2x-large までの可変テキスト。
Adaptive sizes from 768px24 / 32 / 48 / 72pxこのメディアクエリで、パッケージの可変トークンが切り替わります。
Font weights400 / 500 / 600レギュラー、ミディアム、セミボールド。
Spacing0, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192px均等な増分スケールではなく、名前付きのスペーストークンを使用。
Border widths0 / 1 / 2 / 4 / 8pxデフォルトのボーダー幅は 2px。
Radii0 / 2 / 4 / 8px / 50%なし、小、デフォルト、大、円形。
Focus outline4pxデフォルトの focus-visible アウトラインには、コンテキストに応じたアクションフォーカスのロールを使用。
Specimen width800pxアプリ独自の選択であり、KERNのコンテナトークンではありません。

セマンティックカラーのマッピング

ソース
名前 / ルール値 / 設定用途
Light textneutral-950--kern-color-layout-text-default
Dark textneutral-025同じセマンティックロールでも、テーマによって値が変わります。
Light actiondarkblue-700--kern-color-action-default。on-action は白。
Dark actiondarkblue-300on-action は黒に切り替わります。
Light / dark backgroundwhite / black--kern-color-layout-background-default
Theme overridedata-kern-theme="light" or "dark"明示的に指定した属性は、システム設定より優先されます。
03

KERN デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

DESIGN-kern.md

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

ガイドをダウンロード

KERN デザインシステムのネイティブなHTML、CSS、ブラウザーの動作

パッケージに含まれるもの

KERN native 2.8.2 には、コンポーネントCSSとフォントが含まれます。このサンプルでは、これらのファイルを直接読み込みます。button、textarea、Details、Dialog は、KERNクラスを適用したネイティブ要素です。ReactプロバイダーもJavaScriptのコンポーネントコンストラクターも必要ありません。ダイアログ周りの判断ロジックはアプリ側で実装します。スタイルを適用するだけでは、入力内容はクリアされません。

この OpenDesign ガイドから
  1. バージョンを固定したネイティブパッケージをインストールします。
  2. 相対パスを維持したまま、スタイルシートとフォントをまとめてコピーします。
  3. 以下のサンプル全体を保存し、そのディレクトリを HTTP 経由で配信します。

関連する仕様を確認する

KERN デザインシステムの Fira Sans と可変タイポグラフィ

タイポグラフィを明示的に読み込む

kern.min.css は Fira Sans を指定します。fonts/fira-sans.css には実際のフォントフェイスと、相対パスで参照される WOFF2 アセットが定義されています。フォントディレクトリをそのまま維持することで、正しいスタイルシートを指定しているのに意図せずフォールバックする事態を防げます。静的テキストのサイズは 16、18、21px のままですが、可変のタイトルと見出しのトークンは 768px で切り替わります。階層を示すには見出し要素を使い、見た目には適切なKERNクラスを適用してください。このサンプルでは h1 を 1 つ使い、ダイアログには独自の h2 を設定しています。

関連する仕様を確認する

KERN デザインシステムのスペーシング、幅、レスポンシブレイアウト

トークンとレイアウト構成を分ける

KERNには、0〜192px の名前付きスペーストークンがあり、小さい値では 2px、4px 刻みも含まれます。ボーダーと角丸は、それぞれ独立したスケールです。この例では、縦方向に 24px のリズムを設け、アクション行が折り返すようにしています。コンテンツの最大幅 800px とダイアログの最大幅 560px は、アプリ独自の設定です。どちらも汎用的なKERNコンテナとして提示しているわけではありません。画面が狭い場合、ページの余白は 16px になり、ダイアログの幅はビューポート内に収まります。ドキュメントにはビューポートの高さに対する最小値を設定していないため、埋め込んでもサイズ変更のフィードバックループは発生しません。

関連する仕様を確認する

KERN デザインシステムのセマンティックカラーと表示モード

個別の hex 値ではなく、ロールを切り替える

このパッケージでは、テキスト、アクション、背景、フォーカスにセマンティックなCSSプロパティを使用します。ライトとダークのパレットを切り替えると、これらの役割もまとめて切り替わります。たとえば、action-default はライトモードでは darkblue-700、ダークモードでは darkblue-300 に対応し、前景色は白から黒に変わります。この例では html に data-kern-theme を設定し、押下状態のボタンを表示しています。設定はこのドキュメント内でのみ有効で、保存されません。属性を明示的に指定しなければ、スタイルシートは prefers-color-scheme に従います。

関連する仕様を確認する

KERN デザインシステム ラベル付き編集可能なメモ

指示をいつでも確認できるようにする

textarea には kern-form-input 内の kern-form-input__input を使用し、実際のラベルを input の id に関連付けます。ヒントには専用の id を割り当て、aria-describedby で関連付けたままにします。これは任意のローカルメモなので、この例では必須項目のエラーを捏造したり、サーバーへの保存を実装したりしていません。「例を復元」を選ぶと初期値が設定され、編集可能なフィールドにフォーカスが移ります。ステータス領域で結果を通知し、ラベルを置き換えたり、操作できないテキストにフォーカスを移したりすることはありません。

関連する仕様を確認する

KERN デザインシステム Details による補足情報

開閉状態の管理はブラウザーに任せる

details 要素が開閉状態を管理し、summary がトリガーになります。KERNでは、表示を整えるために kern-details__header、小さなタイトル用の span、kern-details__body を追加しています。この例では、補足情報である保持期間についてここに記載しています。必須の指示、エラー、破棄アクションは開閉部分の外に常に表示します。標準のキーボード操作で有効化できるため、2つ目のクリックハンドラーや aria-expanded 状態の重複は不要です。

  • summary の文言は具体的かつ簡潔にする。
  • summary の中に別のボタンやリンクを配置しない。
  • 関連する項目をまとめて開閉する場合は、無関係なアクションを Details に見せかけず、アコーディオンを使用する。

関連する仕様を確認する

KERN デザインシステム 安全に終了できる確認ダイアログ

構造と操作

ダイアログのラベルには h2 を、説明には結果を簡潔に示す文を使用しています。ヘッダー、本文、フッターにはKERNのドキュメントに記載されたクラスを使用します。showModal() でネイティブダイアログを最前面レイヤーに表示し、close() で操作を終了します。初期フォーカスは autofocus によって「メモを保持」に設定します。Escape キーを押すとテキストは変更されずに閉じ、close イベントのリスナーによってフォーカスが「メモを破棄」に戻ります。値が変更されるのは「はい、破棄」を選んだときだけです。これは破壊的な操作の確認なので、背景をクリックしても閉じない仕様にしています。汎用例の背景クリックで閉じるハンドラーを無条件に流用せず、重大な判断に関するドキュメントの指針に従っています。

関連する仕様を確認する

KERN デザインシステムの統合と適用範囲

依存関係をすべてまとめて導入する

以下のセットアップでは、バージョンを固定した単一のパッケージをインストールし、そのCSSとフォントディレクトリをコピーします。完全な例には、独自のレイアウトCSS、ルートのテーマ属性、DOM 構造、イベント処理が含まれています。実際のフォームに統合した後、ダイアログの両方の操作結果、Escape キー、小さい画面での動作をテストしてください。KERNのコードは EUPL でライセンスされています。ウェブサイトの文章と図版は CC BY-NC-SA に基づいて区別されています。この独自のサンプルは、公的機関のアイデンティティを模倣したり、サービスがアクセシビリティ監査に合格したと示唆したりするものではありません。実際のアプリケーションには、データの永続化、サーバー側の検証、ユーザー体験全体の評価が引き続き必要です。

関連する仕様を確認する

KERN デザインシステムのコンポーネント例

ネイティブのメモと確認ダイアログの実装例

ドキュメントのマークアップ、レイアウトCSS、アプリケーションの動作をすべて含みます。セットアップブロックを使ってアセットをインストールしてください。

html
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>

コードリファレンス

04

KERN デザインシステムのエージェント設定

実装の出発点

ビルド手順や UI フレームワークは不要です。CSSが相対パスで WOFF2 ファイルを参照するため、フォントディレクトリを残してください。「Sources」にある完全な実装例の ZIP には、プレビューに必要な依存関係とドキュメント全体も含まれています。ZIP を展開し、そのディレクトリで python3 -m http.server 8080 を実行してから、http://localhost:8080/kern.html を開いてください。モジュールベースの例を file:// で直接開かないでください。

bash
npm install --save-exact @kern-ux/[email protected]
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html

あなたのプロジェクト向けプロンプト

AI エージェント用プロンプト
@kern-ux/native 2.8.2 CSSと同梱の Fira Sans を使って、ワークショップ用のローカルメモの例を作成してください。ラベル付きの kern-form-input textarea、補足情報を示すネイティブの Details 開閉要素、ラベル付きヘッダー・本文・フッターを備えた kern-dialog を組み合わせます。showModal() で開き、「メモを保持」に autofocus を設定します。Escape キーではテキストを変更せずにキャンセルし、「はい、破棄」を選んだ場合にのみメモを消去します。閉じた後はトリガーにフォーカスを戻し、「例を復元」も用意します。新しいパレットトークンを追加せず、data-kern-theme をライトとダークで切り替えます。元のアプリケーションの幅の選択肢を維持し、メモはローカルにとどめます。アップロード、サーバー上の下書き保存、公的サービスに関する主張は必要ありません。
05

KERN デザインシステムの出典と適用範囲

KERNのコードを使用したオリジナルのデモです。政府機関のアイデンティティ、永続的なストレージ、アクセシビリティ認証を示唆するものではありません。