アイコン

アイコンは機能や概念を知らせるための記号です。さまざまな箇所での使用展開や再現性・視認性のためになるべく単純化しつつ、パッと見でその機能や概念がすぐイメージできるものである必要があります。対象が内包する複数の要素を体現しようとせずに、代表的なアイテムや共通する概念をシンプルにひとつのモチーフであらわすようにします。

アイコンフォント

業務システムでよく使うアイコンをフォント化してあります。フォントなのでスケーラブルかつ色を自由に設定できます。アイコンのフォント化にはICOMOONのようなサービスが使用できます。

各アイコンの下に代表的な用途・適用例を記載しています。それ以外の用途へ当てはめることも可能ですが、誤解を生んだり通例と異なるような使い方は避けてください。checkbox、radioはチェックボックス、ラジオボタンのUIパーツのためのものです。それ以外の汎用的な用途への転用はしません。

追加、プラス
マイナス
閉じる、削除
確定
編集、サジェスト
自動で埋める
メール
検索
拡大
縮小
お気に入り
お気に入り済
ユーザー
設定
削除
ホーム
ファイル
コピー
フォルダ
クリップボード
カメラ
写真
ビデオ
フラッシュ
印刷
連絡先
時間
カレンダー
タグ
制限
音量
通知、アラート
本
認定済み、ブックマーク
マップ
ロケーション
現在地
カート
クレジットカード
お知らせ
電話
組織
分析
人口構成
チャット、コメント
会議
添付ファイル
ピン留め
マイク
送信
Webブラウザ
キーボード
PC
タブレット
スマートフォン
QRコード
バーコード
ダウンロード
アップロード
外部リンク
繰り返し
再読込、更新
フルスクリーン
フルスクリーン解除
最大化
最小化
ソート
マトリクス
列
行
メニュー
リスト
リストへ移動
リストへ追加
絞込
省略あり
再生
一時停止
前へ、左へ
次へ、右へ
前へ、上へ
次へ、下へ
前へ、左へ
次へ、右へ
前へ、上へ
次へ、下へ
済み、肯定
ヘルプ、ガイド
インフォメーション
警告
不可
プレビュー、表示
非表示
checkbox
checkbox
radio
radio

アイコンの追加

アイコンフォントにないアイコンは必要に応じて作成します。既存のアイコンと共通性を損なわないで調和を保つために、下記のルールを守ってください。

  • 奥行きや遠近感、陰影を施した立体的な表現は避け、フラットな表現とする
  • 既存のハートや星のように“アクティブ”“済”などためのバリエーションを用意するような意図以外では、塗りつぶした面は使わず線のみで表現する
  • 濃淡はつけない
  • 64px四方のボディを16分割した4px四方のグリッドに沿わせる
  • 線幅は4px
  • 最小の間隔は4px
  • 位置は最小2px刻み
  • 角は半径2pxで角丸にする