アイコン
ガイドライン
デバイスルール
PCとスマホのアイコンを別々に定義するよりは、大きさを分けて基本同じものを使用します。
描画ルール
- 色
-
メインカラー 基本的なアイコンカラーです。 黒 削除などネガティブなアクションや、ナビゲーション周りで必要な際に採用します。 白 背景色の上に乗る際は白アイコンを使用します。 明るいグレー 機能系アイコンで、非アクティブ際に使用します。 グレー 矢印や閉じるで使用します。 エラー・注意 「！」エラーや注意を促すアイコンで使用します。
- サイズ
- 領域内に収まるように background-size を設定します。（※表参照）
- 線の太さ
- （※サンプルは1pxですが、基本的に初期設定時以外は変更は不可です。）
- 角の丸み
- （※初期設定時にストロークに丸みを持たせるかどうかを決定し、本文言を変更してください。）
- シェイプ
- 「過度な装飾をせず細いラインを使用したシンプルなテイストで統一します。」などアイコンテイストを初期に決定します。
- 元画像
-
SVG ストロークのタイプにするか、塗のタイプにするかを決定して、適時こちらの注意書きをアップデートしてください。 PING PINGを採用する際は、適時こちらの注意書きをアップデートしてください。
| Size | Type | 枠 | background-size | 領域（背景・余白） | 用途例 |
|---|---|---|---|---|---|
| 大 | フローティング | 円 | 30px × 30px | 60px × 60px | 固定が必要な機能系ボタン（TOPへ戻る・プリントなど） |
| 大 | アイキャッチ、アイコンボタン | - | 35px × 35px | 40px × 40px | アイキャッチ（タイトル）、アイコンボタン、ファイルアイコン |
| 大 | アイキャッチ、矢印 | - | 20px × 20px | 30px × 30px | アイキャッチ（テキストリンク・テキストボタン）、ディスクロージャー（右） |
| 標準 | アイキャッチ、矢印 | - | 20px × 20px | 40px × 40px | アイキャッチ（ボタン）、矢印、ファイルアイコンなど |
| 小 | フローティング | 円 | 16px × 16px | 30px × 30px | 固定が必要な機能系ボタン（カラムの開閉など） |
| 小 | アイキャッチ、矢印 | - | 16px × 16px | 30px × 30px | テキストリンク、矢印など |
- ※上記サイズを基準としたうえで、アイコンの形（例えば△〇□）の見え方により、表示のサイズ・位置・余白を調整することがでます。
命名ルール
/xxx/yyy_zzz.svg （/種類/名前_付属情報.拡張子）
- ・種類（xxx） 通常・動作、ファイル、矢印の種類
- ・名前（yyy） アイコンの役割を連想できる内容
- ・付属情報（zzz） 色が複数色ある場合など
使い方
定めた用途から外れた使い方をしない、大きさを無秩序に変えないようにしてください。
- ・定めた用途から外れた使い方をしない
- ・大きさを無秩序に変えない
- ・背景に対して透過させる
アイコン一覧
サンプルのアイコンです。こちらを利用する場合は他のアイコンも同じテイストに合わせてください。
※アイコンサンプルは一部のみ公開
アイキャッチ
アイキャッチのため単に対象を図示してアイコンにしたもの。
-
analytis
- download
- SVG
-
analytis_white
- download
- SVG
-
attention
- download
- SVG
-
contact
- download
- SVG
-
contact_white
- download
- SVG
-
dsbd
- download
- SVG
-
dsbd_white
- download
- SVG
-
functions
- download
- SVG
-
g_band
- download
- SVG
-
g_bar
- download
- SVG
-
g_pie_chart
- download
- SVG
-
g_radar
- download
- SVG
-
help
- download
- SVG
-
help_white
- download
- SVG
-
mail
- download
- SVG
-
mail_white
- download
- SVG
-
people
- download
- SVG
-
memo
- download
- SVG
-
setting
- download
- SVG
-
setting_white
- download
- SVG
-
comment
- download
- SVG
-
comments
- download
- SVG
-
list
- download
- SVG
動作
ボタン等のコンポーネントと結びつくなどして、特定の動作の遂行に関連するもの。
-
add
- download
- SVG
-
add_plus
- download
- SVG
-
add_plus_white
- download
- SVG
-
calendar
- download
- SVG
-
closed
- download
- SVG
-
closed_white
- download
- SVG
-
del
- download
- SVG
-
dotte
- download
- SVG
-
download
- download
- SVG
-
download_white
- download
- SVG
-
edit
- download
- SVG
-
edit_pen
- download
- SVG
-
print
- download
- SVG
-
prin_whitet
- download
- SVG
-
remove
- download
- SVG
-
temp
- download
- SVG
-
upload
- download
- SVG
-
upload_white
- download
- SVG
矢印
元画像
-
bottom_caution
- download
- SVG
-
bottom_gray
- download
- SVG
-
bottom_key
- download
- SVG
-
bottom_white
- download
- SVG
-
top_caution
- download
- SVG
-
top_gray
- download
- SVG
-
top_key
- download
- SVG
-
top_white
- download
- SVG
-
left_caution
- download
- SVG
-
left_gray
- download
- SVG
-
left_key
- download
- SVG
-
left_white
- download
- SVG
-
right_caution
- download
- SVG
-
right_gray
- download
- SVG
-
right_key
- download
- SVG
-
right_white
- download
- SVG
表示見本：標準サイズ
16PX AUTO (上下) or AUTO 16PX (左右)
-
bottom_caution
-
bottom_gray
-
bottom_key
-
bottom_white
-
top_caution
-
top_gray
-
top_key
-
top_white
-
left_caution
-
left_gray
-
left_key
-
left_white
-
right_caution
-
right_gray
-
right_key
-
right_white
表示見本：小サイズ
12PX AUTO (上下) or AUTO 12PX (左右)
-
bottom_caution
-
bottom_gray
-
bottom_key
-
bottom_white
-
top_caution
-
top_gray
-
top_key
-
top_white
-
left_caution
-
left_gray
-
left_key
-
left_white
-
right_caution
-
right_gray
-
right_key
-
right_white
ファイルタイプ
よく使われる一般的なファイルを表すもの