カラースキーム

カラースキームについて

Startify-UIでは、デザイントークンの一環として、「パレットカラー」「グレーカラー」「ステータスカラー」と3種類のカラースケールに加えて、「テーマカラー」をカラースキームとして定義しています。これらの配色を効果的に扱うことで、ユーザーにとって使いやすく、一貫性のある美しいデザインを実現します。

各カラースキームはデザインを柔軟かつ豊かに表現できるように、トーン0からトーン9まで明度と彩度が異なる10段階の階調で設定されています。これにより、クリエイターはさまざまなデザインニーズに応じて、配色として調和を与えながら最適な色を選択することができます。

これらのカラースキームで扱っている色は、UIコンポーネントやテキスト、ボーダーなどページ上にある要素の色として使用します。また、それぞれの色はCSS変数として参照したり、ユーティリティクラスとして提供されていますので、簡単に色を設定することができます。

パレットカラー

パレットカラーは、主にウェブサイトやアプリケーションのイメージカラーとして扱われる配色です。これらのカラーは、ブランドのアイデンティティを強化し、視覚的な一貫性を提供するために設計されています。色相環を基準に色味が異なる16色を選定しているため、デザインにおいて調和の取れた、表現豊かな配色が可能です。主にボタンやリンクなどのUIコンポーネントやアクセント要素に使用されます。

レッド（red）

トーン0 #FEE2E2
トーン1 #FECACA
トーン2 #FCA5A5
トーン3 #F87171
トーン4 #EF4444
トーン5 #DC2626
トーン6 #B91C1C
トーン7 #991B1B
トーン8 #7F1D1D
トーン9 #450A0A

オレンジ（orange）

トーン0 #FFEDD5
トーン1 #FED7AA
トーン2 #FDBA74
トーン3 #FB923C
トーン4 #F97316
トーン5 #EA580C
トーン6 #C2410C
トーン7 #9A3412
トーン8 #7C2D12
トーン9 #431407

オレンジイエロー（orange-yellow）

トーン0 #FEF3C7
トーン1 #FDE68A
トーン2 #FCD34D
トーン3 #FBBF24
トーン4 #F59E0B
トーン5 #D97706
トーン6 #B45309
トーン7 #92400E
トーン8 #78350F
トーン9 #451A03

イエロー（yellow）

トーン0 #FEF9C3
トーン1 #FEF08A
トーン2 #FDE047
トーン3 #FACC15
トーン4 #EAB308
トーン5 #CA8A04
トーン6 #A16207
トーン7 #854D0E
トーン8 #713F12
トーン9 #422006

イエローグリーン（yellow-green）

トーン0 #ECFCCB
トーン1 #D9F99D
トーン2 #BEF264
トーン3 #A3E635
トーン4 #84CC16
トーン5 #65A30D
トーン6 #4D7C0F
トーン7 #3F6212
トーン8 #365314
トーン9 #1A2E05

グリーン（green）

トーン0 #DCFCE7
トーン1 #BBF7D0
トーン2 #86EFAC
トーン3 #4ADE80
トーン4 #22C55E
トーン5 #16A34A
トーン6 #15803D
トーン7 #166534
トーン8 #14532D
トーン9 #052E16

ティール（teal）

トーン0 #CCFBF1
トーン1 #99F6E4
トーン2 #5EEAD4
トーン3 #2DD4BF
トーン4 #14B8A6
トーン5 #0D9488
トーン6 #0F766E
トーン7 #115E59
トーン8 #134E4A
トーン9 #042F2E

シアン（cyan）

トーン0 #CFFAFE
トーン1 #A5F3FC
トーン2 #67E8F9
トーン3 #22D3EE
トーン4 #06B6D4
トーン5 #0891B2
トーン6 #0E7490
トーン7 #155E75
トーン8 #164E63
トーン9 #083344

ライトブルー（light-blue）

トーン0 #E0F2FE
トーン1 #BAE6FD
トーン2 #7DD3FC
トーン3 #38BDF8
トーン4 #0EA5E9
トーン5 #0284C7
トーン6 #0369A1
トーン7 #075985
トーン8 #0C4A6E
トーン9 #082F49

ブルー（blue）

トーン0 #DBEAFE
トーン1 #BFDBFE
トーン2 #93C5FD
トーン3 #60A5FA
トーン4 #3B82F6
トーン5 #2563EB
トーン6 #1D4ED8
トーン7 #1E40AF
トーン8 #1E3A8A
トーン9 #172554

ブルーバイオレット（blue-violet）

トーン0 #E0E7FF
トーン1 #C7D2FE
トーン2 #A5B4FC
トーン3 #818CF8
トーン4 #6366F1
トーン5 #4F46E5
トーン6 #4338CA
トーン7 #3730A3
トーン8 #312E81
トーン9 #1E1B4B

バイオレット（violet）

トーン0 #EDE9FE
トーン1 #DDD6FE
トーン2 #C4B5FD
トーン3 #A78BFA
トーン4 #8B5CF6
トーン5 #7C3AED
トーン6 #6D28D9
トーン7 #5B21B6
トーン8 #4C1D95
トーン9 #2E1065

パープル（purple）

トーン0 #F3E8FF
トーン1 #E9D5FF
トーン2 #D8B4FE
トーン3 #C084FC
トーン4 #A855F7
トーン5 #9333EA
トーン6 #7E22CE
トーン7 #6B21A8
トーン8 #581C87
トーン9 #3B0764

マゼンタ（magenta）

トーン0 #FAE8FF
トーン1 #F5D0FE
トーン2 #F0ABFC
トーン3 #E879F9
トーン4 #D946EF
トーン5 #C026D3
トーン6 #A21CAF
トーン7 #86198F
トーン8 #701A75
トーン9 #4A044E

ピンク（pink）

トーン0 #FCE7F3
トーン1 #FBCFE8
トーン2 #F9A8D4
トーン3 #F472B6
トーン4 #EC4899
トーン5 #DB2777
トーン6 #BE185D
トーン7 #9D174D
トーン8 #831843
トーン9 #500724

ピンクレッド（pink-red）

トーン0 #FFE4E6
トーン1 #FECDD3
トーン2 #FDA4AF
トーン3 #FB7185
トーン4 #F43F5E
トーン5 #E11D48
トーン6 #BE123C
トーン7 #9F1239
トーン8 #881337
トーン9 #4C0519

グレーカラー

グレーカラーは、背景色や文字色などのUIのベースとなる配色に使用されます。これらのカラーは、コンテンツの可読性を高め、デザイン全体のバランスを取るために重要な役割を果たします。ライトグレーからダークグレーまで、さまざまな濃淡を揃えており、デザインの柔軟性を提供します。

Startify-UIでは基本となる無彩色のグレースケールのほかに、青系の色味をベースに寒色寄りのクールタイプの配色と、オレンジ系の色味をベースに暖色寄りのウォームタイプの配色も用意しています。これにより、テーマカラーで採用している色との親和性を高め、より一貫性のある調和の取れたデザインを実現することができます。

クール（gray-cool）

トーン0 #F1F5F9
トーン1 #E2E8F0
トーン2 #CBD5E1
トーン3 #94A3B8
トーン4 #64748B
トーン5 #475569
トーン6 #334155
トーン7 #1E293B
トーン8 #0F172A
トーン9 #020617

ウォーム（gray-warm）

トーン0 #F5F5F4
トーン1 #E7E5E4
トーン2 #D6D3D1
トーン3 #A8A29E
トーン4 #78716C
トーン5 #57534E
トーン6 #44403C
トーン7 #292524
トーン8 #1C1917
トーン9 #0C0A09

モノクローム（gray-mono）

トーン0 #F4F4F4
トーン1 #E4E4E4
トーン2 #D4D4D4
トーン3 #A1A1A1
トーン4 #717171
トーン5 #525252
トーン6 #3F3F3F
トーン7 #272727
トーン8 #181818
トーン9 #090909

その他、汎用的に用いられるニュートラルカラーとして白と黒も設定しています。これらもCSS変数やユーティリティークラスとして提供されています。

White #FFFFFF
Black #000000

ステータスカラー

ステータスカラーは、アプリケーションの状態や情報を示すために使用されます。たとえば、エラー、警告、成功といった状態やメッセージを視覚的に伝えるための色です。これにより、ユーザーは直感的に情報を把握することができます。

エラー・禁止（error）

トーン0 15% + 白
トーン1 30% + 白
トーン2 40% + 白
トーン3 60% + 白
トーン4 100%
トーン5 75% + 黒
トーン6 60% + 黒
トーン7 45% + 黒
トーン8 30% + 黒
トーン9 15% + 黒

注意・警告（warning）

トーン0 15% + 白
トーン1 30% + 白
トーン2 40% + 白
トーン3 60% + 白
トーン4 100%
トーン5 75% + 黒
トーン6 60% + 黒
トーン7 45% + 黒
トーン8 30% + 黒
トーン9 15% + 黒

成功・許可・完了（success）

トーン0 15% + 白
トーン1 30% + 白
トーン2 40% + 白
トーン3 60% + 白
トーン4 100%
トーン5 75% + 黒
トーン6 60% + 黒
トーン7 45% + 黒
トーン8 30% + 黒
トーン9 15% + 黒

通知・進行中（info）

トーン0 15% + 白
トーン1 30% + 白
トーン2 40% + 白
トーン3 60% + 白
トーン4 100%
トーン5 75% + 黒
トーン6 60% + 黒
トーン7 45% + 黒
トーン8 30% + 黒
トーン9 15% + 黒

中止・終了（negative）

トーン0 15% + 白
トーン1 30% + 白
トーン2 40% + 白
トーン3 60% + 白
トーン4 100%
トーン5 75% + 黒
トーン6 60% + 黒
トーン7 45% + 黒
トーン8 30% + 黒
トーン9 15% + 黒

テーマカラー

テーマカラーは、先述の「パレットカラー」や「グレーカラー」など、有彩色と無彩色のカラースケールを複数組み合わせて構成される配色です。これは、ウェブサイトやアプリケーションのUIデザインにおける基準となる重要な要素です。テーマカラーは、色の重要度や優先度、使用頻度に応じて分類されたカラースケールで構成されます。

具体的には、画面の背景色や文字色など、基本的な要素に使用される「ベースカラー」、デザインイメージの中心となる「プライマリーカラー」、プライマリーカラーを補完する「セカンダリーカラー」、そしてデザイン全体のアクセントとして使用される「アクセントカラー」の4つを主軸に設定します。これらの配色により、視覚的な一貫性と効果的な情報伝達を実現します。

以下の配色はパレットカラーとグレーカラーに含まれるカラースケールを使用したテーマカラーの一例になります。ベースカラーには無彩色や低彩度の色相のカラースケールを、プライマリーカラーとセカンダリーカラーには類似色相を、アクセントカラーには補色や対称となる色味を採用するとバランスが良い配色になります。

ベース（base）

トーン0 #F1F5F9
トーン1 #E2E8F0
トーン2 #CBD5E1
トーン3 #94A3B8
トーン4 #64748B
トーン5 #475569
トーン6 #334155
トーン7 #1E293B
トーン8 #0F172A
トーン9 #020617

プライマリー（primary）

トーン0 #E0E7FF
トーン1 #C7D2FE
トーン2 #A5B4FC
トーン3 #818CF8
トーン4 #6366F1
トーン5 #4F46E5
トーン6 #4338CA
トーン7 #3730A3
トーン8 #312E81
トーン9 #1E1B4B

セカンダリー（secondary）

トーン0 #E0F2FE
トーン1 #BAE6FD
トーン2 #7DD3FC
トーン3 #38BDF8
トーン4 #0EA5E9
トーン5 #0284C7
トーン6 #0369A1
トーン7 #075985
トーン8 #0C4A6E
トーン9 #082F49

アクセント（accent）

トーン0 #FEF3C7
トーン1 #FDE68A
トーン2 #FCD34D
トーン3 #FBBF24
トーン4 #F59E0B
トーン5 #D97706
トーン6 #B45309
トーン7 #92400E
トーン8 #78350F
トーン9 #451A03

なお、テーマカラーの配色に「ステータスカラー」を含めないことが重要です。ステータスカラーは、アプリケーションの状態を視覚的に示すための配色であり、デザインテーマやブランディングを目的とする配色とは用途が異なります。このため、ステータスカラーはテーマカラーとは分離して設計し、適切な役割を持たせる必要があります。

テーマカラーを構成する各色の比率について

調和の取れたテーマカラーを実現するには、ベースカラー、プライマリーカラー、セカンダリーカラー、アクセントカラーといった各カラースケールの構成比を考慮することが重要です。デザインイメージに応じて異なりますが、以下のような比率で各カラーを配分することで、バランスが取れたメリハリのある配色に仕上げることができます。

ベース 50%

プライマリー 40%

セカンダリー 20%

アクセント 10%

カラースキーム