Web関連

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

0

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

 

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

インフォグラフィックの基本ともいえるピクトグラム。
言葉の説明を用いず、老若男女に意味を伝える、というのが目的ですが無駄をそぎ落としたフォルム自体がアートとして成り立っています。
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デザイン

0

就活解禁前に知っておきたい、面接の4つの心得!前のページ

野球がしたい人のためのコミュニティサイト活用術次のページ

ピックアップ記事

  1. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  2. 新型コロナウイルスで日本の働き方改革が起こる
  3. 新しい販売形態であるDtoCについて考えてみる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    営業を仕組み化して売上を2倍にするwebマーケティングツールとは?

    営業を仕組み化させ売上アップする方法についてMA(マーケティングオート…

  2. Web関連

    ホームページ制作の大きな失敗原因と解決方法はこれだ!

    ホームページ制作の失敗の原因と解決方法はこれだ!失敗する原因は3つ、解…

  3. Web関連

    整理術を磨いて仕事の処理速度をアップ?!佐藤可士和から学ぶ仕事の取り組み方

    こんにちは!最近、やりたい事が多過ぎて困っているデザイナーの大和田です…

  4. Web関連

    Webにもつながる、オタク御用達のニュースアプリを使ってみた。

    年末の慌しさで大好きなアニメやゲームを楽しむどころか、最新ニュース…

  5. Web関連

    Webデザイナーだからこそ、一味違うものを送りたい!オリジナル年賀状作成の3ステップ

    みなさん、年末年始の楽しみはなんでしょうか?私は、日ごろお世話にな…

  6. Web関連

    読むべし!アプリ開発初心者のための本

    昨今アプリ開発はまったくの初心者でもできてしまうようで、市場では数多く…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. AIさくらさん

    自然災害から人を守るさくらさん
  2. Web関連

    レスポンシブデザインのHTMLコーディングにある落とし穴(Viewport編)
  3. Web関連

    この夏は簡単にスポーツ観戦しよう!スポーツライブ配信サービスまとめ
  4. サービス・新技術

    最近よく聞く「フィンテック」、ちゃんと説明できますか?初心者向けに分かりやすく解…
  5. AIさくらさん

    【Webマーケティング】サクラに気をつけろ!今はレビューよりも◯◯を見て購入する…
PAGE TOP