【オリンピックで話題沸騰】ピクトグラムとは？歴史から無料で使える素材集まで一挙紹介【2024年最新版】

「ピクトグラム」という言葉を耳にしたことはありますか？

ピクトグラムは公共の施設などでよく使われる、視覚的に意味を伝えるシンプルな絵記号のこと。
このピクトグラムはホームページよく活用されています。
上手く使えば見やすいホームページを作ることができるからです。

• では、ピクトグラムとは一体何なのでしょうか？
• また、ピクトグラムをホームページにどのように活用すれば良いのでしょうか？

本記事では下記の流れで「ピクトグラム」を徹底解説します！

• ピクトグラムの意味・歴史
• ピクトグラムの活用方法
• フリー・商用利用可能なピクトグラムの素材サイトのご紹介

ぜひ、参考にしてください。

【無料】ピクトグラムについて相談する

ピクトグラムとは？

ピクトグラムとは、言葉を使わなくても情報を伝えられる、単純化された視覚記号です。
様々な人が利用する公共施設でよく目にしますが、例を見ていきましょう。

トイレのマークは最も身近なピクトグラムです。
このマークがあることで、文字がなくてもトイレであるということがわかります。

この記号、非常口のマークも馴染みがあるものです。
トイレのマークと並んで、よく目にするピクトグラムです。

ピクトグラムは、特定の言語（国内であれば、日本語）にしばられないことで、言語を超えて理解してもらうことが出来ます。
また、ピクトグラムは意味を直感的に伝えやすくするため、原則として色は単色、図柄も単純化したものが用いられます。

ピクトグラムの歴史

1920年頃、オーストリアの社会・経済学者、オットー・ノイラートが生み出したアイソタイプがピクトグラムのはじまりとされています。
文章を読む習慣のないような市民にも、複雑な社会や経済の情勢をわかりやすく伝えるために考え出されたもので、簡単に言えば「絵記号で表すグラフ」です。
統計を比較するとき、記号の並びを見るだけで直感的に違いを把握することが出来ます。

オットー・ノイラートのアイソタイプ
Photo by jwyg (CC BY-SA 2.0)

一方、現代のピクトグラムの発祥は1964年、美術評論家の勝見勝と若手デザイナーによる、東京オリンピックの「施設シンボル」とされています。
64年東京オリンピックはアジアで初めて、しかもアルファベットを使わない国で最初での開催でした。

当時、多くの日本人は英語を含めた外国語でのコミュニケーションはまだ困難でした。
日本人と、海外から来る多くの来訪者の両方に、施設や設備を理解してもらうための視覚的な仕掛けが必要とされていました。

オリンピックのアートディレクターであった勝見は家紋に着想を得て、シンボルでこれらを表現しようと当時新進気鋭のデザイナーに声を掛け、生み出されたのが39種類の施設シンボルです。

勝見は普及を重視し、デザイナーたちは著作権放棄の同意書にサインをしました。
次のメキシコ大会でも、これらのピクトグラムをアレンジしたものが使われました。

ピクトグラムを活用する効果・メリット

ホームページにピクトグラムを使うとどんな効果があるでしょうか。

歴史のところでも見てきた通り、ピクトグラムには「ひと目で意味がわかる」「言語を超えて意味が伝わる」という特徴があります。

パソコンやスマートフォンの画面で見るホームページは、例えば印刷物に比べると、あまり情報を多く詰め込むのに向いていません。
伝わる情報の量は絞った方が効果的です。

そうした場合、うまくピクトグラムと簡潔な文章を組み合わせることで、受け手であるユーザーに素早く理解してもらうことが出来ます。

ピクトグラムの作り方

ピクトグラムを作る手順自体は難しくありませんが、奥深くもあります。

まず、伝えたい物事を視覚化します。次に要素を単純化していきます。
これだけで意味が伝わるというギリギリのところまで、余計な要素を削ぎ落とします。

単純化のプロセス

上の例では時計のピクトグラムを作成しています。
ツールは紙と鉛筆でも、最初からパソコンを使っても構いません。

時計と見てわかる、時計の図として成立するギリギリのところまで余計な要素をなくしていく作業になります。
文字盤は必要なのか、短針と長針の角度が視覚的により時計らしい位置はどこか、といったことを考えながら、ピクトグラムを仕上げていきます。

【無料】ピクトグラムについて相談する

ホームページにおけるピクトグラムの活用方法

アイコンとして

ホームページでピクトグラムが活用されるシーンといえば、アイコンとしての利用。

アイコンとピクトグラムの違いについては後述しますが、例えば、サイト内検索のリンクに「虫眼鏡」のピクトグラムを添えることで、ユーザーはそのリンク先が検索機能だということを予測しやすくなります。

特にスマートフォンの画面は小さく、一度に表示出来る情報が限られます。
リンクやフォームの送信ボタン等ユーザーのアクションを求める場所にピクトグラムを使い、言葉をラベルとして小さく添えておくことで何が起きるのか認識しやすくなります。

ピクトグラムが効果的に使われている、メルカリのホームページ

イラストとして

ピクトグラムは、様々な言語や属性を持つ人々に伝わるよう単純化されているため、挿絵的に使う場合、公共のページでは使いやすいです。

ただ、無機質で冷たい感じを与えることもあります。
しかし、ピクトグラムにも様々なデザインがありますので、伝えたい情報に合わせたものを選びましょう。

また、無機質でシンプルなピクトグラムの性質を逆手にとって、擬人化してクスッと笑えるシチュエーションをピクトグラムにした、面白系というジャンルもありますので、後ほどご紹介します！

【無料】ピクトグラムについて相談する

無料・商用利用可能な、ホームページにも利用できるピクトグラム素材集一覧

ここでは無料かつ商用利用が可能で、著作権の表記（クレジット）も不要で使えるピクトグラムを提供しているホームページを中心に、カテゴリー別にご紹介します。

複数ジャンルを扱うサイトも、カテゴリー別のページへ直接リンクしてあるので、すぐに見つけることが出来ます。

注意 このような素材を「著作権フリー」と表記しているケースも多く見られますが、一部のパブリックドメインと呼ばれる素材を除き、著作権は放棄されていません。ユーザーが自由に利用していいという許諾を作者がしている、ということになります。
無料素材集でも規約はきちんと読んで、後々トラブルに発展しないようにしましょう。

人・人物のピクトグラム

シルエットイラスト

出典：無料のAi・PNG白黒シルエットイラスト | 人物・人間
シルエットイラスト、ということでピクトグラムに限っているわけではありませんが、シンプルでそのままピクトグラムとして成立しているものが豊富に揃っています。

ヒューマンピクトグラム2.0

出典：human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)

人物のピクトグラムを中心に揃っているサイトです。
ごくシンプルなピクトグラムから、ユーモアのあるものまで、様々なシチュエーションの人物ピクトグラムが揃っています。

ICOOON MONO

出典：人物 | アイコン素材ダウンロードサイト「icooon-mono」

こちらのサイトのアイコンも、きちんとピクトグラムになっています。
少しだけ丸みを感じさせるやわらかいテイストです。とても種類も豊富です。

シルエットAC

出典：ピクトグラム｜シルエット イラストの無料ダウンロードサイト「シルエットAC」

こちらもイラスト点数が豊富なサイトです。素材ダウンロードには会員登録が必要です。

ピクトグラム無料素材

出典：ピクトグラム 無料素材

点数は多くないですが、ビジネスシーンで使いたくなるようなピクトグラムが用意されています。

動物のピクトグラム

シルエットイラスト（動物・アニマル）

出典：無料のAi・PNG白黒シルエットイラスト | 動物・アニマル
動物のシルエットイラストもいろいろ揃っています。中にはペガサスのように、実在しないものまで用意されています。

ICOOON MONO（動物）

出典：動物・植物 | アイコン素材ダウンロードサイト「icooon-mono」
動物・植物のピクトグラムが数多く揃っています。
こちらも実用的なものから海の怪物クラーケンなど楽しいアイコンまで幅広くあります。

ビジネスのピクトグラム

シルエットイラスト（ビジネス・社会）

出典：無料のAi・PNG白黒シルエットイラスト | ビジネス・社会
ビジネスシーンで使いやすいシルエットイラストが揃っています。
大概はこのサイトで間に合ってしまうかもしれませんね。

ICOOON MONO（ビジネス・金融）

出典：ビジネス・金融 | アイコン素材ダウンロードサイト「icooon-mono」
こちらもビジネス系です。こちらはよりシンプルでピクトグラムらしいかもしれません。数も多いです。

おもしろ系のピクトグラム

ヒューマンピクトグラム2.0（面白系）

出典：面白系 | human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
このジャンルは素材として使うというより、見てクスッと笑うといい気がします。
ホームページではありませんが、パワーポイントなど社内プレゼンで使ってみるとウケるかもしれません（見せる相手は選びましょう）。

学校関連のピクトグラム

シルエットイラスト（学校）

無料のAi・PNG白黒シルエットイラスト | 学校
教育現場で使えるシルエットイラストです。
シンプルでピクトグラムになっているものから具象的なものまで幅広く揃っています。

ICOOON MONO（教育・科学）

出典：教育・科学 | アイコン素材ダウンロードサイト「icooon-mono」
こちらはアイコンということで、より絵柄がピクトグラム的です。
数は少なめですが、他と組み合わせれば十分使えるでしょう。

病院関連のピクトグラム

シルエットイラスト（医療・健康）

出典：無料のAi・PNG白黒シルエットイラスト | 医療・健康
医療・健康のジャンルでも数多くのイラストが揃っています。
体の部位、症状、介護や保養などのバリエーションが用意されています。

ICOOON MONO（健康・医療）

出典：健康・医療 | アイコン素材ダウンロードサイト「icooon-mono」
医療・健康でもよりシンプルでピクトグラムらしいアイコンが多数揃っています。

海外のピクトグラム素材集サイト

ピクトグラムは海外のサイトも利用するとさらに幅が広がります。
検索するとき、キーワードを英語で入れて探してみてください。

iconmonstr

出典：iconmonstr - Free simple icons for your next project
現在、4462点のアイコンが揃っているドイツのサイト。
少し太めのフォルムが特徴的です。

UXWing

出典：UXWing | Free icons for website with commercial use no attribution
現在564点のアイコンがあります。iconmonstrより細め、スリムな印象です。

【無料】ピクトグラムについて相談する

【コラム】ピクトグラムとアイコンの違いとは？

ピクトグラムとアイコンの違いは、色彩や装飾にあります。アイコンは必ずしも単色で作成したり、単純化して無駄を省くようなことはしなくても構いません。

ピクトグラムは視覚的な伝わりやすさを重視するため、単色でも伝わる、余計な装飾を省いたデザインにする必要があります。

ピクトグラムはアイコンにすることが出来ますが、アイコンは必ずしもピクトグラムにならない、という関係になります。

【無料】ピクトグラムについて相談する

ピクトグラムまとめ

以上、ピクトグラムの定義から歴史、作り方、活用シーンをご紹介しました。

• ピクトグラムとは、言葉を使わなくても情報を伝えることが出来る、単純化された視覚記号
• ピクトグラムは、原則として色は単色、図柄も単純化する
• ピクトグラムの源流は、オットー・ノイラートのアイソタイプ
• ピクトグラムの普及は、1964年東京オリンピックから
• ピクトグラムは、ホームページのアイコンに最適

ぜひ、あなたもピクトグラムを効果的に使って、ユーザーが使いやすいホームページを目指していきましょう。

【無料】ピクトグラムについて相談する