みなさんはアプリアイコンを作る時どのような手順で進めていますか？
弊社では、プロデューサが作った企画書やイメージボードを元にテイストをすり合わせ、デザイナーが何案か作って確定させる、という行程です。
アプリアイコンはアプリの顔ですので、fixするまでに紆余曲折がありますです。
今回は、アプリアイコンのアイディアを形にし、デザインする行程をまとめてみました。

はじめに

今回のアイコンは、既存の「エキサイト英語翻訳」アプリのデザインを一新したアップデート用のものです。

コンセプトは「使えば使うほど味が出る」

アプリデザインは先に確定していました。


原文～翻訳～再翻訳～再翻訳～再翻訳と、スワイプすることで永遠に翻訳を続けていくことができます。

また、プロデューサーから具体的なアイコンの希望がありました。


なるほど。

アイコンを作る場合、App Storeでの見栄えや他アプリとの差別化も必要です。


ふむふむ。
カラフルなものに目がいきますが、ポップさよりは「安心感」や「信頼性」を感じられるようにしようと思いました。

上記の点を踏まえ、下記のことに気をつけながらデザインをはじめました。

・アプリの機能が直感的に伝わる
・UIデザインから大きく外れない
・「安心感」と「信頼性」を伝える
・プロデューサーの意見を踏襲

ここまで整理して、あとは具体的に制作に入ります。

イメージモック1

はじめに作ったものです。



01：濃いグレイにノイズを乗せた背景
02：地球儀のようなイメージの背景
03：いっそふきだしで
04：シンプルにアルファベット一文字（Georgia）
05：シンプルにアルファベット一文字（ヒラギノ）

シルバーの枠を作ることでどっしりとした重厚感を、背景のノイズテクスチャで質の高いイメージにしています。
01が無難なので、その他のものは少し振り幅をとって色々なものを作りました。
チームで話し合い、やはり01の方向性でもう少しパターンを作ることに。

イメージモック2

01をベースに差分でいろいろ作ってみました。



01：1の01と同じもの　ベース
02：少しめくり部分を調整したもの
03：アルファベットを赤に
04：左右に見切れている文字も赤に
05：いっそ枠とる　めくり部分もとる
06：少しだけめくる
07：わりとめくる
08：下枠だけつける

枠があると圧迫感があるのでとってみましたが、無いと寂しい。なんだか散漫な感じに見えます。
めくり部分は、無い方がすっきりします。
06のように少しだけめくっているものは、実機で見るとなんだかわかりませんでした。
めくるなら07くらいガツっとめくる。そうじゃないならトル！

イメージモック3

だいぶ絞れてきました。



01：Georgiaでめくる
02：Georgiaめくらない
03：Georgia少しめくる
04：01と同じで背景が赤、文字が黒
05：01と同じで左右の見切れ具合を調整
06：05の文字が赤いもの
07：ヒラギノにして背景が赤
08：06と同じで背景が赤

赤と黒にこだわるのは、エキサイトのロゴが赤と黒を使っているからです。

チームで話し合った結果、
・ヒラギノは見やすいが、少しシンプルすぎるのでフォントはGeorgiaで
・めくり部分は無い方がすっきり見える
・背景は黒の方が落ち着く
・見切れている文字がわかりにくいのでもう少し見えるようにずらす

というようなことになりました。
上記の部分を修正し、こんな感じになりました。


これでよさそう！
というわけで、このアイコンでほぼ確定していたのですが、submit直前で左右の見切れがやはり見にくいという話に。
3枚の紙を配置するのではなく、2枚の紙を置いてそれぞれに日本語と英語を乗せてみることになりました。

イメージモック4

断然わかりやすい！これだー！
日本語と英語の文字がどちらもはっきり読めるので、翻訳のアプリであることも伝わりやすくなった気がします。
文字の色や見切れ具合などを考慮し、07のアイコンに決まりました！

最後に

デザインの作業自体はデザイナーが想像を膨らませながら制作しますが、希望や意見は複数人で言い合い作っていく必要がありますよね。
沢山の人に使ってもらいたいアプリならば、さまざまな意見があったほうがいいですからね！
デザイナーだけだと視野狭窄なものになってしまうこともあるので、デザイナーは積極的にデザインを見せて、多くの意見をもらう方が良いものが出来上がると思います。
また、プロデューサーやエンジニアも忌憚ない意見をどんどんくれると嬉しいです！

最後にアイコン制作における個人的なポイントを書いて終わりたいと思います。

1.わかりやすさ
2.アプリとの統一感
3.ホーム画面に置きたくなる

この3点が基本かなと思います。
中でも、「自分がホーム画面に置いておきたいアイコンかどうか」は特に意識している部分です。
デザイナーによってさまざまな制作行程やこだわりがあると思いますが、何かの参考になれば幸いです。
以上、長々とありがとうございました。

コメントする