アドワイタ
Adwaita / 2011– / スタイル / プラットフォームの画面言語
GNOME が自分の既定の見た目に与えた名前で、指針書は明るい版と暗い版と高コントラスト版を同じ部品で成立させると定める。窓の上端をヘッダーバーが1本横切り、そこに載る釦は背景も枠も描かれない。アイコンは16x16pxの単色シンボリックに統一される。
ひと目で判断
見た目の特徴
- 窓の上端を横切る1本のヘッダーバー。左と中央と右の三点に寄せ、中央に窓の見出しが座る
- ヘッダーバーの釦は背景も枠も持たず、記号と文字だけが面に浮く
- 16x16px で描かれた単色のシンボリックアイコン。主要な線は2px幅で、遠近を付けない正面の形
- Blue 3 の #3584e4 を含む、色相ごとに5段階そろえた公開パレット
向いている用途
- Linux デスクトップ向けのアプリを、明るい設定でも暗い設定でも同じ骨格で見せたいとき
- 自作の部品を足すのに、色の値を直に書かず既存の色変数と style class に載せて作りたいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 釦は記号か文字のどちらか一方で示す。両方を並べるのは側面の一覧と表示切替に限る。
- 構成
- 上端にヘッダーバーを置き、主要な動作を左、見出しを中央、メニューを右へ。掴んで動かすための空きを必ず残す。連結した釦の代わりに間隔で群を作る。
- 素材
- 色は公開パレットから採り、明るい版と暗い版と高コントラスト版で自動的に振り替わる変数として持つ。アイコンは単色の SVG で描き、着色は後から当てる。
- 注意
- 色の値を直に書き込むと、暗い版と高コントラスト版に切り替えたときだけ壊れるので、普段使っている画面では最後まで気づけない。
- 関連研究
- libadwaita の style class 一覧と CSS 変数の対応 / GNOME パレットが色相ごとに5段階を持つ理由と、その使い分け / 表示内容が変わるとヘッダーバーの中身も差し替わるという設計の帰結
関連項目
- フラットデザイン / ベクターミニマリズム（Flat Design / Vector Minimalism）共通する印象：信頼。アドワイタとフラットデザイン / ベクターミニマリズムの違いを見る
- マテリアルデザイン（Material Design）共通する印象：信頼 / 技術。アドワイタとマテリアルデザインの違いを見る
取り違えられやすい
プラットフォームの画面言語をさらに見る
同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。
- GOV.UK デザインシステム（GOV.UK Design System）共通する印象：信頼 / 静けさ / 技術。
- GitHub Primer（GitHub Primer）共通する印象：技術 / 信頼 / 静けさ。
- Adobe Spectrum（Adobe Spectrum）共通する印象：技術 / 信頼 / 静けさ。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/adwaita
- Markdown
- [アドワイタ（Adwaita） — デザインスタイル辞典](https://indexstyle.org/ja/styles/adwaita)
- HTML
- <a href="https://indexstyle.org/ja/styles/adwaita">アドワイタ（Adwaita） — デザインスタイル辞典</a>