アプリのアイコン

Engineer Blogsのアイコンはこちらです。

このアイコン作成にかかった工数は約3人日です。
エンジニアである僕がどういう過程を経てこのアイコンを作ったかを書きます。

アイコンのパターン

世の中に存在するアイコンを調査したところ、大きくこの4つのパターンに分類できると感じました。

1. サービス名をそのままアイコンに入れているパターン
2. サービス名の頭文字を入れているパターン
3. サービスのロゴを入れいているパターン
4. サービスの内容を表しているパターン

1

サービス名が短い場合に適しています。
例

2

サービスの機能が複数ある場合や、サービスが持つコンテンツに統一感がない場合に適していると感じました。
例

3

知名度があるロゴが存在する場合や、知名度がある組織が持つサービスに効果的だと感じました。
例

4

サービスの機能がしぼられている場合に効果的です。
例

1-4のパターンのうち2か4が適していると思いましたが、各社のエンジニアブログがまとまっていることを表すアイコンを作成することができなさそうなので、2を選びました。

Keynoteでサンプルを作成

使い慣れているKeynoteを使ってサンプルを作成しました。
こんな感じです。

背景色を変えたり、イラストの色を変えたり、イラストの形を変えたり色んなパターンのサンプルを作成しました。
イラストはEngineer Blogsの頭文字のEとBを組み合わせています。

複雑なイラストを作成するのは難しいのでシンプルなイラストにしています。

XDを使ってアイコンを作成

作成したサンプルを元にXDを使ってアイコンを作成しました。SVGでダウンロードし利用しています。
またアプリ内で使う通知アイコンやスプラッシュ画面のアイコンなども同時に作成しました。

最後に

シンプルなアイコンだと作成することは難しくなかったです。
また、アートはセンスの比重が大きいですが、デザイン(設計)は論理的な思考の比重が大きいと改めて感じました。