京都のNPO法人 CRA(クリエイター育成協会)が発信するブログです。Web業界、Webデザイナー・Webプログラマー・Webマーケターの育成。

お問い合わせ
075-353-3711 受付時間:10:00〜18:00(土日・祝日除く)
menu close

CRAブログ- Web/IT・教育・福祉業界の情報を、スタッフ&インターン生が配信中

デザインをより分かりやすく、レベルUP!ピクトグラムを使ってみよう!

2014年07月09日前田
Pocket

おはようございます!

デザイナー1年生に、学校では教えてくれない、
でも、現場に出たら必要となる事をお伝えできたらと思います。

本日は「ピクトグラム」についてご紹介したいと思います。

WEBデザインや紙媒体のデザインをする時、
「文字が多くてなんだか見にくいデザインだな・・・」
と思ったことは、ありませんか?

そんな時は、ピクトグラムの出番です。

ピクトグラムとは

ピクトグラムは、一般に「絵文字」や「絵単語」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号(サイン)の一つです。
明度差のある2色を用いて、表したい概念を単純な図として表現する技法が用いられています。

下の写真を見るとわかるように、道路や駅の構内、商業施設などのたくさんの所に設置されています。
皆さんも外にでるたび、無意識にこうしたサインを見られているのではと思います^^。

標識

E146_hijyouguchi500

a0006_001868_m

ピクトグラムのいい所

文字で説明するスペースが足りないとき

デザインを行う時文字が多すぎて、スペースに入りきらないし、読みづらい・・・
全部入れると、文字が小さくなってしまう・・・
という場合、私はよく情報整理の為に使用しています。項目をピクトグラムで表し、文字数をできるだけ完結に表せるよう留意しています。

ピクトグラムで表現すると、一目見ただけで主要な意図が伝わるため、説明する手間を省くことができ、スペースを活かすことができます。

言葉が通じなくても大丈夫

ピクトグラムは、視覚的な図で表現することで、言語に制約されずに内容の伝達を直感的に行うことができます。
その為、老若男女、また国籍を問わず意味を伝えることが可能です。

参考サイト

こうした非常に便利なピクトグラム、もちろんご自分で制作されてもいいですが、無料で配布されているサイトもたくさんあります。下記にご紹介していきます。

Endless Icons

http://www.endlessicons.com/

POPでかわいいピクトグラムが揃ったサイトです。
PNGデータをダウンロードできます。

Endless Icons

 

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

http://pictogram2.com/

人(非常口はこちらのピクトグラムで)を題材にしたピクトグラム。
ユニークなシチュエーションのピクトグラムが揃っています。

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

 

iconsweets2

http://iconsweets2.com/

ベーシックなアイコンが揃っています。
PSDデータでのダウンロードが可能です。

iconsweets2

 

In The Hospital – Icon Set

https://www.behance.net/gallery/In-The-Hospital-Icon-Set/15365047

医療や病院系のさまざまなアイテムが揃ったアイコン素材。
細いシンプルなラインで描かれており、すっきりした柔らかいデザインです。

In The Hospital – Icon Set

利用規約は、それぞれサイトによって異なります。
必ず使用前には、それぞれのサイトの規約をよく読んでから、扱うようにしてくださいね。

あなたのデザインにほんの少しでもスッキリ感と見やすさを与えてくれるパーツです。
ぜひピクトグラムを活用してみてください!

Pocket

CRAが運営する就労移行支援事業所 ワークサポートセンターはこちら