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

関連記事

  1. Web関連

    大切なマイナンバーを守るために

    ついに開始されたマイナンバー制度ですが、使い方や管理方法には注意が必要…

  2. Web関連

    色彩や配色を勉強するならコレ!古き良き日本文化を今に生かす

    人は誰しも何かをデザインしています。「デザインなんてしたことない」…

  3. AIさくらさん

    デジタル接客+AIで非接触を推進する

    コロナ禍にみまわれる前までは、ビジネスの場において商品やサービスを紹介…

  4. Web関連

    セミナー開催で、新規顧客の獲得!…は思ったほど楽じゃない。

    毎日どこかで何かしらのセミナーが開催され、新たな情報、技術を学びたい方…

  5. Web関連

    webに張り付きで疲れている担当者にオススメ!ドクターフィッシュに会いに行こう!

    美について考えることが多くなってきた、デザイナーの池田です。美とい…

  6. Web関連

    忙しいビジネスマンにオススメ!のLINEのサービス

    皆さんはプライベート時の連絡手段として、何を利用していますか?スマート…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    ブランドや商品名を印象づけるには!?
  2. Web関連

    ヤフオク初心者が、ECサイトとは違う気になる点をピックアップしてみた
  3. Web関連

    Webサイトに関する昨今のトレンドあれこれを集めてみた!
  4. サービス・新技術

    申請書業務はRPAにお任せ!人の代わりに業務を自動化
  5. Web関連

    Webアプリに対する攻撃手法とその対策
PAGE TOP