DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • design_thing
  • デザイナーが教える。多くの人に伝わるアイコンの作り方

デザイナーが教える。多くの人に伝わるアイコンの作り方

design_thing

  • top
  • blog
  • design_thing
  • デザイナーが教える。多くの人に伝わるアイコンの作り方

デザイナーが教える。多くの人に伝わるアイコンの作り方

2021.02.18.

スポンサーリンク

スポンサーリンク

前回のブログでは前編的な位置付けで「アイコン制作時の考え方」を書きました。

今回は後編ということで、「アイコンの作り方」を書いていきたいと思います。

BUROKIアイコン

BUROKI流・アイコンの作り方教えます。

index list

このブログの目次

クリエイティブは必要なし。アイコンデザインはとにかく「分かりやすさ」

ボクがアイコンをデザインするとき、一番大事にしていることが「分かりやすさ」です。前回の考え方でも書きましたが、より多くの人に伝えられるようにするためには何をアイコンにするかだけでなく、デザインも視覚的にスッと入っていくようにシンプルにつくります。

アイコンはロゴではないので「伝わる」より「伝える」ものであり、

  • 複雑な描写にしない
  • わかりにくいデザインにしない
  • 小さいサイズでも判別できるように
  • マニアックな解釈を形にしない

などを考慮しながらつくります。
そうすると必然的にわかりやすいシンプルなアイコンになっていきます。いわば道路標識みたいなものですね。

キャリアの浅いデザイナーほど複雑な描写にしがちです。出来上がったアイコンを一度俯瞰で見て、誰もがそのアイコンの意味を理解できるか、線が多くないか、縮小しても認識できるか、余計な装飾はしていないかなどを注意して見ながら調整して完成させましょう。

ひとつつくるなら全てのアイコンを制作する

アイコンはもはや全体のデザインの一部を構成する立派なパーツです。

街に貼っているポスターなどを見てみると、使っているアイコンのデザインテイストがバラバラになっているポスターをよく見かけます。そういうものを見る度に「いろんなサイトからフリーで使えるアイコンをダウンロードして寄せ集めて使ってるんだろうなー」と勝手に想像しています(笑)。

webサイトも同じで、アイコンのデザインテイストが揃えられていないということに意外と気づかないデザイナーもいるようです。アイコンはデザインした人が一番意図を理解しているはずなので、統一感を持たせるためにもひとつつくるなら必要なアイコンは全部自作するほうがいいです。

逆に中途半端につくるくらいなら使わないという「all or nothing」くらいの気持ちでいいと思います。

アイコン制作のルールは文字で残しておく

webサイトの場合はサイトを運営していく中で、後から新しいアイコンを追加で制作することもよくあるので、アイコン制作時のルールは箇条書きでいいのでメモ帳などに残しておきましょう。そうすると後日つくるときも比較的スムーズに同じテイストで制作できるので便利です。

すべてのアイコンのデザインテイストを合わせる

アイコンは文字よりも視認性が高いことは書きましたが、認識しやすいのでデザインの統一感という部分でも大きな役割を担います。

同じデザインテイストで揃えられたアイコン一式を目にすると、とてもしっかり設計されているwebサイト、ブランドという印象を受けますし、はじめての方からの信用度も上がります。

アイコンデザインの統一感で意識したい部分を挙げると、

  • カラー
  • 線の太さ
  • 曲線の角度
  • ロゴデザインのテイスト
  • デザイン全体のトーン&マナー
  • サイズ

などです。
アイコンに使うカラーはロゴやサイトデザインに使用しているカラーから選択します。線の太さや角度はターゲット層を考慮しながら調整し、ロゴのテイストや全体のトンマナに合わせてアイコンのデザインもつくっていく必要があります。

あと大事なのはアイコンのサイズです。
特に線を使うアイコンの場合、制作する段階からサイズを合わせておかないと使用するときに線の太さがまちまちになってしまったりするので、グラフィックソフトのillustratorなどを使い、30mm角の領域内で制作するなど自分なりのルールを決めてから制作したほうがスムーズです。

アイコン制作の領域
あらかじめ領域を決めて制作する

整頓された領域の中でつくることで全体のテイストもすぐに確認できますし、新しくつくるアイコンが統一感からズレがないか把握しやすくなるのでオススメの方法です。

アイコンデザイン事例

文章で書くだけではあまり説得力もないので、最後にボクが制作したアイコンデザインの事例を紹介しようと思います。

CloudCREW

まずはGMOクラウドさまの新サービス「CloudCREW」のwebサイトに使用するために制作したアイコン一式。

CloudCREW用に制作したアイコンたち
CloudCREW用に制作したアイコンたち

webサイト制作時に指定されたカラーを使いつつ、線の太さをすべて合わせ、少しポップなテイストですべてのアイコンを制作することで難しそうなイメージのクラウドサービスに親しみやすさを持ってもらおうという意味を込めてつくりました。

ナノナノファクトリー

次は昨年つくらせてもらったナノナノファクトリーさんのアイコン一式。

ナノナノファクトリーのwebサイト用に制作したアイコンたち
ナノナノファクトリーのwebサイト用に制作したアイコンたち

木工集団のwebサイトということで、木の上にステンシルするようなイメージでところどころにステンシル風に加工し、あまり類を見ないテイストで各アイコンを制作。電話のアイコンとして受話器を使っていますが、これはナノナノファクトリーさんのお客さまの層を考慮してのことです。

anna

最後にytvメディアさんが運営する関西女性のためのwebメディア「anna」の媒体資料用に制作したアイコン一式。

annaの媒体資料用に制作したアイコンたち
annaの媒体資料用に制作したアイコンたち

annaのカラーを使いつつ、女性向けのメディアであることを伝えるために少し柔らかいテイストでアイコンデザインを統一しました。ベタ塗りなしで線の太さをすべて合わせ、線と点のみで全アイコンを制作。

上に挙げたのは一例で、webサイト制作する場合はサイトに合わせてオリジナルアイコンを制作しています。もっとご覧になりたい方は下記のリンクよりご覧ください。

アイコンは着想もデザインも「わかりやすく」

ということで、前編、後編に渡ってアイコンのことをボクなりに書いてみました。わかりやすくが何よりも大事ですね。

アイコン自体は昔から存在していましたが、ここ数年の間にここまでデザインの中で確固たる位置付けになったのは、現代の情報量を多さが一因だと思われます。膨大な情報をどう整理するか、視覚的に判別・誘導できるようにするか・・その役割にアイコンは打ってつけなので、ここまで重宝されるようになったのだと思います。

無料で使えるアイコンもいっぱい配布されているんだから、いちいち自作する必要ないという考えの人も多くいらっしゃると思いますし、その考えの人をボクは否定しません。デザインに効率はもちろん大事です。ですが少しでも全体のデザインを手掛けないと気がすまないボクのようなデザイナーもいるはずです。その人たちに届けば本望です。

またアイコンの制作実績もアップしていこうと思います。

BUROKIアイコン

少しでも参考になれば幸いです。
スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

think

SEO小話vol.06 クライアントが気づかないURLぐちゃぐちゃ問題を事前に回...

今年の4月より不定期に更新している「SEO小話」シリーズ。 少し間隔が空いてしまいましたが(いつもですねすいません)、これからももちろん更新して…

2024.07.24.

think

SEO小話vol.05 webサイト公開後、検索上位にこないんだけど!?の対処法

今年の4月より不定期に更新している「SEO小話」シリーズ。 お読みいただけているでしょうか?けっこうリアリティあって面白いと思うんですけどね。ま…

2024.06.28.

think

SEO小話vol.04 wordpressのSEOプラグイン、入れなくても問題な...

今年の4月よりマイペースにはじめている「SEO小話」。 ちょっと間隔が空きましたが・・今後ももちろん更新は続けるつもりです。さて今回はvol.04とい…

2024.06.21.

private

初めての鎌倉旅行・3日目。最後は横浜にある伝説の家系ラーメンで〆る

初めての鎌倉旅行もいよいよ3日目、最終日。2日目に江ノ電観光を満喫したので、最終日は鎌倉で相方が行きたい寺を巡ることにしました。 鎌倉旅行1日…

2024.06.15.

private

初めての鎌倉旅行・2日目。江ノ電に乗って観光名所巡り

初めての鎌倉旅行、2日目の朝を迎えました。2日目は江ノ電に乗って観光すると決めていたので、早朝6時半に起きて準備。鎌倉旅行1日目のブログは下記…

2024.06.11.

private

初めての鎌倉旅行・1日目。夏がくる前に2泊3日で鎌倉へ行ってきました

もうすっかり夏の陽気ではありますが、先日の6月4日から6日までの3日間、昨年の北海道函館旅行以来の旅行へいってきました。 今回向かった先は「鎌倉…

2024.06.08.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル