WEB DESIGN Webデザイナー 2026.11.07

アイコンとピクトグラムの使い方｜伝わる記号の選び方

同じゴミ箱の絵でも、「削除する」ボタンなのか「削除済み」を示す表示なのかで意味は違う。記号は短い説明の代わりになる一方、…

text: HYPE編集部

Webデザイナーの記事一覧へ

同じゴミ箱の絵でも、「削除する」ボタンなのか「削除済み」を示す表示なのかで意味は違う。記号は短い説明の代わりになる一方、誤操作の入口にもなり得る。使う人が迷わず判断できるアイコンの選び方を、画風と状態表示から解説する。

アイコンは、絵だけで意味が伝わる前提にしないこと。迷う記号には、言葉を添えるのが安全です。

Table of Contents

絵だけで意味を決めつけない

虫眼鏡は検索と拡大の双方に使われる。重要な操作には文字ラベルを添え、見た目の流行より理解の確実性を優先する。

虫眼鏡を検索の記号と受け取る人は多くても、特殊な業務用アイコンが同じように伝わるとは限らない。初めて使う管理画面では文字ラベルを添え、削除や送信など取り消しにくい操作は意味を確かめられる設計にする。装飾的な絵と操作できるボタンも混同させない。記号だけで操作結果を判断させる場面を減らしたい。

同じ画面のアイコンは、画風を揃えるのが基本です。線の太さと角の形が違うと、ちぐはぐに見えます。

一つの画面で画風を揃える

線の太さ、角丸、塗りと輪郭を混在させると情報のまとまりが崩れる。アイコンの出典が複数なら調整の工数も見込む。

同じ画面で線の太さ、角丸の度合い、塗りつぶしの有無が揺れると、機能が違うように見える。アイコン集を選ぶときは単体の可愛さより並べた状態を確認する。新たに一つを作り足す場合も既存の寸法と視覚的な重心を合わせたい。線画と面のあるピクトグラムを混在させるなら、その差に意味があるか説明できるようにする。

体系立てて学びたい場合は、Webスキルを学ぶオンラインスクールデイトラのようなオンラインスクールも選択肢になります。

状態の違いを伝える

保存済みと未保存を色だけで区別しない。形、ラベル、説明文を組み合わせて操作の結果が分かるようにする。

未選択と選択済み、再生と停止、公開と非公開は見た目を変えて伝える必要がある。色だけに頼ると色覚差や白黒印刷で区別が難しくなる場合があるため、形やラベルも併用する。読み込み中の表示と処理完了の印も別にする。操作の結果を確認できれば、利用者が同じボタンを何度も押す状況を減らせる。

有効・無効や成功・失敗といった状態は、色の変化だけに頼ると伝わらない場合があります。W3C「WCAG 2.2 Quick Reference」を参照しながら、形、文字、位置の違いも組み合わせ、アイコン単体で状態を判別できるか確認します。

抽象語には例を添える

安心、成長、品質のような概念は人によって連想が違う。矢印や盾の記号を単独で置くより具体的な見出しを添える。

「最適化」「管理」といった抽象的な言葉を単独の絵にするのは難しい。管理の対象が顧客なのかファイルなのかで、記号の手掛かりも変わる。抽象概念のアイコンを採用する場合は、短い説明や具体的な操作名で補う。業界関係者にしか通じない比喩を顧客向けの画面へ持ち込むときは、初見の人に意味を説明してもらう試験が役立つ。

作画の道具としては、イラスト・マンガ制作ソフト CLIP STUDIO PAINTも定番です。

サイズより認識性を検証する

一覧の小さな表示、視認距離、背景とのコントラストを確認する。小さすぎる装飾は削った方が読みやすくなる場合がある。

デザイン画面を拡大した状態だけで選ぶと、小さく表示した際に細部がつぶれる。モバイルのメニュー、プレゼン資料、印刷物では視認距離も異なる。実際の背景色に重ね、輪郭と背景の差が十分か確認する。テストでは「何に見えるか」と「押した後に何が起こると思うか」を別々に聞くと、認識と理解の問題を切り分けられる。

借りたアイコンは、出どころと条件を残しておくこと。後からの確認が、とても楽になります。

小さい表示で読めるかは、制作者の画面だけで判断しないことが大切です。デジタル庁「ウェブアクセシビリティ導入ガイドブック」が公開されているので、利用環境の違いを意識し、実寸表示や拡大表示でも意味が崩れないか検証します。

ライブラリの利用条件を残す

商用使用、再配布、改変、クレジット要否を確認し、案件のデザインデータと一緒に記録して引き継ぐ。

配布サイトのアイコンにライセンスがあっても、ロゴとしての再配布や商標登録まで許されるとは限らない。採用した素材の名称、配布元、取得日、適用ライセンスを一覧にし、クレジット義務や改変条件を確認する。納品先が社内で量産するなら、使用可能な範囲をデザインシステムに残す。権利の判断が不明な素材は採用を急がない。

学んだことを仕事につなげる入口として、スキルマーケットココナラで小さな案件から始める方法もあります。

アイコン素材を案件で使う場合は、入手先だけでなく、商用利用や改変に関する条件も制作記録に残します。著作権制度の基本は文化庁「著作権」のページで確認できるため、公開直前に素材ごとの扱いを見直します。

ボタンと説明用の図像を切り分ける

「ダウンロード」を示す矢印が説明図の一部なのか、押せる操作なのかを見た目で区別する。操作可能なアイコンにはラベルや状態の変化を設け、絵として置くだけの図像をボタンと同じ装飾にしない。管理画面のアラートでは、危険を示す記号と通常の案内を混ぜない。説明資料に転用する場合は、操作画面の実物と図解用の記号が違うことも注記したい。

複数人でデザインを更新するなら、採用したアイコンに名前と用途を付ける。同じ「設定」という語でも、画面全体の設定なのか個別項目の変更なのかを分けると後から追加するときに迷いにくい。承認済みの記号だけを部品集へ入れ、変更した理由を短く残す。

意味の伝わり方を小さく試す

初めて見る画面を渡して「この記号を押すと何が起こると思うか」と尋ねる。機能の名前を先に説明すると正解を誘導してしまうため、操作前の理解を観察する。異なる年齢層や職種を対象にする画面なら、一部の慣れた利用者だけで判断しない。

通知ベルが鳴っている形と、通知を停止した形を使う場合、線の重なりで意味が逆に見えないか確認する。小さい表示では斜線などの細部が失われるため、ラベルを足す判断が必要になる。

同じピクトグラムを案内看板とスマートフォン画面の両方に使うときは、背景と観察距離を変えて試験する。画面では細く見える線が印刷では不鮮明になることもある。運用先に合うファイル形式を納品範囲に含めたい。

多言語化するサイトでは記号そのものが文化や業界で通じるか確認する。言葉を減らす目的でアイコンを増やしても、結果的に説明が必要になれば意味がない。異なる言語で意味が変わりそうな比喩は特に慎重に選ぶ。

利用者が慣れているからという理由で一般的な記号を無条件に採用しない。たとえばハートは「お気に入り」と「いいね」の両方に使われ、サービスの文脈によって操作結果が変わる。押すと公開される反応なのか、個人の保存リストへ入るのかは説明が必要になる。画面上の記号だけで伝えきれない場合には、言葉で意味を補う判断も設計の一部だ。