シンクロ・フード エンジニアブログ

飲食店ドットコムを運営する、株式会社シンクロ・フードの技術ブログです

ブランドリニューアルで行ったアプリアイコンの刷新

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

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

サービス名とロゴの変更

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

<旧ロゴ>
旧ロゴ

<新ロゴ>
新ロゴ

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

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

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

旧アイコン
旧アイコン

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

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

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

アイコン候補

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

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

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

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

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

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

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

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

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

※引用元: アダプティブ アイコン  |  Android デベロッパー  |  Android Developers

デバイスモデルによっては、非線対称の縁取りによってアンバランスなデザインになってしまうのですが、デザインの検討の中で「なるべくそれは避けたい」といった意見も挙がっていました。

(これだけのバリエーションがデバイスモデルによってある)

これらの仕様を考慮しつつ、既存ユーザーが混乱せず、どのようなデバイスモデルやOSであっても視認性が悪くならないようなデザインを採用するという方針で進め、最終的には新ロゴの白地をベースにはしながらもサービスカラーのアクセントが入った以下のシンプルなアイコンへと決まったのでした。

新アプリアイコン

最後に

このように、アプリアイコンを作成するにあたっては、開発者が意識的に情報を共有すべき部分もあり、アプリ開発の関係者同士の連携がより重要だと感じました。
今後の開発においても、ディレクターやデザイナーとの連携を取りながら、多くの人が使いやすいアプリを作っていきたいと思います。


最後に、エンジニア募集のお知らせです!
シンクロ・フードでは、まだまだ技術的な課題やチャレンジが残っています。 ぜひ、一緒に改善していきましょう!

また、飲食店ドットコム、求人飲食店ドットコムを始めとしたサービスの開発・改善も、どんどん進めております。
ご興味のある方は、以下の採用サイトからご連絡ください!

recruit.synchro-food.co.jp