GitHub Primer

GitHub Primer / 2017– / スタイル / プラットフォームの画面言語

GitHubの高密度な開発画面を、色・文字・アイコン・間隔・部品の規則として共有するデザインシステム。装飾より作業の流れを優先し、小さな面に状態と操作を多く載せながら、アクセシビリティとレスポンシブ対応を崩さない。

GitHub Primer — GitHub Primer ViewComponents — official file-tree snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT
GitHub Primer ViewComponents — official file-tree snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT · MIT
GitHub Primer — GitHub Primer ViewComponents — official navigation-list snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT
GitHub Primer ViewComponents — official navigation-list snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT · MIT
GitHub Primer — AI生成の解釈イメージ 1
AI生成の解釈イメージ（参考作品ではありません）

ひと目で判断

見た目の特徴

  • 無彩色の面に青いリンクと状態色を絞って置く
  • Octiconsと短いラベルで操作を詰める
  • 細い境界線でリスト、タブ、サイドバーを分ける
  • 密度が高くても見出しと間隔の段階が一定

向いている用途

  • 開発者向けSaaSや管理画面で、多数の状態と操作を一画面に収めるとき
  • 複数チームが同じ部品を使いながら、情報密度とアクセシビリティを揃えるとき

このスタイルを使う

短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。

design.md画像プロンプトJSON APIMCP・機械向け入口掛け合わせ
ChatGPTで開くClaudeで開くGoogle AIで開く
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式

辞書情報

文字
本文とラベルは平明なサンセリフに統一し、太さと色で階層を作る。
構成
リスト、タブ、サイドバーを細い罫線で区切り、余白の単位を少数に固定する。
素材
無彩色を地にして、リンクの青と成功・警告・危険の意味色だけを強く使う。
注意
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>

一覧内の位置へ戻る