クリックしたくなる！ゲームアプリアイコンの作り方講座
個人開発でゲームをリリースされている方が増えましたね！
開発も終わり、ついにリリース！・・・・でも全くダウンロードされない・・・という方も多いのではないでしょうか。
そこで、今回は
「クリックしたくなる！アイコンの作り方」
について簡潔にまとめました。
重要なのは、3つだけです。
この3つのポイントを意識するだけで、クリック率が変わってくると思いますので、ぜひ最後までご覧ください。
クリックしたくなる！ゲームアプリアイコンに必要な3つのこと
アイコン製作時に気をつける重要なポイントは、3つだけです。
- ①1秒で目を引くアイコンにせよ
- ②ストアで掲載されたときのイメージを強く持て
- ③インパクト重視！情報量を減らせ
今回は、実際に制作したアプリアイコンを掲載しながら、進めていきます。それでは、細かく見てきましょう！
①1秒で目を引くアイコンにせよ
アプリのストアで、特定キーワードで検索をかけたとき、気になるものがが見つかるまでスクロールしますよね。そこで目に入るアイコンですが、おそらく1秒以内で瞬間的に判断されているんです。
つまり、ユーザーに自分のアイコンをアピールできる時間が「1秒」ということです。（短い・・・！）
では、アピールするために何をしたら一番効率的でしょうか。
まずは、調査です！
下記を意識しながら、ストア内の競合ゲームのアプリアイコンを確認してみてください。
- ①多く使われている【色】は何か
- ②多く使われている【モチーフ】（イラストなど）は何か
- ③写真、イラスト、3D、文字のうち、多い【表現】は何か
今回私が制作したのは、「電車」ゲームのアプリアイコンです。そこで、アップルストアで「電車」というキーワードを入れて検索してみました。
最初に出てくるのは、電車乗り換えなどのツール系で、その後に3Dの電車ゲームが並んでいます。ここで先ほどのポイントに沿ってまとめてみます。
- ①【色】緑、青、グレー
- ②【モチーフ】電車の車両（長方形の箱型）
- ③【表現】ツールはフラットなイラスト、ゲームは3D電車とその背景
単純に目立つだけなら、上記とは全く違う方向性で、アプリアイコンのデザインをすればOKです。でも、それはかなり難しいはずです。
同じテーマでアプリを作るなら、イメージする色や形が似てくるのは当然です。むしろ、そこから外れすぎると悪目立ちして、逆にクリックされにくくなります。
これらを考慮して、可能な限り差別化できるデザインを考えます。
今回初稿のイメージ案として出したのが、こちらです。
背景イメージですが、作り込んでからNGが出るのが怖いので、イメージが伝わるようにフリーの素材で代用しています。
この時点で、特に差別化を考えたのは、下記の②③になります。
- ①ストア内で多く使用されている青、緑を使用するが、できるだけ彩度を上げて目立つようにする
- ②人気のある新幹線「こまち」と「はやぶさ」を主役にする
- ③横から見た2Dイラストにする
さて、結果から言うと、この案はボツになります。
次章で、説明していきますね！
②ストアで掲載されたときのイメージを強く持て
初稿のアイコンを作った後に、必ずやるべき重要なことが、実はスッポリと抜けていました。
それは、作ったアイコンとスクリーンショットを、ストアのテンプレートにはめてみて、目立つかどうかを確認することです。
大手ゲーム会社であれば、ストアランキングのページをテンプレにして、作成したアイコンを並べて他アプリと比較することが多いです。大々的に宣伝をするため、上位ランキングに入ることがほぼ確定なので、この確認方法で問題ないかと思います。
しかし、今回はカジュアルゲームなので、ランキングよりも「検索結果での見え方」が重要です。
そこで実際に検索結果のテンプレを作って、そこに制作したアイコンとスクショを配置して確認することをオススメします。
初稿アイコンのストア掲載イメージは、こちら。
ここで指摘されたこととしては、
- 「スクリーンショットに比べて、アイコンのインパクトが弱い」
- 「新幹線のサイズをもう少し大きくしたい」
でした。
そして、ここからクライアントの神アイデアが連発します（笑）。
ディレクターさんとエンジニアさんから、アイコンについてのラフアイデアをいただきました。
それがこちらです。
余談ですが、左側のケーキは、お子さんのために作ったケーキだそうです。カワイイですよね！
今回作成したのは「連結だいすき」というゲームアプリで、「電車の連結」がメインになっています。そこで、連結を表すために電車を横一直線で並べていました。
ただし、今回いただいたアイデアとしては、電車を斜めに配置したり、線で繋げたりなど、別の表現方法はどうかというものでした。
正直、なるほど・・・！と思いました。自分の頭の硬さに愕然としましたね（笑）。
そこで、いただいたアイデアを元に、作成した案が下記になります。
最初の案よりも、アイコンとしてのインパクトがでましたよね！
さて、結果から言うと、A案で再修正になります。理由は次章で（笑）。
③インパクト重視！情報量を減らせ
ここで指摘されたこととしては、
- 「電車を更に目立たせるために、背景色や星の数を調整したい」
でした。
アイコンは、1024×1024と大サイズで作成しているものの、実際のストア内では小さく表示されるということを見落としがちです。制作しながら、要素が少ないと物足りなさを感じて盛りすぎてしまうため、そこは注意が必要です。
制作物はかならず、スマホでも確認しつつ、
- 情報量が多くないか（要素が多すぎないか）
- インパクトはどうか（主役が目立つような大きさや色になっているか）
に気をつけながら進めましょう！
最終的に、できあがったアイコンはこちらです。
要素を減らし、電車と背景のメリハリがつくように背景の青を濃くしました。合わせて、連結部に注目が集まるような集中線の調整もしています。
これで、完成です！
まとめ
それでは、おさらいです。
アイコン製作時に、気をつける3つのポイントは、
- ①1秒で目を引くアイコンにせよ
- ②ストアで掲載されたときのイメージを強く持て
- ③インパクト重視！情報量を減らせ
です。
今回作成したアイコンのビフォー（前）→アフター（後）はこちら。
そして、重要なポイントがもう一つあります。
それは、「他の方に、アドバイスしてもらう」ということです。
自分一人で完結できるのが一番ですが、そこにこだわりすぎると視野が狭くなったりすることもあるため、できれば制作したものを見てもらい、フィードバックしてもらうことをオススメします。
時間をかけて作ったゲームを一人でも多くのユーザーに届けるためにも、ぜひアイコン作りに注力してみませんか？
- 現在、ゲームのUIやアイコン、バナーなどのお仕事を受付中です。「こんなのは作れる？」「ひとまず一画面だけお試しで作れる？」といったご相談も大歓迎です！お気軽にお問い合わせフォームより、ご相談ください。
最後に、今回ご依頼いただきました「モノイズ様」、本当にありがとうございました！またブログへの掲載許可も快諾していただき、感謝しております。今後とも、どうぞよろしくお願いいたします。
▼子供向けのゲームアプリ「連結だいすき」
連結だいすき for iOS | 連結だいすき for Android
あわせて読みたい
ゲームUIデザインやバナー制作などのご依頼はこちらへ
お問い合わせ
または、会社サイトからお問い合わせください。
2clue合同会社のサイトへ
