08.1 — ガイド
Gn8らしさを保ち、情報を分かりやすく伝えるための実用ガイドです。伝えることを決め、言葉を整え、読みやすい視覚表現をつくり、媒体に合わせて展開します。
01 / 思想
依頼内容、見た目の案、読み手の必要がぶつかったときは、次の優先順位で判断します。
Webサイト、アプリ、スライド、印刷物のどれでも、Gn8らしさが分かる状態を保ちます。共通のロゴ、色の役割、情報の階層を意図的に使うことで認識をつくります。同じテンプレートをすべての媒体へ当てはめることではありません。
まず、読み手が何をしようとしているか、判断に必要な情報は何かを決めます。伝える意図を保ち、ナビゲーション、操作部品、単位、ページ構成は出力先に合わせます。
以下の確認項目を、依頼内容で使える具体的な判断に変えます。「全媒体対応」とだけ書いても、確認に必要な条件は決まりません。
承認済みのロゴ素材は図形を変えずに使い、共通色の役割は文書で定めた意味を保ちます。Webサイトの最大幅1200pxやDarkの既定値は、そのサイトの実装です。すべてのGn8媒体に適用する規則ではありません。この境界はDESIGN.md、ワードマークの図形はLOGO.mdが記録しています。
現在のLineまたはSolidの素材をそのまま使います。印刷ガイドではロゴを変えず、Webサイトの外枠を写すのではなく用紙寸法に合わせてページの組み方を決めます。
誰が読み、何を理解・実行するのか、そのためにどの情報が必要かを依頼文に書きます。値を比べる読み手には項目名と単位を並べます。設定を変える読み手には現在値と選択後の結果を示します。
既存の「日付形式」の例では、「年 / 月 / 日」を項目名のそばに置きます。形式を説明するだけなら、入力フォームにする必要はありません。
使用言語、翻訳後の文字量、入力方法、閲覧距離、拡大表示、出力媒体を確認します。これらの条件は、読み順やラベル、常に見せる情報を変えます。装飾を決めた後の仕上げではありません。
幅の狭い画面と拡大表示で、日本語と英語を確認します。値を項目名のそばに保ち、説明をホバーや色だけに隠しません。
保つのは目的と値の意味であり、元の操作部品や寸法ではありません。Webのリンクは移動、ボタンは操作です。アプリは利用するプラットフォームに従い、投影スライドと印刷物はそれぞれの読み方に合わせます。単位を変える場合は、別の値だと誤解されないように表記します。
OpenSlideテーマの資料には1920 × 1080のキャンバスが記録されています。これはそのパッケージの値で、Webページ、アプリ、配布資料へそのまま移す寸法ではありません。
どの例も同じ設定情報を使います。読み手の作業に合わせて役割を変えます。Gn8の製品画面ではなく、説明用の静的な図です。
支給されたロゴを使い、共通色の意味を保ちます。ロゴを描き直したり、色の役割を入れ替えたりしません。
ページ構成、単位、操作方法は出力先に合わせます。Webの配置寸法や架空の操作部品を、スライドや印刷物へ持ち込みません。
用語を読み順に沿って説明します。次の疑問に答える場合だけ、詳細へリンクします。
読み手が設定を変える場合は、プラットフォーム標準の選択部品をラベル付きで使い、選択値を見える状態にします。
日付の並び順が必要な理由を示し、ラベル付きの例を一つ置きます。選択部品の絵は描きません。
ホバーや動きがなくても説明が分かるよう、項目名を例のそばに置きます。
繰り返した値は、余白の章にある説明用の設定例です。媒体ごとの役割は実務上の指針で、Gn8製品の仕様を示すものではありません。
選択肢が競合したら、次の順に判断します。装飾を優先して、意味や利用しやすさを損なわないようにします。
主張には出典と適用範囲を添え、見せ方にはそれが支える読み取りや操作を説明できるようにします。
Gn8について述べるときは、出典がどの範囲を裏付けるかを示します。実務上の選択は、ブランドの確定事項ではなく指針として書きます。出典が寸法だけを記録しているなら、寸法を伝えて由来までは言い切りません。
LOGO.mdが記録する文字幅はGと8が各360、nが240で、比率は3:2:3です。厳密な黄金比の作図は確認できないと明記されています。測定値を書き、物語を付け足しません。
読み手に選択や再現を求めるなら、結論を先に示し、確認に必要な最小の根拠をそばに置きます。測定値には出典、単位、適用範囲を添えます。補足をノートや配布資料へ移す場合も、読み手がそこへ辿れるようにします。
ワードマークを説明するスライドでは、Gと8の幅が等しいという結論と実測幅を示します。投影面に細部を縮めて詰めず、残りの図形寸法は配布資料に置きます。
テーマや媒体が変わっても、同じ役割には同じ名前を使います。テーマ変更で値が変わっても、伝える意味は変えません。プラットフォームの都合で別の表記が必要な場合は、切り替わる箇所で正準の用語も対応付けます。
DESIGN.mdではaccentをリンクとグラフ系列に使います。共通のブランド色primaryと、塗りボタン用のbutton-backgroundおよびbutton-foregroundは別の役割です。primaryを操作部品の色として代用しません。
順序、文字の強さ、まとまりで主張と根拠の関係を示します。線、強調色、アートワークは、関係や状態を見つける助けになるときだけ加えます。外しても情報の意味が変わらないなら、装飾を外します。
DESIGN.mdでは黄色のsecondaryを強調に使い、警告色とは定めていません。黄色の印だけでは値の緊急性が伝わりません。状態を言葉で示し、決められた役割を使います。
出力先本来の意味を使います。リンクは移動、ボタンは操作、アプリの操作部品はプラットフォームに従います。装飾の前に、読み順、見えるラベル、キーボード操作、フォーカス、拡大表示、色以外の手掛かりを確認します。操作が必要なら、取り消せる選択は結果をすぐ示して戻る方法を用意します。取り消せない操作は、確認の前に結果を伝えます。静的ページや印刷図に架空の操作部品は置きません。
設計上の例では、取り消せる日付形式の変更後に表示値を更新し、「元に戻す」方法を用意します。削除では、確認前に対象と結果を示します。静的なスライドではスイッチを描かず、文章とラベル付きの例で伝えます。
正準トークンの実例を使い、装飾ではなく読み手の作業から見せ方を選びます。
読み手がリンクと塗りボタンの役割を見分けられるようにします。
DESIGN.mdではaccentをリンクとグラフ系列に使います。塗りボタンはbutton-backgroundとbutton-foregroundを使います。primaryは共通のブランド色で、ボタン背景ではありません。
各役割をトークン名とともに表示します。色見本はラベルを補い、それだけで意味を伝えません。操作部品ではなく、トークンの静的な例です。
accent primary button-background 色の役割と値はDESIGN.mdおよびdesign-token.tsに記録されています。目的から見せ方を決める部分は実務上の指針です。
どちらの例も同じワードマークの寸法を使います。後者は主張をスライドで読み取れるようにし、図形の細部を配布資料へ移します。
02 / 文章
このカテゴリでは、何を伝えるかを扱います。言葉をどこにどう見せるかは、ビジュアルデザインで扱います。
読み手が理解し、行動できるだけの情報を、率直で落ち着いた言葉で伝えます。主語と動作を明確にし、標語、曖昧な称賛、実際の機能以上の約束は避けます。
状況に合わせてトーンを変えます。歓迎の言葉は親しみやすく、支払いやプライバシーの説明は正確に、エラーは落ち着いて具体的にします。親しみやすさに冗談や感嘆符は必要ありません。
読み手が選ぶために必要な情報を残し、語彙や文の組み方を読者と状況に合わせます。
一文の情報は、読み手の選択や結果に関わるものに限ります。標語や形容詞では、適用範囲や変更後の状態は分かりません。取り消し条件など判断に必要な事実を残します。
設定が一つの予定にだけ適用されるなら、その範囲を明示します。変更後の見え方まで選択に関わる場合は「選んだ形式で、この予定の日付を表示します」と補います。
歓迎では選択を促し、失敗では起きたことと次の手順を伝えます。削除など取り消せない操作では、冗談や親しげな誘いを避け、結果を実行前に示します。
親しみやすさは歓迎の言葉で出せます。失敗や取り消せない操作まで明るく飾る必要はありません。
内部の設定名やコード名ではなく、読み手が実際に操作する対象を使います。初出の専門語には短い説明を添え、その後は同じ呼び名を使います。
日付の表示を変える人には「ロケール」ではなく「日付形式」と伝えます。必要なら、画面上の日付の見え方を指す言葉だと説明します。
英語と日本語で語順や丁寧さは異なります。語句を機械的に置き換えず、動作・対象・適用範囲が両方の言語で同じになる全文を書きます。変数を文の断片に挟む書き方も避けます。
日本語「この予定の日付形式を選んでください。」、英語「Choose a date format for this schedule.」のように、別々の自然な文で同じ選択を伝えます。
曖昧な文例
日付表示を、もっと自分らしく。
感じのよさを伝えますが、選ぶ対象は分かりません。
状況が分かる文例
この予定に表示する日付形式を選択してください。
対象と適用先を示して、選択を促します。
曖昧な文例
保存に失敗しました！
起きたことだけで、次の手順がありません。
状況が分かる文例
日付形式を保存できませんでした。接続を確認して、もう一度保存してください。
接続が原因だと確認できる場合に限り、この復旧手順を使います。
曖昧な文例
リセットしますか？
何が変わるか、取り消せるかが分かりません。
状況が分かる文例
この予定の日付形式を初期設定に戻します。この変更は元に戻せません。
初期設定への変更が本当に取り消せない場合に限り、そう明記します。
声は明確で落ち着いたまま、トーンだけを状況に合わせています。接続状況や取り消し可否を確認できない場合は、その情報を断定せず、実際に案内できる次の手順を書きます。
一つの概念に一つの用語を選び、ナビゲーション、見出し、ヘルプ、サポート資料で統一します。専門用語は初出時に説明し、画面上では内部実装名より分かりやすい言葉を使います。
動詞は、実際に起きる結果に合わせて選びます。たとえば、項目を一覧から外す操作は「取り除く」、情報を消去する操作は「削除する」と表せます。製品の挙動がその通りの場合に限ります。
用語は、読者が同じ情報や操作を見つけるための目印です。一つの概念に一つの名前を選び、ナビゲーション、見出し、操作、完了後の表示までたどれるようにします。
読者が扱うものの呼び名を基準にします。データベースの型名や開発チーム内の略称は、読者が知っている言葉と一致するとは限りません。
画面で報告書を作成・保存するなら、内部で「record」と呼んでいても、画面では「報告書」と呼びます。
同じ対象が「報告書」「ファイル」「ドキュメント」と途中で変わると、別の対象だと思われます。共通の用語表に、名称、説明、使用箇所、翻訳を記録します。
ページ名が「報告書」なら、保存ボタンと完了表示でも「報告書」を使い、別の名詞に言い換えません。
「リストから外す」は対象が別の場所に残る場合に使えます。「削除」は対象そのものが消える場合に使います。復元できるか、どの範囲が変わるかを実際の動作で確かめてからラベルを決めます。
保存済みの報告書を一覧から外すだけなら「リストから外す」。報告書自体を消すなら「報告書を削除」とし、実行前に消える範囲と復元可否を伝えます。
「更新」「実行」のように対象が見えない言葉だけでは、結果を予測できません。短いラベルでも、画面の文脈から離れて見たときに何が起きるか分かる動詞を選びます。
報告書のタイトルを変える操作なら「更新」ではなく「報告書のタイトルを変更」とします。
英語のラベルは文頭だけを大文字にする sentence case など、要素ごとの方針を統一します。日本語は英語の大文字・小文字をまねず、読みやすい語順と必要な助詞を使います。
英語は「Save report」、日本語は「報告書を保存」とします。開発用の識別子や不自然なカタカナ表記は、そのまま画面へ出しません。
名称が途中で変わる
報告書
保存する対象は「報告書」です。
名称をそろえる
報告書
最初に対象の名前を示します。
名称が途中で変わる
文書
別の種類の情報に見えます。
名称をそろえる
報告書の詳細
同じ報告書の詳細だと分かります。
名称が途中で変わる
項目を保存
「項目」では何を保存するか特定できません。
名称をそろえる
報告書を保存
名詞と動詞で対象と操作を示します。
名称が途中で変わる
文書を保存しました
見出しや操作の対象と一致しません。
名称をそろえる
報告書を保存しました
同じ名前で完了を伝えます。
実際には、対象が一覧から外れるのか、記録自体が消えるのかも用語表に記します。見た目の言い換えで「外す」と「削除」を混同しないでください。
確認済みの事実、解釈、提案、説明用の例を区別します。変わる可能性がある数値や情報には、出典と基準日またはバージョンを近くに示します。出典が裏付ける範囲を越えて結論を広げません。
確認できない主張は範囲を絞るか、削除します。架空の状況は例として明記し、個人情報や公開が承認されていない情報を根拠として掲載しません。
主張を出す前に、誰が、いつ、何を、どの条件で確かめたかをたどれる形にします。数値や出典を作って説得力を足すのではなく、根拠が裏付ける範囲だけを伝えます。
結果だけでは比較できません。何をしたか、データや対象の範囲、単位、測定方法、比較対象を、読み手が評価できる近さで示します。
処理時間なら、対象データの件数や大きさ、実行環境、測定方法、比較した条件も確認します。根拠にない条件は推測で補いません。
実測値は測定した人や出典、日付、バージョンと結び付けます。推定値は推定だと明記し、誰がどの入力からいつ見積もったかを添えます。推定を実績のように書きません。
見積もりを示す場合は「[担当者またはチーム]が[入力条件]を基に[日付]時点で推定。実測値ではありません」と区別します。
一つの試験結果だけで、すべての読み手や環境で同じ結果になるとは限りません。出典の対象や期間を越える一般化、相関だけを根拠にした因果関係の断定を避けます。測定幅や誤差が解釈に影響する場合は、その不確かさも示します。
一つの端末で測った時間は、その端末と条件での結果として書きます。「常に速い」とは言い換えません。
「調査によると」だけでは検証できません。文の近くに資料名、公開元、日付と、内容が分かるリンク名を示します。公開承認のない顧客情報や個人を特定できる記録は掲載しません。
リンク名は「性能レポート」など出典の内容を表すものにし、公開済みの集計資料を使います。個人のログや非公開の感想を貼り付けません。
根拠をたどれない
書き出しは最速です。
出典、対象範囲、比較対象がなく、最速という比較は裏付けられません。比較主張を撤回します。
出典つきの記述テンプレート
[公開承認済み資料名とリンク]によると、[日付]に[方法]でバージョン[番号]の[件数・データ量]を書き出した所要時間の実測値は[所要時間と単位]です。
記入後に示せるのは、特定条件で得た実測値です。他の選択肢との比較や「最速」という結論は示せません。
これは記入用テンプレートで、実測や証拠ではありません。「最速」という比較主張は撤回しており、この文例がその証明になるわけではありません。角括弧を確認済みの公開承認済み情報で置き換えられない場合は、主張を掲載しません。推定値を使う場合は、推定者、入力条件、日付を明記し、実測値ではないと伝えます。
操作ラベルで実行内容を伝えます。補助文では間違いやすい点を事前に説明し、エラーでは失敗した内容と復旧方法を示します。操作名と完了後のメッセージを一致させます。
処理中と成功を区別します。空状態では、何がないのかと次にできることを伝えます。入力後も項目名を表示したままにします。プレースホルダーは入力例であり、項目名ではありません。
文面は、操作がどの状態にあるかを読み手に伝える一部です。失敗後は、何に失敗したか、結果や入力がどうなったか、いま取れる次の行動を、確かめられる範囲だけ示します。
エラーは状態、分かっている原因、データへの影響、次の行動を短く結びます。原因が不明なら推測で埋めず、読み手が実際にできる確認や復旧方法を案内します。
「保存できません」だけで終えず、どの項目が不足したか、入力が残るか、修正後にどの保存操作を行うかを伝えます。
処理が終わる前に成功を通知すると、読み手が画面を離れたり同じ操作を繰り返したりします。完了表示は処理の成功を確認した後にだけ出します。
「保存しています…」は処理中、「保存しました」は完了後です。結果がまだ分からない間は成功を約束しません。
失敗時に入力を残す設計にできるなら、再入力を減らせます。値が残ったと確認できる場合だけそう伝えます。再試行で重複が起きる可能性があるなら、再送ではなく状態確認を案内します。
原因が必須項目の不足で、入力が保持され、再保存が安全な場合は、不足項目と「入力後にもう一度保存」を明記します。
まだ項目がない状態と、検索やフィルターに一致する項目がない状態では、次にできることが異なります。何が空なのかを言い分け、戻る方法を示します。
未登録なら「報告書はまだありません。新しい報告書を作成できます。」、絞り込み後なら「この条件に一致する報告書はありません。条件を解除してください。」とします。
入力欄には値を入れた後も見えるラベルを残し、補助文で形式や必須条件を説明します。取り消せない操作では、ボタンに対象を含め、何が消えるかと復元可否を実行前に中立的に伝えます。
「削除」だけではなく「報告書を削除」と表示します。完全削除で復元できない場合に限り、その結果を確認文で具体的に説明します。
原因も復旧方法も不明
問題が発生しました。もう一度お試しください。
必須項目の不足を知らせず、入力が残ったかも分かりません。
失敗・保持・次の手順を明示
この報告書を保存できません。入力した名前はフォームに残っています。概要を入力してから、もう一度「報告書を保存」を選んでください。
不足項目を補い、同じ保存操作に戻る手順を示します。実際に値が保持される場合だけ使います。
静的な例であり、操作できる入力欄ではありません。
報告書を保存
報告書を保存しています…
報告書を保存しました。
静的な文例です。入力保持や再試行の安全性が製品の実際の挙動と異なる場合は、その事実に合わせて書き換えます。
03 / デザイン
内容を読み取り、理解し、操作しやすくするために視覚表現を使います。見本は関係性を示すもので、新たなブランド規格ではありません。
一つの制作物に一つの主題や結論を決めます。タイトル、説明、根拠、次の行動の順序を見える形にし、見出しでその後の内容を示します。
文字の大きさ、ウェイト、位置、余白を組み合わせます。短いラベルで文脈を補っても、主題より目立たせません。根拠は支える主張の近くに置きます。
すべての情報を同じ強さでは見せません。読者が先に知るべきことを決め、文字の大きさ、位置、まとまりをその順序に合わせます。
条件. 周囲の詳細より、先に読むべき結論や操作があるとき。
理由. すべての行が同じ強さだと、読者自身が優先順位を探さなければなりません。
例. 「読む順序を選ぶ」を主題にし、文脈を示す短いラベルは控えめにします。
条件. タイトル、説明、根拠、次の手順が一つの流れを作るとき。
理由. ざっと見たときの予測と、丁寧に読んだときや支援技術の順序が一致します。
例. 文書の中でもタイトル、リード、根拠、次の手順の順に並べます。
条件. キャプション、出典、値、注記が近くの一項目を説明するとき。
理由. どの項目に属する説明か、読者が推測しなくてすみます。
例. 図のキャプションと出典はその図のそばに置き、次の図のタイトルとの間には挟みません。
条件. 画面幅が狭い、文字を拡大する、見出しが折り返すとき。
理由. 見出しが補足文に埋もれると、意図した読む順序が逆転します。
例. 長い日本語の見出しは根拠より前で自然に折り返し、読みにくくなるまで小さくしません。
ガイド / 例
順序はひと目で分かるようにします。
その後に補足を読みます。
読む順序を選ぶ
ページが支える判断から始めます。
文面は同じですが、すべての強さが等しく、最初の手掛かりがありません。
ガイド / 例
読む順序を選ぶ
ページが支える判断から始めます。
順序はひと目で分かるようにします。
その後に補足を読みます。
文面は同じです。主題を先に示し、根拠を近くにまとめています。
支給されたGn8ロゴを使い、縦横比を保ちます。G:n:8ワードマークの幅の比率は仕様で3:2:3と定められています。背景で見える種類と色を選びます。
媒体をまたいで共通する最小表示サイズや余白量はありません。新たな数値を決めず、実際の表示寸法と閲覧距離で確認します。
アプリアイコンはロゴギャラリーに角丸・正方形の通常版と余白付きがあり、3色それぞれをSVG・PNG・ICO形式で選べます。
用途に合う正準ファイルを選び、その図形を保ちます。ワードマークは正方形のシンボルではありません。LineとSolidも同じ基準では比べません。
条件. ヘッダー、文書、スライド、プロフィール欄にロゴを配置するとき。
理由. 幅と高さを別々に変えると、文字幅やカウンターの形が変わります。
例. viewBoxが2:1のワードマークはワードマークとして使い、正方形のシンボルには別の正方形領域を用意します。
条件. 正準のラインワードマークと統合シンボルを組み合わせるとき。
理由. viewBoxが異なるため、CSS上の幅を揃えても見える線の太さは揃いません。
例. 承認済み見本はワードマーク160 × 80、シンボル78.125 × 78.125です。どちらも見える線幅は5pxです。
条件. 塗りワードマークとBoldシンボルを組み合わせるとき。
理由. 正方形のシンボルの方が高く見えます。アートボードの倍率が同じでも見える高さは同じになりません。
例. 160 × 80と160 × 160は、どちらも160 / 1024の倍率です。stem幅96は表示時に15pxになります。
条件. 支給ファイルを明るい面や暗い面に配置するとき。
理由. 外部SVG画像はページのcurrentColorを継承しません。固定色の素材を背景に合わせます。
例. 明るい面には黒、暗い面には白の素材を選び、実際の表示寸法で読めるか確認します。
色を選ぶ前に、意味別の役割を決めます。primaryの紫、secondaryの黄、tertiaryの青緑、主操作の色の組み合わせは共通です。背景、本文、補助文字、境界線、リンク色には選択したパレットの値を使います。
前景と背景を組み合わせて確認します。mutedは意味のある情報にも使うため、読める状態を保ちます。faintは取り除いても意味が失われない装飾用です。控えめな区切りにはborder、明確な輪郭が必要な操作部品にはborder-strongを使います。
状態や分類を色だけで示しません。言葉、記号、形状の変化を組み合わせます。secondaryの黄色は強調色であり、警告色ではありません。
background ページ全体の基礎となる面。
surface 内容を分けて読みやすくする面。
surface-raised 親の面から区別したい操作部品や領域。
foreground UIの文字と見出し。
prose 長文を読むための文字。
muted メタデータや表のラベルなど、意味のある補助文字。
faint 取り除いても情報が失われない装飾専用。唯一の意味表示には使わない。
border 関連する内容を分ける控えめな線。
border-strong より明確な輪郭が必要な操作部品や領域。
accent 読めるリンク文字やグラフ系列の線。主要ボタンの塗りには使わない。
primary ブランド色の見本や、トークンの根拠で定めた限定的なグラフ下塗り。
button-background button-foregroundと組み合わせる塗りつぶしの主操作。
button-foreground button-background上の文字やアイコン。
on-color 明るいprimary、secondary、tertiaryの色見本に載せる暗い文字。
info-foreground 情報状態の文字と細い進捗線。広い青緑の塗りには使わない。
primary+on-color
button-background+button-foreground
主操作にはbutton-backgroundとbutton-foregroundを使います。明るいブランド色見本の文字にはon-colorを使います。
色を使う前に役割を決めます。Gn8のブランド色見本、塗りつぶす操作、リンク文字、情報表示、意味のあるメタデータは、色相が近くても別の役割です。
条件. ブランド色の見本と、画面で優先する操作を並べるとき。
理由. 明るいprimaryの色面はボタン背景ではありません。流用するとボタン文字との確認済みの組み合わせも変わります。
例. 明るい色見本ではprimaryとon-colorを使います。塗りつぶす主操作はbutton-backgroundとbutton-foregroundを組み合わせます。
条件. リンク、グラフ系列、情報ラベル、細い進捗線を描くとき。
理由. 文字や細線には、広い色見本の塗り色ではなく、テーマに合う前景色が必要です。
例. リンク文字はaccent、情報ラベルはinfo-foreground、青緑の広い色面はtertiaryに分けます。
条件. 日付、項目名、出典、説明文が主な内容より控えめに見えるとき。
理由. mutedは情報を伝えます。faintは消えても意味が変わらない装飾専用です。
例. 「出典」はmutedにし、意味を持たない区切りだけをfaintで表示します。
条件. 文字、アイコン、操作の輪郭を色面に置くとき。
理由. トークン名や見た目の印象は、別サイズ、透明度、背景とのコントラスト値を示しません。
例. 文書化されたボタンの組み合わせはbutton-backgroundとbutton-foregroundで、登録済みのsRGB HEX値では約4.53:1です。この値を他の組み合わせへ当てはめません。
情報 · 注記を確認 · 情報文字 · info-foreground
意味のあるメタデータ · muted
注意 注意状態 · ラベルと中立のstatus-attention
取り除ける装飾 · faintのみ
Gn8にはGn8 Light、Gn8 Dark、Gn8 Classic Light、Gn8 Classic Darkがあります。LightとDarkは暖色寄りと青みのある面を使い、Classic LightとClassic Darkは無彩色の面で構成します。閲覧環境に合わせて選び、前景と実際の背景を組み合わせて確認します。
ブランド色は四つのパレットで共通です。primaryは紫、secondaryは黄、tertiaryは青緑です。正準のOKLCH値はprimaryがoklch(64% 0.16 320)、secondaryがoklch(80% 0.24 96)、tertiaryがoklch(72% 0.16 200)です。表示テーマによって変わる役割には、選んだパレットの値を使います。
主操作の色の組み合わせは明るいブランド色見本とは別です。共通パレットを使うことと、利用者が四つの表示モードを切り替えられるようにすることは別の判断です。
四つのパレットを別々の色票としてではなく、実際の内容と一緒に比べます。見本の文面と意味を固定し、面と前景色の違いを確認します。
条件. ひと目で終わらず、文章を続けて読む画面を選ぶとき。
理由. Gn8 Light、Gn8 Dark、二つのClassicは背景、surface、surface-raisedの関係が異なります。
例. 空の背景色だけでなく、同じ項目名と説明文を各パレットに置いて確認します。
条件. 明るい面と暗い面にアクセントや操作を置くとき。
理由. primary、secondary、tertiaryは共通です。foreground、muted、accent、focus、情報文字はテーマに応じて変わります。
例. 同じ「言語」の見本を使い、文字は変えずに背景と読みやすい前景色の違いを見ます。
条件. トークン例を公開するときや、プロジェクトのテーマを決めるとき。
理由. デザインシステムに四つのパレットがあっても、すべての製品で利用者が切り替えられるとは限りません。
例. この図は固定の参照です。製品では実際に対応する外観だけを提供します。
条件. 状態、選択、分類を色で示すとき。
理由. グレースケール印刷や色の見え方の違いで色相が区別できなくても、ラベル、形、読み順は残ります。
例. 青緑だけで情報状態を知らせず、マーカーのそばに「情報」と表示します。
言語
日本語
メニューのラベルに使う言語です。
言語
日本語
メニューのラベルに使う言語です。
言語
日本語
メニューのラベルに使う言語です。
言語
日本語
メニューのラベルに使う言語です。
タイトル、見出し、本文、キャプション、技術ラベルを関連する小さな尺度で整理します。サイズ、ウェイト、比率で読む順序を示し、補助ラベルは主題より控えめにします。同じ種類の情報には同じ文字の役割を使います。
書体と大きさは、言語、読む内容、閲覧距離に合わせます。英語の長文では1行60〜75文字を出発点にできますが、固定の規則ではありません。日本語は自然な文節で折り返し、コードは本文と見分けられるようにします。
媒体をまたいで文字の役割を保ちつつ、同じフォントファイルやピクセル値を使う必要はありません。画面、投影、印刷それぞれで、使う距離から読めるか確認します。
文字の役割は、その文字が何を伝えるかを示します。役割を揃えたうえで、言語と読む場所に合うファミリー、サイズ、ウェイト、行高を選びます。
条件. タイトル、セクション見出し、本文、技術ラベル、コードがあるとき。
理由. 小さく一貫した尺度があると、主題と補足の違いを読み手が学べます。
例. セクション見出しにはh2、メタデータにはutilityを使い、行を埋めるためだけにラベルを大きくしません。
条件. 長い文章を読みにくくせず、役割を区別するとき。
理由. 大きなDisplayは詰めた行高を使えますが、複数行の本文には言語に応じた行間が必要です。
例. Gn8 Webの本文は16px / 24px、ウェイト500です。他の媒体では出力先の値を使います。
条件. 英語、日本語、投影、印刷、狭い画面で行の長さが変わるとき。
理由. 同じピクセル値でも、文字、書体、閲覧条件によって見え方が変わります。
例. 英語と日本語の長い設定名を自然に折り返し、投影や印刷は実際に読む距離から確認します。
条件. 同じ情報をWeb、ネイティブ画面、スライド、紙面に載せるとき。
理由. 媒体ごとにフォント、ポイント数、行幅が変わっても、文字の役割は保てます。
例. Webではsystem-uiをsans役割、IBM Plex Monoをutilityとcodeに使います。他媒体の必須書体ではありません。
Display · ホームページのヒーロー · 88px / 96px · 700
Aa
ページタイトル · 32px / 40px · 600
Choose the language used for menus, dates, and help.
セクション見出し · 24px / 32px · 600
メニュー、日付、ヘルプに使う言語を選びます。
本文 · 16px / 24px · 500
項目名と説明を一緒に保ちます。言語ごとに自然な文節で折り返します。
技術ラベル · 12px / 16px · 500
GUIDE · LABEL
コード · 12px / 16px · 400
lang="ja"
余白は空きを埋めるためではなく、情報の関係を示すために使います。近いものは同じまとまり、離れたものは別のまとまりとして読まれます。先に関係を決め、その関係に合わせて間隔と整列を選びます。
項目名・値・補足は一つの判断に必要な情報です。この間隔より、隣の判断までの間隔を広くします。すべてを等間隔にすると、どの補足がどの項目に属するかを読み手が推測することになります。
設定名と現在値をひとまとまりにし、「言語」と「日付形式」の間に区切りとなる余白を置きます。
同じ役割の情報は、同じ開始位置に置きます。見出し・項目名・説明の端が揃うと、視線を戻す位置が一定になります。中央寄せと左寄せを理由なく混ぜたり、文の長さごとに位置を変えたりしません。
設定一覧では項目名の列と値の列を揃えます。狭い幅では、列を無理に保たず、項目名の下に値を置きます。
ページ全体の幅と、その中の文章・図・表の幅は別の判断です。Gn8 のこのサイトでは外枠の最大幅を1200pxに保ち、ガイド本文はその内側を使います。本文を広げるために外枠まで解除すると、共通の整列と画面端の余白が崩れます。これはWebの実装例であり、他の媒体へ1200pxをそのまま持ち込みません。
広い画面では外枠を中央に保ち、本文・図版・注記の左右端を揃えます。図版の内側の余白は、外枠とは別に確保します。
情報を縮める前に、横並びを縦並びへ変えます。同じ要素と読み順を保ち、意味のある文を途中で切ったり、説明を省略したりしません。比較図も、狭い画面では修正前・修正後の順に積みます。
日本語と英語の両方、長い値、拡大表示で確認します。表の列間関係を保つ必要がある場合は、表の領域だけを横スクロール可能にします。
区切りのために毎回枠や左線を足すと、すべての情報が同じ強さになります。まず間隔でまとまりを作り、それだけでは境界が分かりにくい表・操作部品に必要な線を加えます。
注記は短いラベル・本文・背景で区別します。左側の色線は付けません。表の行の区切りやフォーカスの輪郭は、情報や操作に必要なので別の判断です。
このWebサイトでは8pxを基本格子にします。候補を限ると、その場で数値を決めるたびに生まれる小さな差を減らし、同じ役割の間隔を繰り返し使えます。ただし、すべての間隔を8pxにする規則ではありません。
同じまとまりの要素には8px、少し広い内側の間隔には16px、ページ端のガターには24px、まとまり同士には32px、節の切り替えには48px・64px・96pxを候補にします。まず関係を見て選びます。
まず近づけるものと分けるものを決め、同じ役割の情報が揃っているかを確かめます。表示した状態でも関係が読みにくい場合は、間隔を役割ごとに調整します。基準から外す必要があれば、対象と理由を記録し、次の画面でも意図を共有できるようにします。
項目名・値・説明を一組として確認し、次の項目との距離を別に見ます。ラベルと値の開始位置も揃えます。読みやすさに必要な差は、数値だけを揃えるために消しません。
1pxの線、見やすさを確認した2pxのフォーカス輪郭、OSが決める操作部品の形、文字の光学的な調整は余白トークンとは別の寸法です。印刷やネイティブ画面では、対象媒体の単位と仕様を使います。Webの8px格子を他の媒体へそのまま適用しません。
LOGO.mdは8pxを基準にしながら4px・2pxの調整も使います。360px、240px、96px、48px、32pxなどの記載寸法と図形の座標は仕様どおりに保ち、すべてを8px単位へ丸めません。
基本単位 図の1マスは8 CSS pxです。使う候補を限ることで、その場ごとの微差を抑え、同じリズムを繰り返し使えます。
design-token.ts の現在のWeb余白トークン 0px · 8px · 16px · 24px · 32px · 48px · 64px · 96px · 128px · 144px
13px・7px・23px・11px・19pxの不揃いな間隔で、項目と説明の関係が見えにくい。内容は修正後と同じです。
同じ判断の内側
グループ内は8px、グループ間は32px。役割に合わせて間隔を揃えます。内容は修正前と同じです。
項目ごとに位置が変わり、値を見比べるたびに視線が移動する。
項目名と値の列を揃える。幅が足りないときは縦に積む。
サイト共通の外枠
配置、比率、境界、繰り返す形で、どの要素がまとまり、どれが重要かを示します。形は内容の理解、操作部品の認識、分類に役立つ場合に使います。
同じ意味を持つ形はそろえます。輪郭や比率の違いは、役割の違いを伝える場合に使います。すべての媒体に共通する角丸値はありません。ロゴは仕様の図形を保ちます。
Webのパネル、アプリの操作部品、スライドの枠、印刷のページには、それぞれ異なる形があります。面や輪郭は役割に合わせ、出力寸法で全体の関係を確認します。
外枠、内容をまとめる面、構造を示す線には別の役割があります。関係を説明するのに必要な形だけを使い、他の部分は静かに保ちます。
条件. 塗りつぶしパネルがなくても関連する文章を一つに読めるとき。
理由. どの文にも背景を付けると、関連する内容も独立した内容も同じ箱に見えます。
例. 見出しと説明を近づけ、次の独立したまとまりまで広く間隔を取り、必要な場合だけ境界を描きます。
条件. ページやスライドに作業領域の境界が必要なとき。
理由. ページの境界と内側のカードは別の判断です。全項目を両方の枠で囲む必要はありません。
例. サイト共通の外枠を保ち、内容そのものに境界が必要な場合だけ局所的な枠を置きます。
条件. 表の行、入力欄、フォーカス状態に見える線が必要なとき。
理由. 線は構造や状態を示します。段落の横に置く装飾ではありません。
例. 操作部品にはstrong border、通常の区切りにはborderを使い、注記にアクセントの側線を加えません。
条件. ある形を別の製品や媒体へ持ち込むとき。
理由. Gn8サイトの角丸値は0です。OSの操作部品、スライド、印刷物すべての形を定める値ではありません。
例. 支給されたロゴの形は変えず、ネイティブ操作部品はプラットフォームの形に合わせます。
ページの外枠 · 構成の端
内容の面 · 関連する情報をまとめる
年 / 月 / 日
構造線 · 表の行を分ける
日付形式
言語
読む順序を明確にし、ラベルや出典は説明する内容の近くに置きます。意味のある画像やデータ図にはテキストによる説明を用意します。スライドでは重要な視覚情報を口頭でも伝え、必要に応じてノートや配布資料を用意します。
色だけに頼らず、状態や分類には言葉、記号、形の違いを加えます。文字の大きさとコントラストは、実際に使う画面、用紙、投影で確認します。
操作部品がある場合は、対象プラットフォームの機能で名前、フォーカス、状態を伝えます。Webサイト固有の確認方法は実装リファレンスにまとめます。
視覚見本は意味を見つけやすくしますが、意味のあるHTML、キーボード操作、アクセシビリティ全体の確認の代わりにはなりません。
条件. 状態、分類、選択、系列を色で示すとき。
理由. グレースケール印刷や色の見え方の違いで、色相の区別が失われる場合があります。
例. マーカーに「情報」「確認が必要」などの言葉を添え、色の点だけで状態を伝えません。
条件. 図やレイアウトにタイトル、説明、根拠があるとき。
理由. 装飾的な配置を取り除いても、見出しの構造と読み順が一致する必要があります。
例. 図の名前と結論を先に示し、ラベルと出典は説明するデータのそばに置きます。
条件. 文字の前景色、背景色、サイズ、透明度を決めるとき。
理由. 図にあるトークンの組み合わせだけでは、すべての状態、サイズ、重ね合わせ、最終表示の証明になりません。
例. foregroundをbackgroundに置いた組み合わせを実際の文字サイズで確認し、muted、focus、ラベル下の面も別に測ります。
条件. 画像、グラフ、図が段落にない情報を伝えるとき。
理由. 色や形は見える人の助けになりますが、データ自体が読めないまま残ることがあります。
例. 図に短い説明を付け、値や結論を選択できるテキストでも示します。
色だけ · 情報
情報
色、記号、言葉 · 情報
foreground on background · Lightテーマ
情報 · 色、記号、言葉
実際に表示する文字サイズで測ります。合格比率はここでは主張しません。
インタラクティブな媒体では、移動、選択、実行を見分けられるようにします。操作部品は製品のプラットフォームに合わせます。色の役割が共通でも、Webのボタン、アプリのスイッチ、スライドのリンクは同じ部品ではありません。
操作部品の状態を見えるようにします。ホバーは補助であり、唯一の手掛かりにしません。キーボードやプラットフォームのフォーカスを見える状態に保ち、処理中、無効、選択、入力エラー、完了を薄い色の変化だけで表さないようにします。
移動先を変える場合はリンク、操作を実行する場合はボタンを使います。操作名、項目名、修正方法を表す言葉は文章のカテゴリで扱います。
操作部品を描く前に、何をするものか、どう操作するかを決めます。見える形は操作対象の一部です。状態ラベルとキーボード操作も必要です。
条件. 同じ場所にナビゲーションと操作があるとき。
理由. リンクは移動し、ボタンは操作を実行します。名前とプラットフォームの挙動を揃えます。
例. 言語の説明を開くにはリンクを使い、言語の選択を保存するときはボタンを使います。
条件. 小さなアイコン、チェック欄、短いラベルを操作する場合。
理由. 見える輪郭だけではクリックやタップの対象全体は分かりません。隣の対象とは重ねません。
例. 小さいアイコンの見た目を保ちながら、押しやすい対象領域を用意します。
条件. キーボードで移動する、または一つの選択肢を選ぶとき。
理由. フォーカスは切り取られずに見え、選択値は色だけでなくラベルや形でも分かる必要があります。
例. 見える境界の外側にもフォーカス輪郭を表示し、選択した項目に「日本語 · 選択済み」と添えます。
条件. 操作の待ち時間、利用できない理由、修正が必要な状態を示すとき。
理由. スピナー、薄いラベル、赤い線だけでは、何が起きたか、次に何をするかが分かりません。
例. 「言語を保存中」と表示し、無効の理由を伝え、エラーの修正方法を項目のそばに置きます。
通常
言語を保存キーボードフォーカス
言語を保存選択済み
日本語 · 選択済み処理中
言語を保存中無効
言語を保存 操作を有効にするには言語を選びます。エラーと修正方法
保存する前に言語を選んでください。見える形と操作対象. 外側全体が操作対象です。中央の小さな図形が見えるアイコンです。
方向、進行状況、操作結果を静止画より分かりやすく伝えられる場合に動かします。位置や色の変化で何が起きたかを説明し、内容へアクセスするまで待たせません。
動きを減らす、または無効にする設定でも情報を得られるようにします。アニメーションを唯一の手掛かりや結果を見る条件にしません。固定された媒体や印刷物では、順序、ラベル、別のフレームで流れを表します。
情報を伝えるモーションには、同じ変化を理解できる静的な表現を用意します。
動きは、原因、方向、進行、結果を説明するときに役立ちます。内容が伝わった後も動き続けたり、次の操作を遅らせたりすると装飾になります。
条件. 内容の移動先や、時間とともに変わる状態を示すとき。
理由. 動きがきっかけと結果をつなぎます。取り除いても情報が変わらないなら、静止したままにします。
例. 開いたパネルは開いた操作元から現します。変化しないラベルを点滅させ続けません。
条件. 要素が登場し、静止し、または意味のある位置間を移動するとき。
理由. ease-outは初めの変化が大きく、最後に静止します。ease-in-outは始点と終点の両方で緩やかになります。イージングは加速を表し、時間や完了率ではありません。
例. 静止位置へ収まる表示にはサイトのease-outを使えます。測定値を示す進捗は、完了したように見せるためにイージングしません。
条件. 選択変更、キャンセル、または動きが終わる前に新しい操作が入るとき。
理由. 新しい選択の後に古い遷移を優先しません。次の操作を演出の完了までロックしません。
例. サイトのテーマ制御は進行中のView Transitionを中断し、revisionで最新の選択を適用します。
条件. OSが動きを減らす設定、静的表示、印刷を使うとき。
理由. アニメーションがなくても最終状態、ラベル、順序が分かる必要があります。
例. 移動する表示の代わりに見出しと状態ラベルをすぐ見せます。印刷では順序付きのフレームで流れを表します。
動きを減らす設定と印刷では、移動を付けず、この三つの状態を順番に表示します。
04 / 媒体への適用
伝える目的と意味別の役割を保ち、出力先に合う単位、レイアウト、挙動を選びます。
どの媒体でも読む順序の考え方は共通です。そのうえで実装を変えます。柔軟に変わるWebページ、OSの操作部品、投影スライド、綴じた文書では、閲覧条件も操作方法も異なります。
表示方法を選ぶ設定画面を考えます。Web部品の寸法を移さず、Gn8の文字・色の役割をOSに合わせます。
設定名と短い説明を組にし、システムの文字拡大に合わせて両方が折り返すようにします。
避ける ラベルをWeb向けのピクセル値で固定するか、画面に収めるため説明を削る。
使う 拡大できる文字スタイルと内容に応じたグループを使います。翻訳後のラベルも折り返せます。
設定名と操作部品の端をそろえます。文字量やアクセシビリティ設定に応じて行の高さを変えます。
避ける Webサイトのシェル幅を流用するか、長いラベルが切れる高さに行を固定する。
使う OSのレイアウト指針に従い、実際の内容を見てグループ間隔を調整します。
設定に合うネイティブの選択部品を使い、ラベル、値、選択状態を伝えます。
避ける 独自のスイッチを描き、選択状態をアクセント色だけで示す。
使う プラットフォームの操作部品を使い、フォーカスや読み上げに対応した状態を保ちます。
Gn8 OpenSlideテーマは1920 × 1080のキャンバス、M PLUS Rounded 1c、Gn8 Lightを既定値とし、四つのGn8パレットに対応します。これらはその実装の値です。
話題名だけでなく、根拠から導く結論を見出しにします。一枚の主張は一つにします。
避ける 「概要」の下に、発表者が読み上げる段落を載せる。
使う 分かったことを一文で示し、支える手順、データ、図を続けます。
実際の画像やデータを使い、直接ラベル、単位、出典を示します。意味のある画像の内容は口頭でも説明します。
避ける 空白を埋めるために架空の数値を作るか、ラベルのない色で分類する。
使う 出典を添えた実物の画像、グラフ、短いリストを使います。情報が密なら分割します。
Gn8 OpenSlideの1920 × 1080基準では、内容見出しは80px、本文は44pxです。会場の後方から読めるか確認します。
避ける Webの書体サイズをコピーしたり、配布資料の全文を投影用スライドに押し込んだりする。
使う テーマの文字役割を保ち、発表時の大きさで確認します。補足説明はノートや配布資料に分けます。
ガイドや報告書は固定されたページと物理的な閲覧距離に合わせます。ブラウザー幅ではなく、版型と綴じ方を基準にします。
ページ寸法、綴じ、読む順序に合わせて余白と段組みを選びます。繰り返すタイトル、ノンブル、キャプションの位置をそろえます。
避ける Webサイトの幅を印刷ページへそのまま置き、本文を裁ち落としまで広げる。
使う 実際の版型からページグリッドを作り、綴じ側の余白と見出しの位置をそろえます。
列名、単位、キャプション、出典をデータの近くに置きます。複数ページに続く表では、列の文脈を次ページにも示します。
避ける 画面向けの表を読めない大きさまで縮めるか、改ページで数値と見出しを分ける。
使う 意味のある位置で表を整理・分割し、次ページにも必要な列の説明を付けます。
実際の用紙とプリンターで文字、ロゴ、色の役割、コントラストを確認します。グレースケールやコピーでも違いが分かるか見ます。
避ける 画面の色がそのまま印刷されると考え、Gn8にないCMYK値を作る。
使う 実際の出力工程で校正し、色以外のラベルや形も残します。
伝える目的と根拠を保ち、読むときの配置、単位、操作方法を出力先に合わせます。下の四つの図は、出典のある一つの主張と二つの値を変えずに組み直した例です。
このWebサイトでは外枠の最大幅1200pxを保ちます。本文、図、注記はその内側にある幅を使います。狭い画面では項目名と値を縦に積み、列の比較が必要な表だけを局所スクロールにします。外枠と中身の幅は別の判断です。
例. 下の図では、320px幅でも主張の下に値を置き、出典をその下で折り返します。デスクトップの一行を保つために外枠を広げたり、出典を小さくしたりしません。
実際の設定画面では、設定名、説明、現在値を選んだプラットフォームのグループ規則に沿ってまとめます。システムの文字拡大に応じて行の高さと折り返しを変えます。実際に選択する設定には、ラベル、値、状態、標準のフォーカス挙動を持つネイティブ部品を使います。Webのピクセル値やCSS部品をネイティブ寸法の基準にしません。
例. Appleのプラットフォームなら、実際の設定画面でDynamic TypeとVoiceOverまたはキーボードのフォーカス順を確認します。下の静的な報告図は、偽のスマートフォン画面でもコンパイル済みSwiftの例でもありません。
Gn8 OpenSlideテーマは1920 × 1080固定のキャンバスを使い、M PLUS Rounded 1cとGn8 Lightを既定値にします。内容見出しは80px、本文は44pxです。結論を一つ見出しにし、根拠には直接ラベルを付け、画面上の出典は短くします。発表時に読みにくい場合は、文字を縮めず、スライドを分けるか補足をノートへ移します。
例. 図では主張、二つの仕様値、一行の出典の順に置きます。完全な出典のパスが必要なら、スライド上の文字を増やさず発表者ノートに記します。
1200pxのWeb外枠やスライドキャンバスではなく、実際の用紙寸法、綴じ方、読む順序に合わせて版面を組みます。複数ページに続く表は列の文脈を繰り返し、単位、キャプション、出典をデータの近くに保ちます。画面色やsRGB近似値から紙上の色は決まりません。印刷会社が受け付ける色管理を使い、通常の閲覧距離で実物校正を確認します。
例. この値を載せた長い表が次のページへ続く場合は、列見出しを繰り返し、該当する行の近くに出典を残します。この図の二つの値は一緒に保ちます。
主張
OpenSlide 2.0.1 のキャンバスは1920 × 1080固定で、本文の既定サイズは44pxです。
出典：Gn8 OpenSlideデザインガイド、冒頭および第3節。
主張を先に置き、項目名と値を組にします。出典は共通のページ外枠の中で折り返します。
主張
OpenSlide 2.0.1 のキャンバスは1920 × 1080固定で、本文の既定サイズは44pxです。
出典：Gn8 OpenSlideデザインガイド、冒頭および第3節。
操作部品のない静的な参考表示です。実際の設定はOS標準の文字拡大とフォーカス作法に従います。
主張
OpenSlide 2.0.1 のキャンバスは1920 × 1080固定で、本文の既定サイズは44pxです。
出典：Gn8 OpenSlideデザインガイド、冒頭および第3節。
主張を最初に読み、根拠をまとめ、短い出典だけをスライド上に残します。
主張
OpenSlide 2.0.1 のキャンバスは1920 × 1080固定で、本文の既定サイズは44pxです。
出典：Gn8 OpenSlideデザインガイド、冒頭および第3節。
実際の用紙と綴じ方で決めた版面の中に主張、値、出典をまとめます。
この付録では、現行Webサイトの挙動と値を記録します。サイトを変更するときに使う実装情報であり、他媒体に共通する寸法ではありません。
稼働中のサイトはGn8 LightとGn8 Darkを提供し、既定はDarkです。選択はlocalStorageのtheme-toggleに保存し、OSの表示設定には追従しません。Gn8 Classic LightとGn8 Classic Darkはパレット見本と配布ファイル向けで、サイトの切替にはありません。
Base.astroとsrc/layouts/theme.tsが、描画前とAstroの画面遷移後に選択を復元します。html[data-theme]、.dark、color-schemeを設定し、ヘッダーにはLight/Darkボタンを置きます。
サイトは正準ロゴ素材を/brand/から配信します。接尾辞のないSVGはcurrentColorを使います。インラインSVGは周囲の色を継承し、CSS maskはホスト要素のcurrentColorを塗り色に使えます。外部imgはページのcurrentColorを継承しないため、固定色のSVGを選びます。ロゴの種類と形状はLOGO.mdを参照します。
現行サイトの見出しと本文はsystem-ui, sans-serif、技術ラベルとコードはIBM Plex Monoとシステムの等幅フォールバックを使います。下の表にWebサイトの文字役割を示します。
Webサイトの余白トークンはピクセル単位です。技術ページは最大幅1200px、左右24pxの内側余白を取り、ホームページは幅900pxまで左右24px、901px以上は48pxです。角丸トークンは0ですが、固定ヘッダーのガラスカプセルは例外です。ライブラリ比較フレームはそれぞれの形状を保ちます。
公開する会社情報の正本はsrc/company.tsです。Webのマークアップでは、移動に<a>、操作に<button>を使います。入力の項目名を見える状態にし、ヘルプやエラーを項目の近くに置きます。technical-actionのCSSはbutton-backgroundとbutton-foregroundを使い、上下16px、左右32pxの余白を取ります。
Webサイトのstatus-attentionトークンは各表示テーマでmutedを参照します。success、warning、error用の独立した色ではありません。
下のサイズ、ウェイト、行高、ファミリーは、現行のdesign-token.tsオブジェクトから取得します。Displayはホームページのヒーロー用です。それ以外はWebサイトのUIと技術ページで使います。
横にスクロールすると、すべての列を読めます。
| 役割 | 書体 | ウェイト | サイズ / 行高 |
|---|---|---|---|
| Display | system-ui, sans-serif | 700 | 88px / 96px モバイル 48px / 56px |
| H1 | system-ui, sans-serif | 600 | 32px / 40px |
| H2 | system-ui, sans-serif | 600 | 24px / 32px |
| 本文 | system-ui, sans-serif | 500 | 16px / 24px |
| 強調本文 | system-ui, sans-serif | 500 | 16px / 24px |
| Utility | 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace | 500 | 12px / 16px |
| Code | 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace | 400 | 12px / 16px |
p {
color: var(--gn8-color-prose);
background: var(--gn8-color-background);
}下の尺度は現行Webサイトのトークン正本から読み込み、CSSピクセルで表示します。他の媒体では出力先の単位を使います。
--gn8-space-0 0px --gn8-space-1 8px --gn8-space-2 16px --gn8-space-3 24px --gn8-space-4 32px --gn8-space-5 48px --gn8-space-6 64px --gn8-space-7 96px --gn8-space-8 128px --gn8-space-9 144px 日英それぞれを320、375、414、768pxとデスクトップ幅で確認します。翻訳後のラベルは折り返し、表やコードは局所的にスクロールさせて、ページ全体が横にはみ出さないようにします。
Base.astroはページの言語、ランドマーク、スキップリンクを設定します。h1とセクション見出しの順序を整え、意味のあるリンクとボタン、情報を伝える画像の代替テキストを使います。
共通スタイルは:focus-visibleにfocusトークンを使った2pxの輪郭を付けます。各背景で見えることと、切り取られないことを確認します。キーボード、200%ズーム、幅320 CSS pxでページを確認します。
画面上の色ペアについて、WCAG 2.2 AAは通常文字に4.5:1、大きな文字に3:1、必要な非テキスト要素に3:1のコントラストを求めます。実際に描画される前景と背景の組み合わせを測ります。トークンページの確認は一部のペアに限られ、サイト全体の適合を表明するものではありません。
このガイドの広い表とコードは、名前付きのフォーカス可能なスクロール領域を使います。領域にフォーカスしたら、左右の矢印キーで列やコード行を移動します。
Webのレビュー項目
トークンページで確認するのは選択した意味別カラーの組み合わせです。すべての操作部品、フォーカス状態、透明度、ページ上の組み合わせは対象外です。 トークンページの色ペア確認を見る
現行Webサイトの色と表示時のトークンを下に示します。Base.astroは対象の要素向けに560msのreveal時間も設定します。
対応環境でポインターからテーマ切替を行うと、480ms、ease-inの円形View Transitionで新しい表示を展開します。初期復元、キーボード操作、非対応ブラウザー、動きを減らす設定では即座に切り替えます。prefers-reduced-motion: reduceではCSSの遷移も短縮されます。
Webで新しい動きを加える場合は、方向や状態を説明し、本文やフォーカス表示を遅らせません。非対応環境や動きを減らす設定では即時に利用できる経路を保ちます。
160ms 240ms 元の内容と、利用される場所での表示結果を確認します。正しい文章でもレイアウトに隠れることがあり、見た目のよい画面でも操作名を誤ることがあります。
対象者、目的、責任者、媒体、出力条件を明確にします。Gn8共通のアイデンティティと製品固有の選択を分けます。
正準ロゴとパレットを使います。主張や変わる事実を出典と照合し、例や提案を正確に表示します。
色、書体、余白、形状の関係を保ちます。出力先に合わせて単位、操作部品、レイアウトを選びます。
実機、発表時の大きさのスライド、通常の閲覧距離で見た印刷物を確認します。日英の文面、階層、コントラスト、対応する操作を確認します。
リンクとダウンロードを確認します。実施したレビューだけを説明し、必要な評価を行わずに規格適合を表明しません。
レイアウトの前に、各文の責任者を決めます。原稿だけでなく出力結果も確認します。翻訳は言葉を保っても意味を変えることがあり、正しい出典も図から切り離されたり、画面で隠れたりします。
変化する事実や測定値には、主張を書く担当者と、出典の版や現在の値を確認する担当者を付けます。編集者は文を明確にし、デザイナーは階層を変えられますが、出典が示す範囲を無断で広げません。根拠が足りない場合は文の範囲を狭めるか、提案だと明記します。
例. 共通の報告例では、Gn8 OpenSlideデザインガイドがキャンバス寸法と本文既定値の根拠です。配置を変えても、44pxを最小文字サイズという規則に言い換えません。
見本は規則を試すためのものであり、規則の根拠を借りてはいけません。実際の仕様値、推奨する配置、説明用の図を区別します。媒体間を比べるときは、課題、主張、単位、出典をそろえ、変えたレイアウトだけで読み方の違いを示します。
例. 下の四つの報告図は、同じ主張、1920 × 1080と44pxの値、出典を繰り返します。変更前後の成果や事業指標は加えていません。
日本語と英語を別々の組版として確認します。主張、単位、出典との関係を保ち、項目名や文の長さは自然に折り返します。文字色と背景色は実際に表示する組み合わせで見ます。フォーカスを確認するのは操作部品です。静的な図をフォーカス表示付きの部品に見せません。
例. 幅320pxでは、日本語の主張と英語の主張で行数が変わります。高さをそろえるために値や出典を隠さず、両方を読める状態にします。
出力に問題があれば、原因が原稿、翻訳、レイアウト、媒体固有の挙動のどこにあるかを分けて確認します。原因となった最小の層を直し、問題を見つけた確認をもう一度行います。主張、値、出典が一緒に伝わることも確かめます。
例. Webの320px表示で項目名と値が離れるなら、その行を縦に組み直します。Webに収めるためにOpenSlideの仕様原稿を書き換えません。
主張
OpenSlide 2.0.1 のキャンバスは1920 × 1080固定で、本文の既定サイズは44pxです。
出典：Gn8 OpenSlideデザインガイド、冒頭および第3節。
数値はテーマ仕様の実値です。事業実績を示す指標ではありません。
素材、トークン、プラットフォームの詳細を変える場合は、正本を更新してからこのガイドの実装リファレンスを合わせます。
素材とパレットの形式は、実際に描画する媒体から選びます。正本、生成するWeb用CSS、ネイティブ用素材、印刷校正は関連していますが、同じ原本ではありません。
`@gn8/brand-assets/assets/` にある承認済みSVGから選び、図形と比較基準はLOGO.mdに従います。WebではインラインSVGやCSS maskなら`currentColor`を継承できますが、外部`<img>`は継承しないため固定色版を選びます。ネイティブの描画環境や印刷会社が別形式を求める場合は、変換前に対応するベクター形式やラスター条件を確認します。
例. Webのテーマ色を継承するなら正準SVGをインライン表示します。パスをコンポーネントへコピーしたり、色の役割に合わせて図形自体を塗り替えたりしません。
色の役割を決めてから、使うパレットを選びます。Gn8では`accent`はリンクやグラフ系列、`primary`は共有ブランド色で、ボタンの塗りではありません。ボタンには`button-background`と`button-foreground`を使います。黄色は警告ではなく強調です。OpenSlideは`SlideTemplate`で`light`、`dark`、`classic-light`、`classic-dark`のいずれかを選びます。Webサイトの切替はLight/Darkのみで、既定はDarkです。印刷色は印刷会社の出力条件で校正します。
例. Gn8 Lightを既定にするOpenSlideデッキは、WebサイトのDark既定を引き継ぎません。画面の色見本ではなく、名前のあるテーマ役割を使います。
`design-token.ts`が正準パレット値とシリアライザーを所有します。brand-assetsパッケージはフラットな正準ロゴ素材を所有し、OpenSlideのパレットファイルはトークン正本から生成します。生成CSS、パレットファイル、`public/brand/`へのコピーは出力です。ネイティブアプリでは意味別の役割をOSのスタイルへ対応させます。このコンポーネントはSwift実装やネイティブ書き出しの存在を示しません。
例. トークン変更後は正本から影響する出力を生成し直します。生成済みパレットだけを手で直し、Webやスライドを古い値のままにしません。
正本の変更だけでは、すべての表示結果が正しいとは限りません。影響する利用先をたどり、承認済みの正本と実際の媒体を比べます。次の担当者が追えるように、変更した正本と確認した出力先を明確にします。画面上の値から印刷結果を表明しません。
例. ロゴ正本を変えたら、Webとスライドで影響する表示をLOGO.mdの形状仕様と照らします。印刷する場合はサイトの見本で承認せず、印刷会社の物理校正を見ます。