ピクトグラムとは？歴史・AI時代の活用法とアクセシビリティ設計

投稿日：2026年6月6日 | 最終更新日：2026年6月6日

ピクトグラムは「言葉がなくても伝わる記号」として広く認識されています。ただし、実際のWebサイトやアプリケーションでは「アイコン単体で配置すればユーザーに伝わる」という理解は半分正しく、半分は誤解です。この記事では、ピクトグラムの歴史・定義から、AI時代の実務判断、WCAG 2.2準拠のアクセシビリティ設計まで、WordPress運用者やWeb担当者が実装を判断するために必要な知識を整理します。

ピクトグラムとは何か

ピクトグラムという言葉は聞いたことがあっても、アイコンやイラストとの境界線が曖昧なまま使っている人は少なくありません。実務の現場では「とりあえずアイコンを置いておけばいい」という判断をよく見かけますが、ピクトグラムには明確な定義と役割があり、それを理解しないまま配置すると情報伝達の精度が落ちる原因になります。ここでは、ピクトグラムの定義と他の視覚記号との違い、JIS規格やISO規格がどのように関わっているかを整理します。

ピクトグラムの定義と役割

ピクトグラムを一言で定義するなら、「言語に依存せず、視覚だけで意味が 完結するように設計された情報記号」です。テキストを一切使わなくても 伝わることが前提であり、だからこそ駅の改札やトイレ、空港の搭乗ゲートなど 「言語が通じない場面」で使われ続けています。

ただし、「視覚だけで伝わる」はあくまで設計上の目標であり、自動的に 達成されるわけではありません。ピクトグラムの本質は「情報の抽象化」と 「視認性の最大化」にあり、細部を削ぎ落とす判断が設計者に求められます。 色は原則として単色またはごく限られた配色にとどめ、形状は最小限の要素 だけで構成する。この制約の中で意味を成立させる設計が、ピクトグラムの 難しさでもあります。

一方で、ピクトグラムは「何でも表現できる万能記号」ではありません。

アイコン・イラストとの違い

ピクトグラムとアイコンは混同されやすい概念ですが、設計の目的と表現の単純化レベルに明確な違いがあります。ピクトグラムは「情報の伝達」を最優先し、ほぼ単色でシンプルな図案を採用します。一方、アイコンは「視覚的な差別化」を重視し、カラフルなデザインやロゴマークを取り入れることが一般的です。

具体例を挙げると、スマートフォンのアプリアイコンはカラフルで特徴的なデザインが多く、他のアプリと見分けやすいように作られています。対してピクトグラムは、トイレや非常口のように「世界中どこでも同じ意味で受け取られる」ことを前提に設計されています。この違いを理解せずに、アプリのUIにピクトグラムの感覚でアイコンを配置すると「地味で区別がつかない」という問題が起きます。

イラストとの違いは「抽象化の度合い」にあります。イラストは対象の特徴を具体的に描写しますが、ピクトグラムは「人物」を示す場合でも性別・年齢・服装などの詳細を省き、最小限の要素だけで表現します。実務的には「テキストラベルなしでも意味が伝わるか」がピクトグラムとイラストの境界線になると考えると判断しやすいでしょう。

JIS Z 8210とISO規格の位置づけ

ピクトグラムには国際標準規格と国内規格が存在し、公共施設や交通機関では規格に準拠したデザインが求められます。国際規格としてはISO 7001（公共情報記号）があり、日本国内ではJIS Z 8210（案内用図記号）がこれに対応しています。JIS Z 8210は2024年8月に追補改正が行われ、「洪水/内水氾濫注意」「光警報装置（火災用）」が新規追加されました。

JIS Z 8210は「誰が作っても同じデザインになる」ことを目的としており、図案の形状・比率・色が細かく定義されています。たとえば非常口のピクトグラムは、人物の走る向きや扉の形状まで規格で統一されており、国内のどの施設でも同じデザインが使われています。この統一性があるからこそ、初めて訪れた場所でも直感的に避難経路を認識できるのです。

企業のWebサイトやアプリケーションでは、JIS規格への準拠は必須ではありません。ただし、公共性の高いサービス（自治体サイト・医療機関・交通系アプリなど）では、規格準拠のピクトグラムを使うことで信頼性と認知のしやすさが向上します。実務では「自社サービスの性質に応じて規格準拠の必要性を判断する」という考え方が現実的です。

なお、衣類のケア表示に関するJIS L 0001も2024年に改定され、「液温30℃上限・手洗い」が新規採用されました。アパレルECや商品コンテンツを扱うサイト運営者は、この改定を反映した表記への更新が必要です。

ピクトグラムの歴史と普及の背景

ピクトグラムの歴史を語る際、「1964年東京オリンピック」という起点だけが クローズアップされやすいのですが、実際に重要なのはその後の話です。勝見 勝氏が開発したデザインが「なぜ世界標準に育ったのか」この問いを軸に 整理すると、単なる年表以上の意味が見えてきます。

著作権放棄という「設計上の決断」が生んだもの

1964年の東京オリンピックでは、外国語を話せる人員も多言語対応の予算も 限られた状況の中、デザイン専門委員会委員長の勝見勝氏が「言語に頼らない 案内」としてピクトグラムを採用しました。競技種目・施設案内を示す一連の デザインを制作した上で、著作権を放棄して公共財として開放したことが、 その後の展開を決定づけました。

著作権を持ち続けていれば、他国や他機関が自由に使えなかった。逆に放棄 したことで、誰でも使える「共有言語」になった——この判断が、国際標準化を 加速させた直接の原因です。1970年代以降、ISO（国際標準化機構）がこの 流れを受けて国際規格の策定に動き、各国が自国の規格を整備していく土台が できました。

SOからJIS規格へ 標準化のタイムライン

ISOの動きを受けて、日本では1982年に「案内用図記号（JIS Z 8210）」が 初めて制定されました。以降、社会の変化に応じた改定が繰り返されており、 直近では2024年8月に「洪水/内水氾濫注意」「光警報装置（火災用）」が 新規追加されています。

注目すべきは、改定のたびに追加される記号の種類です。防災・バリアフリー 関連の記号が増えていることは、社会が「伝わらなかった場面」を積み上げて 規格を更新し続けているという意味でもあります。実務の現場でJIS規格を 参照する際は、最新の改定版を確認する習慣を持っておくことが現実的です。

JIS L 0001など関連規格の展開

ピクトグラムの標準化はJIS Z 8210にとどまらず、他の分野にも広がっています。たとえば衣類のケア表示を定めたJIS L 0001も、洗濯・乾燥・アイロンなどの記号を統一するためのピクトグラム規格です。2024年には「液温30℃上限・手洗い」が新規採用されるなど、こちらも改定が続いています。

このように、ピクトグラムは公共施設の案内だけでなく、製品のラベル表示や防災情報など、多岐にわたる分野で標準化が進んでいます。WordPress運用者やECサイト担当者が商品ページやコンテンツを作成する際、最新のJIS規格を確認しておくことで、誤った表記を避けられます。

Webサイトでピクトグラムを使う判断基準

ピクトグラムを「なんとなく」配置していませんか？実務の現場では、デザイン性だけで採用を決めてしまい、結果としてユーザーの認知負荷を高めたり、ページ速度を悪化させたりしているケースをよく見かけます。この違いを整理しておかないと、後の判断で迷いやすくなります。

使うべき場面と使わない方がいい場面

ピクトグラムを使うべき場面は、文字より視覚的な記号で端的に伝えた方が理解が早い場合です。典型例は「トイレ」「非常口」「エレベーター」など、言語に依存せず誰でも認識できる概念です。WordPressサイトであれば「検索」「ダウンロード」「カートに追加」など、行動を促すボタン周辺で力を発揮します。

一方で使わない方がいい場面は、概念が抽象的すぎてピクトグラムだけでは意味が伝わらない場合です。たとえば「サステナビリティ」「エンゲージメント」といった複雑な概念をピクトグラム単体で表現しようとすると、ユーザーは推測に時間を費やすことになります。この場合はテキストで明記する方が親切です。

実務の判断基準は「ピクトグラムを見た瞬間、ユーザーが行動を起こせるか」です。迷いが生じるなら、テキストラベルとの併用、あるいはテキストのみへの切り替えを検討する方が現実的です。

アイコン単体 vs アイコン＋テキストラベルの実測データ

Norman Nielsen Groupの調査によると、タスク完了率が最も高いのは「アイコン＋テキストラベル」の併用パターンです。アイコン単体で表示した場合、ユーザーは意味を推測する必要があるため、最もパフォーマンスが悪化します。

この結果が示すのは、デザイナーが「アイコンだけでスッキリ見せたい」と考えても、ユーザーの実際の行動とは一致しないという事実です。実務の現場では、スマートフォン表示を考慮して「アイコン＋ラベル」を基本とし、画面幅が極端に狭い場合のみアイコン単体にする、という段階的な出し分けが効果的です。

たとえばWordPressのカスタムメニューで「お問い合わせ」ボタンを作る際、封筒のピクトグラムに「お問い合わせ」のテキストを添えることで、ユーザーの迷いを最小限に抑えられます。

ページ速度・認知負荷・CVRへの影響

ピクトグラムの配置はページ速度に直結します。Etsyの検証では、画像アセットを160KB追加しただけで離脱率が12%増加した事例があります。SVG形式であれば軽量ですが、PNG形式で複数枚配置すると数百KBに達することもあり、モバイル回線では致命的です。

また、不要なソーシャル共有アイコンを削除するだけでCVRが11.9%向上したケースも報告されています。これは認知負荷の軽減とページ速度改善の二重効果によるものです。実務の判断としては、「本当にそのピクトグラムは必要か」を常に問い直す姿勢が重要です。

ピクトグラムを配置する際は、以下の3点を確認してから実装する方が現実的です。

• ファイルサイズ（SVGで10KB以内が理想）
• 表示頻度（全ページ共通ヘッダー・フッターで使う場合は特に軽量化が必須）
• ユーザーの行動導線（CVに直結しないアイコンは削除候補）

AI生成ピクトグラムの実務判断（汎用 vs 特化型）

AI生成アイコンは、汎用モデル（Midjourney等）と特化型ツール（Recraft AI等）の使い分けが必要です。汎用モデルはクオリティが高い反面、SVG出力に対応していないケースが多く、極小サイズ（16×16px等）で表示すると潰れてしまいます。UI用途にはSVG出力可能な特化型ツールの方が適しています。

ただし、AI生成画像のみでは日本著作権法上「人間の創作性」が認められないため、自社の著作権を主張できません。Figma等でデザイナーが修正・加工を加えることで、初めて自社の著作物として扱えます。この工程を省略すると、競合他社が同じAI生成素材を使用していた場合に差別化できないリスクもあります。

実務の判断としては、AI生成はあくまで「たたき台」と位置づけ、必ず人手での調整を経てから実装する方が現実的です。

WCAG 2.2対応のアクセシビリティ設計

ピクトグラムを配置する際、デザインの見栄えだけを優先すると、視覚障害者や運動機能に制約がある利用者が操作できないサイトになってしまいます。WCAG 2.2（Web Content Accessibility Guidelines 2.2）は2023年10月に勧告された最新のアクセシビリティ基準で、ピクトグラムのサイズや実装方法にも具体的な要件を定めています。WordPress運用者やECサイト担当者が最低限押さえておくべき設計基準を整理します。

タップ領域の最小サイズ（24×24px / 44×44px）

WCAG 2.2では、タップ可能なピクトグラムやボタンの最小サイズが「24×24 CSSピクセル以上」と明確化されました。これは達成基準2.5.8「ターゲットのサイズ（最小限）」で規定されているもので、AAレベル（公共機関のサイトでは必須）を満たすために守る必要があります。

ただし、これはあくまで最低ラインです。スマートフォンやタブレットで指先でタップする場合、操作ミスを減らすためには「44×44px以上」が推奨されます。実務の現場では、デスクトップ表示を基準に24pxでデザインしたものの、モバイル表示で指が届きにくく離脱率が上がるケースをよく見かけます。

最初からモバイルファーストで「44×44px以上」を基準に設計しておけば、デスクトップ表示でも違和感なく、後からレスポンシブ対応で調整する手間も減らせます。

aria-labelとaria-hidden=”true”の使い分け

スクリーンリーダー（視覚障害者向けの読み上げソフト）は、ピクトグラムの画像そのものを認識できません。そのため、HTMLでピクトグラムを実装する際には、aria属性を使って「何を示すアイコンなのか」を明示する必要があります。

実装パターンは以下の2つに分かれます。

実装パターン	使う場面	aria属性の指定
アイコン単体で機能する	検索ボタン・メニューボタン等	`aria-label=”検索”` を付与
アイコン＋テキストラベル併用	ナビゲーション・サービス一覧等	`aria-hidden=”true”` を付与

アイコン単体で機能するボタン（たとえば虫眼鏡マークだけの検索ボタン）には、aria-labelで「検索」と明記します。一方、アイコンの隣にテキストラベル（「検索」という文字）が既に存在する場合は、アイコン側にaria-hidden="true"を付けて読み上げ対象から除外します。これを怠ると「検索、検索」と二重に読み上げられてしまい、かえって操作の妨げになります。

スクリーンリーダー対応の実装パターン

WordPressのテーマやブロックエディタでピクトグラムを配置する場合、以下の実装例を基準にするとWCAG 2.2に準拠しやすくなります。

【アイコン単体ボタンの例】

<!-- アイコン単体ボタン -->
<button aria-label="検索">
  <svg aria-hidden="true" focusable="false"><!-- 虫眼鏡 --></svg>
</button>

 【アイコン＋テキストラベルの例】

<!-- アイコン＋テキストラベル -->
<button>
  <svg aria-hidden="true" focusable="false"><!-- 虫眼鏡 --></svg>
  検索
</button>

 実務の現場では、WordPressのカスタムブロックやテーマビルダー（Elementor・Bricks等）でアイコンを配置する際、aria属性を手動で追加できるかどうかを事前に確認しておく必要があります。ビルダーの標準機能だけではaria-labelを設定できない場合もあるため、その際はカスタムHTMLブロックで直接記述するか、functions.phpでフィルターフックを使って後から属性を追加する方法が現実的です。

ピクトグラムの作成・選定と運用の注意点

ピクトグラムを自社で制作する場合と素材サイトから選定する場合、それぞれに判断が必要な場面があります。特にAI生成素材が普及した現在では、著作権の帰属やライセンス条件を正しく理解しておかないと、後から権利関係のトラブルに発展するリスクがあります。ここでは実務でピクトグラムを扱う際の作成手順、AI生成素材の注意点、商用利用可能な素材サイトの選び方を整理します。

Adobe Illustrator / Figma での作成手順

自社でピクトグラムを作成する場合、Adobe IllustratorまたはFigmaが実務上の標準ツールです。どちらもベクター形式（SVG）での出力に対応しており、拡大縮小してもエッジが崩れないため、レスポンシブデザインに適しています。

実務でよく見かける失敗は「いきなり形を描き始める」ことです。ピクトグラム 制作で先に決めるべきは「何を削るか」であり、ツールの操作より前に判断が 必要な工程があります。 Figmaであれば、まずオートレイアウトでグリッドを引き、そこに収まる形を 探す。という逆算の手順が作りやすいでしょう。

具体的には以下の順で 整理します。

1. デザインの制約を先に固定する
   （線幅2〜4px・単色・角丸の半径を数値で 決める）
   
2. その制約の中で「概念を最小限の形」に落とす
   （「問い合わせ」なら封筒、 「非常口」なら走る人＋矢印——特徴だけを残して削ぎ落とす）
   
3. 数パターンを並べて「最もシンプルに伝わるもの」を選ぶ
   （Figmaの オートレイアウトで整列し、実際のUIサイズで視認性を確認） Illustratorではパスファインダー機能で図形を結合・分割し、Figmaでは オートレイアウト機能で整列を自動化できます。
   

AI生成素材の著作権リスクと修正の必要性

AI生成画像は手軽に大量生産できる一方で、日本の著作権法上「人間の創作性」が認められないため、生成物をそのまま使っても自社の著作権を主張できません。この点を理解せずにAI生成素材を商用利用すると、第三者が同じプロンプトで類似画像を生成して使用した場合でも、法的に排除できないリスクがあります。

実務上の対処法は「AI生成後にデザイナーがFigmaやIllustratorで修正・加工を加える」ことです。線の太さを調整する、配色を変更する、構図を再構成するといった人間の判断が加わることで、初めて著作権の保護対象になります。また、汎用モデル（MidjourneyやDALL-E 3）はSVG出力に対応していないため、UI用途には不向きです。Recraft AIなどの特化型ツールを選ぶか、生成後にベクター化ツール（Adobe Illustrator Image Trace等）でトレースする必要があります。

商用利用可能な素材サイトの選び方

素材サイトからダウンロードする場合、以下の3点を確認してから使用します。

• 商用利用可否：企業サイト・広告・販促物での使用が許可されているか
• 著作権表記（クレジット）の要否：サイト内にクレジット記載を求められるかどうか
• ライセンスの範囲：再配布・改変・SVG形式での利用が許可されているか

国内の代表的な素材サイトとしては、ヒューマンピクトグラム2.0（人物系・ユーモア系が豊富）、ICOOON MONO（モノクロ・柔らかいライン）、シルエットAC（アイコンカテゴリに分類・会員登録が必要）などがあります。ただし、素材サイトのピクトグラムはデザインの統一感がサイトごとに異なるため、複数サイトから混在して使うとトーン&マナーが崩れやすくなります。可能であれば1サイトに絞るか、自社でベースデザインを作成してから素材サイトを補助的に使う運用が現実的です。

また、JIS Z 8210に準拠したピクトグラムが必要な場合（公共施設・防災コンテンツ等）は、経済産業省のJISハンドブックまたはISO公式サイトから規格準拠の図案を参照する必要があります。これらは著作権フリーですが、改変すると規格準拠でなくなる点に注意が必要です。

FAQ

まとめ

ピクトグラムは「言語の壁を越えて情報を伝える視覚記号」ですが、実務では「使う場面と使わない場面」を正しく判断することが最も重要です。

まず覚えておくべきは、アイコン単体での使用は避け、必ずテキストラベルと併用するという原則です。Norman Nielsen Groupの実測データが示すとおり、ラベルなしのアイコンは最悪のパフォーマンスを記録します。「直感的だから分かるはず」という思い込みは、実際のユーザー行動とは一致しません。

AI生成ピクトグラムは汎用モデルと特化型ツールの使い分けが必要で、そのまま商用利用すると著作権リスクが残ります。Figmaでの修正・加工を経て初めて自社の創作性を主張できる状態になると理解しておくべきです。

WCAG 2.2ではタップ領域の最小サイズが明文化され、aria-labelの実装パターンも確立しています。アクセシビリティは「後から足す配慮」ではなく、設計段階で組み込むべき要件です。

ピクトグラムは即席の体裁を整える手段として有効ですが、ビジュアルとしての主張は弱まります。「どこで補完し、どこで割り切るか」という判断が、今後のコンテンツ設計では不可欠になるでしょう。

出典

本記事で参照した公的機関・一次情報は以下のとおりです。

• Icon Usability｜Nielsen Norman Group