こんにちは。
モバイルアプリチームの小関です。

弊社が運営する「求人飲食店ドットコム」が行ったサービスブランドリニューアルの一環として、同サービスのモバイルアプリ版のアイコンをリニューアルしました。
本記事では、新しいアイコンデザインの選定過程と、iOSとAndroidのアイコン仕様の一部に触れ、開発者の立場でどのように関わってアイコンが生まれ変わったのかを紹介します。

サービス名とロゴの変更

まず、弊社が設立20周年を迎えるにあたり、コーポレートブランドとサービスブランドをリニューアルすることとなりました。
それに伴い、弊社が運営するサービスの一つ「求人@飲食店.COM」は、「求人飲食店ドットコム」へと名称を変更しました。
このブランドリニューアルについての詳細はこちらのプレスリリースでご覧いただくとして、そのサービス名の変更とともに、ロゴも新たにデザインされました。

＜旧ロゴ＞

＜新ロゴ＞

アプリアイコンのリニューアル

求人飲食店ドットコムは、メインのWeb版に加えて、iOSとAndroidのモバイルアプリ版も提供しています。
私が所属するモバイルアプリチームは自分を含めて現在4人の構成で、その求人飲食店ドットコムのモバイルアプリをメインに開発しています。
このチームでは、開発・保守以外にも施策の発案なども行っており、ディレクターやデザイナーと積極的に連携して業務を行っています。

そして、このモバイルアプリのアイコンには、旧サービス名が使われていたため、アプリアイコンのリニューアルも進めることになりました。

まず、デザインを検討するにあたり、改めて世の中の様々なアプリアイコンを見比べるところから行いました。

求人飲食店ドットコムにジャンルとして近い飲食系サービスや求人サービスはもちろん、世間一般で多くインストールされているアプリのアイコンが、どういった構成なのかをディレクターやデザイナーと確認した結果、大枠として以下の3つの分類から検討することにしました。

① 旧アイコンと同様のテキストのみのパターン
② 新ロゴに使われているシンボルのみのパターン
③ 1と2を組み合わせた、テキスト＋シンボルのパターン

アイコン候補

他社アプリにおいて②のようなシンボルのみのパターンは、ブランドアイコンとしてそのシンボルの認知が十分にあるか、単体でもはっきりと意味が伝わる場合において、多く見受けられました。

また、求人系サービスではとくに、シンボルやサービスが持つキャラクターなどとサービス名などのテキストが混ざった③のパターンが多かったこともあり、方向性としてはサービス名は最低限入れた①か③のパターンで進めることになりました。

その後、iOS・Androidのそれぞれのアイコンデザインに関する仕様やガイドラインも考慮した上で、デザイナーがいくつかのバリエーションのデザインを作成して、最終的にはそこから最適なものを選ぶというが今回の全体の流れでした。

様々なバリエーションアイコン

（実際に作成した様々なバリエーション）

その流れでアプリアイコンを作成・選定するにあたって、公式のガイドラインや出力時の仕様などは開発側からデザイナーへと共有しつつ進めていたのですが、デザインを選定する上で、それらが制約になる部分が出てきました。

例えば、iOSでは1024px × 1024px の正方形のアイコン画像を用意する必要がありますが、ストアやホーム画面では自動的に丸角加工で切り取られるようになっています。
また、Androidにおいてもアイコン画像のガイドラインで外側に余白を作ることが推奨されています。
それらを考慮しつつ文字を詰め込もうとすると、字数によっては視認性が悪くなってしまう課題などが出てきます。

Google Play アイコンのデザイン仕様 | Android Developers

さらに、Androidには多くのデバイスモデルが存在するため、デバイスモデルごとで異なる様々なアイコンの形を表現可能にする仕組みとして、「アダプティブアイコン」と呼ばれるものがあります。
アダプティブアイコンは、フォアグラウンドとバックグラウンドの2つのレイヤを用意することで、視差効果や縁取りのマスクをOS側に任せることができ、アプリアイコンの縁取りの仕様が四角型であっても丸型であっても正しく表示することができます。