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

関連記事

  1. Web関連

    楽しくて便利!おすすめの写真加工スマートフォンアプリ

    こんにちは。育児に家事に大忙しのディレクター、望月です。限られた時間の…

  2. Web関連

    売り上げの上がるECサイトを作りたい

    売上をアップさせるショッピングサイトを制作します「どのように売上を…

  3. Web関連

    eSportsって何がすごいの?

    突然、eSportsについて調べまくってみました。日本国内でもだん…

  4. Web関連

    空腹注意! 飲食業界に関わって学んだこと!

    最近飲食業界のプロジェクトに関わりました。食べることの大好きな私にとっ…

  5. Web関連

    Twitterのプロモーション広告をWeb制作でも活用しよう!

    みなさんTwitterは利用していますか?現在Twitterの月間…

  6. Web関連

    ついつい読みたくなるwebサイトのコラムを書くコツ ~作文 3つの基本編 ~

    こんにちは。ティファナコラム編集部です。前回は、「もっとWebサイ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    Google「Picasa」を「Google フォト」に統合
  2. Web関連

    一目で伝わる!バナーデザインの3つのポイント
  3. サービス・新技術

    【3分で解説】これから始まる自動車教習所のオンライン学科教習。知っておくべき3つ…
  4. Web関連

    写真を特殊な素材に印刷!変わった素材3選
  5. Web関連

    対岸の火事ではない!?被害拡大中のwebページ改ざんについて。
PAGE TOP