Atlassian Design System
Atlassian Design System / 2012– / スタイル / プラットフォームの画面言語
JiraやConfluenceの複雑な共同作業を、トークン、文章、余白、グリッド、部品の共有規則へ落とす体系。調和と信頼を一貫性から作りながら、利用者が大量の課題・文書・状態を見失わないことを優先する。
ひと目で判断
見た目の特徴
- 白い面と薄い灰色の階層に青を主操作として置く
- 角丸のカードとロゼンジ型の状態ラベル
- サイドバー、表、詳細ペインの明確な分割
- 色・余白・角丸・影がトークンで揃う
向いている用途
- 課題管理やナレッジ共有で、一覧と詳細を往復する業務画面を作るとき
- 複数製品に同じ信頼感を保ちつつ、各製品の複雑さを吸収したいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 見出し、本文、ラベルの段階を固定し、状態名は短いロゼンジの中へ収める。
- 構成
- 左の移動、中央の一覧、右または別面の詳細という役割を崩さず、余白はトークンの倍数にする。
- 素材
- 白と淡い灰を基礎に青を主操作へ割り当て、状態色は意味を重ねない。
- 注意
- カードと状態ラベルを増やしすぎると、すべてが部品として同じ強さになり、いま進めるべき仕事が見えなくなる。
- 関連研究
- Atlassianのdesign principles / 状態を示すlozenge / spacing・radius・elevation tokens
関連項目
- GitHub Primer（GitHub Primer）同じ「プラットフォームの画面言語」の系統。Atlassian Design SystemとGitHub Primerの違いを見る
- コーポレート・メンフィス（Corporate Memphis）共通する印象：親密 / 信頼。Atlassian Design Systemとコーポレート・メンフィスの違いを見る
プラットフォームの画面言語をさらに見る
同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。
- Shopify Polaris（Shopify Polaris）共通する印象：信頼 / 親密 / 技術。
- Salesforce Lightning（Salesforce Lightning Design System）共通する印象：信頼 / 技術 / 親密。
- Ubuntu Yaru（Ubuntu Yaru）共通する印象：技術 / 親密 / 信頼。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/atlassian-design-system
- Markdown
- [Atlassian Design System（Atlassian Design System） — デザインスタイル辞典](https://indexstyle.org/ja/styles/atlassian-design-system)
- HTML
- <a href="https://indexstyle.org/ja/styles/atlassian-design-system">Atlassian Design System（Atlassian Design System） — デザインスタイル辞典</a>