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. AIに求められているものは、実は意外な物だった
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    Webサイトの運用が難しくなってきた

    Webサイトの運用が難しくなってきていませんか?知識が無い、忙しい…

  2. Web関連

    自動顧客育成!?マーケティングオートメーションのススメ

    こんにちは!デザイナーの勇希です!今回はマーケティングに関する情報…

  3. Web関連

    ホームページ更新の手間を省きたい(CMS構築)

    誰でも簡単にホームページを更新できるCMS導入のご提案更新の手…

  4. Web関連

    【Web文章術】そうだ、人を惹きつける文章を書こう

    皆さんこんにちは。堀井です。最近仕事が終わって家に帰るとすぐに寝てしま…

  5. Web関連

    スマホゲームと家庭用ゲームの今

    こんにちは!ゲームも大好き、デザイナーの萌々子です!以前は植物…

  6. Web関連

    動画コンテンツ。成功の秘訣はストーリーとシナリオにある

    こんにちは、コンサルの横山です。最近はスマホで動画を見ていることが…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    Web制作会社における「スマートオフィス」
  2. Web関連

    基本中の基本!webで行う品質を上げるための対策3か条!
  3. Web関連

    ちょっとした工夫で劇的に変わる!ユーザーにウケるブログの書き方
  4. Web関連

    e-sportsから考える「スポーツ」
  5. Web関連

    私たちの仕事ってすばらしい!社会貢献度のものさし「SDGs」
PAGE TOP