DESIGN IT YOURSELF.

BUROKI


top

design

  • top
  • design
  • コンセプトカラーとラインで表現する少し立体的なアイコンデザイン

コンセプトカラーとラインで表現する少し立体的なアイコンデザイン

graphic

  • top
  • design
  • コンセプトカラーとラインで表現する少し立体的なアイコンデザイン

コンセプトカラーとラインで表現する少し立体的なアイコンデザイン

2019.07.06.

スポンサーリンク

スポンサーリンク

今年の4月に公開したGMOクラウドの新サービス「CloudCREW(クラウド・クルー)」のwebサイト制作時にサイトに使用するためにつくったオリジナルアイコンのデザインです。webサイトの詳細は下記のリンクからご覧ください。

ここ数年前からwebサイト制作のトレンドが立体的な表現から平面的なデザインのいわゆる「フラットデザイン」に変わり、アイコンのデザインも平面的でシンプルになりました。わかりやすい例でいうとiPhoneなどのスマホのアイコンですよね。スマホを開いてアプリのアイコン一覧画面を見てみたらわかると思いますが、シンプルでカラフルなアイコンが多いですよね。

初期のころのiPhoneはアイコンのデザインも立体的なものが多かったですが(例えば虫眼鏡のアイコンがあった場合、本物に近い虫眼鏡をデザインするといった感じです)、web全体のフラットデザインの流れを受けてシンプルにリデザインされました。ボク自身も現在web制作を受けた場合、アイコンデザインはシンプルにつくるようにしています。

アイコンデザインのコツと考え方

ボクのアイコンデザインに対する考え方を少し書いてみます。
そもそものアイコンの意味としては「元の形をとどめる記号」などの意味があるように、アイコンの役割はひと目見て「これは●●だな」と思ってもらわなければいけません。例えば下記の画像をご覧ください。

スマートフォンのアイコン

何のアイコンに見えますか?おそらくほとんどの人が「スマートフォン」と答えると思います。その通りこれはスマートフォンのアイコンです。

このように、スマホとして認識してもらいたい場合、万人が認識できる記号としてアイコンを制作する・・アイコンデザインの場合それが一番大切です。100人が全員このアイコンを見て「スマホ」と答えられればいいのですがなかなかそうはいきません。しかし、それでも100を目指すことがアイコンデザインの正解ですね。

なので制作する場合、ボクはまずgoogleなどでインターネット検索します。検索して一般的なイメージや共通認識を把握するところからはじめます。絶対に自分だけの認識ではつくりません。自分だけの認識って一般的な認識とはズレがあることも多いですからね・・

少しでもオリジナリティを出すように心がける

検索後、ある程度アイコンにするイメージが見えてきてから実際に形にしていきます。あくまで「万人にわかりやすい」が重要なので、できるだけシンプルに、余計な線は省きつつ制作します。

その際のひとつのポイントとしては、ほかの人がつくったアイコンと瓜ふたつにはならないようにすることですかね。アイコンって小さいサイズだしその中で表現できることも限られてしまいますが、それでも少しでもオリジナリティを出すようにしています。なかなか難しいのですがそこにつくり甲斐はあるかと思います。

今回のアイコンづくりでこだわった点

今までこのブログでも紹介してきたアイコンデザインは本当にシンプルで、線のみで余計な装飾をせず統一感を意識して制作してきたものばかりでした。

ですが今回はもう少し装飾をしてみました。webサイトで使用している数色のコンセプトカラーを使って線の色を変えたり、背景色をつけたり・・なぜそうしたかというと、現在のwebデザイン界全体のアイコンデザインテイストの流れがあまりシンプルになりすぎないように、やや立体的なデザインに戻りはじめているように感じたからです。

コンセプトカラー

デザイナーとしてアンテナを張って全体の流れを感じることも大事ですね。

中にはアイコンで表現するのが難しいものもある

すべてをアイコンで表現できたらいいんですけど、中には難しいものもあります。例えば今回の場合で一番難しかったのが「プロ」でした。プロってアイコンにするのがすごく難しくて、ネットで調べても解釈がバラバラだし人が思うプロ、ボクが思うプロって同じじゃないし、どうやって表現しようかかなり迷いました。

その結果、今回の場合はバッジのアイコンにして文字で「PRO」と入れることにしました。文字で入っていたらまだ万人に伝わりやすい。しかし共通認識が持たれにくいものをアイコンにするとかえってわかりにくくなってしまったりするので注意は必要ですね・・

簡単そうに見えて実は難しいアイコン。デザイナーの腕が試されるものでもあります。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

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

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

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

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

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

文鳥とデザイナー

スポンサーリンク

design list

デザイン作品一覧

graphic

ハードなイメージをより引き立てる。ステンシル風タイポグラフィ

webサイトやロゴデザイン、パッケージデザインなど、既存のフォントでは表現しきれないと判断したときは、イメージに近いフォントを元にアレンジし、…

2021.02.22.

logo

「connect.LAB(コネクトドットラボ)」のロゴデザイン

昔から仲良くしてもらっているアクセサリーブランド「ul.」のオーナー兼デザイナーのmanoさんは、定期的に「connect(つながり)」をテーマにイベン…

2021.01.29.

logo

いま大注目の3ピースバンド「RINGO TONE」さんのロゴデザイン

昨年末にあるミュージシャンの方からロゴデザインの依頼がありました。「RINGO TONE(リンゴトーン)」という、2013年に結成し、東京で活動されてい…

2021.01.23.

graphic

2021年は丑年。牛乳石鹸をパロディした年賀状デザイン

昨年はwebサイトやロゴ、名刺を制作させてくださった福岡の木工集団ナノナノファクトリーさん。 昨年の11月ごろに2021年の年賀状デザインのご依頼も…

2021.01.07.

logo

漢字をモチーフにシンボルマークを考案したロゴデザイン

先月頭にご依頼をいただき、制作させていただいたロゴデザインです。 普段見慣れない「驀(ばく)」という漢字をシンボルマークとして落とし込んでほ…

2020.12.26.

graphic

デザイナーと謹賀新年のコラボ!?なタイポグラフィデザイン

今年も喪中なので年賀状の制作などはやらないのですが・・。 このwebサイトやSNSなどにちょっとした新年のご挨拶用に何か簡単なマークでもつくろうか…

2020.12.18.

designをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル