無料ツールでAndroidアプリのアイコンを作成する方法

#転載元

当記事は以下ブログからの転載です。
[TECH BACK](https://techback.info/create-android-app-icon/)

#はじめに

Androidアプリの開発で避けて通れないのがアプリアイコンの作成。

ここでは

- インストール不要
- 無料

でアイコン作成する方法を解説します。

基本的には無料のwebアプリ**「Google図形描画」**だけで完結します。

前提として、Googleアカウントは取得しておいてください。

##どこで必要なの？

アプリ用とストア掲載用のアイコンが必要です。

以下手順で作ることでアイコンを使いまわせます。

#アイコン仕様について

**縦横512×512ピクセルのPNG画像(透過)**で作る必要があります。

アイコン使用箇所は以下の通りです。

| 使用箇所          |       内容 |
|:--------------------|:------------------|
| アプリアイコン    |アプリのアイコン。ホーム画面とかに表示されるやつです。|
| ストアアイコン    |GooglePlayストアで表示されるアイコン。アプリアイコンと共通で使えます。|
| ステータスバー    |ステータスバーに通知する場合などに必要となるアイコンです。スマホの上部に表示される単色アイコン。|


#アイコン作成手順

**「Google図形描画」**を使ってアイコンを作成します。作成から保存までwebブラウザだけで完結します。

**GoogleDrive**を開いて、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/db16069a-0258-a6bc-40dd-7ca35e97af18.png)


**右クリック → その他** をクリックし、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/d2befb07-90c3-b7a8-ef6c-00da13f8a887.png)


**Google図形描画**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/54b6c5c0-eb87-f9cf-bfb4-df52eccecbc0.png)


**ファイル → ページ設定**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/2703af1b-61c9-dd78-b3e1-e734ab93e468.png)


**ページ設定**が開くので、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/1d81eff3-44f3-64e7-8d01-f1e699aa9737.png)


**縦横比「カスタム」、単位「ピクセル」、512×512**に設定して適用をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/bad3a58e-0634-6b87-985e-5f13ce7c0d64.png)


ページ設定したらアイコンを作成します。灰色と白の格子模様は透過部分となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/648066cb-babf-f772-9852-2e5c7a2a4b68.png)


アイコン作成が終わったら、アプリ＆ストア用にPNG画像で保管します。

**ファイル → ダウンロード→ PNG画像(.png)** をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/ddd00c40-7872-305f-48fd-0508e236ccc0.png)


以上で、アイコン作成は完了です。




#フリー素材と図形を組み合わせた作成例

それではフリー素材と図形を組み合わせた作成例を紹介します。

ためしに、砂時計を丸で囲んだアイコンを作ってみます。

##商用利用可能な素材サイト

一からアイコンを作成するのもいいですが、世の中には素晴らしい素材サイトがたくさんあります。

特に以下のサイトはデザインも良くおススメです。

[icooon-mono](https://icooon-mono.com/)

##フリー素材の取り込み

素材サイトから使いたいアイコンをダウンロードしておきます。今回は砂時計アイコンをダウンロードしました。

メニューバーから、**挿入 → 画像** でダウンロードしたファイルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/df2269d8-f996-6418-8cd6-d4ff7348a74d.png)


このように画像として取り込めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/34cb5c5c-3116-953f-eb01-b3ca581b8fe7.png)


色を変えてみましょう。

画像を選択した状態で**書式設定オプション**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/1742a3b7-9bea-ca33-db2f-e41246c0083e.png)


右側に**書式設定オプション**ウインドウが表示されます。

**色を変更**から変えたい色を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/47008c5c-a541-3855-e68a-9730caf93525.png)


色が変わりました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/6155ba84-bd4f-6b97-dd77-6b3925c572d2.png)


##図形を挿入

次は丸の部分。図形を追加します。

**挿入 → 図形**、で追加したい図形を選択します。今回はドーナツ方の図形を追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/9ac2df40-6a0c-cada-d3d9-7929a7e1c350.png)


ドーナツ型の図形が追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/5a66510f-eeaa-7452-e149-79c259454dc7.png)


色を変える場合は**塗りつぶしの色**アイコンを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/3363ef9f-d07d-a7a8-02b1-67b0ac578498.png)


色を選択します。透過したい場合は**透明**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/ad8ca871-f179-c33e-5487-8202bc6b83d2.png)


大きさや配置を調整します。大枠のデザインができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/ce072f84-58ee-b573-cb2b-ec9a9d1a5f18.png)


##サイズ調整

最終的なサイズ調整をします。

基本的には枠いっぱいまで図形を拡大します。枠に対して図形部分が小さいと、アイコンにしたときにショボくなってしまいますので。。。

サイズ調整をするために、図形のグルーピングをします。

すべての図形を選択します。Ctrlキーを押しながら順に図形をクリック、またはマウスで図形をくくります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/26a89fdd-043b-afd1-18c6-eca44e39d0b6.png)


右クリックして**グループ化**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/b600d875-8dc9-f29b-2e97-8f3cb60b4c98.png)


サイズ調整をするために、ルーラーを表示します。

**表示 → ルーラーを表示**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/3c396d04-7d3d-be5f-b69e-0807cf81bacc.png)


青ガイド(矢印)をルーラー端いっぱいに調整します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/7096b04b-1df9-2ed6-1721-866e31b496bb.png)


これでサイズ調整できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/81a34668-e46d-f27d-13cd-943e541bcc94.png)


##ステータスバー用アイコン

ステータスバー用の単色アイコンは、上記でできたアイコンファイルをコピーして、色変更で2つの図形の色を同じにすればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/2beb80a6-adc3-82bd-d17c-3614669f5736.png)


##アイコンのギザギザが気になる場合

アイコン化すると透過部分との図形の境目のギザギザが気になることがあります。

そんな時はドロップシャドウである程度ギザギザが緩和できます。

**書式設定オプション → ドロップシャドウ**のチェックボックスをオンにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/d457bae9-d940-01ec-9f5d-616ea28e2480.png)