ソラライズド
Solarized / 2011– / スタイル / UI表現
Ethan Schoonoverが値ごと公開した、端末とエディタのための16色。八つの地色と八つの差し色からなり、地色のCIELAB明度差を対称に取ってあるので、明地と暗地を入れ替えても読みの調子が変わらない。明るさの差を下げ、色相の差で語を区別する。
.png)
ひと目で判断
見た目の特徴
- 地色が純黒でも純白でもなく、青緑に寄った濃色と黄に寄った淡色になる
- 本文と地の明度差が小さく、白地に黒より弱い当たりで読ませる
- 八つの差し色の明るさがほぼ揃い、色相の違いだけで区別が付く
- 明地と暗地を切り替えても、同じ差し色が同じ役割のまま出てくる
向いている用途
- エディタや端末の配色を、明地と暗地の両方で同じ読み味に揃えたいとき
- 長時間見続ける画面で、コントラストを上げずに要素を区別したいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 等幅書体を一つ。強調を太さや斜体に頼らず、色で語を分ける。
- 構成
- 罫線で区切らず、地色を一段だけ動かして領域を分ける。地の面積を広く残す。
- 素材
- 八つの地色と八つの差し色を固定して使う。濃地は #002b36、淡地は #fdf6e3 を端に置き、本文は中間の灰で取る。
- 注意
- 地色だけ借りて差し色を好みで足すと、CIELABで揃えた明度がずれ、色相の差で読ませるという仕組みそのものが働かなくなる。
- 関連研究
- base03:base0 と base02:base1 の明度差が同じ値に設計されている点 / 八つの差し色が色相環の固定した関係から取られていること / 端末やエディタへの移植版が、公開された値をどこまで保っているか
関連項目
- ターミナルUI（Terminal UI）同じ「UI表現」の系統。ソラライズドとターミナルUIの違いを見る
- マテリアルデザイン（Material Design）共通する印象：信頼 / 技術。ソラライズドとマテリアルデザインの違いを見る
UI表現をさらに見る
同じ「UI表現」から、共通する印象が多い順に次の項目を選んだ。
- スケルトン・スクリーン（Skeleton Screen）共通する印象：技術 / 信頼 / 静けさ。
- コマンドパレット（Command Palette）共通する印象：技術 / 静けさ / 信頼。
- レスポンシブ・ウェブデザイン（Responsive Web Design）共通する印象：技術 / 信頼。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/solarized
- Markdown
- [ソラライズド（Solarized） — デザインスタイル辞典](https://indexstyle.org/ja/styles/solarized)
- HTML
- <a href="https://indexstyle.org/ja/styles/solarized">ソラライズド（Solarized） — デザインスタイル辞典</a>