デザインシステム
『劇場版 ソードアート・オンライン -オーディナル・スケール-』に登場する Augma に着想を得ています。現実の環境の上に、明快に、軽やかに、そして控えめに情報を示す。ここではその方向性を、オリジナルの Web インターフェース言語としてまとめています。
同じインターフェース、2 つの光
ライトは明るい環境に向き、ダークは大きな明るい面を減らします。どちらも同じ公開コンポーネントとセマンティック変数を使い、それぞれ独立して明るさを調整したり HUD を隠したりしてから、初期値に戻せます。
マイビュー
情報は明快に、操作は軽やかに。
マイビュー
情報は明快に、操作は軽やかに。
ページのルート要素に .dark または data-agm-theme="dark" を指定するとダークになり、入れ子の data-agm-theme="light" でライトに戻せます。Dialog、Select、Tooltip、Toast のオーバーレイは body にマウントされるため、アプリのテーマは html または body に設定してください。局所的なテーマのサンプルには、インラインのコンポーネントだけを含めています。
サーフェスと階層
白と氷のようなグレーが主なサーフェスです。透明度と細い罫線で階層をつくり、切り欠いた角は操作できる入口だけに、リング状の要素は状態と進捗に使います。読む領域は静かに保ち、複雑な背景の上のパネルには十分に不透明な背景を与えて、文字のコントラストを確保します。
カラー
| Token | ライト | ダーク | 用途 |
|---|---|---|---|
--agm-bg | #ffffff | #131e29 | ページの背景 |
--agm-surface | #f3f6f8 | #1b2936 | 二次的なサーフェス |
--agm-text | #263442 | #edf4fa | 主要なテキスト |
--agm-muted | #5c7187 | #a0b6c9 | 補足説明 |
--agm-accent | #b75e08 | #f1a74c | 主要な操作と注意喚起 |
--agm-highlight | #f28c12 | #f28c12 | 装飾的なハイライト、HUD のグラフィック、ゲージの警告 |
--agm-cyan | #258ca4 | #67c8da | 連続的なコントロール |
--agm-success | #287947 | #7cdaa0 | 成功 |
--agm-danger | #bc394a | #ff95a4 | エラー |
アプリのルートで変数を上書きすると、テーマをカスタマイズできます。アクセントカラーを変えるときは、--agm-on-accent の文字のコントラストもあわせて確認してください。状態は必ずテキストを含め、色だけで表さないでください。
フォントとタイポグラフィ
サイトでは Exo 2 の幾何学的な字形を使い、中国語と日本語はシステムのサンセリフ体にフォールバックします。コンポーネントは --agm-font でホストのフォントを受け取り、CSS パッケージは外部フォントを読み込みません。本文とコントロールは読みやすいサイズを保ち、数字はリアルタイムの状態表示に向いています。
状態とフィードバック
| 状態 | 表現 | 使い方の指針 |
|---|---|---|
| 既定 / フォーカス | 細い罫線 / 外側のフォーカスリング | キーボードフォーカスを、切り欠きやコンテナで切り取らない |
| 無効 | コントラストを下げ、操作を止める | 使えない理由を近くに示し、Tooltip だけで説明しない |
| 入力エラー | エラーの罫線と具体的なエラー文 | error で直し方を示し、hint で入力の条件を残す |
| 処理中 | Button の loading または不確定の進捗 | 重複送信を防ぐ。進捗が不明なら value を省略し、偽のパーセンテージを渡さない |
| 操作のフィードバック | Toast の tone と結果のテキスト | success / warning / danger / neutral が、それぞれ成功、注意、失敗、お知らせに対応 |
| 空の結果 | 現在の絞り込みに一致するものがないことを示す | 絞り込みの解除や次の操作を提示する |
エラーと補足説明は、aria-describedby でフィールドに関連付けます。検証中もユーザーの入力は保持し、修正されたらエラーを消します。非同期の送信の失敗を、通知の色だけで伝えてはいけません。
操作と動き
ボタンやオーバーレイの閉じるボタンには、少なくとも 44px のタッチの高さを確保します。小さなスイッチやスライダーはヒット領域を広げることで、軽やかな見た目を保ちます。レイアウトには余白を残し、隣り合うヒット領域が重ならないようにします。フォーカスリングは完全な形を保ち、切り欠きで切り取られないようにします。動きは状態の変化を説明するために使い、prefers-reduced-motion を尊重します。
動きは、Augma のインターフェースが現実に「浮かび上がる」様子から取っています。すばやく現れ、やわらかく落ち着き、去るときはより短く。
| 動き | 使う場所 | 表現 |
|---|---|---|
| 浮上 | Dialog、.agm-materialize を付けた任意の要素 | まず光るラインが現れ、縦に展開する。閉じるときは同じ経路で折りたたむ |
| 光の走査 | Button のホバー、Dialog を開いたとき | 光が表面を横切る。入るときだけ再生 |
| 周回 | IconButton のホバーとフォーカス | 2 本の弧が対象を囲む。pressed のときはアクセントカラーで塗られ、選ばれたメニューの丸ボタンのように見える |
| ソナー | HudStatus | 状態のドットが外側へ広がる。危険な状態はより速く、中立の状態は静止 |
| 残像 | HudGauge | 値が下がると淡い残像が少し遅れて縮み、減った量がはっきり見える |
| カウントダウン | Toast | 下部の細いラインが残り時間を示す。通知領域へのホバーやフォーカス中は一時停止 |
--agm-duration（160ms）は色と押下に、--agm-duration-slow（420ms）は展開と移動に使います。--agm-ease は登場を、--agm-ease-in は退場を担い、--agm-ease-spring はスイッチのつまみのような物理的な跳ね返りだけに使います。--agm-light、--agm-sheen、--agm-glow は、ガラスの上端、光の走査、アクセントの光彩を制御します。.agm-materialize は --agm-delay で順番を調整でき、アニメーションの終了後に切り取りは残らないため、影やアクセントのラインはそのまま表示されます。
動きを減らす設定がオンのときは、浮上、光の走査、周回、ソナー、カウントダウンがすべて止まり、内容は最終状態のまま表示されます。残像は値に合わせてすぐに更新されます。
組み合わせ
Panel は、タイトル、description、内容、footer で情報をまとめます。actions にはタイトルバーの副次的な操作を、footer にはそのまとまりの主要な操作を置きます。狭い画面では操作エリアが自然に折り返します。HudStatus は現在の状態を、HudProgress は処理の経過を、HudGauge はバッテリーや信号のような残量を表します。先に情報の階層を決めてから、視覚要素を選びましょう。ドキュメントのページや作業用の画面で、ホームページの装飾的な軌道を再利用する必要はありません。
出典
デザインの方向性は Augma 公式のデバイス紹介 を参考にしています。これは独立したインターフェースの実験であり、作品の権利者とは関係ありません。