この記事では現役デザイナーDmitriy Buninが、より良いアイコンをデザインするときに心がけている8個のポイントをまとめてご紹介します。
WebサイトのUIインターフェースにおいてアイコンは重要なデザイン要素のひとつです。
アイコンは、コマンドやコンテンツを視覚的にあらわし、背後にある意味合いを伝える言語と言えます。ユーザーがすぐに理解、認識できるようにシンプルで効果的なビジュアル、メタファーを表現する必要があります。
現役デザイナー直伝、アイコンデザインがもっと良くなる８個のヒント
ヒント１ – グリッドを設定しよう
アイコンはひとつだけ作るのではなく、ほとんどの場合はセットでデザインすることになります。アイコンセットの統一感を持たせるにはグリッドが必要となります。
以下サンプル例のようにセーフゾーンを決め、キーラインを設定しましょう。アイコンのまわりには、少しの余白スペース（Bounding Box）をとっておくと良いですよ。
ヒント２ – 統一感をもたせよう
アイコンセットをデザインするときは、同じ線幅、角の丸み（Radius）や塗りつぶしのスタイルを活用します。こうすることで、アイコンの統一感が演出され、ユーザーがより認識しやすくなります。
以下のサンプル例では、線の太さ: 2px、角の丸み: 3pxで統一されています。
ヒント３ – はっきりわかりやすくしよう
アイコンのデザインでは「Less is More（少ないほど効果的）」を意識してみましょう。わかりやすい「たとえ」や「比喩」を用い、同じボリュームで細部をデザインすることで、アイコンが認識しやすく、ユーザーが理解に苦しむこともありません。
ヒント４ – 同じ間隔で配置しよう
アイコンセットがまとまって見えるように、アイコンの要素の間隔スペースを一緒にするようにしましょう。たったこれだけで統一感がぐっと上がります。
FigmaやSketch，Adobe XDなどのプロトタイプツールでは、Alt/Optionキーを押しながらベクター線のスペースを調整できます。
ヒント５ – 目視で補正しよう
目でアイコンの配置を確認するオプティカルセンターに基づいて、視覚的な重みのバランスをとるようにしましょう。以下サンプル例では、やや左によってしまったアイコンを微調整しています。
ヒント６ – スペースを埋めよう
鉛筆など細長いアイコンは回転させ、コンテナ全体のスペースをできるだけ広く活用し、ユーザーが認識しやすくしてみましょう。
ヒント７ – スタイルを組み合わせよう
インターフェースの状態を表現し、ユーザーがただしアイコンやボタンを見つけやすくするために、アイコンの塗りつぶしスタイルとアウトラインスタイルを組み合わせて利用しましょう。
ヒント８ – お役立ちアイコンツールを活用しよう
手軽にアイコンを作成、カスタマイズできるオンラインツールも活用してみると良いでしょう。無料でダウンロード、利用できるだけでなく、配色やサイズの変更などの他に、アイコンデザインの参考にも便利ですよ。
Google Fontsでもアイコンが利用できるようになりました、2000種類を超えるアイコンが用意されており、5つの異なるスタイルから選択でき、ウェブフォントとしてAPI経由で理由できます。
操作はいたってシンプルで、お好みのアイコンを見つけて、出力されたコードをコピペするだけ。SVGアイコンを手軽にウェブプロジェクトに追加できるAPIサービス。
アニメーション付きSVGアイコンをカスタマイズ、無料ダウンロードできるエディター。MacとWindowsどちらでも利用可能。
日本観光の本質的な特長を分かりやすく表現した、シンプルで美しい、親しみやすい造形を大切にした、日本生まれの日本ピクトグラム280個セット。
300種類を超える絵文字アイコンを、PNGやSVG、Figma、Sketchファイルで無料ダウンロード。あらゆるサイズに対応できるベクターファイルでの提供。
商用利用にも対応した、オープンソースの10万個を超えるアイコンとイラストを公開しているサイト。セットごとに整理されているので、お気に入りのスタイルを見つけてみてはいかがでしょう。
30万個を超えるベクターアイコンを無料ダウンロード、商用利用できるサイト。SVGOをつかってすっきり最適化されたSVGファイルという点もポイント。
5,000種類を超える編集可能なベクターアイコンを揃えたFigma用デザインシステム。シンプルな図形シェイプで描かれたアイコンは、FigmaのComponent機能を利用して、手軽にカスタマイズできます。
オープンソースのアイコンをコレクションしており、まとめて検索や、オリジナルのアイコンパックを作成、ダウンロードできるサイト。現在、90以上のプロジェクトに対応中。
260を超える世界中の国旗を集めたライブラリ。デザイナー向けにはSketchとFigmaファイル、デベロッパー向けにはReactとVue、Angular用ファイルがずらり揃います。
558個のカスタマイズ可能なSVGアイコンが揃った、MITライセンスで完全無料のライブラリ。シンプルで使い勝手の良いアイコンデザインも素敵。
ウェブサイトのUIデザインに便利な、無料の人気SVGアイコンライブラリはこちらからどうぞ。
MITライセンスで、商用利用も可能なオープンソースの素材が中心で、クライアント案件でも安心して利用できます。
