Webデザイン

最終更新日: 2021.06.23 (公開: 2020.12.25)

ピクトグラムとは?Webサイトで利用するメリット、商用利用可の素材サイトも紹介!

ピクトグラムとは?Webサイトで利用するメリット、商用利用可の素材サイトも紹介!

街を歩いているとあちこちで見かけるピクトグラムはWebサイトでも利用するメリットがあります。アイコンやイラストとピクトグラムは何が違うのか、オリジナルで作成するときのポイント、商用利用可なおすすめピクトグラム素材サイトも紹介しています。

ピクトグラムとは?

ピクトグラムとは?

ピクトグラムは、文字を使わない情報伝達のために作成されたデザイン記号のことです。日本では、1964年の東京オリンピックで外国人向けの案内表示のためにピクトグラムが開発されたのが普及のはじまりと言われています。

今では個人や企業が自由に制作したピクトグラムをはじめ、「案内用図記号(JIS Z8210)」としてJIS規格で統一されてたピクトグラムもあります。ピクトグラムは公共交通機関や公共施設、観光施設等の案内表示でも利用されており、たとえば駅や公共施設で「トイレ」や「非常口」などを示すために使われたピクトグラムを目にする機会も多いはずです。

ピクトグラムは、その国の言語が分からない外国人観光客や細かい文字が見えにくい人にも直感的に情報を伝えられるように、デザインの視認性や情報の抽象化が工夫されています。

ピクトグラムとアイコンはどう違う?

ピクトグラムとアイコンはどう違う?

パソコンのデスクトップやスマートフォンの画面に並ぶ様々なアプリケーションを表すマークが「アイコン」です。アイコンとピクトグラムは一見すると似ているように思えますが、この2つの大きな違いは「単純化」にあります。

  • ピクトグラム:シンプルな図案で、ほぼ単色で作成される
  • アイコン:特徴的な図案で、カラフルなものも多い

ピクトグラムは情報の単純化と伝わりやすさを重視するため、シンプルな単色の図案で表現されます。対してアイコンでは、アプリケーションのロゴマークを取り入れたりコーポレートカラーを使ったりして、他のアイコンとの差別化をはかるデザインが採用されます。

Webサイトでピクトグラムを利用するメリット

Webサイトでピクトグラムを利用するメリット

Webサイトにもピクトグラムは利用されています。たとえば問い合わせフォームへのリンクに「封筒」、検索窓に「虫眼鏡」のピクトグラムが配置されているのを見たことがありませんか? ピクトグラムをWebサイトに取り入れることで、大きく2つのメリットが生まれます。

  • ひと目で意味がわかる(視認性)
  • 日本語がわからない人でも意味が通じる(情報伝達力)

Webサイトはすべての人が大きなデスクトップモニタで閲覧しているわけではありません。中には小型のノートパソコンや、スマートフォンから閲覧している人も少なくないでしょう。そのようなブラウザ表示環境では、場合に割っては文章が長すぎてレイアウトが崩れたり、文字が小さく表示されすぎて読みにくくなってしまったりすることも。そんなときに一目で端的に情報が理解できるピクトグラムがあると、サイトを閲覧するユーザーの助けとなるでしょう。

また、外国人観光客など日本語が十分に理解できないユーザーでも、観光サイトに「地図」「所在地」「電話」のピクトグラムさえあれば自力で場所を探したり電話で問い合わせたりもできます。ピクトグラムを取り入れてユーザーに「理解しやすい」と感じさせることはUX(ユーザー体験)の向上にもつながると言えるでしょう。

Webサイトでのピクトグラム活用方法

Webサイトでのピクトグラム活用方法

Webサイトにおいてピクトグラムが力を発揮するのは、具体的にどのような場面でしょうか。

アイコンの代わりに使用する

Webサイトの中でユーザーに分かりやすく内容を説明するために、ピクトグラムは最適です。たとえば記事の中で疑問点を「クエスチョン」、解決方法を「電球」マークで目立たせたり、要点のまとめに「紙と鉛筆」のピクトグラムを配置したりといった使い方があります。また、長い文章を端から端まで読む手間が惜しくて「要点だけパッと知りたい」と考えるユーザーも少なくありません。記事の中で「ポイント」「メリット」「デメリット」などを示すピクトグラムを取り入れることで、ユーザーを素早く誘導でき、必要な情報を読み取ってもらえます。

イラストの代わりに使用する

コンテンツのアイキャッチに人物写真を使わず、ピクトグラムのキャラクターを使ってより具体的に記事の内容を表現させることもできます。記事の中で挿絵のように使う場合も、写真の雰囲気に引きずられずシンプルに表現できるピクトグラムの方が使いやすい場面も少なくありません。また、クスッと笑える「面白系」ピクトグラムもあるため、素っ気ない雰囲気にならないよう工夫もできます。

ピクトグラムの作り方、作成のコツ

ピクトグラムの作り方、作成のコツ

ピクトグラムは、素材サイトからダウンロードして使う場合と、サイトの雰囲気に合うものを自作する場合があります。おおまかな作成手順は以下の3ステップです。
1.表現したい概念(「問い合わせ」や「困っている人」など)を明確化する
2.誰にでもわかる特徴を視覚化する(「手紙や封筒」「クエスチョンマークや困り顔」など)
3.できるだけシンプルな見た目になるよう、デザインを単純化する
ピクトグラムは一般的なイラストとは異なるため、作成の際にはちょっとしたコツが必要です。詳しく説明します。

ピクトグラムが作れるソフト

ピクトグラムは以下のような描画機能があるソフトで作成できます。

  • Adobe Illustrator
  • Microsoft PowerPoint
  • Microsoft Word

これ以外のソフトでも描画機能があればピクトグラムの作成は可能ですが、線幅を均一にしたり色を単色で塗りつぶしたりといった作業を行いやすいソフトを選びましょう。ドローイング系のソフトよりは、図案作成系のソフトの方が適しています。

ピクトグラムのコツ|作成サイズや色を統一する

ピクトグラムには統一感が必要です。同じサイト内で使用するピクトグラムは、サイズや色、テイストを統一して作成しましょう。特に同じ記事内に大きさやテイストが異なるピクトグラムが混在していると、デザイン的に洗練されていない印象を持たれてしまいます。

ピクトグラムのコツ|線の太さ、角の形を統一する

四角の枠で囲むピクトグラムの場合、線の太さや角に丸みを持たせるかどうかも統一しましょう。一般的には角があるとお堅いイメージ、角丸は柔らかいイメージに仕上がります。枠線と角丸の半径、ピクトグラム本体の線の太さについて、具体的な数値でルールを決めておくと作成もスムーズです。

商用利用可能なピクトグラム素材サイト一覧

商用利用可能なピクトグラム素材サイト一覧

素材サイトからピクトグラムをダウンロードして使う場合も少なくありません。企業が素材サイトを使う場合は、「商用利用可能」な素材を選ぶ必要があります。また、著作権は作者にある場合がほとんどですが、著作権表記(クレジット)が不要な素材も。ここでは商用利用可能・著作権表記不要の素材サイトを紹介します。素材をダウンロードする前に、各素材サイトの使用ルールには必ず目を通しておきましょう。

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

とても人気の高い無料ピクトグラム素材サイト。シンプルなものからクスッと笑えるユーモアのあるものまで、幅広い人物ピクトグラムが揃っています。
外部リンク:ヒューマンピクトグラム2.0

ICOOON MONO

フリーアイコン素材サイト。ピクトグラムとしても利用できるモノクロのアイコンで、種類も豊富。線に丸みがあり、柔らかいイメージのデザインです。
外部リンク:ICOOON MONO

フリー素材ピクトグラム

他にはない3Dのピクトグラム素材を配布しています。ビジネス寄りのデザインで、プレゼン資料や社内の会議資料などにもおすすめ。
外部リンク:フリー素材ピクトグラム

ピクトグラムBOX

ピクトグラムと文字を組み合わせたデザインが特徴の素材サイトです。誰にでも分かりやすいデザインで、社内の案内表示や備品ステッカーにもピッタリ。
外部リンク:ピクトグラムBOX

シルエットAC

非常に素材数が多く、記事のアイキャッチや装飾に使えるデザイン性の高い素材も。ピクトグラムは「アイコン」カテゴリにあります。素材のダウンロードには会員登録が必要です。
外部リンク:シルエットAC

まとめ

パッと見てすぐにユーザーに情報を伝えられるピクトグラムは、特にスマートフォンやタブレットでのサイト閲覧時に力を発揮します。長文の記事を飽きさせずに読ませる工夫として、ピクトグラムを取り入れる方法もあります。

ピクトグラムを使って「分かりやすい」「行動しやすい」とユーザーに感じさせることで、サイトの離脱を防ぐ効果も。サイト内で使うピクトグラムは、テイストを統一するのがポイントです。

ほとんどの企業様はWebサイトに構築する時間と専門知識がありません。ニュートラルワークスは、トレンドを抑えたデザインで徹底的に「成果」にこだわったサイトを構築いたします。そのため、あなたは競合と差をつけることができ、それが更なる顧客獲得・売上増加に繋がります。Zoomなどのオンライン相談(無料)をやっておりますので、まずはこちらのお問い合わせページよりお気軽にお問い合わせください。ご連絡心よりお待ちしております。

著者紹介

津久井 渉

津久井 渉

取締役

1991年生まれ。オーストラリアの高校を卒業後、その後イギリスで建築学科を卒業し、大学院ではデザインシンキングを専攻していました。楽天株式会社へ新卒で入社。トラベル事業部でマーケティング職に約3年間従事した後、2017年には株式会社LIGにWebディレクターとして転職。2019年よりニュートラルワークスへジョイン。これまでの多岐にわたる経験を元に最高なサイト作りはもちろんのこと、貴社のビジネス上の課題解決へ導きます。