街を歩いていると、あちこちで見かけるピクトグラムは、Webサイトでも利用するメリットがあります。
この記事では、アイコンやイラストとは何が違うのか、オリジナルで作成するときのポイント、商用利用可なおすすめピクトグラム素材サイトを紹介しています。ピクトグラムについて理解を深めたい方は、ぜひ最後までお読みください。
＜無料＞資料ダウンロード
【失敗しない】Webサイト制作ガイド(事例付)
年間数百サイトを手掛けるWebディレクターが徹底解説！
目次
ピクトグラムとは
ピクトグラムは、文字を使わない情報伝達のために作成されたデザイン記号のこと。
今では個人や企業が自由に制作したピクトグラムをはじめ、「案内用図記号（JIS Z8210）」としてJIS規格で統一されたピクトグラムもあります。
ピクトグラムは公共交通機関や公共施設、観光施設等の案内表示でも利用されており、たとえば駅や公共施設で「トイレ」や「非常口」などを示すために使われているピクトグラムを目にする機会も多いはずです。
ピクトグラムは、その国の言語が分からない外国人観光客や細かい文字が見えにくい人にも直感的に情報を伝えられるように、デザインの視認性や情報の抽象化が工夫されています。
ピクトグラムとアイコンとの違い
パソコンのデスクトップやスマートフォンの画面に並ぶ様々なアプリケーションを表すマークが「アイコン」です。
アイコンとピクトグラムは一見すると似ているように思えますが、この2つの大きな違いは「単純化」にあります。
- ピクトグラム：シンプルな図案で、ほぼ単色で作成される
- アイコン：特徴的な図案で、カラフルなものも多い
ピクトグラムは情報の単純化と伝わりやすさを重視するため、シンプルな単色の図案で表現されます。
対してアイコンでは、アプリケーションのロゴマークを取り入れたりコーポレートカラーを使ったりして、他のアイコンとの差別化をはかるデザインが採用されます。
ピクトグラムの歴史・広まったきっかけ
ピクトグラムが世界的に広まったのは、1964年の東京オリンピックで使われたことがきっかけです。東京オリンピックで外国人向けの案内表示のためにピクトグラムが開発されたのが普及のはじまりと言われています。
外国人が大勢来日すると予測されていましたが、多言語の案内標識や英語を話せる日本人が少ない状況でした。そこで、東京オリンピックのデザイン専門委員会委員長を務めた勝見勝氏が、ピクトグラムを案内表示として採用しました。
オリンピック競技や案内を示すピクトグラムを作成し、著作権を放棄したことで世界中で使われるデザインとして広まっていったのです。
Webサイトでピクトグラムを利用するメリット
Webサイトにもピクトグラムは利用されています。
たとえば、問い合わせフォームへのリンクに「封筒」、検索窓に「虫眼鏡」のピクトグラムが配置されているのを見たことがありませんか？
ピクトグラムをWebサイトに取り入れることで、大きく2つのメリットが生まれます。
- ひと目で意味がわかる（視認性）
- 日本語がわからない人でも意味が通じる（情報伝達力）
Webサイトはすべての人が大きなデスクトップモニタで閲覧しているわけではありません。中には小型のノートパソコンや、スマートフォンから閲覧している人も少なくないでしょう。
そのようなブラウザ表示環境では、場合に割っては文章が長すぎてレイアウトが崩れたり、文字が小さく表示されすぎて読みにくくなってしまったりすることも。そんなときに一目で端的に情報が理解できるピクトグラムがあると、サイトを閲覧するユーザーの助けとなるでしょう。
また、外国人観光客など日本語が十分に理解できないユーザーでも、観光サイトに「地図」「所在地」「電話」のピクトグラムさえあれば自力で場所を探したり電話で問い合わせたりもできます。
ピクトグラムを取り入れてユーザーに「理解しやすい」と感じさせることは、UX（ユーザー体験）の向上にもつながると言えるでしょう。
Webサイトでのピクトグラム活用方法
Webサイトにおいてピクトグラムが力を発揮するのは、具体的にどのような場面でしょうか。
アイコンの代わりに使用する
Webサイトの中でユーザーに分かりやすく内容を説明するために、ピクトグラムは最適です。
たとえば記事の中で疑問点を「クエスチョン」、解決方法を「電球」マークで目立たせたり、要点のまとめに「紙と鉛筆」のピクトグラムを配置したりといった使い方があります。
また、長い文章を端から端まで読む手間が惜しくて「要点だけパッと知りたい」と考えるユーザーも少なくありません。記事の中で「ポイント」「メリット」「デメリット」などを示すピクトグラムを取り入れることで、ユーザーを素早く誘導でき、必要な情報を読み取ってもらえます。
イラストの代わりに使用する
コンテンツのアイキャッチに人物写真を使わず、ピクトグラムのキャラクターを使ってより具体的に記事の内容を表現させることもできます。
記事の中で挿絵のように使う場合も、写真の雰囲気に引きずられずシンプルに表現できるピクトグラムの方が使いやすい場面も少なくありません。
また、クスッと笑える「面白系」ピクトグラムもあるため、素っ気ない雰囲気にならないよう工夫もできます。
ピクトグラムの作り方とコツ
ピクトグラムは、素材サイトからダウンロードして使う場合と、サイトの雰囲気に合うものを自作する場合があります。おおまかな作成手順は以下の3ステップです。
- 表現したい概念（「問い合わせ」や「困っている人」など）を明確化する
- 誰にでもわかる特徴を視覚化する（「手紙や封筒」「クエスチョンマークや困り顔」など）
- できるだけシンプルな見た目になるよう、デザインを単純化する
ピクトグラムは一般的なイラストとは異なるため、作成の際にはちょっとしたコツが必要です。詳しく説明します。
ピクトグラムが作れるソフト
ピクトグラムは以下のような描画機能があるソフトで作成できます。
- Adobe Illustrator
- Microsoft PowerPoint
- Microsoft Word
これら以外のソフトでも、描画機能があればピクトグラムの作成は可能ですが、線幅を均一にしたり色を単色で塗りつぶしたりといった作業を行いやすいソフトを選びましょう。ドローイング系のソフトよりは、図案作成系のソフトの方が適しています。
ピクトグラムのコツ｜作成サイズや色を統一する
ピクトグラムには統一感が必要です。同じサイト内で使用するピクトグラムは、サイズや色、テイストを統一して作成しましょう。
特に同じ記事内に大きさやテイストが異なるピクトグラムが混在していると、デザイン的に洗練されていない印象を持たれてしまいます。
ピクトグラムのコツ｜線の太さ、角の形を統一する
四角の枠で囲むピクトグラムの場合、線の太さや角に丸みを持たせるかどうかも統一しましょう。一般的には角があるとお堅いイメージ、角丸は柔らかいイメージに仕上がります。
枠線と角丸の半径、ピクトグラム本体の線の太さについて、具体的な数値でルールを決めておくと作成もスムーズです。
商用利用可能なピクトグラム素材サイト一覧
素材サイトからピクトグラムをダウンロードして使う場合も少なくありません。企業が素材サイトを使う場合は、「商用利用可能」な素材を選ぶ必要があります。
また、著作権は作者にある場合がほとんどですが、著作権表記（クレジット）が不要な素材も。ここでは商用利用可能・著作権表記不要の素材サイトを紹介します。素材をダウンロードする前に、各素材サイトの使用ルールには必ず目を通しておきましょう。
ヒューマンピクトグラム2.0
とても人気の高い無料ピクトグラム素材サイト。シンプルなものからクスッと笑えるユーモアのあるものまで、幅広い人物ピクトグラムが揃っています。
外部リンク：ヒューマンピクトグラム2.0
ICOOON MONO
フリーアイコン素材サイト。ピクトグラムとしても利用できるモノクロのアイコンで、種類も豊富。線に丸みがあり、柔らかいイメージのデザインです。
外部リンク：ICOOON MONO
フリー素材ピクトグラム
他にはない3Dのピクトグラム素材を配布しています。ビジネス寄りのデザインで、プレゼン資料や社内の会議資料などにもおすすめ。
外部リンク：フリー素材ピクトグラム
ピクトグラムBOX
ピクトグラムと文字を組み合わせたデザインが特徴の素材サイトです。誰にでも分かりやすいデザインで、社内の案内表示や備品ステッカーにもピッタリ。
外部リンク：ピクトグラムBOX
シルエットAC
非常に素材数が多く、記事のアイキャッチや装飾に使えるデザイン性の高い素材も。ピクトグラムは「アイコン」カテゴリにあります。素材のダウンロードには会員登録が必要です。
外部リンク：シルエットAC
ピクトグラムのまとめ
パッと見てすぐにユーザーに情報を伝えられるピクトグラムは、特にスマートフォンやタブレットでのサイト閲覧時に力を発揮します。長文の記事を飽きさせずに読ませる工夫として、ピクトグラムを取り入れる方法もあります。
ピクトグラムを使って「分かりやすい」「行動しやすい」とユーザーに感じさせることで、サイトの離脱を防ぐ効果も。サイト内で使うピクトグラムは、テイストを統一するのがポイントです。
＜無料＞資料ダウンロード
【失敗しない】Webサイト制作ガイド(事例付)
年間数百サイトを手掛けるWebディレクターが徹底解説！
