ダークモードのご紹介 : Fastly コントロールパネルで目の負担の軽減とより柔軟なビジュアル設定が可能に
定期的に休憩を取ったり、ブルーライトカットメガネや目薬を利用するなど、目の疲れを軽減して作業に集中できるよう、さまざまな方法を利用している方も多いと思います。この度、皆さんの目の負担を少しでも軽くすべく、Fastly コントロールパネルにダークモードを導入しました。
目の疲れを軽減するため、またはデザイン的にダークモードを好む方も、Fastly のコントロールパネルでライトモードとダークモードから、お好きなモードを選べるようになりました。
ダークモードを導入した理由
Fastly のプロダクトデザインチームにとって、コントロールパネルで快適なユーザーエクスペリエンスを提供することは最優先課題の一つです。そこでお客様の声に応えるべく、今回コントロールパネルのデザインの最新アップデートとしてダークモード機能を追加しました。ダークモードではライトモードと同じ機能をご利用いただけるほか、以下のようなメリットがあります。
夜や暗い環境での目の疲れを軽減します。また、片頭痛、視力障害、目の疲労などによるアクセシビリティの問題を緩和します。
暗いサーバールームでも、部屋と画面の明るさのバランスを崩すことなく、モニターにリアルタイム統計を見やすく表示することができます。
一般的なコードエディターの画面によく似たコードビューアで、サービスバージョンを比較できます。
ダークモードのデザインと開発においては、読みやすさ、使いやすさ、そしてブランドとの調和を考慮しました。ダークモードでは、Fastly のビジュアルイメージに合わせたクールなスレートグレーや、淡いトーンを幅広く使用しています。
デザイントークンを使用してアップデートを簡素化
Fastly では、ユーザーインターフェイスの構築においてデザイントークンを使用しています。デザイントークンは、それぞれ名前と値によって規定されます。デザインチームとエンジニアリングチームは、色やフォントに共通の名前を使用することで、コードにおけるスタイルプロパティの扱い方を標準化することができます。これにより、チーム間のコラボレーションがより円滑になるほか、ユーザーに一貫性のあるブランドエクスペリエンスを提供することが可能になります。
例えばダークモードでは、すべての色を `grey-90` などのトークンとして定義し、`background-color--primary` などのより具体的な機能トークンの値を決定するために使用しました。
Fastly のコントロールパネルでは、ユーザー設定によって機能トークンの値を変更するためにカスタム CSS プロパティを使用しています。つまり、通常モードでは `background-color--primary` には `grey-00` の値が設定されていますが、ダークモードが有効になると `grey-90` に変わります。トークンの使用によって、新たなデザインテーマの導入が促進されるだけでなく、スタイルコードに一貫性が生まれ、よりスケーラブルで再利用しやすくなりました。
また、タイポグラフィやサイズなどでもデザイントークンを活用しています。今後はその他の UI 要素にも一貫性を与えるべく、トークンを使用していく予定です。これにより、複雑なコード変更を行うことなくスタイルの更新を単一の場所で行うことができ、ユーザーエクスペリエンスをより迅速かつ効率的に改善することが可能になります。
最先端の Javascript フレームワークは、トークンに基づいたテーマ設定を可能にする統合をサポートしているため、CSS、CSS-in-JS、またはオープンソースのテーマ設定を使用する場合でも、基本的な手法は同じです。デザイン要素に名前を付け、単一の場所に保管することで、誰でも簡単に参照・使用することができます。
ダークモードを有効にする
コントロールパネルのアカウント設定メニューから、ご利用の環境に合わせて簡単にダークモードとライトモードを切り替えることができます。ダークモードを有効にするには、コントロールパネルの Account メニューから、Appearance を選択してください。
また Fastly の Developer ポータルとドキュメントサイトでも、ご利用のオペレーティングシステムのテーマまたはユーザーエージェント設定に基づいて、ダークモードまたはライトモードを使用できるようになっています。
ダークモードに関するご感想をお待ちしています。お客様のご意見を参考に、今後もアクセシビリティに優れたコントロールパネルの開発に努めます。ぜひご意見やご感想を design@fastly.com までお寄せください。