Appアイコンのきれいな枠（角丸）の作り方（ぱずもぐ備忘録４回目）
これ書き終えたらAWSの勉強を再開します
どうも。ガンズターンのRyosukeです。
この記事はこれまでに引き続き、ぱずもぐ作成時に詰まったところを具体的に振り返ってみたいと思います。
今回は、Appアイコンの作り方について。
画像を作るのに参考になるサイトや、自分なりに発見したアイコン作りのコツなどを書いていくつもりです。
とくにiOS7以降でちょうどいい角丸の枠を作るのに苦労したので、その部分のノウハウを共有しようかなと。
世界中でどなたか一人にでも、お役に立てていただければ幸いです。
そいでもって、このブログ記事を書き終えたらAWSの機能をもっと深く知るために勉強を再開します。
とりあえず昨日本屋さんで買って来た本はこちら（←ISBNのGoogle検索結果です）。
内容的には初級的なもののようですが、今存在する機能を網羅的に紹介しているので、まだ使ったことのない機能についてもこれ読んで勉強してみようと思います。
ひとまずの目標は、「自力で自動スケーリングする本番環境を構築する」です。
なんだか難しそうだな、というのが今のところの感想ですが、AWSの場合はネット上に参考になるソースがたくさん転がっているので、がんばればなんとかなるだろうと楽観的に構えてます。
この勉強の結果が何かご報告できる形になったら、またブログの記事にしますね。
もくじ
1. iOS用のアイコンサイズは多岐にわたるという話
Appleのガイドラインにもある通り、なんとiOS端末っていうのは、その種類によって使用されるアイコンが異なるのです。
どんなアプリであっても、基本的には以下のサイズは今後必要になるということです。
- 180x180pixel （iPhone6plus用）
- 120x120pixel （iPhone6、5、5S、4、4S用）
- 152×152pixel （iPad、iPad mini用）
- 76×76pixel （iPad2とiPad mini用）
- 1024x1024pixel （Appストア登録用）
さて。
普通の思考回路をもっていればこの時点で「げえ、めんどくさ」となると思います。
正直、自分もそんな感じでした。
けれど、ネットを探せば色々と情報が出てきます。
その中で、とくに自分が利用してみて「こりゃ便利！」となったサービスについて、次項から紹介していきますね。
2. なにはなくとも MakeAppicon
前の項で、iOSアプリにはたくさんのサイズのアイコン画像が必要だとお伝えしました。
けれど実際のところ、1024×1024画像を１枚作れば問題ありません。
あとは画像編集ソフトのリサイズ機能で他のサイズを全て作成可能です。
しかし、実際にやってみるとわかるのですが、この作業がめちゃくちゃめんどくさい。
元画像開いて、リサイズ指定して、pngファイルにエクスポートして、また元画像開いて……
やってるうちに、今自分がどのアイコンまで作成したかよくわからなくなったり、勘違いして別のサイズのファイルに上書き保存してしまったり……
気がつくと、リサイズしてるだけで３０分経過してた、なんてことはザラです。
（……わたしの作業スピードが遅すぎるだけ、というご指摘はごもっともですが。）
しかしそんなわたしの前にもついに救世主が現れました。
その名もずばり、「MakeAppicon」！！
- MakeAppiconのWebページはこちら↓
http://makeappicon.com/#
すでにいろんなところで紹介されているwebサービスですね。
けっこう昔から有名だったみたいですが、恥ずかしながらわたしは今回初めて利用してみました。
結果、驚くほど作業スピードが向上してニンマリ。
なんと、ブラウザの画面に直接画像ファイルをドラッグアンドドロップするだけで、自動的にリサイズして全サイズのアイコンを作成してくれるのです。
（できあがった画像ファイルの受け取りにメールアドレスが必要ですが、セキュリティとか気になる人は専用のアドレスを取得して利用してもOKだと思います）
しかも、トースターを模したUIが楽しくて、意味もなくアイコン以外の画像もリサイズしたくなります。（実際にやると運営側に迷惑になりそうなのでやってませんが笑）
案の定、実際に端末上で見栄えを確認したらしっくりこなくて、何度もアイコン画像を作り直すハメになったので、こちらのサイトの存在を知らなかったら、申請がさらに１日延びていたかもしれません。
それぐらい、開発者の強力な味方になってくれるツールです。
3. テキストロゴの作成には Cool Text
実は、文字を使用したロゴって、作るの意外とめんどうなんです。
フォントって権利関係が曖昧なものが多く、勝手に商用利用すると怒られるという話もあるようですから。
「あ、これかっこいいな」て思って安易にロゴに使うと実は商用利用禁止だったなんて話もネット上にはゴロゴロしています。
かといって、一から自分で文字画像を作成するとなると、途方もないデザインセンスが必要になります。
絵であればエフェクトとかでなんとかごまかせる部分もありますが、文字の場合は輪郭のみで勝負することになりますから。
慣れていない人がいきなり文字画像を自力で作っても、「とりあえず読めはするけど、違和感が残る」ものしか作れないと思います。
というか、自分の場合がそうでした。
なんとか文字の画像をかっこよく、手軽に、かつ商用利用可能な状態で手に入れられないかなあ……でもまさか、そんな贅沢なサービスがあるわけないかぁ……
と思いつつもダメ元でネットの海を漁ってみたら、ありました。
- Cool TextのWebページはこちら↓
http://ja.cooltext.com
……これ、本当はあんまり紹介したくないんです。
なぜなら、便利すぎるがゆえに、みんなが使い始めたら似たようなロゴが増えちゃって、すぐに「あ、この人のこのロゴはCool Textのあのフォーマットで作ってある」てバレちゃうからです。
でも、自分が紹介するしないに関わらず、すでに世の中に広く浸透しているみたいなので。
逆にもし知らない人がいたらもったいないと思って記事にしました。
ここでとりあえず下書きの下書きを作って、それをもとに独自のロゴを作るとかのやり方も考えられるので、触ったことない人は一度いじってみることをオススメしますですよ。
4. Appアイコンに枠を付ける時、角丸のアールは46%にする
はい。
ようはこれが言いたいがために、この記事を書き始めたようなもんです。
ここでいう46%という数字は、自分がGIMPを使ってアイコン画像を作成していた時に発見した数字です。
以下にお好みの太さの枠を作る方法についてGIMPの手順をまとめたので記しますね。
- GIMPを開いて、1024×1024の画像を新規作成する。
- 枠用のレイヤーグループを作り、その中に1024×1024の透明のレイヤーを１つ作る。
- 「矩形選択ツール」を選択して、作成したレイヤーを全選択（Ctrl+A（Macの場合はCmd+A））。
- メニューの「選択」から「角を丸める」を選ぶ。
- 「半径(%)」の欄に「46」を手入力。
- そのまま「OK」を押す。
→この時選択される領域が、アプリアイコンが画面に表示される時の最外枠だと考えてください。 - 何か好きな色（単色）で選択範囲を塗りつぶす。
- メニューの「選択」から「選択範囲の縮小」を選択する。
- 好きなサイズを入力して「OK」を押す。
→この時入力したサイズが、枠の太さになるとお考えください。 - 選択領域を、切り取る（Ctrl+X（Macの場合はCmd+X））。
- この操作ののち、残った色の塗られた領域が、Appアイコンの枠になります。
うまくいけばこんな感じになります
一応、この方式で準備に必要なすべてのサイズで違和感なく「枠」が実装できると思います。
最近のアプリはアイコンに「枠」を作らないものも多く、絶対に必要な知識というわけではありませんが、いざ「枠」を綺麗につくろうと思ったらなかなか有用な情報が載っているサイトに巡り会えなかったので、こうして自分で記事にしました。
具体的なアールのサイズ（1024の時は○○ピクセル）とかは書いてあるところが多かったですが、GIMPの場合はなぜか角丸のアールがパーセント指定しかできないんですよね。
（ツールのオプションでピクセル指定できますが、なぜか100までしか入力できないorz）
……てなわけで、自分が何度も枠を作って実際に端末で見てみて発見したこの数字、機会があったら利用してみていただけると嬉しいです！
いよいよ備忘録も（たぶん）次回で最終回！
次は、Appストアにアップロードするための動画を作成する具体的な手順についてまとめます。
一応今から予告しておくと、Windowsのフリーソフトを使いますので、WindowsのPCか、BootCampされたMacが必要になります。
たぶん更新は明日の朝かな……
んではまた！
ガンズターンのRyosukeでした！ m(_ _)m
コメント
頑張ってますね。いよいよアップですか？楽しみにしてます。(⌒0⌒)／~~いろいろ勉強になります。
＞たっこさん へ
再度のコメントありがとうございます。励みになります。
申請は出しましたが、まだAppleの審査が始まっていないので、たぶん最速でリリースできるとして再来週になるかと思います。
（……何事もなく順調に進んで、の話ですが。笑）
リリースできたらいち早くご報告いたしますので、今しばらくお待ち下さい。
m(_ _)m