DESIGN SYSTEM

Qridgeらしさを
揃えるためのルール

色、余白、ボタン、カード、言葉づかいまで。
Qridgeの見え方と伝わり方の基準をまとめています。

PRINCIPLES

目指している体験

Qridgeのデザインは、学習サービスの堅さよりも、雪山に向かう前の高揚感と、わかる楽しさを優先します。

明るく、軽やかで、少しゲームっぽい。けれど子どもっぽくなりすぎず、初心者にも安心感があるバランスを保つのが基本です。

このページの使い方

新しいページを作る前、既存ページを直す前、ブランドのトーンに迷ったときに確認する基準ページです。

Version

2026.05 / Qridge Design System v1.0

Color Type Components UI Catalog State Form Pattern Imagery Spacing Voice Motion A11y Meta Snippets Governance
やさしい 説明は一歩ずつ。むずかしい言葉だけで置いていかない。
明るい 雪山の空気感を感じるブルーと、気分を上げるアクセントで統一する。
挑戦したくなる ボタン、バッジ、結果表示に少しだけゲーム感を残す。

COLOR

Qridgeのカラートークン

Brand --brand #4ba9e6

主要アクションとQridgeらしさの中心色

Brand Dark --brand-dark #2f86c6

リンクや見出しの締まり役

Accent --accent #ffb52f

注目情報や楽しさの温度感

Accent Deep --accent-deep #ff9533

ボタンの立体感や強調

Navy --navy #20558c

ロゴや重要ラベルの土台

Ink --ink #13436a

本文より強いメッセージの文字色

Line --line #b8def6

ボーダーと軽い区切り

Cream --cream #fff6dd

やわらかい補助背景

Primary Surface

ベース面は白を中心にして、情報を素直に読ませます。

Soft Surface

淡いブルーやクリームで、補助領域にやわらかさを足します。

Accent Surface

CTAや達成表現は、ブルーからパープル寄りのグラデーションで高揚感を出します。

TYPOGRAPHY

文字の見せ方

HEADING

わかると、雪山はもっと楽しい。

見出しは太く、短く、リズムよく。感情が立ち上がる言葉を優先します。

BODY

最初は知らない言葉が多くても大丈夫。Qridgeは、クイズを通して少しずつ理解を増やし、会話や滑りの楽しさにつなげていくためのサービスです。

本文は読みやすさ優先で、やわらかい言い切りをベースにします。

見出し 太め / 短く / 1〜2呼吸で読める長さ
本文 0.9rem前後 / 行間ゆったり / 一文を伸ばしすぎない
ラベル 英字大文字や短い和文で、リズムを切り替える

COMPONENTS

主要コンポーネント

Primary Actions 最初に押してほしい導線
Cards 情報を軽く、前向きに見せる単位

学びが進むカード

アイコン、見出し、ひとこと説明で要点がすぐ伝わる構成にします。

金バッジ達成 学習完了と高得点の達成感を、色と余白で気持ちよく見せます。
学習 銅 銀 金
CTAのルール
  • 最重要ボタンは1画面に1つを基準にする。
  • 補助導線は白ボタンやテキストリンクで温度差をつける。
  • 文言は「何をするか」が一瞬でわかる動詞にする。
カードのルール
  • 角丸はやや大きめにして、やさしい印象を保つ。
  • 影は軽めにして、情報より装飾が勝たないようにする。
  • 見出し、本文、行動の順番を崩さない。

UI COMPONENTS CATALOG

UIコンポーネント一覧

Qridgeで繰り返し使う主要UIを、役割と使い分けごとに一覧化しています。

まず見るポイント

`何のためのUIか` → `どこで使うか` → `コード名` の順で見ると、初めてでも理解しやすくなります。

迷ったときの考え方

まず強いボタンを置くべきか、説明カードで理解を助けるべきか、達成感を見せるべきかで選ぶと判断しやすいです。

Primary Button 最重要CTA

ひとことでいうと、最初にいちばん押してほしいボタンです。

High priority Gradient

最初に押してほしい行動に使う。1画面に1つを基準にする。

  • 通常: 強いグラデーションと影
  • 使いどころ: TOP、終了CTA、主要導線
.home-primary-cta
Secondary Button 補助CTA

ひとことでいうと、主役の次に置くやさしいボタンです。

Secondary Light surface

主役の次に見せる行動に使う。温度を少し下げたい導線向け。

  • 通常: 白背景で軽さを保つ
  • 使いどころ: 補助導線、戻り先、関連導線
.home-white-cta
Category Card 学習入口

ひとことでいうと、どのテーマに進むか選ぶカードです。

Navigation Image + label

カービング

カテゴリ導線

カテゴリ選択の入口。見た目を揃えて迷いを減らす。

  • 通常: 画像 + タイトル + 補助文
  • 使いどころ: クイズ一覧、学習導線、カテゴリ紹介
.quiz-list-category-card
Feature Card 説明カード

ひとことでいうと、内容を短く整理して伝えるカードです。

Explain Icon led

知識が身につく

要点を軽く整理して伝えるカードです。

サービス説明や機能紹介に使う。理解を早めるための単位。

  • 通常: アイコン + 見出し + ひとこと説明
  • 使いどころ: ABOUT、GUIDE、COLLAB
.about-feature-card
Badge Card 達成表示

ひとことでいうと、がんばりを気持ちよく見せるカードです。

Reward Collection
金バッジ達成 コレクション進捗を気持ちよく見せる
学習 銅 銀 金

進捗と達成感を見せるためのカード。数字より気分を重視する。

  • 通常: タイトル + 補助文 + バッジ列
  • 使いどころ: マイページ、結果画面まわり
.badge-card / .badge-track
Feedback 通知表示

ひとことでいうと、操作の結果をすぐ返すための通知です。

Status Short message

保存完了や送信完了など、短い成功体験を返すUI。

  • 通常: 一文で完結
  • 使いどころ: フォーム送信後、軽い更新通知
.feedback.success
Form Field 入力UI

ひとことでいうと、安心して入力してもらうための基本部品です。

Input Accessible

角丸と淡い背景で、入力への心理的ハードルを下げる。

  • 通常: ラベル + 入力欄 + 補助文
  • 使いどころ: CONTACT、今後の申込系導線
.form-field input
Lower Section 下層の基本ブロック

ひとことでいうと、説明ページを組み立てる最小単位です。

Layout Reusable

SECTION

見出しを短く伝える

下層ページで最もよく使う、基本の情報ブロックです。

紹介、補足、ルール説明のほとんどはこの型で収める。

  • 通常: kicker + h2/h3 + 本文
  • 使いどころ: 下層ページ全般
.lower-section / .lower-kicker

CATEGORY SYSTEM

カテゴリ表示の考え方

カテゴリは、見た目をバラバラにするためではなく、学習の入口を迷わせないために並べます。

カードの大きさ、ボタン位置、説明量を揃えることで、テーマが変わっても使い方が変わらない安心感を作ります。

SPACING

余白のスケール

Qridgeは情報量を増やしても窮屈に見せないために、余白の段階をあえて少なめにしています。

8px 狭い補助間隔

ラベルと本文、細かい要素の区切り

12px 標準の要素間

カード内の要素や短い縦積み

16px ブロックの余白

小さなカードやフォームの基本余白

24px セクションの呼吸

まとまりを感じる最小単位

48px ページの切り替え

下層ページの大きな区切り

DO / DON'T

表現の使い分け

やること
  • 雪山の空気感が出る、明るいブルーと白を基調にする。
  • まず押してほしいボタンは1つだけ強く見せる。
  • 初めての人が不安にならない言葉を選ぶ。
避けたいこと
  • 色数を増やしすぎて、カテゴリごとに別ブランドのように見せること。
  • 専門用語だけを並べて、意味が伝わらないまま進めること。
  • 強い装飾を重ねすぎて、クイズ導線より見た目が勝ってしまうこと。

VOICE

言葉づかいのルール

Qridgeらしい言い方

まずは気になるカテゴリから、少しずつ始めよう。

避けたい言い方

各カテゴリの問題群からランダムで出題されます。

STATE

状態表現のルール

Success --success

正解、達成、完了など前向きな状態

Error --error

入力エラー、失敗、注意が必要な状態

Info --brand

通常の案内やナビゲーションの補助

Warning --accent

注目させたい補足や一歩手前の注意

FORM

フォームの見せ方

入力例を短く添えて、不安を減らします。

エラー文は短く、次に何を直せばいいか分かる形にします。

PAGE PATTERN

ページ構成の型

TOPページ
  • 一番強い価値提案を最初の画面で伝える
  • 初級クイズへの最短導線を一番目立たせる
  • カテゴリ、コラム、コラボ導線はその次に並べる
下層紹介ページ
  • ヒーローで役割を一言で伝える
  • 中盤で要点をカード化して理解を早める
  • 最後は必ず次の行動へつなげる
学習・クイズページ
  • 迷わせないUIを優先して、装飾を増やしすぎない
  • 進行状況や制限時間は視認性を高くする
  • 答えた後に次の行動がすぐわかる構成にする
Qridgeトップページの実例スクリーンショット TOPの実例を見る

価値提案、導線、回遊の並び方を確認できます。

 Qridgeご利用方法ページの実例スクリーンショット GUIDEの実例を見る

下層の説明ページがどう組まれているか確認できます。

 Qridgeマイページの実例スクリーンショット MY PAGEの実例を見る

コレクションUIや状態表示の見せ方を確認できます。

 Qridgeクイズ一覧ページの実例スクリーンショット QUIZ LISTの実例を見る

カテゴリカードとクイズ導線の温度差を確認できます。

 Qridgeコラム一覧ページの実例スクリーンショット COLUMNの実例を見る

記事一覧の見せ方と回遊導線のまとまりを確認できます。

IMAGERY

画像の使い方

メインビジュアル

空気感や世界観を伝える役。説明量より第一印象を優先します。

機能アイコン

内容理解を早めるための補助。意味が伝わる絵だけ使います。

CHECKLIST

公開前チェック

  • 最重要CTAが1画面で一番目立っているか
  • 初心者が読んでも意味が通る見出しになっているか
  • 色の使い分けが多すぎず、役割が揃っているか
  • モバイルでもカードやボタンが窮屈に見えないか
  • 最後に次の行動が用意されているか

MOTION

動きの考え方

  • アニメーションは主役にしない。コンテンツ理解を邪魔しない範囲で使う。
  • 登場演出は、ふわっと上がる・軽く広がる程度に留める。
  • クイズや結果のリアクションは短く、テンポを止めない。
  • ホバーやフォーカスは見えることを優先し、過度に跳ねさせない。

ACCESSIBILITY

アクセシビリティの基準

  • 装飾画像は空alt、意味のある画像だけ説明を付ける。
  • 短いCTAには、どこへ進むか分かるaria-labelを付ける。
  • 見出し階層はページの流れに従って素直に積む。
  • エラーや完了メッセージは role="alert" や aria-live で伝える。

META

SEO・共有メタの基準

title

ページの役割 + Qridge の文脈を短く入れる

description

初心者にも伝わる言葉で、使う価値を一文で説明する

canonical

必ずディレクトリURL基準で統一する

og:image

ブランドの明るさが伝わるメインビジュアル系を使う

SNIPPETS

よく使う実装断片

Primary CTA 
<a href="/quiz-list/" class="home-primary-cta">
  初級クイズを始める
</a>
Lower Section 
<section class="lower-section">
  <p class="lower-kicker">SECTION</p>
  <h2>見出しを短く伝える</h2>
  <div class="lower-copy">
    <p>本文はやわらかく、読みやすく。</p>
  </div>
</section>
Feedback 
<section class="card feedback success" role="status" aria-live="polite">
  <p>更新しました。</p>
</section>

GOVERNANCE

更新ルール

  • 新しいページを作る前に、まず既存の lower-page パターンで収まるか確認する。
  • 新しい色やUIを足す前に、既存トークンと既存クラスで代用できないかを見る。
  • 追加したルールは、このページにも反映して基準を更新する。
  • 見た目の変更だけでなく、文言・alt・aria・metaまでセットで見直す。

Qridgeらしさは、
やさしさと高揚感の両立。

新しいページや企画を作るときも、
この基準に沿えば世界観を保ちやすくなります。

コラボ・導入を見る