VISUAL ARCHITECTURE
Brand Basic Color
Overview
ブランドベーシックカラーの概要
About use
ご使用について
『スタディサプリ』では、多岐に渡り展開しているブランドの印象を統一し競合と差別化するため、使用できるカラーに制限を設けています。
下記のカラーガイドラインに準じて各アウトプットを制作してください。
Brand Basic Color Spectrum and Use
ブランドベーシックカラースペクトラムと使用方法
『スタディサプリ』のブランドベーシックカラーのスペクトラムはブルー、白、黒で構成されています。これらのカラーは下記の使用規定・数値規定に従って使用してください。
サプリのブランドカラーは青( #0b41a0 )です。
Brand Basic Color
ブランドベーシックカラー コード一覧
アクセシビリティの観点で、RGBで各カラーに白抜き文字を入れる場合は「白抜き文字OK」マークのあるものをご使用ください。
プロダクト側では各領域でデザインガイドラインがあるのでそちらに準じてください。
※表示アイテムの材質や表示色の制約等でこのルールが守れない場合は、ブランドチームと協議の上『スタディサプリ』の世界観がくずれないよう配慮して慎重に色を選定してください。
Brand Color
『スタディサプリ』全体を通して使用するブランドカラーです。全てのクリエイティブは、このブランドカラーと調和がとれるように配色してください。
Secondary Color
ブランドの中で2番目に大切にするカラーです。Brand Colorと共に使用しブランドらしさをつくります。基本的には優先使用カラーをご使用ください。
Tertiary Color
ブランドの中で補助的に使えるカラー。メインでは使わず必要ある場合にアクセントカラーとして使用します。
Text Color
文字に使用できるカラー。背景色とのコントラストを意識し視認性を担保し使用してください。
Background Color
背景に使用できるカラーパレットです。
How to Use the color of “Yellow”
イエローの使用方法
Yellow-500(0~100%)の使用は原則メダル・アイコンの差し色のみに限っています。使用は全体の10%以下に抑えて下さい。リスティングバナーに関しては注目喚起の観点で、ブランドチームのチェックを受け使用することができます。
Subject Color
教科のカラー。各色その教科に該当する内容のものだけに使用することができます。
文字色にしたり白文字を載せたりすることは視認性の観点から控えてください。
背景、アイコン、グラフなどへの使用を想定しています。
NG Color
使用禁止色領域について
トーンバランスを崩し後進的なイメージを与えるため、サプリブルーから離れたカラーの使用は禁止です。
※トーンアンドマナーのひとつである『親しみやすさ』はイラストが担保するものとします。