VISUAL ARCHITECTURE

Brand Basic Color

Overview

ブランドベーシックカラーの概要

About use

ご使用について

『スタディサプリ』では、多岐に渡り展開しているブランドの印象を統一し競合と差別化するため、使用できるカラーに制限を設けています。
下記のカラーガイドラインに準じて各アウトプットを制作してください。

Brand Basic Color Spectrum and Use

ブランドベーシックカラースペクトラムと使用方法

『スタディサプリ』のブランドベーシックカラーのスペクトラムはブルー、白、黒で構成されています。これらのカラーは下記の使用規定・数値規定に従って使用してください。

サプリのブランドカラーは青( #0b41a0 )です。

Brand Basic Color

ブランドベーシックカラー コード一覧

アクセシビリティの観点で、RGBで各カラーに白抜き文字を入れる場合は「白抜き文字OK」マークのあるものをご使用ください。
プロダクト側では各領域でデザインガイドラインがあるのでそちらに準じてください。

※表示アイテムの材質や表示色の制約等でこのルールが守れない場合は、ブランドチームと協議の上『スタディサプリ』の世界観がくずれないよう配慮して慎重に色を選定してください。

Brand Color

『スタディサプリ』全体を通して使用するブランドカラーです。全てのクリエイティブは、このブランドカラーと調和がとれるように配色してください。

DarkBlue-700 HEX:#0B41A0 CMYK:C096/M081/Y004/k000 RGB:R011/G065/B160 PANTONE: Reflex Blue 優先使用カラー、RGBで白抜き文字OK

Secondary Color

ブランドの中で2番目に大切にするカラーです。Brand Colorと共に使用しブランドらしさをつくります。基本的には優先使用カラーをご使用ください。

  • UltraBlue-500 HEX:#429BF5 CMYK:C070/M033/Y000/k000 RGB:R066/G155/B245
  • UltraBlue-600 HEX:#1C80E7 CMYK:C079/M047/Y000/k000 RGB:R028/G128/B231 優先使用カラー、RGBで白抜き文字OK
  • UltraBlue-700 HEX:#0070E0 CMYK:C084/M054/Y000/k000 RGB:R000/G112/B224 優先使用カラー、RGBで白抜き文字OK
  • SkyBlue-500 HEX:#30B6F0 CMYK:C068/M013/Y002/k000 RGB:R048/G182/B240
  • SkyBlue-600 HEX:#0CA5E6 CMYK:C073/M022/Y022/k000 RGB:R012/G165/B230 優先使用カラー、RGBで白抜き文字OK
  • SkyBlue-700 HEX:#0C8DD8 CMYK:C079/M037/Y000/k000 RGB:R012/G141/B216 優先使用カラー、RGBで白抜き文字OK
  • TurquoiseBlue-500 HEX:#64CDCA CMYK:C059/M000/Y029/k000 RGB:R100/G205/B202
  • TurquoiseBlue-600 HEX:#3EC1BD CMYK:C067/M0002/Y034/k000 RGB:R062/G193/B189 優先使用カラー、RGBで白抜き文字OK
  • TurquoiseBlue-700 HEX:#33AAB2 CMYK:C072/M017/Y034/k000 RGB:R051/G170/B178 優先使用カラー、RGBで白抜き文字OK

Tertiary Color

ブランドの中で補助的に使えるカラー。メインでは使わず必要ある場合にアクセントカラーとして使用します。

  • DarkBlue-600 HEX:#275AB3 CMYK:C087/M067/Y000/k000 RGB:R039/G090/B179 RGBで白抜き文字OK
  • DarkBlue-800 HEX:#093788 CMYK:C100/M089/Y022/k000 RGB:R009/G055/B136 RGBで白抜き文字OK
  • Pink-700 HEX:#DE30CA CMYK:C000/M085/Y000/k000 RGB:R222/G048/B202 優先使用カラー、RGBで白抜き文字OK
  • Purple-800 HEX:#AA30DE CMYK:C060/M080/Y000/k000 RGB:R170/G048/B222 RGBで白抜き文字OK
  • Black HEX:#000000 CMYK:C000/M000/Y000/k100 RGB:R000/G000/B000 RGBで白抜き文字OK
  • White HEX:#FFFFFF CMYK:C000/M000/Y000/k000 RGB:R255/G255/B255 RGBで白抜き文字OK

Text Color

文字に使用できるカラー。背景色とのコントラストを意識し視認性を担保し使用してください。

  • DarkBlue-700 HEX:#275AB3 CMYK:C087/M067/Y000/k000 RGB:R039/G090/B179
  • Pink-700 HEX:#DE30CA CMYK:C000/M085/Y000/k000 RGB:R222/G048/B202
  • Gray-200 HEX:#DAE2E5 CMYK:C018/M009/Y009/k000 RGB:R218/G226/B229
  • Gray-400 HEX:#ADB88E CMYK:C037/M024/Y022/k000 RGB:R173/G184/B142
  • Gray-500 HEX:#808D96 CMYK:C057/M042/Y036/k000 RGB:R128/G141/B150
  • Gray-900 HEX:#24243F CMYK:C091/M091/Y058/k039 RGB:R36/G36/B63
  • White HEX:#FFFFFF CMYK:C000/M000/Y000/k000 RGB:R255/G255/B255

Background Color

背景に使用できるカラーパレットです。

  • SkyBlue-50 HEX:#F0F8FF CMYK:C008/M000/Y000/k000 RGB:R240/G248/B255
  • SkyBlue-100 HEX:#E9EEEF CMYK:C011/M005/Y006/k000 RGB:R233/G238/B239
  • SkyBlue-200 HEX:#CAE2E5 CMYK:C025/M000/Y000/k000 RGB:R202/G226/B229
  • Gray-50 HEX:#FAFAFA CMYK:C002/M002/Y002/k000 RGB:R250/G250/B250
  • Gray-100 HEX:#E9EEEF CMYK:C011/M005/Y006/k000 RGB:R233/G238/B239
  • Gray-200 HEX:#DAE2E5 CMYK:C018/M009/Y009/k000 RGB:R218/G226/B229
  • Gray-300 HEX:#C7D2D6 CMYK:C026/M014/Y014/k000 RGB:R199/G210/B214
  • Gray-400 HEX:#ADB8BE CMYK:C037/M024/Y022/k000 RGB:R173/G184/B142
  • Gray-500 HEX:#808D96 CMYK:C057/M036/Y036/k000 RGB:R128/G141/B150
  • Gray-600 HEX:#67717A CMYK:C068/M055/Y047/k001 RGB:R103/G113/B122 RGBで白抜き文字OK
  • Gray-700 HEX:#4C5263 CMYK:C078/M069/Y052/k011 RGB:R76/G82/B99 RGBで白抜き文字OK
  • White HEX:#FFFFFF CMYK:C000/M000/Y000/k000 RGB:R255/G255/B255

How to Use the color of “Yellow”

イエローの使用方法

Yellow-500(0~100%)の使用は原則メダル・アイコンの差し色のみに限っています。使用は全体の10%以下に抑えて下さい。リスティングバナーに関しては注目喚起の観点で、ブランドチームのチェックを受け使用することができます。

Yellow-500 HEX:#DBD700 CMYK:C020/M031/Y094/k000 RGB:R221/G183/B000 PANTONE Yellow-500の配色は全体の10%以下に抑えて下さい。

Subject Color

教科のカラー。各色その教科に該当する内容のものだけに使用することができます。
文字色にしたり白文字を載せたりすることは視認性の観点から控えてください。
背景、アイコン、グラフなどへの使用を想定しています。

  • 数学 DarkBlue-500 数学/数学I/数学Ⅱ/数学Ⅲ/数学A/数学B/数学活用/数学C/ HEX:#436FBA CMYK:C074/M041/Y000/k000 RGB:R067/G111/B186 PANTONE 2728 C
  • 英語 PinkRed-600 英語/コミュニケーション英語/英語表現/英語会話 HEX:#F56CA3 CMYK:C002/M068/Y004/k000 RGB:R245/G108/B163 PANTONE 1915 C
  • 日本語 Yellow-400 国語/現代文古典/言語文化/現代の国語 HEX:#E7CC4C CMYK:C016/M017/Y079/k000 RGB:R231/G204/B076 PANTONE 122 C
  • 理科 Purple-700 物理/化学/生物/地学/理科課題研究 HEX:#B551E0 CMYK:C049/M069/Y000/k000 RGB:R181/G081/B224 PANTONE 258 C
  • 社会 Turquise-700 公民/現代社会/倫理/政治・経済/公民/地理/歴史/世界史/日本史 HEX:#33AAB2 CMYK:C070/M011/Y032/k000 RGB:R051/G170/B178 PANTONE 7466 C
  • 情報 Turquise-700 メディア/セキュリティ/情報デザイン/プログラミング HEX:#58C0D9 CMYK:C059/M005/Y016/k000 RGB:R91/G192/B217 PANTONE 2170 C

NG Color

使用禁止色領域について

トーンバランスを崩し後進的なイメージを与えるため、サプリブルーから離れたカラーの使用は禁止です。

※トーンアンドマナーのひとつである『親しみやすさ』はイラストが担保するものとします。