このサイトについて

SymVal Design は、SymVal のすべての製品（SymCore の Web 画面・ブラウザ拡張・管理画面・デスクトップアプリ・紹介サイトなど）で共通に使う、デザインと UX の決まりごとです。

何のためにあるか

• 使う人が迷わないため。 どの製品でも同じ見た目・同じ言葉・同じ動きなら、一度覚えたことがそのまま使えます。
• 作る人が迷わないため。 「このボタンは何色か」「読み込みが長いときは何と書くか」を毎回考えなくて済みます。
• 少しずつ良くし続けるため。 決まりを一か所に置き、製品ごとのズレを見える形にしておけば、直す順番を決められます。

書いてあること

区分	内容
原則	迷ったときに立ち返る考え方
基本要素	色・文字・余白とレイアウト・形・影・動き・アイコンとロゴ
コンポーネント	実際にある部品と、使い方の良い例・よくない例
パターン	読み込み中・空の状態・見つからないページ・確認・ヘルプなど、よくある場面の型
ライティング	画面に出す言葉の決まり
アクセシビリティ	誰でも使えるための最低ライン
製品ごとの状況	各製品の今の状態と、残っているズレ

値の出どころ

基本要素の値は、SymCore の Web 画面で実際に使っているデザイントークン（CSS 変数）から取っています。このサイトの値と製品の値が食い違っていたら、製品側の値が正です。このサイトを直してください。

読み方

はじめての人は 原則 → ライティング → パターン の順がおすすめです。画面を作る人は、作り始める前に該当するコンポーネントのページを見てください。