• TOP
  • ブログ
  • アイコン制作のコツ!単色アイコンと2色以上のアイコン
BLOG
  • イラスト
  • 2023.11.20

アイコン制作のコツ!単色アイコンと2色以上のアイコン

はるちゃん
アイコン制作のコツ!単色アイコンと2色以上のアイコン

こんにちは!アルバイトのはるです。

 

今回はアイコン制作についてご紹介しようと思います!

 

単色のアイコン(シルエットアイコン)と2色以上使ったアイコンの2種類に分けてお見せします。

分かりやすい省略が重要!単色アイコン

 

自社ホームページの実績カテゴリ用に制作したアイコンです。

 

一段目左から建築・不動産(家)、飲食店(スプーンとフォーク)、古物商(兜,壺)、

二段目が整体・接骨院(膝の骨,骨盤,肩の痛み)のアイコンを作りました。

 

(同じカテゴリのアイコンは、候補として幾つか作った中から視認性の高いデザインを1つ選んでいただきました!)

 

 

単色で作るアイコンの場合、ぱっと見てわかりやすいよう複雑な部分はできる限り省略し、簡素な形にしています。

残すところ・省くところをちゃんと考えないと何を表しているのかわかりづらくなるため、簡単そうに見えて制作時間は普通のイラストとそれほど変わりません・・・

 

 

■例えば整体・接骨院のアイコンは”骨盤”

アイコン制作のコツ!単色アイコンと2色以上のアイコン
アイコン制作のコツ!単色アイコンと2色以上のアイコン

骨盤の絵は真ん中の小さな穴が複数空いた部分は穴を省略し、一方その下の部分の大きい穴は残しました。

また、骨盤だけだと何だかわかりにくいと思い、背骨の一部も入れました。

 

アイコンを作成する時点では大きめに作るので小さい穴があっても問題なく思えますが、実際の使用サイズは小さいため、細かく作り込んでも結局潰れてしまったり、ほぼ見えなくなる場合があります。複数の穴だったものが潰れて繋がって線に見えることも…

■その他の単色シルエットアイコン(動物病院)

後ほどご紹介する動物病院のホームページ用にも、単色のシルエットアイコンも作成しました!こちらもぱっと見てわかりやすいようできる限り簡素な形にして、何を示すアイコンかを分かりやすくしています。

(まだ制作中のホームページなので完成したらまたご紹介します!)

 

2色以上使ったアイコンは特徴を掴みやすくする!

一番最近制作したアイコンは、動物病院のホームページ用に作らせていただきました!

■素材イラストにはなかった”フェレット”を作成

診察対象動物に犬、猫、ハムスター、ウサギ、ハムスター、他小動物、の項目がある中で、フェレットだけ素材イラストでは用意ができなくて空白になっていました。

すでにあるイラストアイコンに合わせて作ってほしいとの依頼をいただいて作成しました!

 

 

作りながら難しかったのは、頭の形・目鼻口は全動物ほぼ同じだったため、その条件に合わせながらどれだけフェレットっぽく見せられるかというところでした。

 

フェレットにも色んな模様、毛色の子がいますが、特徴を掴みやすく一番よく見かけるタイプの柄にしました。色は、模様部分が濃い茶色だと目が黒でほぼ見えなくなることと他のアイコンと合うよう薄茶にしました。

 

 

まとめ

ホームページを作る中で素材がここだけ足りない、見つからないなどの場合にもアイコン、イラスト制作対応しています!お気軽にご相談ください。

 

ここまで読んでいただきありがとうございました!

 

それでは、さようなら~!

記事が面白かったらいいね!

関連キーワード

この記事を書いた人

横浜のホームページ制作会社
株式会社シーク

イラストレーター

はるちゃん

大阪出身。
イラスト制作や情報入力、修正等のお手伝いをしています。