スマートフォンアプリやホームページなど、デジタル世界におけるデザインで、どうしても無視できないものがあります。
それが、アイコンの使用です。

ホームページにおけるアイコンの使用は、Font AwesomeのようにHTMLに数行のコードを足すことで、即席で使えるアイコンツールも存在します。
ただ、このような既成のアイコンセットを指定してしまうと、オリジナリティが発揮できないため、なんとかして自分たちでアイコンを作成することができないかを考えているひともいるのではないでしょうか。

そこで登場したのが、アイコン配布ディレクトリサイトの老舗であるIconfinder(アイコンファインダー)がリリースしたIcon Editor(アイコンエディター)です。
名前こそ「ごく一般的」ではありますが、非常に画期的なツールです。

そこで今回は、新登場のIcon Editorで世界でひとつだけのアイコンをつくる手順をご紹介していきます。

オリジナルアイコンを作成するメリット

a.png
スクリーンショット：2017年9月

デザイナーがテキストではなくアイコンを作成するのは、ユーザーにとっての利便性はもちろん、何よりもアイコンを使うことによってスペースを節約できるからです。
とりわけ、スマートフォンのスクリーンのように端末の画面サイズが小さくなっており、デザイナーたちは必然的にアイコンを使用しています。

ただ、あまりに一般的なアイコンは記憶の彼方に忘れ去られてしまう可能性もあります。
例えば、Googleはたくさんのアイコンを多用してきた企業の一つですが、GメールやGoogle翻訳など、それぞれにオリジナリティ溢れるアイコンを使っています。
Googleにとってアイコンは直感的で分かりやすく意味を伝えるだけでなく、唯一無二のサービスであることを示す重要なシグニファイアであると言うことができます。

既存のアイコンセットからアイコンを借りて使用するだけでは、いくら立ち上げたアプリが素晴らしいものだとしても、最初にアイコンでメッセージを伝えなければ、最悪の場合ダウンロードすらしてもらえません。
一方、まずはアイコンでサービスの独自性をしっかりとブランディングすることができれば、最初の関門はクリアできた、とも言えるでしょう。

Icon Editorとは？

そんなアイコンを、簡単に無料で作成できるツールが登場しました。

Icon Editorは、アイコン配布ディレクトリサイトの老舗であるIconfinderがリリースしたアイコンの作成ツールです。
特定のソフトをダウンロードしたり、環境に依存したりすることなく、ブラウザ上で操作できるのが特徴です。
また、ゼロから作り上げるというだけでなく、Iconfinder上で配布されているアイコンを好きな具合に編集して新しいアイコンを作成することができるので、ゼロからアイコンのアイデアを考えなければならないという手間もありません。

Icon Editorの利用は無料です。
作成したアイコンは、16 x 16 px から 512 x 512 px までのPNG形式のファイルで保存できるほか、SVG形式でも保存することが可能です。

Icon Editorを使ってみよう

Icon Editorを使うことで、新規でアイコンを作ることができるほか、既存のアイコンの色を一部変えたり、変形させたりすることができます。

1.png
スクリーンショット：2017年9月

使い方はいたって簡単です。
まず、Iconfinderのホームページにアクセスし、編集したいアイコンのキーワードを入力します。
ここでは、「apple」と入力してリンゴのマークを編集することにしましょう。

2.png
スクリーンショット：2017年9月

検索後、このようにたくさんのアイコンがヒットしました。
左側のタブやバーなどをいじることで、絞り込み検索を行うこともできます。
気に入ったアイコンがあれば、クリックして詳細画面に行きます。

3.png
スクリーンショット：2017年9月

このような詳細画面の「Edit icon」をクリックして、Icon Editorを立ち上げます。

4.png
スクリーンショット：2017年9月

すると、Illustratorにも似たエディターが立ち上がるので、編集を行います。

5.gif
スクリーンショット：2017年9月

編集が完了したら、右上の「DOWNLOAD ICON」をクリックして、PNG形式かSVG形式で保存することができます。

6.png
スクリーンショット：2017年9月

なお、アイコンはIconfinderにある既存のアイコンだけでなく、パソコンに保管されているSVGファイルを読み込んで編集したり、白紙のキャンバスを使ってゼロからアイコンを作成することもできます。

実は簡易版Illustrator？

Iconfinderが用意してくれたIcon Editorは、もともとはアイコンを編集するためのツールです。
しかし、実際にはキャンバスサイズの制限などもなく、複雑なベクター画像を操作することも可能です。

7.png
スクリーンショット：2017年9月

その意味では、Icon Editorをオンライン版の簡易的なIllustratorとして使う方法もあります。
このように、Apple TVとリモコンスティックのような組み合わせも簡単に出来上がってしまいます。

ベクターデータで作ったアイコンは、ドット(ピクセル)で作ったアイコンのように、拡大して劣化するということがありません。
iPhone Xの登場などでこれからますます高解像度化していくディスプレイですが、SVGによるアイコンの作成ツールは非常に重要な役割を占めるでしょう。

まとめ

アイコンは、世代や言語の壁を超えて認知してもらうという意味では、言語以上に重要な役割を果たすことがあります。
Twitterの鳥のアイコンやAppleのリンゴのアイコンなど、一目見てそのブランドだと分かるようになれば、ブランディングに成功したと言えるでしょう。

IconfinderのIcon Editorを使うことで、これまでIllustratorなど高価なソフトを用意しなければアイコンを作れなかった環境が一変し、誰でも簡単にハイクオリティなアイコンを作ることができます。
ぜひIcon Editorを利用して、世界にひとつだけのアイコンを作ってみましょう。