デザインシステム ケイツー・インタラクティブ

デバイスルール

PCとスマホのアイコンを別々に定義するよりは、大きさを分けて基本同じものを使用します。

描画ルール

色

メインカラー	基本的なアイコンカラーです。
黒	削除などネガティブなアクションや、ナビゲーション周りで必要な際に採用します。
白	背景色の上に乗る際は白アイコンを使用します。
明るいグレー	機能系アイコンで、非アクティブ際に使用します。
グレー	矢印や閉じるで使用します。
エラー・注意	「！」エラーや注意を促すアイコンで使用します。

サイズ

領域内に収まるように background-size を設定します。（※表参照）

線の太さ

（※サンプルは1pxですが、基本的に初期設定時以外は変更は不可です。）

角の丸み

（※初期設定時にストロークに丸みを持たせるかどうかを決定し、本文言を変更してください。）

シェイプ

「過度な装飾をせず細いラインを使用したシンプルなテイストで統一します。」などアイコンテイストを初期に決定します。

元画像

SVG	ストロークのタイプにするか、塗のタイプにするかを決定して、適時こちらの注意書きをアップデートしてください。
PING	PINGを採用する際は、適時こちらの注意書きをアップデートしてください。

• ※上記サイズを基準としたうえで、アイコンの形（例えば△〇□）の見え方により、表示のサイズ・位置・余白を調整することがでます。

命名ルール

/xxx/yyy_zzz.svg （/種類/名前_付属情報.拡張子）

• ・種類（xxx）　通常・動作、ファイル、矢印の種類
• ・名前（yyy）　アイコンの役割を連想できる内容
• ・付属情報（zzz）　色が複数色ある場合など

使い方

定めた用途から外れた使い方をしない、大きさを無秩序に変えないようにしてください。

• ・定めた用途から外れた使い方をしない
• ・大きさを無秩序に変えない
• ・背景に対して透過させる