AppBankさんのアプリ『AppBank』の”オレ流”アイコンを創ってみた。 ～ オレコレ番外編 ～

　
『AppBank』

バージョン：1.2.3
価格：無料
(バージョンと価格は記事掲載時のものです)

　
　
　

実は、このエントリーを書くことに決める前に別の内容を考えていたのですが、とある事情により急遽変更して”オレコレ番外編”として、
　
iPhoneアプリ『AppBank』のオレ流アイコン
　
を勝手に!?記事にさせて頂こうと思います。

今回のオレコレ番外編は、レビューではありません。
　

アイコンについてのちょっとした説明も合わせて書いているので、長文になります。
とりあえずアイコンだけ見てみたいって方は、文章は読み飛ばしてくださいませ。
(※注意：このエントリーはAppBankさんから直接依頼を受けたものではありませんので、現時点でアイコンが変更されるかは不明です。飽くまで勝手に考えたアイコンです。)
　
　
今回、この企画をするのにはちょっとしたきっかけもあったりします(^〜^;)
なので、まずはその辺りのお話から。

　
ちょっとしたきっかけ…。
それは、またしてもtwitterから。

以前から、AppBankさんのサイトやアプリを通じて、ナイスなアプリやiPhone関連の情報(まったく関係のない情報も)を入手させてもらっていました。
　
　
そんな中で、AppStoreでのレビューに
『アイコンがよくない』
みたいに書かれていて、AppBankさんが
『気に入らないって人は、自作アイコンを送ってきてもらえれば…』
みたいな事をおっしゃっていたのをPodcastで聞いたこともありました。
　
　
ただ、僕自身仕事でデザインをかじっていたこともありますが、別に『どぉしてもアイコンが嫌っ!!』って程でもなかったので、たいして気にも止めていませんでした。

実際、手書きリンゴアイコン ＝ AppBank ってイメージも定着している気がしますし。
　
　
ウチには、メイッコ(2才 & 7ヶ月)がよく遊びにくるんですが、僕がいる時は上のおねぇちゃんの方が iPhoneを勝手に使い始めて、最近では
『リンゴ見たいっ！』
って言いながら、ワケも分からずAppBankを起動したりしています(^〜^;)
　
　
で、そのことをついったーで
『アップバンクアイコンって、今のままでも良いんぢゃないでしょーか⁇メイッコもこう言ってますし』
みたいな感じでつぶやいたら、

@motomakaさん(※1)が

@jacminik氏がリンゴアイコンを描いてくれるならぜひ見てみたい！と思ったけど、あまりに迷惑千万だよなぁと思ったので前言撤回なう(^_^;)

って、つぶやき返ししてくれたので、

『んぢゃ、ちょこっとやってみんかい。』
　
　
…ってな感じで、 ノリだけでm(_ _;)mやってみることにした次第です。

※1:ご存知！Apple系(!?)人気ブログもとまかのiPhone・iPod touch戯れ日記のもとまかさん。AppBankアプリのディベロッパー。
実は、前のエントリー(僕が iPhoneアプリ開発をはじめた理由。)で少しふれた、”僕がiPhoneで描いたイラスト”をそのブログで以前に紹介して頂いたこともありました。

　
　
一応、その時の恩(大げさですが)と”AppBank夕刊“に当ブログの前回のエントリーを紹介して頂いた@appbankさんへのお礼も兼ねて、自分なりにデザインしてみました。

って、ここまで書いたところでやっと本題です(^^;;)

一応、このサイトはアプリ開発ブログでもあるので、iPhoneアプリのアイコンについてもちょっと説明しますね。

実際にiPhone上に表示されるアイコンは、57×57pixcelでPNGフォーマット、 基本的には”Icon.png”って名前でXcodeにコピーします。
その他にAppStoreでの紹介用に、 100×100pixcelのアイコン画像が必要になります。
(2010.03.08 追記：ごめんなさい。間違いです512×512pixcelが必要)
ちなみに、100pixcelの場合の角丸半径は18pixcelです。(自前で角丸にしなくてもOKですが、参考までに。)
(2010.03.08 追記：512×512pixcelの場合の角丸半径はおよそ92pixel位。)
(2010.03.08 追記：始めに512pixcelサイズのアイコンを300dpiで作ってから、57pixelサイズ72dpiにするのが良さそうです)
　
僕の場合は、以上の２つのアイコン画像を作るために、はじめに512×512pixcelの画像をつくって縮小しています。
　
　
そうして、今回創ったアイコン画像(57pixcel)がコチラ！

>>>
>>>
>>>
…ど、どぉでしょうか???
　
　
現ユーザーに違和感の無いように手書きの感じを残しつつ、iPhoneアプリの情報サイトという点と、ユニセックスな感じを意識しました。
って言っても、ちっさい画像だし(大きい画像のアップは自主規制)、このサイトの背景が白なので、イメージが湧きにくいって方も多いと思いますので、キャプチャー画像を。

ちなみにDockに登録すると…

こんな感じになります。
　
気付いた方もいらっしゃると思いますが、デフォルトで設定されているアイコングロス(テカリ)は設定を外してあります。
グロスを掛けないようにするには、Xcodeの”info.plist”にKeyを追加(+ボタンをクリック)して、”Icon already includes gloss and bevel effects”を選んで、Value欄のチェックボックスにチェックを入れるだけでOKです。
もとに戻すには、チェックを外すか追加したKeyを削除します。
　
　
みなさんがどう感じるかは分かりませんが、我ながらよく出来たんぢゃないかなぁと(自画自賛!!)。
でもまぁ、こーいったデザインってのは好き好きですし、
　
『今のままがゼッタイ良い!!』
って方もいらっしゃると思います。

念のため繰り返しますが、上のアイコンは当ブログの勝手アイコンです。実際のアプリとは恐らく関係ありません。おそらく…
　
　
では最後に、開発者らしく僕がアイコン制作で気をつけている点をいくつか。

・なるべく分かりやすくシンプルに。

・だからといってアプリの説明になるような文字やアプリ名を入れない。

・使う色は出来るだけ少なくする。

・品良く目立つように。

・納得いくまでつくり直す。

・使用するサイズに縮小した後でアンシャープマスクを軽く掛ける。

・iPhoneよりMacのディスプレイの方が鮮やかなので、ちょっとやりすぎかな？って思うくらいの彩度にするとiPhone上ではちょうど良い。

こんなところですかね？
ただ、最後の彩度の項目は、開発環境によって違ってくると思いますのでご注意を。
　
　
それでは、意味があるのか無いのかよく分からないようなエントリーでしたが(^^;;)、読んでくださりありがとうございました！