Canonical Vanilla
Canonical Vanilla / 2013– / スタイル / プラットフォームの画面言語
Ubuntu、MAAS、JujuなどCanonicalのウェブサイトとアプリを、Ubuntu書体、分割グリッド、上罫付きセクション、広い余白で統一するCSSベースの画面言語。長い技術情報を見出しから速く走査できることを優先する。
ひと目で判断
見た目の特徴
- Ubuntu書体の細い大見出しと太い小見出し
- 25/75、50/50を軸にした非対称な分割
- 各セクション上端の細い罫と広い上下余白
- 白い面、濃い文字、橙または茄子色の焦点
向いている用途
- 技術製品の長い説明を、見出しから短時間で走査できるサイトへまとめるとき
- 複数のCanonical製品サイトと管理アプリへ同じ組版とセクションの律動を通すとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- Ubuntu Variableを使い、大見出しは細く、小見出しとUIラベルは太くして対比を反転させる。
- 構成
- 8または12列を25%単位で分け、短い見出しを左、長い内容を右へ置く。セクション上端に罫を引く。
- 素材
- 白場と濃色文字を基礎に、橙または茄子色をリンク、焦点、ブランドの節へだけ使う。
- 注意
- Ubuntu書体を使うだけではVanillaにならない。25%単位の分割とセクション間の読みのリズムまで一貫させる。
- 関連研究
- Vanilla brochure layouts / Ubuntu variable type scale / Canonical application layout
関連項目
- Mozilla Protocol（Mozilla Protocol）同じ「プラットフォームの画面言語」の系統。Canonical VanillaとMozilla Protocolの違いを見る
- GitHub Primer（GitHub Primer）同じ「プラットフォームの画面言語」の系統。Canonical VanillaとGitHub Primerの違いを見る
プラットフォームの画面言語をさらに見る
同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。
- アドワイタ（Adwaita）共通する印象：技術 / 静けさ / 信頼。
- GOV.UK デザインシステム（GOV.UK Design System）共通する印象：信頼 / 静けさ / 技術。
- ブリーズ（Breeze）共通する印象：技術 / 静けさ / 信頼。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/canonical-vanilla
- Markdown
- [Canonical Vanilla（Canonical Vanilla） — デザインスタイル辞典](https://indexstyle.org/ja/styles/canonical-vanilla)
- HTML
- <a href="https://indexstyle.org/ja/styles/canonical-vanilla">Canonical Vanilla（Canonical Vanilla） — デザインスタイル辞典</a>