ピクトグラムの作り方│Web制作会社のインフォグラフィック関連コラム

Columnコラム

Webデザイン

ホームページ制作会社が教えるインフォグラフィックの基礎、ピクトグラムの作り方

ホームページ制作会社が教えるインフォグラフィックの基礎、ピクトグラムの作り方

2015/01/20
このエントリーをはてなブックマークに追加

デザイナーに限らず、インフォグラフィック好き!という方、多いのではないでしょうか。
数字や複雑なデータには拒否反応を起こしてしまう文系の自分にとって色とりどりのイラストで分かりやすく解説してくれるインフォグラフィックは興味の幅を広げてくれたり、デザインのアイデアを与えてくれる革命的な手法です。
今回のコラムはそんなインフォグラフィックの基礎、ピクトグラムの作り方についてです。

ishizuka_pict_01.jpg

どんどん広がる、ピクトグラムの活用

インフォグラフィックの基本ともいえるピクトグラム。
言葉の説明を用いず、老若男女に意味を伝える、というのが目的ですが無駄をそぎ落としたフォルム自体がアートとして成り立っています。
Webではフラットデザインが主流になってきたこともあり、目にするピクトグラムの種類も増えてきました。

実際の制作でも、サイトリニューアルを機にサービスや製品カテゴリの一覧ページに「アイコンをつけてほしい」という要望をもらうことがあります。
ニッチな業界ほど、「これ、どんなアイコンにしたらいいんだ...!?」と苦戦します。

そこで今回は、まだ一般的なピクトグラムが設定されていないものを題材に新ピクトグラムを作成しようと思います。

ピクトグラム作成ステップ1:お題を決める

今回のお題は私の大好きなアーティスト、perfumeにしました。

世界進出も果たし、各地でライブ活動を行っている彼女たち。
いつしかperfume記念館、perfume博物館、perfumeグッズショップなどがそこら中にでき、地図や道路標識にそれらの目印が必要になるのもそう遠い未来ではないと思うので、今のうちに作成してしまいましょう。

ピクトグラム作成ステップ2:思いつく限り、アイデアを書き出す。

ishizuka_pict_02.jpg
お題を決めたら、まずはラフスケッチです。
どんなデザイン作業にも言えますが、最初からデジタルで作ろうとするのはNGです。
頭が凝り固まってしまい、柔軟な発想ができなくなります。
「あまり関係ないかも」「分かりにくいかも」はさておき、連想されるものを全て書き出します。
アイデアを出し切った後に、どれが最もふさわしいか見ていきましょう。

ishizuka_pict_03.jpg

まずこちら。
頭文字のPですが、ただの駐車場だと書き始めた時点で気づきました。
なのでこちらは却下です。

ishizuka_pict_04.jpg

続いてこちら。
Perfumeの魅力を語る上で、3人の脚線美は欠かせません。
が、これではちょっといやらしいお店を連想してしまいます。
Perfumeに対して、決していやらしいイメージは持ってほしくないため、却下です。

ishizuka_pict_05.jpg

続いてこちら。
ハイヒールを履いてのあの圧倒的パフォーマンス。
女性であればどれだけ驚異的なことかお分かりかと思います。
ですがこれだけではPerfumeは連想できないため、こちらも却下とします。

ピクトグラム作成ステップ3:スケッチを決めて、清書。

自分で思いつく限りアイデアを出し、それでも「なんかしっくり来ない!」
というときがあります。
そんなときは、第三者の意見を求めましょう。

ピクトグラムは万人が理解できなくてはなりません。
自分の視点だけだと、分かりやすいモチーフを選んだつもりが他者からすると「分かりにくい」「○○ならこうでしょ?」と映ることがあります。
なるべく多くの人に見てもらい、意見を取り入れましょう。

スケッチを決めて、最終的に清書したのがこちらになります。

ishizuka_pict_06.jpg

他のスケッチと比べ、分かりやすさはありますがピクトグラムとしてはやや複雑なフォルムになってしまいました。
「あーちゃんはハーフアップより、全部おろしてる方が好きだ!」
「なんか地味だ!」など、ファンの方からしたら色々と気になる点があるかと思います。

作成した私自身、Perfumeの魅力を損なわずに、シンプルかつスタイリッシュにするにはどうしたらよいか、かなり悩みました。未だにベストな案を試行錯誤中です。

このように、ピクトグラム制作は対象を深く理解しようと考え様々なアイデアを生み出す良い機会です。

デザイナーの方はぜひ、まだ誕生していないピクトグラム制作に挑戦してみてください。

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

UI/UXデザイン

text_totop