Adobe Spectrum
Adobe Spectrum / 2013– / スタイル / プラットフォームの画面言語
Adobeの制作アプリ群を横断するためのデザインシステム。Rational、Human、Focusedを原則に、デスクトップとモバイルで密度の尺度を切り替え、道具の数が多い画面でも制作物へ注意を戻せるようにする。
ひと目で判断
見た目の特徴
- 濃淡の異なる中立面に、選択中だけ鮮色を置く
- アイコン、文字、境界線が同じ密度尺度で拡大する
- ツールバーとプロパティパネルが細い区切りで連なる
- 前景の制作物がUIより強く見える
向いている用途
- 画像・映像・文書を編集する制作ツールで、操作面を後景へ退かせたいとき
- 同じ製品をデスクトップとモバイルへ展開し、密度だけを体系的に変えたいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 小さなラベルでも潰れないサンセリフを使い、見出しより操作名の判別を優先する。
- 構成
- 作業面を中央に取り、道具と属性を周縁の帯へ固定する。密度の変更は全要素を同じ比率で行う。
- 素材
- 地は中立色の段階で組み、選択・焦点・警告にだけ鮮色を割り当てる。
- 注意
- パネルを暗くすれば制作ツールらしくなるわけではない。密度の尺度が混ざると、押せる領域と単なる表示の境が読めなくなる。
- 関連研究
- Rational・Human・Focusedの三原則 / desktop scaleとmobile scale / Spectrum 2での色とアイコンの改訂
関連項目
- フルーエント2（Fluent 2）共通する印象：信頼 / 技術 / 静けさ。Adobe Spectrumとフルーエント2の違いを見る
- GitHub Primer（GitHub Primer）同じ「プラットフォームの画面言語」の系統。Adobe SpectrumとGitHub Primerの違いを見る
プラットフォームの画面言語をさらに見る
同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。
- アドワイタ（Adwaita）共通する印象：技術 / 静けさ / 信頼。
- GOV.UK デザインシステム（GOV.UK Design System）共通する印象：信頼 / 静けさ / 技術。
- ブリーズ（Breeze）共通する印象：技術 / 静けさ / 信頼。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/adobe-spectrum
- Markdown
- [Adobe Spectrum（Adobe Spectrum） — デザインスタイル辞典](https://indexstyle.org/ja/styles/adobe-spectrum)
- HTML
- <a href="https://indexstyle.org/ja/styles/adobe-spectrum">Adobe Spectrum（Adobe Spectrum） — デザインスタイル辞典</a>