カラーパレットの定義

最初にカラーパレットの定義に着手しました。株式会社スターミュージック・エンタテインメント（以下スターミュージック）ではブランドカラーの#0A489Dとエキストラカラーの#FBF9F1（ロゴの星の色）のみが定義された状態でした。

まずはブランドカラーの色調展開展開を行いました。スターミュージックには特定のプロダクトはなく、主に業務システムのUIでの利用が中心であったため、基本的にはライトテーマのみで問題ありませんでした。しかし、将来的なダークテーマ対応も視野に入れてカラーパレットを展開したいと考えました。

Atlassian Design Systemより引用

そこで、AtlassianのDesign Systemのようにシンメトリーに色調を展開し、ひとつのカラースケールでライトテーマとダークテーマ双方に対応できるパレットを採用しました（上図参照）。

次にグレースケールの定義を行いました。グレースケールはブランドカラーの補色をベースの色調として展開し、アクセシビリティ対応のためアルファカラーの定義も追加しました。

最後に、カラフルなパターンを生成する時に使用するExpressive Colorの定義とスケール展開を行いました。Expressive Colorはブランドカラーの色相を起点にカラーホイールを8分割し、そこから色相を選定しました。

Interstellar Design Systemのカラーパレット

カラースケールはそれぞれのレベルでコントラスト比を揃え、色相ごとの同レベルのカラーから受ける印象が統一されるように調整されています。また、0〜500がダークテーマのSurface Color上で、600〜1300がライトテーマのSurface Color上で、WACG2.1で定められるレベルAAのコントラスト比をクリアするように調整しました。

タイポグラフィの定義

スターミュージックではGoogle Workspaceを契約しており、ドキュメントやスライドもGoog;e製品を利用しています。顧客とのタッチポイントにおいてブランドの一貫性を保つため、タイポグラフィにはGoogle Fontで提供されるフォントから選定の必要がありました。

日本語フォントには、ベーシックなタイプフェイスであり、JIS第一水準の漢字が含まれる「Noto Sans JP」を、等幅フォントにはAndroidでも使われ信頼性の高い「Roboto Mono」を採用しました。

欧文フォントについては、代表から「ボールドが印象的なサンセリフフォント」を望む要望がありました。その結果、日本語フォントとの組み合わせをいくつか検討・提案し、「Inter」を選定しました。

2023年11月には、ディスプレイでの可読性が高い「Inter Display」がリリースされたため、最終的に欧文フォントとして「Inter Display」を使用し、Google Workspaceの代替フォントとして「Inter」を用いることにしました。

デザイントークンの定義

デザイントークンの定義においては、色、タイポグラフィ、スペーシング、サイズなどのビジュアル要素をコードベースで管理しやすい形式に変換しました。これにより、デザイナーと開発者間のコミュニケーションをスムーズにし、プロダクト全体で一貫性を持たせることが可能となりました。例えば、カラーパレットやタイポグラフィの設定は、Figmaのスタイルガイドとしてまとめるだけでなく、JSON形式でエクスポートし、開発環境にも取り込める形で提供しています。これにより、将来的なスケーラビリティを確保しつつ、デザインと実装のギャップを埋めることができました。

コンポーネント設計

コンポーネント設計では、Atomic Designの原則に基づき、基本的なUIコンポーネント（ボタン、フォーム要素、カードなど）から、より複雑なコンポーネント（モーダル、ナビゲーションバー、ダッシュボードウィジェットなど）までを包括的に設計しました。各コンポーネントは、再利用性を最大化しつつ、カスタマイズ性を確保するために、Figma上でバリアントとして作成し、異なるステートやサイズに柔軟に対応できるようにしています。

また、全てのコンポーネントにはアクセシビリティガイドラインに沿ったラベル付けやフォーカス状態を定義し、エンドユーザーにとっての利便性と操作性を向上させる工夫をしています。

ネーミング・想い

スターミュージックはエンタメに関わる複数の事業を展開しています。一つ一つの事業を社名になぞらえて「星」と捉え、それらの間をつなぐデザインシステムでありたいという想いから「Interstellar（意：星と星の間の）」と命名しました。