【実録】アプリアイコンの作り方 〜２％のデザイン〜

気温がコロコロ変わり上着を来たり脱いだり忙しい今日この頃、
みなさんいかがお過ごしでしょうか？
相変わらずご無沙汰しております(^〜^;)
Jacminikです。
またまた、僕がデザインさせて頂いたアイコンがAppStoreに並びました！
パチパチパチ〜♫
…ってなワケで、
今回はとあるiPadアプリのリニューアルアイコン制作の過程を紹介させて頂きながら、アプリのアイコンがユーザーの目に留まるようになるまでに
開発者やデザイナーがどのように考え、
どのようにこだわって作っているのか？
を少しでもお伝えできればと思っています。
今回ご紹介する行程は飽くまでも一例ですし、
すべてのアイコンがこのように作られている訳ではないと思いますが
ひとつの参考として読んで頂けたらうれしいです。
(最後にデザイン案件の受付についても宣伝させて頂きますので、開発者の方々も是非ご参考にしてみてくださいね。)

ちなみにタイトルの『２％』と言うのは
今回、ひとつのアイコンを完成させるために作ったファイルの数から計算した数字です。
そんな実際に作った４２ファイルを一挙大公開しまっす！

では早速参りましょうか。

1. Photoshopを起動する前に

まずはじめに、どんなアプリのアイコンをデザインしたのかを説明しますね。
その名も『Duet Browser』。
名前の通り２つの画面を同時に表示することが出来るブラウザで、youtube観ながらツイートしたり、調べものをしながらブログを書いたり出来ちゃうiPad用アプリです。
ちなみにAppBankさんでも紹介されてたりしますのでご存知の方も多いかも。
[iPad] Duet: タブブラウザ×2、というレイアウト。シンプルなところもGood
(注意!!：一年くらい前の記事なのでちょっと古いです。アプリ名も今とは違うみたい。)
もうひとつ、今回のリニューアルの最新のレビュー記事を。
iPadでEvernoteが更に便利になる Duet Browser [超おむすび]1
そして今回ご依頼くださったクライアント様は@setoh2000さん！
あの『MY辞書登録』や『Touch Icon Creator』
なども作られている個人デベロッパーさまです。
(僕とはもともとフォロワー同士でもあったりします^^;)

さらに補足させて頂くと、
今回のアップデートではEvernoteにも対応しているとの事。やっぱり僕もエバノばりばり使っているのでこの対応はウレシイですねっ☆
フリー版もあるので気になる方は是非！

今回はtwitterでMention頂いてやらせて頂く事になったのですが、
まずは僕の方からたたき台を作らせてもらうことにしました。
(リリース前のアプリであればデザインに入る前にアレコレと質問するところですが、今回は知っているアプリという事もあり、その方が話が早いかと。)
では早速デザインを！
…と言いたいところですが、iPad上で動くブラウザといえば競合も多いですよね。
なので、ざっとその傾向を把握しつつ、どうすればそこに入った時に目を惹けるデザインになるのかを考えてみます。これがiTunes上で『browser』を検索した結果(一部)です。
(もちろんDuet Browserも入ってますね)
現状のアイコンでは頭文字の『D』が入っていますが、”Duet”に近い意味を持つ”Dual Browser”というアプリも”d”を使っている事から、この時点で『D』という文字を引き継ぐ事は(勝手に)却下しましたっ(^ ^;
ですが僕の場合、ここでこの競合アプリのアイコンを穴が開くほど見続けたりはしません。。
参考程度に眺めてどうするかを考えていきます。

一般的にブラウザに求められるものと言えば…
『早さ』
『スムーズな操作性』
このあたりは第一に上げられるのではないかなぁと。
なので、なんとなくそのようなイメージが伝わり、かつ現ユーザーにも配慮したデザインをと考えてみました。

２. デザイン案を作るためのデザイン。

で、まず上げたのがデザインのためのデザイン(たたき台)です。
デザインする側としては、クライアントがどんなデザインを望んでいるのかが分からない事には、どんなに手の込んだものを作ってもムダに終わってしまいます。
なので、そこを探りやすくするために一度目に見える形にしたものを渡して
まずフィードバックをもらってから始めましょうって言う訳です。
とりあえず、こんなヤツを作りました。ここで意識したのは
立体感、構図、配色、質感などです。
これを見た時にクライアントがどう感じるかによって少しずつ感覚をつかんでいく感じです。

そうして頂いた始めのフィードバックはこんな内容でした。
・コンパスは不要。
・地球の色が変わるところは左右に２色で分けるのが良いかも知れない。
・分け目は段差でははなくて隙間を開ける感じ？
・分け目は直線でない方が良い。
・外側のフレーム？はないほうが好み。
・２色にはこだわらない。
その他に@setoh2000さんが良いと感じているアイコンやロゴなどを教えて頂きました。
このフィードバックのお陰で、デザインのひとつの大きな柱として
『立体的な球体と平面的な背景』
というのが見えてきました。

そしてここで、
『出来るだけいろんなパターンで作ってみてほしい』との提案が。
なので、こちらからは10パターンほどのラフを上げさせてもらう事にしました。
で、その中から気に入ったものが出てくればそれを仕上げて完成させる。
という流れですね。

ですが、
こういった進め方はデザイン会社に依頼した場合はよく取られる方法だと思いますが、あまりに手間がかかるためこういう方法は今までは取ってきませんでした。
でも今回は元々のフォロワー同士ということもあり、その上@setoh2000さんの強いこだわりを感じたので挑戦してみることにしました。

3. ラフデザインその１

そんな流れでさっそく翌日に上げた８パターンがこちら。ラフと言ってもあまりにラフすぎても伝わらないだろうと思ったので
ある程度は”ちゃんと”作ってます^^;
ですが、本当に細かいディテールや微妙な位置などの調整はしていません。
飽くまで修正することを前提に作っています。
球体の表現についてもパターン分けしていますが、
ここで特に決めたかったのは背景です。
ざらついた質感や宇宙のような感じや白、シルバー、カラーなど…。
背景のイメージが決まると自ずとアイコンの中心となる
球体のデザインも絞られていきますからね。

そしてこの時点で頂いたフィードバックには、
・０３がとても気に入った！
・色は赤より青系＋別の色。
・背景はシルバーっぽいものかシンプルなグラデーションが良い。
・球の色をシルバーっぽくするのも良いかも？

これでまたなんとなくイメージが見えてきました。
色んなヒントをもらいながらゲームをクリアしていくのに近い感覚かも知れませんね。

4. さらにラフデザインその２とブラッシュアップバージョン

そしてフィードバック頂いた翌日にさらに3パターンと前回気に入って頂けたデザインのブラッシュアップパターンを。先程までのものに比べて背景がシンプルになっているのが分かると思います。
赤も使わないようにしています。
それと同時に上げたラフ03のブラッシュアップ、いい感じですね〜♫
うん！かっくE〜!! (自画自賛)
※後ほどボツになります(> o <;)

こうして見ると、前回の８パターンに比べて新しいパターンとブラッシュアップパターンも共に近い雰囲気に絞られてきたんではないでしょうか？
確かに同じ条件(球体と背景と分け目)で10パターンほど用意するのは
正直しんどい作業ではありますが、１、２種類作っただけでは出てこない発想なんかもあるんですよね。
まさにそれを『絞り出すっ！』って感じですかね(^〜^)

5. 新たな展開とアイコンデザインで考慮すべき事。

以下、実際に頂いたメールの抜粋です。

@setoh2000 wrote:
09番と10番で迷っています。
(03番も良いのですがそれ以上にこの２つが気にいりました）
09番
地球を包む白い殻が美しい。背景も良いです。
ただDuet Browserを連想させるところが弱いため、03番と同じ曲線で白い殻を分割。
03番と完全に同じならば中の地球が殆ど見えないので少し隙間をひろげた方が良い。
広げるにしても限度があるかなとも思うのですが、ぜひ一度見てみたいと思います。
次に10番ですが、
ホーム画面に置いて確認したときにこれが一番しっくりしました。
美しさのバランスが良いのかも知れません。
以下に箇条書きで要望を書きます。
・背景を09番と同じにする。
・背景との境目あり・なしの両方を見たい
・輪っかを03番と同じような角度・濃さにする
(輪っかの無いバージョンも見たい)
・海の塗りを青一色や他の色との組み合わせを見たい
・海の２色の塗り分けを現状の他に例えば03番のような
　曲線で塗り分ける
・海と陸地の段差の高さを８割か６割くらいに抑えたものを見たい。

以上、10番の方が本命かなとは思っているのですが、
09番も捨てがたいと思っています。

おっと！って感じの新展開ですね(^ ^;)

どうでしょう？
このメールの一文を見るだけでも相当なこだわりを感じるのではないでしょうか。
アプリの開発者の方々は本当にこだわりを感じる方が多いですが、
改めて実感しますね。
そうくればこちらはさっさと頭を切り替えて
09と10のブラッシュアップに入ります！

フィードバックメールをもらったのが深夜２時頃だったので
日付の変わらない夕方までにリデザインしまたメールしました。(計13点!!)
前回のフィードバックで@setoh2000さんは10が本命と言っていましたが、実は僕自身は09の方がいいかな？と思っていました。
理由は単純で『10は普通すぎる』から。
自分で作っておいてなんですが…(> , <;)
確かに見た目はキレイで印象もいいと思うんですが
AppStoreに並んだ時には弱いかな？と。
分かりやすすぎて引っかかりがないと言うか…。

個人的にはアプリアイコンは広告だと思っているので、
見た時に『ん？コレ何だろ？？』ってクリックしてもらえる要素も
大事なポイントだと思うんですよね。

よく『一目で機能が分かるアイコンを…』というのを見かけたりしますが、
僕としては、分かり安すぎるものは
販促としてはマイナスになりかねないのでは？と。
(もちろんターゲットにもよりますが。)
もちろん、アプリ内のツールアイコンなんかは分かりやすいに越したことはないんですが、
アプリを売るための広告と考えるとまた違ったデザインになりますよね。

…っと、ごめんなさい<(_ _;)>
余談でした。

6. ベースデザインの決定とツールについて

ただ、09で考えた場合あまりにもブラウザ感がないなぁと。
なのでその辺りが心配だったので、前もってそれを補うイメージを追加した方が良いのかを確認してみました。
(例えば背景に方位磁針風のイメージを加えるなど)

で、今回のフィードバックはこんな感じでした。

・かなり悩んだが09Aをベースに行きたいとのこと。
・少しアレンジしたパターンも見たい。
・背景の艶(テカリ)をもう少し強調したもの
　(実際のアイコンサイズにするとわかりにくいため)
そして、心配だったブラウザ感の無さについては特に問題なかったようで
極力シンプルに行きたいとのことでした。
結果的には10ではなく09案が通ったのでほっとしました^^;

それとここでちょっとした質問をもらったのですが、
僕はアプリアイコンやアプリのデザインをする時に
基本的にはPhotoshopしか使っていません。
(あまりに細かいパスを描いたりロゴを作る時にIllustratorを使うくらい)
なので3Dモデリングとかよく分かりません(> , <;)
でもまぁ、静物デッサンとかやったことがあってPhotoshopの使い方が分かれば、これくらいのリアル感は出せちゃうものなのです。
(ちなみにバージョンはCSです。。古っ！)

で、こんな感じになりました。

7. 最終調整

更なるフィードバックの結果こんな感じに。
もう、ここまで来ると
『どこが違うの？？？』って感じかもですね(^〜^;)
一応説明すると、
上段の５つで青い地球が見えているスキマの太さを決めて、
下段の５つで背景のテカリの強さを微妙に変えています。

まさにこだわりの世界っ！
一度アイコンを決めてしまったら
『飽きたから変えるよ』とは行かないものだと思うので、慎重になる気持ちは充分分かります。
ただ、@setoh2000さんがおっしゃっていた
『全米でヒットさせたい！』という想いに少しでも答えられればなぁと。

8. ディテールの追い込みと完成！

またまたさらに球体のサイズを調整したり、ちょっとだけ立体感を追加したり
背景を微調整したりして…

そしてついに出来上がったのは…
　
こちらっ！
　
！☆！
どうでしょうか？

シンプルでありつつ存在感があり、ちょっとした高級感も感じさせられるようなアイコンになったのではないでしょうか？

こうしてデザインを作り上げていく行程を見て頂くと分かるように
アイコンはデザイナーが作っているようでありながら、その方向性は確実に開発者さまが握っています。
僕なんかは依頼主のイメージを探って目に見えるカタチにしているだけとも言えます。

ですが、たった72ピクセル四方(iPadでのサイズ)のアイコンでも
これだけの手間とこだわりが込められているものなのです。
そう考えるとアプリの開発はそれとは比べられないほどの
情熱とこだわり、想いが込められているんだと思います。

そんな風に思いながらアプリを使ってみると
昨日までとは違う何かを感じることが出来るかもしれませんね。

それではお後がよろしいようで。
今日も素敵なiPhone, iPadライフを！

P.S.
【デザインに迷っているデベッロパーさまへ】
新たに立ち上げたサイト『EdenVision.com』でデザイン受注の詳細を公開していますので
デザインにお困りのデベロッパーの方々は是非チェックしてみてくださいね！
(簡単なアイコンギャラリーもあります。)
http://www.edensvision.com/design/
※まだこのサイトは未完成なのでご了承くださいませ<(_ _)>