Terrain UI
これらのルールは、産業テーマのゲームのインターフェースから抽出されたもので、通常のWebページで有用であることが証明されたものだけを残しています。このスキルにはゲームのアセットは含まれておらず、ゲームを再現しようとするものではありません。
開始する前にこのファイル全体をお読みください。色とコンポーネントのマークアップについては assets/terrain.css を、等高線の背景については assets/contours.js を参照してください。各ルールの由来と省略した理由については references/research.md を参照してください。
8つのルール
- 1つのアクセントカラー、2つの意味: 現在位置と主要アクション。デフォルトは
#FEEC00、ゲーム内の選択タブからサンプリング。塗りつぶしのみに使用し、その上にインク色のテキストを配置します。ライトテーマでは線やテキストには決して使用しません。ホバー時も同様に、主要ボタンのみがホバー時にアクセントで塗りつぶされます。リンク、ピルボタン、リスト行は単に明るくなるか、下線が太くなります。 - 選択方法は方向に依存:
- 垂直リスト: ホバーで行が明るくなり、選択行は暗くなり明るいテキスト、左側にアクセントバーが表示されます。
- 水平タブ: 選択タブはアクセントで塗りつぶされます。切り替え時に古いブロックは折り畳まれ、新しいブロックは中央から横に開きます。
- ボタンの形状で優先度を示す: 主要アクションは右下隅が切り取られたブロック、二次アクションは右端に丸いアイコンがあるピル型。ボタングループ内の主要ボタンは最大1つまで。
- すべてのページの左上にパスを配置:
// Work / About me。戻れる階層はリンクにします。 - 数字は装飾であり、真実でなければならない: ID、日付、
current / totalカウンターはワイドなタブラーニケア字体で設定。データを捏造したり、偽の技術テキストを追加しないでください。コピーについても同様です。製品（機能、サポート範囲、インストール方法）の説明は、ユーザーから与えられた情報またはプロジェクト自身のドキュメントからのみ行い、その範囲を守ってください。ソースがない場合は、埋め込まずに[TODO: ...]のようなプレースホルダーを記述してください。 - ショートカットキーを表示: 例: ページボタンの横に
←→。ファインポインターを持つデバイスでのみ表示。 - 背景: 閉じた等高線: 2つのコーナーにそれぞれ1つのパッチ、6%～9%の不透明度、5本ごとに太く、アニメーションなし。
- 短く、しっかりした動き: ホバー90ms、選択110～120ms、カーブ
cubic-bezier(.2,0,0,1)。システムが動きの低減を要求する場合はすべてオフにします。
最初にページタイプを選択
開始する前に、どの種類のページを構築するかを決定してください。3つすべて同じ色とコンポーネントを共有しますが、大胆さが異なります。不明な場合は「読む」を選択してください。
| タイプ | 使用目的 | 方法 | ゲーム内での同等物 |
|---|---|---|---|
| 読む | 記事、プロジェクト詳細、設定、ヘルプ | 1つのテキストカラム、約65ラテン文字または38CJK文字幅。アクセントは現在のナビ項目と主要ボタンのみ。等高線は任意 | 百科事典、アーカイブ |
| 見せる | ホームページ、ポートフォリオ、ランディングページ | 大きなワイド見出し、アウトラインフォントも許可。背景に大きな数字。等高線オン。コンテンツはブロックごとにフェードインしてもよい | メインメニュー、ショップ |
| ワークベンチ | 管理ページ、ダッシュボード、ツール、拡張機能設定 | 左側に垂直リストナビ、上部にタブ。主にテーブル、数字、フォーム。大きな見出しなし。アクションへの応答としてのみモーション | インベントリ、装備、友達リスト |
コンポーネント
すべて assets/terrain.css に tu- プレフィックスで存在します。examples/demo.html に各コンポーネントの例があります。
| コンポーネント | クラス | 備考 |
|---|---|---|
| パスタイトル | tu-crumb | ルール4 |
| 垂直リスト | tu-list | 現在の項目を aria-current でマーク |
| 水平タブ | tu-tabs tu-tab | 現在のタブを aria-selected="true" または aria-current でマーク |
| 主要/二次ボタン | tu-btn / tu-btn--pill + tu-btn__icon | ルール3 |
| キーヒント | tu-kbd | ルール6 |
| フィールド行 | tu-fields tu-sep | メタデータを縦棒 │ で区切る |
| パネル | tu-panel | フラットなブロック: 角丸、影、境界線なし |
| テーブル | tu-table-wrap tu-table | 小さいワイドなヘッダーラベル。数値列は tu-right で右揃え。狭い画面で横スクロール |
| 入力 | tu-field tu-input tu-hint | フォーカス時に下線が太くなり、左側にアクセントバーが表示 |
| エラー | tu-error、入力に aria-invalid="true" を追加 | 小さなアクセント四角と修正方法を1文。赤いテキストなし |
| スイッチ | tu-switch | 「オン」は現在の状態なので、トラックがアクセントで塗りつぶされる |
| ダイアログ | <dialog class="tu-dialog"> | ボタンはフッターバーに配置: 主要1つ、キャンセルはピル型。ブラーからシャープに表示 |
| トースト | tu-toast | 左側にアクセントバーがある暗いバー。左からスライドインし、2秒後に消える |
| 空の状態 | tu-empty | ここに何が表示されるかを1文で示す破線ボックス。オプションで主要ボタン1つ |
| ローディング | tu-progress、待機中は tu-progress--busy を追加 | 2pxの線。進捗が既知の場合は --tu-value を設定し、パーセンテージを表示 |
赤は使用しません。警告、失敗、保留状態は、インク色のテキストと小さなアクセント四角を使用します。削除などの不可逆的なアクションは確認ダイアログの後ろに配置します。
この表にないものについては、8つのルールから導出してください。「現在」または「主要」かどうかでアクセントを使用できるかどうか、主要か二次かでブロックかピルか、クリック可能かどうかでホバー時に明るくなるかどうかが決まります。
モーション
| アクション | 継続時間 | 方法 |
|---|---|---|
| ホバー時の明るさ変化 | 90ms | 背景色のトランジション |
| リスト選択バーのドロップイン | 110ms | scaleY(0 → 1) |
| タブ切り替え | 120ms | アクセントブロック scaleX(0 → 1)、中央から開く |
| 主要ボタンホバー | 280ms | 左からアクセントで塗りつぶされる |
| ページ変更 | アウト320ms、イン480ms | 古いページはブラーしてフェードアウト。新しいページはブロックごとにフェードイン、100ms間隔 |
禁止事項
- 未確認マーカー（赤いドット、
NEWバッジ）: ゲームでは報酬収集を促すものですが、ポートフォリオや通常のサイトではしつこく感じられます。 - フロストガラス、グリッチテアリング、スキャンライン、グロー、大きなアクセント塗りつぶし、影付きの角丸カード。
- ゲーム専用要素: 3Dカルーセルメニュー、キャラクターアート、レアリティカラーバー。
- 公式ゲームアセット: スクリーンショット、ロゴ、アイコン、キャラクターアート、コピー、公式フォントファイル。
タイポグラフィ
- ラテン文字と数字: Saira（オープンソース、SIL OFL）。ラベルは125%にストレッチ、オールキャップス、0.06emトラッキング。公式サイトはワイドラベルにトラッキングを追加していませんが、小さいサイズでは少し残しています。
- 中国語: Noto Sans SC またはシステムサンセリフ。本文にセリフ体やブラシ体は使用しません。
- すべての数字はタブラーニケア（
font-variant-numeric: tabular-nums）。
単一HTMLファイルの配信
terrain.cssのクラスをそのまま使用し、色を変更するページレベルのオーバーライドを追加しないでください。変更が必要な場合は、コンポーネントに問題があるため、スキルに報告する必要があります。terrain.cssを<style>要素に、contours.jsを<script>要素に配置します。スクリプトをインライン化する前に、リテラルの</script>が含まれていないことを確認してください。含まれている場合は\<\/script>と記述します。- ページがオフラインで動作する必要がある場合は、Sairaをwoff2データURIとして
@font-faceに埋め込みます。それ以外の場合はGoogle Fontsにリンクし、フォールバックフォントを保持します。
納品前チェックリスト
- ページタイプが選択され、異なるタイプの見出しサイズが1ページに混在していない。
- アクセントは現在位置と主要アクションにのみ表示され、ページに赤はない。
- 各ボタングループには最大1つのブロック主要ボタンがあり、残りはピル型。
- 垂直リストと水平タブはそれぞれ独自の選択スタイルを使用している。
- すべてのページに
//パスタイトルがある。 - すべての数字は実際のデータであり、すべての製品記述にはソースがあり、その範囲を誇張していない。
- ライトテーマとダークテーマの両方が確認され、電話幅（約400px）で横スクロールしない。
- キーボードフォーカスが可視であり、動きの低減がオンの場合でもすべてが静止している。
- 公式ゲームアセットは使用されていない。
ファイル
| ファイル | 内容 |
|---|---|
assets/terrain.css | カラートークン（ライトとダーク）と全コンポーネント |
assets/contours.js | 等高線背景、設定は1行: TerrainContours.mount(canvas) |
examples/demo.html | すべてのコンポーネントを1ページにまとめた、すぐに開けるもの |
examples/screenshots/ | ライト、ダーク、電話幅、ダイアログでのコンポーネントページのスクリーンショット |
references/research.md | 調査ノート: 観察されたこと、保持されたこと、省略されたこと |