WEBサイトのアイコンなどに使われているデザイン「ピクトグラム」って何?

ピクトグラム(pictogram)をご存じでしょうか?WEBにかかわらず、デザインに関わっていると、一度は聞いたことのある用語だと思います。このピクトグラムについて、私なりに簡単に紹介してみたいと思います。

WEBサイトのアイコンなどに使われているデザイン「ピクトグラム」ピクトって何?

「ピクトグラム」は、文字の代わりに「絵」で知らせてくれるもの

ピクトグラム(英語: pictogram)あるいはピクトグラフ(英語: pictograph)とは、一般に「絵文字」「絵単語」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号(サイン)の一つである。地と図に明度差のある2色を用いて、表したい概念を単純な図として表現する技法が用いられる。
主に鉄道駅や空港などの公共空間で使用され、文字による文章で表現する代わりに、視覚的な図で表現することで、言語に制約されずに内容の伝達を直感的に行う目的で使用されてきた。
引用元: ピクトグラム – Wikipedia

このように、文字の代わりに「絵」を使って知らせてくれるのが、「ピクトグラム」です。世界共通ではない「言葉」の代わりに使用されます。例えば、日本語しか話せなくても、海外旅行に行って、看板に表示されている「絵(ピクトグラム)」を見れば、どこに何があるのかすぐわかります。「ピクトグラム」は言葉の壁をなくすほか、年齢の差や、教育環境の違い(貧富の差も含んでもいいかも知れません)の壁もなくなる、「誰が見てもわかる絵」を表したものなのです。

「ピクトグラム」には国際規格もあります

よく見かけるピクトグラムは、「非常口」や「トイレ」などですね。これらのピクトグラムには、規格化されたものになります。日本ではJIS規格で、国際的には、非政府間国際機関の国際基準化機構(ISO規格)のピクトグラムになります。もちろん、全てが規格化されてはいませんが、空港などの施設で使用されているピクトグラムは、世界中の誰が見ても「認識」できる、規格化されたものが使用されています。

いろいろなピクトグラム

ピクトグラムは黒がベースですが、色を使って表現されるものもあります。その時使用される色は、明確に違いのわかる「赤」「青」「緑」「黄」になります。特に赤色は「禁止」表す際には有効です。赤は「危険・注意を引く色」だからです。色も、意味を持って使用されています。

最近のニュースでは、私たちにお馴染みの「温泉マーク」が変更になりましたね。最近の外国人旅行客の増加や、東京オリンピックに向け、よりわかりやすいピクトグラムに変更になったそうです。変更後のデザインを見てみると・・・少し違和感がありますが、たしかに、わかりやすいですね(笑)

温泉マーク

その他には、服についている「洗濯表示」が世界規格のピクトグラム表示に変更になるそうです。今までは日本独自のものを使用していましたが、このご時世、世界基準に合わせないと、不親切ですよね。

ピクトグラムは誰でもデザインできるの?

ピクトグラム自体は、誰でもデザインすることができます。特にWEBデザインでは、よく使用されています。様々な「アイコン」がピクトグラムのような扱いですね。例えば、ショッピングカートやお問い合わせのアイコン。こういったデザインは、自分でオリジナルでデザインして、WEBデザインに組み込んだりしますね。

WEBアイコン

ここで注意したいのは、誰でもピクトグラムとしてのアイコンを作成できますが、訪れるユーザーが共通で「知っている」絵でないといけないことです。明らかに、言葉との意味合いがかけ離れた絵でデザインしてしまうと、逆にユーザーは混乱してしまいます。

「ピクトグラム」とは、本来は言葉(文字)で記載したいものを、絵のみで表現するもの。しかも、デフォルメしてできるだけ単純なデザインにする。簡単なようで、結構難しいデザインだと、個人的には思っています。

ピクトグラムやアイコンは単純な形にデフォルメ(※対象・素材の形態を意識的に変形すること)されたものが多いです。その理由として、詳細に描写された絵だと、小さなサイズで表示すると潰れてしまうため、ということがあります。小さな面への印刷にも耐えられるよう、できるだけ単純なラインで表現されます。また、例えばトイレのマークが、もし詳細に描写された絵が看板に表示されていたら・・・。トイレの造形自体が世界各国でも様々ですし、単純化されていないとわかりにくいですよね。

私が大学のワークショップで、ピクトグラムをデザインした時のお話

このピクトグラムですが、私も大学のワークショップで制作したことがあります。有名なオランダのグラフィック・デザイナーの先生のワークショップで、お題は「トイレ」のピクトグラムのデザインでした。

本当に難しかったです。既にあるトイレのピクトグラムは、本当にわかりやすいものなんだと実感じました。たくさん案を出しましたが、どうもイマイチでした。そこで、先生のアドバイスがありました。「用を足すとき、女性と男性はどのようなポーズですか?」 なるほど!ということで、その時出したデザインが、座った体勢の「足」と立った体勢の「足」のピクトグラムでした。

ワークショップで提出したトイレのピクト案

デザイナーの考えること・造りだすものは、いつも切り口が面白いですね。とても勉強になったワークショップでした。

ピクトグラムはWEBデザインにも使えるデザイン

このように、ピクトグラムは普段、何気なく目にするものですが、とても重要な意味を持っていることがわかります。WEBデザインで取り入れる「アイコン」も、同じだと思います。訪れたユーザー(訪問者)が、ぱっと見てすぐにわかるもの。それが「問い合わせ」なのか、「資料ダウンロード」なのか、「よくある質問」なのか。アイコンがわかりやすいと、ユーザーもストレスなく自分の行きたいページに行くことができます。

世界には様々なピクトグラムがあります。地域によって特徴があるのも興味深いですね。日本もけっこう独特だと思います。ピクトグラムで検索してみると、お馴染みのものだけでなく、くすっと笑えるピクトグラムもたくさんあります。ピクトグラムで文化の違いを知るのも、デザインの面白いところだと思います!

あなたもフリーランスはじめませんか?

フリーランスのデザインのお仕事探しのお手伝いをしてくれるサイトです。専門のエージェントも!登録は無料なので、まずは気軽に登録してみてくださいね。
※デザインのお仕事を見てみる⇒レバテッククリエイター

この記事が参考になったら応援よろしくお願いします!

次におすすめな関連記事はこちら

コメントを残す

メールアドレスが公開されることはありません。