デザイン

デザイン

Webデザイナーがアイコンをデザインする時に注意したいルール8点 統一感をもたせて視認性を上げる

UX Planet

UX Planet is a one-stop resource for everything related to user experience.

本記事は、12 tips for icon designer
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

228 views

読了時間 : 約2分35秒

デザインワークにおいて、Flaticonのようにウェブサイトや企業サイトにアップロードすることが出来ないオリジナルアイコンが必要になる場面があります。

 

 

イメージするアイコンがなかったり、クライエントからオリジナルのアイコンを制作するよう依頼があった場合などが挙げられます。実際アイコンデザイン作業は個人で行なうことが出来ます。

 

 

アイコンのデザイン技術はデザインワークにおいて非常に便利で、イラスト技術を必要としません。その代わりいくつかの簡単なルールがあります。それでは始めていきましょう!

 

 

スタイルを統一させる

まずはアイコンとそれに追随するスタイルを選んでいきます。あまり深く悩む必要はありません。アウトラインやグリフ、色、モノクロといったスタイルで良いでしょう。これらのスタイルはセットするアイコン全てに同じく揃えていきます。仮に一方がアウトライン、もう片方がグリフを選択した場合、グリフの方が目立ってしまいバランスが良くありません。

 

 

シンプルなメタファーを使う

アイコンはユーザーにとって分かりやすいものでなければいけません。見た目から情報を素早く理解してもらうことが求められますので、出来るだけ分かりやすいアイコンを作りましょう。親しみやすい形状とシンプルなメタファーを使っていきます。

 

 

グリッドを使う

セットする全てのアイコンは、同じ比率とサイズでなければいけません。この場合はグリッドを使っていきます。使用しているグリッドはこちらでダウンロード出来ます。理想では想像上の正方形に当てはまるように配置するのが適切ですが、もし難しいようなら構成バランスが取れるような小さなディテールを加えていくか、正方形または丸形の線上にアイコンを配置するのが良いでしょう。

 

 

線の太さは均一に

アイコンの線の太さは統一させるか、そうでないかで印象は変わります。仮にデザイン部分を2px、線を1pxとします。するとどう見えますか?どのような場合でも、アイコンは線を統一させなくてはいけません。

 

 

丸みを帯びた角にする

角に丸みがある場合は2pxにし、全てのアイコンにこの規則を使っていきましょう。そこまで重要に思わないかもしれませんが、デザインに統一感と調和が感じられます。

 

 

ディテールは簡単なものに

アイコンサイズが小さければ小さいほど、デザイン細部は簡略化していきましょう。小さいサイズのアイコンは、ディテールが細かいほど雑多な印象になっていきます。それでも細部に拘ったものにしたい場合は、ラインを細くして下さい。

 

 

使用する色には一貫性を

インターフェイスが必要でなければ、それぞれのアイコンが異なった色でなくても構いません。ユーザーが区別しやすいように、例えばチェック・アイコンとキャンセル・アイコンの違いが分かるようにしなければいけませんし、それ以外の場合でなら、同じような色か色調を適用しても良いでしょう。

 

特徴を加えてみる

アイコンに調和が持てるように、それぞれのアイコンに同じような特徴を持たせるのもお勧めです。以下の画像例だと、この場合は輪郭線に特徴があります。

 

 

よりオリジナル性のある作品にするには?

よりオリジナル性を求めるのであれば、スタイル加工がオススメです。グリフとアウトラインを統合したり、カラースポットを加えるのもよいでしょう。

 

 

サイズに整数値を使う

アイコンのサイズには整数のみを使いましょう。エクスポート後にアイコンがしっかりと表示されない恐れがあるからです。例えば2.12pxではなく、2pxとします。

 

 

正しくエクスポートを行なう

エクスポートを必ず忘れてはいけません。この場合すべてのストロークを曲線に変更・拡大します。もし必要があれば、簡単に編集出来るようにソースファイルをストロークで保存します。

 

 

作成したアイコンを実際に販売してみる

あなたが自分で作ったアイコンを販売したい場合は、IconfinderやIconscout、またはNoun Projectを利用してみるのが良いでしょう。

 

 

以上ご紹介した簡単なアイコン作成のステップで、あなたのデザイン技術をもっと磨いていきましょう!

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
【Uber初回利用2000円オフクーポン】
130v4g

プロモーション コードを追加するで「130v4g」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

【UberEats初回1000円オフクーポン】
【UberEats初回1000円オフクーポン】
ins6je2v

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ