アプリのアイコンを作成する方法：ルールと方法

モバイルアプリケーションの開発は、チャンスの宝庫です。 2020年までに、この事業分野の収益は1,890億ドルを超えると予想されています。 平均的なスマートフォン所有者がデバイスで月に約30種類のアプリを起動するので、それは理にかなっています。 Apple App Storeには220万個、Google Playには280万個のアプリがあります。 何という選択であり、同時に、何と激しい競争でしょう。 
## 良いモバイルアプリアイコンが必要な理由とは?
ブラウジング中にアプリを試す理由は何ですしょうか？ それはアイコンです。 これは、アプリページを開くという一瞬の決定を促すメインドライブです。 アプリのアイコンはユーザーの関心を呼び起こし、モバイルアプリが信頼できるものであり、インストールする価値があるとユーザーに確信させる必要があります。

![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/532dc0e1-bd24-c500-15cc-5607f9f3aea9.png)

## アプリアイコンを作る際の5つのヒント
モバイルアプリのアイコンはオリジナルである必要があります。 他の人の作品を侵害して「簡単」な道を歩まないでください。 色とスタイルの点で、アイコンをアプリのインターフェイスのデザインと一致させてください。
ロゴの作成方法を学習するために、従うべき5つの普遍的なルールをまとめました。 どうぞ：
### 1. シャープでスケーラブル
モバイルアプリのアイコンは、ストアのメインページ、サブメニュー(より小さいバージョンで)、モバイル機器の画面上のアイコンの三つの場所に表示される。いずれの場合も、アイコンのサイズは異なります。
多くの場合、アイコンの画面表示は解像度とカスタム設定によって異なります。主な要件は、ユーザがアイコンを見ているときに目を動かさないことです。 Appsparkyなどのツールを使えば、アイコンをプレビューして、その外観を確認することができます。 

![image15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/2870e5ae-4f30-b041-a98c-4a7bda476443.png)

### 2. 意味のあるシンボルを使う
あなたのアイコンを見た人は誰でも、それが何についてのものであるか、あなたの製品やブランドとどのように関連しているかを認識すべきである。ユーザーの言語や文化に関係なく、アイコンが普遍的に「読みやすい」されている場合が最適です。アイコンの効果は、設計アイデアに対するユーザーの理解度によって異なります。YouTubeはその良い例で、簡単に識別できる再生ボタンを使ってロゴを作った。
![image14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/22c2b9fa-25bf-073b-a250-c236455da9f0.png)

### 3.本当にユニークなアイコンを作成する
アプリのアイコンは、他の何百万ものアイコンとユーザーの注意を競います。この場合の一意性は、イメージをわかりやすくするチャンスです。アプリのアイコンを一意にするには、次を試してください。
• ニッチにある他のアイコンを探します。最高のものを分析し、刺激を与え、すべてを異なる方法で行います。他の人のアイデアを完全にコピーすることは失敗への確実な方法です
• 色の組み合わせと記号で新しい意味を探します。試してみて、試してみてください！
• ゲームアプリのアイコンからインスピレーションを得ます。このニッチには、正式な画像要件が少なく、創造性があります。
• ブランドの認識可能な視覚要素をメインアイデアとして使用します。Twitterは強力な素晴らしい例です。ビジュアルはアプリ名（鳥のさえずり）に合わせます。
![image18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/00e67b41-5410-ef61-ce72-a0d7f02cbfe7.png)
 
### 4.適度な数の文字を使用する
Facebookには、アプリケーションアイコンにブランド文字Fを使用するすべての権利があります。有名なサービスもたくさんあります。ユーザーが1文字または2文字であなたを認識できるようにコーポレートアイデンティティが開発されている場合、それは素晴らしいことです。ただし、会社の完全な名前をアイコンに入力しないでください。そして一般的に、できるだけ多くの単語を削除します。
それ以外の場合、視覚的な詳細に注意してください：
•アプリの名前は既にアイコンの横に書き込まれます。
•文字や単語は画像から気をそらします。逆もまた同様です。ユーザーリードの散漫な注意は、より明確なアイコンで競合他社に彼らを揺さぶるでしょう。
名前が短い場合は、ニュージーランドの会社Xeroのこの例のように、それを中心要素として使用してみてください。
![image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/69946014-33cb-932d-455b-388834ce926b.png)

### 5.アイコンのスタイルをアプリのインターフェイスと一致させる
優れたアプリアイコンは、アプリの概念を表現し、完全な製品イメージを作成し、アプリのデザインを補完します。アイコンは：
•アプリケーションの配色とスタイルを一致させる。
•アプリの目的を示す
•明るいデザインと暗いデザインのテーマ、およびさまざまな種類のカスタム壁紙の背景でよく見えるようにします。
また、法案に合ったブランドロゴを作成する方法のもう1つの良い例は、Dropboxです。
![image16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/b01600a7-85a9-1c35-7ebb-40a7f2647a97.png)

ユーザーは、選択したアプリストアのアイコンデザインのダークテーマを選択できます。背景のすべてのバリエーションでアイコンが同じように見えることが重要です。[IconTester](http://www.icontester.com/)サービスでアイコンをテストしてください。テストプロセスがどのように見えるかの例を次に示します。
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/57497771-262a-eb8f-532b-034e93972ef9.png)
  
## アプリアイコンのデザイントレンド
では、最新のデザイントレンドを考慮して、AndroidアプリケーションまたはiOSのアイコンを作成する方法を教えてください。いくつかの実用的な推奨事項を提供できます。
1.簡素化。コンポジションから余分なものを削除します-主なものに焦点を当てます。画像が単純であるほど、あらゆるタイプの画面で認識されやすくなります。Smartsheetのスケジューラは、ロゴのまさにそのようなものを持っています
![image7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/fde30962-34ea-bead-06cb-7c244f05525d.png)

2.不要なアイテムを削除します。ロゴの意味に影響を与えないすべての小さな詳細を削除します。メインシェイプのみが残ると、結果はよりよく記憶されます。例はCalendlyです：
![image17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/49c09ce0-e9de-c684-91c4-c72f84ad659e.png)

3.詳細を強調表示します。アイコンの詳細の1つを強調表示するか、ロゴを少し非対称にします。これはユーザーの注意を引き付けます。これは、Todoist開発者が作成したものです。
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/5cfb7620-7b3f-f3f8-7743-b87918ebaa75.png)

4.グラデーションを使用します。これは2018年の傾向であり、引き続き重要です。グラデーションの助けを借りて、写真をより魅力的で深くすることができます。Instagramはトレンドに関連しています：
![image9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/dc845c8c-3100-2dce-3ced-c64b6a637551.png)

5.ネオンシェードを試してください。ミニマルなロゴは、グラデーションロゴの明るいネオン色で活気づけることができます。これは、Spotifyのデザイナーが次のことに基づいている傾向です。
![image11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/c292def3-e336-8197-08ae-20025d4237c2.png)

6.「手作り」に進みます。ぼやけた線と自然な色の手描きの画像が現在流行しています。このオプションは、MetLifeロゴに選択されました。
![image8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/322ca981-2f01-514e-2f6b-41026aa47d7d.png)

## Androidアプリのアイコンを作成する方法は？
Androidアプリのアイコンは、既存のガジェット設定と画面解像度に基づいて開発する必要があります。DPIは、アプリのグラフィックの品質を測定するために使用されます。DPI分類は次のとおりです。
 
- LDPI-120;
- MDPI-160
- 高DPI-240;
- XHDPI-320;
- XXHDPI-480。

アプリのアイコンは、[Android](https://developer.android.com/design/index.html)の条件に準拠して設計する必要があります。
### アプリを起動するためのアイコン要件：
画像は、32ビットカラーモードのPNG形式である必要があります。透明な背景は必須要件です。
MDPIの最小アイコンサイズは48dp、エッジは1dpです。詳細設定はDPIに依存します。他のメトリックのサイズオプション（px）：

 - MDPI - 48
 - HDPI - 72
 - XHDPI - 96
 - XXHDPI - 144
 - XXXHDPI - 192

### Google Play要件で公開するためのアイコン
モバイルアプリのアイコンは512x512ピクセルにする必要があります。このアイコンはGoogle Play専用に設計されており、アプリを起動するアイコンとして使用することはできません。このアイコンは、プログラムを起動するためのショートカットとして使用されるアイコンとサイズが異なります。しかし同時に、アイコンのさまざまなバリエーションの画像は同一でなければなりません。
 
その他の要件：
 
- 形式：32ビットPNG。      
- ファイルサイズ-最大1024КB。      
- 色空間— sRGB;      
- 形状—正方形。システムは、角が丸いマスクを自動的に適用します。半径はアイコンのサイズの20％です。      
- シャドウは必要ありません。動的に適用されます。

### Androidアプリのアイコンを作成する方法-ヒント
次のガイドラインを使用してください。

- 重要な要素を、フレームの端と下3分の1から離れた中央に配置します。
-ロゴを画像の中央に配置し、垂直および水平に配置します。
- 文字には大きなフォントサイズのみを使用します。

特定の目的のために、Androidモバイルアプリのアイコンを作成できます。例えば：
1.ブランディング。ブランドの色と記号を使用して元のアイコンを作成します。
2. Google Playでアプリを検索するユーザーを引き付けます。品質設計は、プログラムの優れた設計の指標です。
目的に関係なく、Androidアプリの画像は、すべての設定で、背景のすべてのバリエーションと組み合わせて鮮明に見えるはずです。

## iOSアプリのアイコンを作成する方法は？
iOSアプリケーションごとに、アイコンの大小のバリエーションを作成する必要があります。Smallは、ホーム画面とシステムに表示する必要があります（アプリケーションのインストール後）。大きなものはApp Storeに表示されます。
![Screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249438/6c5de73f-4111-b4fe-8ef8-9ef8f231949e.png)

さまざまなiOSデバイスに必要な設定を考慮して、いくつかの小さなアイコンを作成します。異なるサイズの写真の間に劇的な視覚的な違いはないはずです。
一般的なアイコンの[要件](https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/)：

- 1024 x 1024ピクセル。      
- 72 dpi、RGB、1つのレイヤー、透明ではありません。      
- JPEGまたはPNG。  
    
重要：アイコンに強調表示された別のフレームを追加する必要はありません。システムはすべてのアイコンに1ピクセルのインデントを自動的に追加して、アイコンを美しく強調表示します。
### iOSアプリアイコンのデザインルール
次の推奨事項に従ってください。
1.シンプルなデザイン。シンプルで記憶に残る背景で、最小限の詳細で、アプリの本質を伝える中心的な要素でなければなりません。
2.明確な強調。ユーザーを引き付け、プログラムの目的を示す要素に焦点を当てます。
3.認識。パズルなし：ユーザーはパズルを実行する時間がありません。アイコンとプログラムの重要性を即座に理解する必要があります。
4.メイン要素に焦点を合わせるためのシンプルな不透明な背景。
5.著作権で保護された画像はありません！これは、Appleブランドに関連するアイテムにも適用されます。
6.さまざまな背景オプションでアイコンをテストします-画像がほとんどのカスタム壁紙オプションとうまく調和するようにします。
7.角を真っ直ぐにします-システムは角を丸くします。
8. iOS 13で実行されているダークモードの機能を検討します。標準アプリケーションアイコンは、このモードではうまく表示されない場合があります。代わりに、暗い背景の画像が必要です。このオプションは、ベータテストの段階でMac Observerによって提案されました。
## アプリのロゴを作成する方法：最高のサービス
自分でモバイルアプリのアイコンをデザインする場合は、便利なサービスをいくつか選択しました。
### [Logaster](https://www.777logos.com/logo/)
これは、オンラインのロゴジェネレーターです。数十のユニークな視覚的ソリューションを提供します。希望の配色とテーマを指定できます。好きなバージョンを編集して、適切なサイズでダウンロードできます。Logasterでは、無料のロゴを作成する方法の問題は存在しません。

 
### [Makeappicon](https://makeappicon.com/)
これは、AndroidおよびiOS用のアイコンジェネレーターです。サービスがロゴを作成する際に基づいて、独自の画像をアップロードできます。彼らは現在のアプリストアの要件を満たします。
 
### [IconsFlow](https://iconsflow.com/)
独自のスタイルの画像を作成できるオンラインアイコンエディターです。適切な要素と色を選択することで、デザイナーのように感じることができます。独自の画像をアップロードおよび編集できます。
  
### [Font Awesome](https://fontawesome.com/)
モバイルアプリやソーシャルネットワーク向けの強力なアイコンエディターです。独自の画像を作成するための多くのオプションと設定が用意されています。
  
## 作れば来る
モバイルアプリのアイコンを作成する方法は複雑な質問です。モバイルプラットフォーム開発者の要件を満たす興味深い、ユニークで魅力的な結果を得るには、ルールと最新のトレンドに従う必要があります。これらの素晴らしいアイデア生成サービスを提供し、アプリを視聴者にとって魅力的なものにします。