GitHub Primer
GitHub Primer / 2017– / スタイル / プラットフォームの画面言語
GitHubの高密度な開発画面を、色・文字・アイコン・間隔・部品の規則として共有するデザインシステム。装飾より作業の流れを優先し、小さな面に状態と操作を多く載せながら、アクセシビリティとレスポンシブ対応を崩さない。
無彩色の面に青いリンクと状態色を絞って置く / Octiconsと短いラベルで操作を詰める / 細い境界線でリスト、タブ、サイドバーを分ける / 密度が高くても見出しと間隔の段階が一定
辞書情報
- 向いている用途
- 開発者向けSaaSや管理画面で、多数の状態と操作を一画面に収めるとき。複数チームが同じ部品を使いながら、情報密度とアクセシビリティを揃えるとき
- 文字
- 本文とラベルは平明なサンセリフに統一し、太さと色で階層を作る。
- 構成
- リスト、タブ、サイドバーを細い罫線で区切り、余白の単位を少数に固定する。
- 素材
- 無彩色を地にして、リンクの青と成功・警告・危険の意味色だけを強く使う。
- 注意
- GitHubらしさを出そうと罫線と小部品を増やすだけでは、操作の優先順位が消えて窮屈な管理画面になる。
- 関連研究
- PrimerのProduct principles / Octiconsと意味の対応 / 密度を保ったレスポンシブ設計
関連項目
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/github-primer
- Markdown
- [GitHub Primer（GitHub Primer） — デザインスタイル辞典](https://indexstyle.org/ja/styles/github-primer)
- HTML
- <a href="https://indexstyle.org/ja/styles/github-primer">GitHub Primer（GitHub Primer） — デザインスタイル辞典</a>