音楽ツールのデフォルトの見た目は、そのツールで人々が作る音楽のジャンルを決めてしまいます。黒と紫のシンセツールは、人々をシンセトラックへと押し出します。温かい紙質感のフォークツールは、フォークトラックへと押し出します。aisonggen ではジャンルに対して中立でいたかったので、フロントドアに 4 つのテーマを等しく並べています。
辿り着いた 4 つのムード
- Sonic Teal — クールで臨床的なデフォルト。深夜のマスタリングスタジオの内部のような印象。アンビエント、テクノ、楽曲が物語よりも構築物に近いものに最適。
- Neon Orange — ラウドでホットな一枚。ブランドのデフォルト。深夜 2 時のクラブの出口のような印象。トラップ、ハイパーポップ、エネルギーそのものが主題のジャンルに最適。
- Studio Black — 静かで高級感のある一枚。チャコールとゴールド。レザー張りのギターアンプのような印象。ジャズ、ソウル、シリアスに受け止められたいシンガーソングライター作品に最適。
- Electric Magenta — 遊び心のある一枚。ピンクとクローム。Y2K ミュージックビデオの内側のような印象。ポップ、ダンス、ジョークがあからさまでも許される音楽に最適。
テーマがもたらしたコスト
1 つのテーマをデザインすることは、コントラスト、階層、強調にまつわる小さな決断 1000 件です。4 つのテーマをデザインすることは、同じ 1000 件を 4 倍 — しかも同じコンポーネント上で破綻なく成立させなければなりません。これを扱える形にした方法は、すべての色をトークンシステムに移行すること。コンポーネント自体は決して 16 進カラーコードに手を伸ばさず、役割だけを参照します：--primary、--accent、--bg-elevated。テーマは値を変える。コンポーネントは一切変わらない。
テーマがもたらしたもの
予想していなかったこと：人々が個人の好みではなく、ジャンルの文脈でテーマを選び始めました。トラップビートを作っているプロデューサーは、デフォルトが Sonic Teal でも Neon Orange に切り替えていく。テーマスイッチャーは設定のドロップダウンであることをやめ、ワークフローの一部になりました — その時に書いている曲のために、部屋を適切なムードにセットする手段になったのです。
アクセシビリティについての注意
4 つのテーマすべてが、テキストコントラストとフォーカスリングで WCAG AA を満たしています。状態を色だけに頼っているものはありません — どのアクティブステートも、形、太さ、または位置を変えます。Sonic Teal と Neon Orange の色の違いを認識できないユーザーでも、ボタンが押されているかどうかは判別できます。