開発者でもソレっぽいStore画像が作れる秘密の方法を公開！

2019/1/25(金)に、有名イラストレータmizutamaさんとのコラボアプリ「mizutamaTODO」
をリリースしました！

iOS版：https://apple.co/2Ungcfd
Android版：http://bit.ly/2UBTukj

ストア画像は縦長？横長？

■ #個人開発ノウハウ

✓ ストア画像は横長一択

アプリが縦向きだろうと横向きだろうと、ストアのスクショは横長で！

縦だと1画面に3つ表示されるが、横だと1つしか表示されないので３倍大きく表示されてインパクト大

ユーザーは流すように見るのでインパクト大事

これでダウンロードが40%伸びた pic.twitter.com/QpOKpEUwPp

— プロ個人開発 / 安宅 (@atagon) January 8, 2019

アプリが縦なら、ストア画像も縦
アプリが横なら、ストア画像も横

じゃないとAppleの審査に落ちると思っていませんか？

大丈夫です。

審査で、ストア画像はきっちりチェックされていて、落ちるときは落ちるのですが

画像の向きで落ちたことはありません。

だから縦より3倍大きくAppStoreトップで表示される横画像一択です！

本当に横向き画像は有利？

その証拠に、125万ダウンロード超えの、僕のメインアプリ「QuickMemo+」のダウンロード数を本邦初公開しちゃいます。

iOS版：https://apple.co/2HPc5Yf
Android版：鋭意制作したい(してない)

ドンッ

僕の懐ポリシーで広告は1円も掛けていません。

ダウンロード数が200前後でくすぶっていましたが、2018/9/28に、ストア画像を横長にしてリリースしてからは、ダウンロード数がグングン伸び、一段上がった状態で安定しているのが分かると思います。
(9/26に変な増加が入っていて分かりづらくてスイマセン..)

2019/1/29現在も、同水準を維持しています。

ダウンロードには色々な要因が関係するので、一概にストア画像の影響100%とは言えませんが、やって損は無さそうですよね。

コレぐらいのダウンロードが維持されていると、広告収入だけで10万円/月を超えます。

じゃぁ、横長のストア画像を作ろう

1. デザインのテイストを決める

まず、どんなデザインにしたいか考えましょう！

難しく考える必要は無いです。

かわいく？
カッコよく？
楽しそう？

もし具体的に、インスタグラムっぽく！などがあれば、なお良し。

そのテイストにあう画像をAppStoreやネットから探しましょう！

僕は
「mizutamaさんのイラストみたいなカワイイ感じ」
にしたいので、mizutamaさんの公式サイトに行ってみます。

「mizutama」
でググってポチっと。
https://www.mizutamahanco.com/
カワイイの玉手箱です💗

スルスルッとスクロールさせると….

左下の、薄青い色、カワイイ！
ベースカラーに決定。

右上のカレンダーアプリのスキン用に作った水玉デザインかわいい💗
デザインはコレに決定。

ここまでわずか数分。

我々開発者は、うんうん悩んでもデザインなんて降りてこないので無駄なことは止めましょう。

2. 作る！

早速ストア画像を作って行きましょう。

iOSも沢山の端末があって、必要なストア画像の数も莫大ですが
iPhone plus系の大きな画像だけ用意すれば審査は通る
ので、plus系の横長画像

2208 x 1242

だけを作ります。~~面倒なので。~~

フォトショップで2208 x 1242を新規作成。

ベースカラーに決めた画像の色をスポイトで吸出し (#b6e5e5)

長方形を、ベースカラーで塗りつぶし。
もう何かカワイイ。

オリジナルの色を設定したい場合は、自分で試行錯誤しないで「Adobe Color」でイメージしている言葉で検索して色を決めましょう！
https://color.adobe.com/ja/create/color-wheel/

これ👇っぽい水玉を描きたいけど、今はやり方がわからないので、後回し。
ひとまずベース完成。

3. スクショを貼る

次に、画面のスクショを貼り付けましょう！

絶対、面倒だからとスクショだけ貼り付けないこと！

iPhoneのモック画像を無料で公開しているサイトが沢山あるので、そこからiPhoneの画像を持ってきて、その中に貼り付けて下さい。

こういう所からダウンロード
https://www.mockplus.com/blog/post/iphone-8-mockups

こんな感じの、本体にツヤがあって一見かっこよさそうなモック画像は「避けて下さい」

このリアルな質感に合うデザインを作り上げるのは我々開発者では無理です。
98%の確率でダサくなります。

こんな感じのベタ塗りマットなモック画像をチョイスして下さい。

※ ちなみに、カッコイイからとiPhone X系のモック画像を使うと、iPhone X系じゃないストア画像に使うな！という理由で審査に落ちます
(落ちました)
必ず、iPhone6,7,8の画像を使って下さい。

スクショ + iPhoneのモック画像ぺったんこ。
もう、何かカワイイ！

この時、配置は目分量でやらないこと！

ちゃんとガイドを使って縦/横の1/2と1/4あたりに線を引いて、バランスを見ましょう。
理論は良くわからないけど、キレイなバランスの所に合わせると、ソレっぽくなります。

感覚でやると絶対、何か違和感のある気持ち悪い配置になるので厳禁。

4. 文字を書く

次はアプリをアピールする文字を入れて行きましょう！

◆ #個人開発ノウハウ

✅ 画像に入れる文字は装飾よりフォントにこだわる

オシャレに or 目立たせるため、画像の文字を装飾すると、開発者の場合かなりの確率でダサくなる

それよりシンプルに装飾しないでオシャレフォントを選んだ方が確実

装飾しないオシャレ例は多いので意識して見てみよう！

— プロ個人開発 / 安宅 (@atagon) January 12, 2019

我々開発者はむやみにグラデーションやドロップシャドーを掛けたくなりますが、1000%ダサくなるので今回は我慢！

我々開発者には、そんな高度な装飾を全体とマッチさせるスキルはありません。

デザインの良し悪しは、個々のパーツの質ではなく

「個々のパーツが織りなす全体のバランス」

で決まる事を肝に銘じて下さい。

文言は、誰も読んでくれないのでひと目で分かるキャッチフレーズ的なもので。
被ってるほうが、何があるんだろう…と気になるかと思って作ったtake1。

何でそう思った、ワイ？

ちなみに、新しい色が増えると、とっちらかったデザインになるので、文字色はスクショの色をスポイトで吸い取って使う事。

被っちゃダメだろ！と正気に戻って配置をイジイジしてみます。
アーーー！カワイイ💗

でも両サイド空きすぎでは….？
というより、全体を見せようとしすぎてどんなアプリなのか分かりづらくない？？？

と思っておっきくしてみる。

!!??

良さそう。コレで行きます。

仕上げて行く

次、水玉を描こう。

「photoshop 水玉」

でググってココのやり方で水玉を追加します。
https://yuzuyu3.com/polka-dot/

水玉の配置は、mizutamaさんサイトで見つけたカレンダースキンの配置をオマージュ。

絶対、自分のスキルでデザインを創作しないこと！

我々開発者には、その機能は実装されていません。
NullPointerExceptionが発生するので絶対やめて下さい。

ついでに、左右が寂しそうだからmizutamaさん素材を適当に配置してみます。

カワイイ💗

いつもだと丸ゴシックで済ます(万能)のですが、目が肥えているmizutamaさんのファンが相手なので、かわいいフォントを探してきて変更。

文字を直線ではなく曲線状に配置したくなって来たので

「photoshop パスに文字を配置」

でググってやってみるが、出来なかったので良くわからない歪みフィルタを使いました。

ふと、mizutamaさんの素材はキャラとモノの2種類あることに気づいて、キャラとモノを綺麗に配置させてみます。

イラストに付いてる文字が邪魔と気づいてそれも削除。
配置をイジイジしてたら六角形に配置するとカワイイことにも気づく。
適当にシャッフルしていたら、いい感じになって来ました！

やっぱり文字は歪みフィルタを使うと、何か違和感。
文字が歪んでいるし、もっとフワ〜〜〜っと文字が曲がって欲しい…。

頑張ってパスに文字を乗せる方法を何度も試していたら何故か出来た！

衝動的に完成。

我々開発者は、デザイン理論は分からないけど、何か違和感が残る場合は諦めないで位置を動かしてみたり隙間を広げてみたりして、最大限、違和感が無くなるまで頑張ること！

原因の分からないバグ調査のために、色んな値を入れて試しながらデバッグをしていく感覚です。

つまり、プロのデザイナーさんはゴールに向かって積み上げていく開発型デザイン(僕の勝手な想像)
我々開発者は、モデルになったデザインをオマージュした後、違和感(バグ)を抜いていくデバッグ型デザインで完成を目指しましょう！

おまけ

コレが横長にしてダウンロードが40%ぐらい増えたAppStoreの画像ですが

元ネタは、TRAVEL Nowというアプリです。

見出しの上のアイコンがおしゃれだったけど作る技術が無かったので出来る範囲内でオマージュ。

デザイン感度の高い深津さん率いるGUILDのメンバーがつぶやくイカスUIアプリの情報を監視して、オマージュリストとしてストックしておきましょう！

我々開発者は、コッテリしたデザインがカッコいいと思いがちなので自分の感性はあまり当てにしないようにしましょう。

おまけ2

イカしたスクショ画像サンプル

縦3枚でブチ抜きデザインにするパターンも目立ちますね！
最後のアプリはmixiさんの縦長アプリです。

まとめ

イメージに合ったプロの仕事画像をネットから探す
スクショはベタ貼りしないで端末モック画像に貼る
端末モックはツヤの無いベタ塗りテイストのものを使う
Store画像に置く画像は真ん中や1/4の位置などキッチリした位置に合わせて配置する
詳細デザインは独自に創作しないでネットで見つけたプロの仕事をオマージュすること
違和感がある場合は、可能な限り違和感を頑張って減らす
GUILDの人達がつぶやくイカスUIアプリをストックしておくこと

開発者でもソレっぽいStore画像が作れる秘密の方法を公開！