DESIGN IT YOURSELF.

BUROKI


top

blog

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

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

design_thing

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

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

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

ブログ一覧

private

初めての広島旅行・後編。濃霧のなかフェリーに乗って宮島へ向かう

広島旅行ブログの後編です。 二日目も朝から雨が降っていて、宮島へ向かうフェリー運行してるかな?と不安になる天候だったのですが、なんとか出かけ…

2022.06.22.

private

初めての広島旅行・前編。梅雨入り当日に2泊3日で広島へ行ってきました

少し前の6月14日から16日までの三日間、去年の京都旅行以来の旅行へいってきました。 今回はあまり日数がとれなかったので比較的近くで、かつボクが…

2022.06.19.

think

【うれしい話】デザインの可能性を改めて感じる出来事がありました

つい先日のことなのですが、ある方からご連絡をいただきました。 その方は約5年ほど前、ボクがまだフリーランスになる前にロゴ制作を担当させていた…

2022.06.11.

think

2022年5月の活動報告。5月はこんなデザイン制作をしていました

5月はプライベートでどこにも外出しなかったので、サムネイルにする写真がなく、活動報告のサムネイルとしては初めてフリー写真を使用しました(笑)…

2022.06.07.

think

AirPods Proを使っているボクが買う前に気になるところを解説してみた

今年になってようやく新しいiPhoneに変更したのですが、いざスマホで音楽を聴こうとしたところ、iPhoneの本体にイヤホンジャックがついていないこと…

2022.06.01.

private

ブロキの日本ダービー予想2022。今年の1着はあの馬で間違いなし!?

毎年5月末になると、ある一大イベントに向けて自然と準備モードに入ってしまいます。そんな一大イベントとは・・そうです。「日本ダービー」ですね。…

2022.05.29.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル