Advertisement

how-to-design-better-icon-cover (1)

 

この記事では現役デザイナーDmitriy Buninが、より良いアイコンをデザインするときに心がけている8個のポイントをまとめてご紹介します。

 

WebサイトのUIインターフェースにおいてアイコンは重要なデザイン要素のひとつです。

 

アイコンは、コマンドやコンテンツを視覚的にあらわし、背後にある意味合いを伝える言語と言えます。ユーザーがすぐに理解、認識できるようにシンプルで効果的なビジュアル、メタファーを表現する必要があります。

 

 

現役デザイナー直伝、アイコンデザインがもっと良くなる8個のヒント

 

ヒント1 – グリッドを設定しよう

アイコンはひとつだけ作るのではなく、ほとんどの場合はセットでデザインすることになります。アイコンセットの統一感を持たせるにはグリッドが必要となります。

 

以下サンプル例のようにセーフゾーンを決め、キーラインを設定しましょう。アイコンのまわりには、少しの余白スペース(Bounding Box)をとっておくと良いですよ。

 

1_zB5UUyDAM95hvHvivv0QAg

 

 

ヒント2 – 統一感をもたせよう

アイコンセットをデザインするときは、同じ線幅、角の丸み(Radius)や塗りつぶしのスタイルを活用します。こうすることで、アイコンの統一感が演出され、ユーザーがより認識しやすくなります。

 

以下のサンプル例では、線の太さ: 2px、角の丸み: 3pxで統一されています。

 

1_P1KT5_WiHD5wN6WCxx75AQ

 

 

ヒント3 – はっきりわかりやすくしよう

アイコンのデザインでは「Less is More(少ないほど効果的)」を意識してみましょう。わかりやすい「たとえ」や「比喩」を用い、同じボリュームで細部をデザインすることで、アイコンが認識しやすく、ユーザーが理解に苦しむこともありません。

 

1_RV_020Bho3JGZcwbyei8KA

 

 

ヒント4 – 同じ間隔で配置しよう

アイコンセットがまとまって見えるように、アイコンの要素の間隔スペースを一緒にするようにしましょう。たったこれだけで統一感がぐっと上がります。

 

FigmaやSketch,Adobe XDなどのプロトタイプツールでは、Alt/Optionキーを押しながらベクター線のスペースを調整できます。

 

1_BJHppqPGk9VYPrm_sE3Gbw

 

 

ヒント5 – 目視で補正しよう

目でアイコンの配置を確認するオプティカルセンターに基づいて、視覚的な重みのバランスをとるようにしましょう。以下サンプル例では、やや左によってしまったアイコンを微調整しています。

 

1__wEw2ojyl3WpX1G82HGP3w

 

 

ヒント6 – スペースを埋めよう

鉛筆など細長いアイコンは回転させ、コンテナ全体のスペースをできるだけ広く活用し、ユーザーが認識しやすくしてみましょう。

 

1_-HsZQUOjcMSJi94N1azLRA

 

 

ヒント7 – スタイルを組み合わせよう

インターフェースの状態を表現し、ユーザーがただしアイコンやボタンを見つけやすくするために、アイコンの塗りつぶしスタイルとアウトラインスタイルを組み合わせて利用しましょう。

 

1_-1tUyn1Lv4LV3xSAtyBhGA

 

ヒント8 – お役立ちアイコンツールを活用しよう

手軽にアイコンを作成、カスタマイズできるオンラインツールも活用してみると良いでしょう。無料でダウンロード、利用できるだけでなく、配色やサイズの変更などの他に、アイコンデザインの参考にも便利ですよ。

 

Google Fonts | Material Icons

Google Fontsでもアイコンが利用できるようになりました、2000種類を超えるアイコンが用意されており、5つの異なるスタイルから選択でき、ウェブフォントとしてAPI経由で理由できます。

 

 

SVGBOX

操作はいたってシンプルで、お好みのアイコンを見つけて、出力されたコードをコピペするだけ。SVGアイコンを手軽にウェブプロジェクトに追加できるAPIサービス。

 

 

Motion

アニメーション付きSVGアイコンをカスタマイズ、無料ダウンロードできるエディター。MacとWindowsどちらでも利用可能。

motion

 

 

Experience Japan Pictogram

日本観光の本質的な特長を分かりやすく表現した、シンプルで美しい、親しみやすい造形を大切にした、日本生まれの日本ピクトグラム280個セット。

03_Experience Japane Pictograms

日本観光をテーマにした、シンプルで分かりやすいピクトグラム280個を揃えたExperience Japan Pictogramの無料公開がスタートしています。

 

 

Sensa

300種類を超える絵文字アイコンを、PNGやSVG、Figma、Sketchファイルで無料ダウンロード。あらゆるサイズに対応できるベクターファイルでの提供。

 

 

IconDuck

商用利用にも対応した、オープンソースの10万個を超えるアイコンとイラストを公開しているサイト。セットごとに整理されているので、お気に入りのスタイルを見つけてみてはいかがでしょう。

 

 

SVG Repo

30万個を超えるベクターアイコンを無料ダウンロード、商用利用できるサイト。SVGOをつかってすっきり最適化されたSVGファイルという点もポイント。

 

 

Glyphs

5,000種類を超える編集可能なベクターアイコンを揃えたFigma用デザインシステム。シンプルな図形シェイプで描かれたアイコンは、FigmaのComponent機能を利用して、手軽にカスタマイズできます。

 

 

Icônes

オープンソースのアイコンをコレクションしており、まとめて検索や、オリジナルのアイコンパックを作成、ダウンロードできるサイト。現在、90以上のプロジェクトに対応中。

 

 

Flagpack

260を超える世界中の国旗を集めたライブラリ。デザイナー向けにはSketchとFigmaファイル、デベロッパー向けにはReactとVue、Angular用ファイルがずらり揃います。

 

 

Tabler Icons

558個のカスタマイズ可能なSVGアイコンが揃った、MITライセンスで完全無料のライブラリ。シンプルで使い勝手の良いアイコンデザインも素敵。

tabler_icons_-_550__highly_customizable_free_svg_icons

お好みのグラデーションカラーを選択でき、合計476個という大量のSVGアイコンを無料ダンロードできるGradientify Iconsが公開されていたので、今回はご

 

 

ウェブサイトのUIデザインに便利な、無料の人気SVGアイコンライブラリはこちらからどうぞ。

 

MITライセンスで、商用利用も可能なオープンソースの素材が中心で、クライアント案件でも安心して利用できます

 

この記事では、ウェブサイトのUIデザインに便利な、無料の人気SVGアイコンライブラリをまとめて紹介しています。 豊富な収録数に加え、サイズや配色などの

 

参照元リンク : How to Design Better Icons – Buninux.com