ホーム > Webマーケティング情報 >
東京オリンピックが発祥!? 世界共通の「案内」を実現したピクトグラム
ピクトグラムをご存じでしょうか？ 1964年の東京オリンピックが発祥の、デザイン手法のことです。一目で内容を伝えることができるので、ピクトグラムはWebデザインでも非常に役に立ちます。
本記事ではピクトグラムの基礎知識と、ピクトグラムが配信されているサイトを4つご紹介します。ぜひWeb制作の参考にしていただければと思います。
目次
ピクトグラムの基礎知識
誰でも一目でわかるデザイン
はじめに、ピクトグラムの基礎知識について解説していきましょう。今回のテーマとなっているピクトグラムとは、下にあるようなデザインのことです。
引用：https://thenounproject.com/
誰が見ても一目で内容がわかるように、デザインされていることがわかります。ピクトグラムがあれば、文字や文章も必要ないので、ユーザーが使っている言語を選ばずに内容を伝えることが可能なのです。
ピクトグラムとだけ聞くと、あまり印象がないかもしれません。ですが、実は私たちの生活にはとても身近な存在です。普通に生活していても、いろいろなところでピクトグラムを目にしているはず。最も有名なのは、非常口のデザインでしょう。
引用： https://ja.wikipedia.org/wiki/%E3%83%94%E3%82%AF%E3%83%88%E3%82%B0%E3%83%A9%E3%83%A0
たとえ非常口のことだと知らなくても、それとわかるようにデザインされています。ピクトグラムはこの他にも交通標識やトイレの入り口、電車の優先席など、あらゆる場面で利用されています。
起源は1964年の東京オリンピック
ピクトグラムはいまや世界的に使われている手法ですが、実は日本発祥のデザインです。その起源は、1964年の東京オリンピックにまで遡ります。
ご存じの通り、オリンピックではさまざまな国からたくさんの選手や観客が集まります。そのため、日本語や英語だけでなく、あらゆる外国語に対応する必要があるのです。言語だけならまだしも、文化や習慣も異なります。これが1964年の東京オリンピックでは、大きな課題の一つでした。
そこで考えられたのが、ピクトグラムなのです。上の課題を解決する方法として、一目で内容がわかるデザインを採用したのです。当時の東京オリンピックが成功したのも、ピクトグラムによる影響が少なくないでしょう。
ピクトグラムはWebデザインに最適
ピクトグラムは、Webデザインにも役に立つデザインです。その理由は、Webアクセシビリティを高めることができるから。
誰もが使いやすいホームページやWebサービスにすることを、Webアクセシビリティと言います。Webの通信環境やユーザーの身体的な制約、使用している言語などに影響されることなく、誰でも使えるということです。
ピクトグラムは、誰でもわかるようデザインされていると言いました。そのため、母国語が異なる方にも正しく意味を伝えることができます。
また最近では、スマホを「ながら見」する人も増えてきました。ホームページを「ながら見」しているときに、細かい文章をいちいち読むのは面倒になります。ピクトグラムを導入していると、そういったユーザーにも素早く内容を伝えることができるようになります。UX（ユーザー体験）の向上にもつながりますし、離脱を防いだりコンバージョンを向上させることにも効果があるでしょう。
ピクトグラムの配信サービスサイト4選
既存の素材を利用することは、ピクトグラムを導入するときの良い選択肢となります。ここでは、ピクトグラムが配信されているサイトを4つ取り上げています。デザインの素材として、またはピクトグラム制作の参考として活用していってください。
※サイトを使う際は、必ず利用規約を確認するようにしてください。
Endless Icons | Free Icon Library
ピクトグラムなどのアイコン素材が配布されているサイトです。素材の種類も豊富で、ビジネスやユーティリティ、エンタメなどのピクトグラムが見つかります。
掲載されている素材はタグで分類されていて、フリーワード検索も可能です。配布されている素材のファイル形式は、PNGとSVGの2種類です。
FLATICON
ピクトグラムや、その素材として使えるイラストが配布されているサイトです。種類も豊富で、さまざまなテイストの素材が掲載されています。PNGやSVG、EPS、PSDなどの形式でダウンロードすることができます。
human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
非常口で使われているピクトグラムを基にした、さまざまなピクトグラムが配布されているサイトです。どれも特徴的で、他のサイトでは見られないピクトグラムばかりです。良いピクトグラムが見つからないときは、このサイトを覗いてみるといいかもしれません。
素材は、ベクター形式とビットマップ形式で配布されています。素材を販売したり再配布をすることは禁止ですが、商用利用・非商用利用問わず使用することができます。
Noun Project – Icons for Everything
さまざまなデザイナーによるピクトグラムが手に入るサービスです。同じ内容でも、制作者が違えば全く違うデザインになります。掲載されている素材を見ながら、サイトに合うピクトグラムを探すことができるでしょう。PNGもしくはSVGのファイル形式で素材をダウンロードすることができます。
あとがき
ピクトグラムの基礎知識についてまとめてご紹介しました。記事内でご紹介したように、ピクトグラムはWebデザインとの相性がいいです。記事後半で取り上げたように、ピクトグラムが配布されているサイトも多いので、ぜひ積極的に採り入れていっていただければと思います。