今すぐ役立つ!ピクトグラムフリー素材まとめ



今すぐ役立つ!ピクトグラムフリー素材まとめ

”ピクトグラム”という言葉は聞きなれない方もいらっしゃるかもしれませんが、現代社会において”ピクトグラム”を目にしない日はないと思います。スマホ、車、パソコン、家電製品、建物、ありとあらゆるものにピクトグラムは採用されています。web開発者にとってもピクトグラムのセンス次第でユーザーの利便性が左右されるといっても過言ではありません。今後ますます注目されるであろう”ピクトグラム”について迫ってみたいと思います。

目次
  1. ピクトグラムとは
  2. アイコンや絵文字との違い
  3. ピクトグラムの国際基準
  4. ピクトグラムとwebデザイン
  5. ピクトグラムの歴史
  6. ピクトグラムのサンプル・ダウンロード
  7. Freepik
  8. The Noun Project
  9. Pictograms Giveaway
  10. Official ISO 7001 Standardized Pictograms
  11. 標準案内用図記号
  12. fip.org
  13. まとめ

ピクトグラムとは

ピクトグラムとは

ピクトグラム(pictogram)とは、文字を使用せずに情報を伝えるためのサインの一種になります。単色や省スペースで表現できることが特徴で、公共交通機関や地図など汎用性の高い場所で利用されています。代表的なモノに非常出口のマークや道路標識があります。

ピクトグラムの最大の特徴とも言える「誰でも一目でわかる」という点は、webデザインにおいても有用で、特に2005年ごろから急速に拡大したweb2.0の波によってピクトグラムは多くのサイトで取り入れられるようになってきました。WordPressやGitHubなど世界規模のサイトでは表示言語をサポートする意味でピクトグラムが活躍しています。また現代ではスマートフォンのアプリ操作でもピクトグラムが活躍しています。

WordPress内のピクトグラムwordpress-ピクトグラム

アイコンや絵文字との違い

アイコン絵文字ピクトグラム

ピクトグラムとよく似たモノに「アイコン」や「絵文字」があります。アイコンも絵文字も趣旨はピクトグラムと同じで、非言語コミュニケーション・ツールとして使われています。これら3つの違いといえば、利用される場所やシチュエーションが違うということです。

  • アイコン/デジタル上で特定のコンテンツを意味するマークとして利用
    使用場面/パソコンやスマホの画面上
    カラー /色彩豊か
    認識度 /アイコンの意味を理解出来る人のみ
  • 絵文字/文章中の表現補助として利用
    使用場面/スカイプや LINE など
    カラー /色彩豊か
    認識度 /絵文字の意味は多くの人が理解できる
  • ピクトグラム/公共機関やグローバリゼーション・サイト、アプリで利用
    使用場面/空港やWordPress、YouTube など
    カラー /ツートーン・カラー
    認識度 /ほとんどの人がアイコンの意味を理解できる

現代のweb開発において、グローバリゼーションを考慮しないといけないケースは増えてきています。それに伴ってピクトグラムの需要も増してきている現状があります。

ピクトグラムの国際基準

ISO 7001 の中でピクトグラムは定義されて、現在67のアイコンが公表されています。この 67 種以外にも ISO の public information symbols にはピクトグラムとして活用できるモノが多数存在します(有償)。ISO 基準のピクトグラムはこちらから無料でダウンロードできます(.ai と .svg のファイル形式)。

ピクトグラムとwebデザイン

ebay

ピクトグラムを意識してインターネットを利用してみると、国際基準のサイトやアプリで多く採用されていることが分かります。

ユーザー目線で考察すると、多くの場合で「絵(ピクトグラム)」を見て「文字」で確認し、クリックしていることが分かると思います。つまりピクトグラムの活用によって、ユーザーを無意識のうちにサイト奥地へと導いていることが分かります。コマーシャルサイトなどでは、特にこの要素は web デザインで考慮するべき点と考えられます。

ピクトグラムの歴史

ピクトグラム歴史

ピクトグラムという言葉は馴染みが薄いかもしれませんが、大昔の紀元前にもピクトグラムの様なものは存在していました。象形文字です。現代では万国共通のマークとして、ピクトグラムはリアル社会、デジタル社会で広く利用されています。

ピクトグラムのサンプル・ダウンロード

Googleで「pictogram download」と検索するとおよそ30以上のダウンロード・サイトが表示されます。こちらではその中でも操作が簡単で、種類が豊富なピクトグラム・ダウンロードサイトを鉄板系から変わり種までご紹介します。

Freepik

フリーピック Freepik

画像ダウンロード・サイト大手の Freepik でピクトグラムをダウンロードすることができます。豊富なラインナップに加えて無料で利用できるモノも多く、web デザイナーの大きな助けとなります。利用にあたっては、freepik.com にアクセスして pictogram を検索する方がヒット件数が多く発生します。日本語サイトの jp.freepik.com ではヒット件数が少なく、尚且つアイコンと混同されて結果表示されます。

ファイル形式/ai、png、eps  種類/800以上  利用条件/個人・商用可
作者表示必要(作者名 designed by Freepik.com もしくは Freepik のリンク)

The Noun Project

The Noun Project The Noun Project

定番のピクトグラムからユニークなピクトグラムまで無数に公開されています。世界中のデザイナーが作成したピクトグラムが並べられていて、その数 10万以上のアイテム数になります。ダウンロードの実行には、ユーザー登録する必要があります。そして著作権の制限なしで画像を使う場合は、$1.99 もしくは月額 $9.99 を支払う必要があります。無料でダウンロードすることもできますが、その場合は作者表示が義務付けられています。

ファイル形式/svg、png  種類/無数  利用条件/個人・商用可
作者表示はファイル毎に異なる(クリエイティブ・コモンズ/作者表示必要、パブリック・ドメイン/作者表示不要)

Pictograms Giveaway

Pictograms Giveaway Pictograms Giveaway

イギリス在住の Jamila Hoages さんが作成したピクトグラムを無料でダウンロードして、利用することができます。可愛らしいイラスト形式のピクトグラムが特徴的です。ファイルのダウンロードは、サイトの下の方に ”70 Free Pictograms Download Here” と記載し、紹介されています。

ファイル形式/ai  種類/70  利用条件/個人・商用可
作者表示不要

Official ISO 7001 Standardized Pictograms

photo : pixelresort.com

ピクトグラムの基本ともいえるISO7001に準じた67種類のピクトグラムをダウンロードできます。

ファイル形式/ai、svg  種類/67  利用条件/個人・商用可
作者表示不要

標準案内用図記号

交通エコロジー・モビリティ財団標準案内用図記号

公益財団法人 交通エコロジー・モビリティ財団が提供する標準案内用のピクトグラムになります。どちらかというとリアル社会向けのピクトグラムが多いかもしれませんが、汎用性の高い図が多く、地図系の web デザインで活用できると考えられます。

ファイル形式/pdf、eps、gif  種類/125  利用条件/個人・商用可(ただし、出版物や商標に利用する場合は要問合せ
作者表示不要

fip.org

医薬品

fip.org

薬剤師や医薬品研究者の世界的組織として知られる fip。こちらでは世界中のだれでも安心してお薬を摂取できるようなピクトグラムが制作せれています。web デザインとお薬って一見何ら関係ないように思いますが、体重や時刻を知らせるようなマークは他のサイトでは見られないような斬新なデザインを発見することができます。また13 のエリアに分けてピクトグラムが用意されていますのので、web マーケティングに合わせて豊富な選択肢の中からお気に入りのピクトグラムを選ぶことができます。ダウンロード・サイトはこちらから。
ファイル形式/jpg  種類/無数  利用条件/個人・非商用
第3者向けコンテンツ作成の場合は、作者表示必要

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

いかがでしたでしょうか?ピクトグラムというジャンルについて初めて触れた方もいらっしゃるのではないでしょうか?ピクトグラムは今後も web デザイン上重要な役割を担うとして、国内ではピクトグラムのセンスを競い合う「ピクタソン」というイベントも開催されています。またピクトグラムと表意文字(Ideogram)を組み合わせた PIC(Pictogram Ideogram Communication)という進化系のピクトグラムも登場してきています。もはや web デザインを考える上でピクトグラムは無視できない存在となってきています。

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp