Androidプログラミングに挑戦2!(19)単位変換アプリを作る−アプリのアイコンを作る

0
    JUGEMテーマ:プログラミング

    それでは今回はアプリのアイコンを作っていきましょう。
    といってもデザインの講義ができるわけではないので、お話は主にそのサイズ、寸法的な話になります。

    スマートフォンのホーム画面やドロワー内に表示される、タップするとそのアプリが立ち上がるあのアイコンを「プロダクトアイコン」とか「ランチャーアイコン」等と呼びます。ランチャー=起動する、という意味ですね。このアイコン、アプリの起動に必要なアイコンですから、今まで作っていたUnitConverterにも当然ありました。これです。

    このドロイド君は、Android Studioのデフォルトのランチャーアイコンなんですね。ですから何も設定しないとこのアイコンでアプリが作られるわけです。でもGooglePlayに打って出ようというわけです、いつまでもデフォルトのアイコンではいけません。新しくオリジナルのアイコンを作ってみよう、というのが今回のテーマなわけです。

    ということで早速始めたいわけですが、いきなり問題にぶち当たりました。
    いったいどんな大きさでアイコンを作ってやればいいのでしょう?
    形から入る理系の私としてはそこら辺がはっきりしないとなかなか始めるに始められません。
    ちょっと調べてみました。
    まず今まで作ったアプリのデフォルトのアイコンのサイズを確認してみました。するとびっくり、アイコンは1つではありませんでした。
    app>res>mipmap、の下にmipmap-mdpi,-hdpi,-xhdpi,-xxhdpi,-xxxhdpiの5つのフォルダがあり、それぞれの中にic_launcher.pngというファイルがあるのです。どれも開くと同じ画像に見えます。いや、少し違いました。大きさが違うのです。
    小さい方から順に、48×48ピクセル、72×72ピクセル、96×96ピクセル、144×144ピクセル、192×192ピクセルとなっています。これはスマートフォンの端末の解像度に応じて一番きれいなアイコンを表示できるように、あらかじめ準備してあるということなのです。

    ではそれぞれの大きさで一つ一つアイコン画像を描いてやらなくてはいけないのでしょうか?いえそんなことはありません。これより大きめの画像を1つ作って、それを元に縮小して切り出してやればいいのです。
    以前のアンドロイドアプリのデザインガイドには864×864ピクセルで画像を準備して、これを縮小・切り出してゆくことが推奨されていました。今回はこの864×864ピクセルの枠で画像を準備してみようと思います。

    まずはこれで枠が決まりました。でも枠のなかいっぱいにみちみちでアイコンを作るのは無粋というものです。適度にマージンを取って描いてやるとスマートなアイコンになります。ではどのくらいのマージンがいいでしょう?
    これは現在のアンドロイドアプリのデザインガイド(英文)に推奨サイズが載っていました。
    曰く、
    基本を48×48ピクセルとし、4倍スケール(192×192)でデザインする場合、正方形であれば152×152ピクセル
    これを目安とすると良いとあります。
    私の場合18倍スケールの864×864ピクセルでやっていますので、684×684ということになります。

    線の幅は、48×48ピクセルに縮小したときに1ピクセル幅となるように、18倍スケールなので18ピクセル幅の線で描画します。
    アイコンの四隅の角は丸くすることにします。曲げ半径は3D、つまり線の直径の3倍くらいがすっきりするので、18×3で半径54ピクセルで描かせました。
    更に、アイコンの右と下に1ピクセル(18倍スケールなら18ピクセル)の影を付けます。これで背景からアイコンが浮き上がって見えて、識別しやすくなります。
    枠だけでこんな感じになりました。



    図の白い部分が864×864ピクセルのエリアになります。
    この上に単位変換アプリをイメージする絵を描いていくことになります。

    と、ここで、私は絵心が無いから、というあなた、安心してください、私もありません。
    こんな時は文字で行きましょう。
    kgとか、lbとか、mとかの単位が踊っている感じです。
    ちょっと斜めにして文字を貼り付けてやって、ちょっと影なんか付けてやって、
    ちょいちょい、というかんじで、できました。こんなんです。



    どうでしょう?テーマカラーも何もない、原色バリバリでガチャガチャなアイコンですが、これ以上は本当に絵心がないんで、勘弁してください。

    さてこの864×864ピクセルの画像を、縮小しつつ切り出してゆくわけです。Illustratorであれば、ファイル>Web用に保存、というメニューからサイズと出力フォーマットを指定して出力することができます。
    その他のアイコン作成ツール6選こちらのサイトにまとめられていますので、これもご参照ください。

    こうして出来上がったアイコンは、所定のフォルダに収めておけば自動的に適用されます。
    所定のフォルダとは、先ほどのmipmapフォルダと、古い機種でアイコンが保管されていたdrawableフォルダです。
    具体的には、Android Studioのプロジェクトフォルダを開き、
    app>src>main>res
    のフォルダの下にmipmap-mdpi,-hdpi,-xhdpi,-xxhdpi,-xxxhdpi、それから、drawable-mdpi,-hdpi,-xhdpi,-xxhdpiの合計9つのフォルダを作って、それぞれ前に挙げた対応するサイズの画像を保存してやればOKです。drawableフォルダは古いバージョンとの互換性を保つために残しているだけなので、最新の-xxxhdpiまでは不要、と私は解釈しています。

    さあ、これでエミュレータを起動し、アプリが起動したらおもむろにホームボタンを押し、ドロワーをクリックすると、見事、自作のアイコンがその他のアイコンに並んで表示されました。



    余談ですが、このエミュレータ(Nexus 5)で見る限り、アプリ名称は日本語で6文字以内にした方が良いようです。先ほど試しに「シンプル単位変換」というアプリ名にしてみたところ、ドロワーでの表示が「シンプル単…」になってしまいましたので。

    以上でアイコンづくりの回は終了です。
    次回は、もう少し見た目をいじるか、広告を入れてみるか、ちょっと考えます。
    ではでは。


    コメント
    コメントする








       

    calendar

    S M T W T F S
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
    << October 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天