UIデザインに活用できる!ピクトアイコンについて

UIデザインに活用できる!ピクトアイコンについて

こんにちは!イラストレーター mippokoです。

 

近年、フラットデザインやマテリアルデザイン等の普及によって、アイコンがより簡略化されてきています。

簡略化されていったことにより、ピクトグラムとアイコンが同じものとして認識される「ピクトアイコン」「ピクトグラムアイコン」と呼ばれるようになってきました。

 

こうした簡略化したアイコンは、言葉で説明をしなくても情報が伝わるよう絵で表現したもの。アイコンを見て文字を確認し、クリックし、無意識のうちにサイトやアプリ内へと誘導する。今回は限られた画面でいかに情報を伝えるかというUIデザインに活用できるピクトアイコンについてご紹介したいと思います。

 

1.ピクトグラムの誕生秘話

2.ピクトグラムとアイコンの違い

3.活用方法

 

 

 

1.ピクトグラムの誕生秘話

 

2020年には東京オリンピックが開催されますね。

実は、「ピクトグラム」は1964年に開催された東京オリンピックで生み出されたことをご存知でしょうか?

戦後の復興が進み、高度経済成長期だった日本。

文化の違う外国の方々をどうやって「おもてなし」するか・・・お偉いさんたちは悩んだそうです。

「言語に関係なく誰でも理解出来るもの」

これが、ピクトグラムの誕生だったんですね。

 

 

 

 

 

 

 

誰もが知っているこのトイレの男女マーク。実は東京オリンピック1964デザインプロジェクトで発明されたものなのです。

ピクトグラムの発明は、まさに世界のデザイン業界に革命を起こしたといっても過言ではありません。

 

日本人の「おもてなし」から生まれたものだったのですね。

 

 

2.ピクトグラムとアイコンの違い

 

ピクトグラム(Pictogram、ピクトグラフPictographともいう)とは、

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

 

空港や駅といった公共施設の案内標識などによく見られるものですね。

あらゆる人に、言葉で説明をしなくても情報が伝わるよう絵で表現したものです。

 

一方、アイコンとは、プログラムやファイルの種類をシンボル化した小さな絵記号のこと。

 

WindowsやMacのデスクトップにもいくつか小さな絵が並んでると思いますが、

ユーザーが直感的に分かりやすく操作できるようにしている、これがアイコンです。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

アイコンの場合はピクトグラムほど単純化しなくても成り立つことが多いので、装飾やカラフルなものなども含まれます。

 

そして、近年ではピクトグラムとアイコンが同じものとして認識されることが増え、「ピクトアイコン」、「ピクトグラムアイコン」と呼ばれるようになったそうです。

 

たくさんの情報が詰まっているサイトには、いかに限られたスペースでスムーズにユーザーを誘導できるかが大事なポイントとなります。

 

3.活用方法

 

主に検索エンジンやリンク集などを中心として、様々なサービスを提供することにより、

利用者の増加を図るポータルサイトなどでは、このピクトアイコンが大いに役立てられると考えられます。

 

例えば、観光サイトを制作するとします。

スポットカテゴリーで検索アイコンをクリックすると連動で周辺マップにアイコンがスポットに表示されるようにします。

気になった場所のアイコンをクリックすると詳細が出てくるという仕組みに。とても見やすく、検索も簡単!

 

1日の計画も立てやすく、また海外の方でも分かりやすデザインになりますね。

※上記はイメージです。

 

アイコンをデザインする際には、以下の2つのポイントを重要視しておきましょう。

 

1.アイコンの意味、形がキチンと伝わるもの

 せっかく分かりやすくアイコンを設置しても、ユーザーに伝わらなくては意味がありません。

 絵だけで伝わるアイコンを作成しましょう。

 

2.他のアイコンのテイストと整合がとれているか

 アイコンデザインには様々なテイストがあります。

 古くからあるピクトグラムやiOSで使われている線ピクトやGoogleがよく使うカラフルなアイコンなどがあります。

 ターゲットユーザーや使用用途、表示サイズによってテイストを決めると良いでしょう。

 

 

ピクトアイコンはUIデザインでは欠かせない存在となっていますね!

どうしたら見やすくなるか、わかりやすくなるのか・・・そう悩んだら改善策のひとつにピクトアイコンをぜひ活用してみてはいかがでしょうか。

 

終わりに

何気に見ていたトイレのピクトグラム。

ある一部では「ピクトさん」と擬人化され、「ピクトさん収集サイト」まで存在します。

指示・注意・警告といったメッセージを伝えることが多いので、いつもピクトさんは痛い目に合って危険を知らせてくださっているので敬意をもって受け止めましょう・・・というもの。確かに!!ん~でも面白い!!(笑)


Previous: Photoshop「アクション」機能で作業効率化を図ろう! Next: EC-CUBE3を始めよう! – part1 –

© 2017 ALL CONNECT Inc. All Rights Reserved.