開発者でもソレっぽいストア画像が作れる、秘密の方法
ストア画像作るの、大変ですよね！
僕も生粋の開発者なので、気持ち良くわかります。
デザイン何もわからん。
でも試行錯誤の中で、何とかソレっぽいストア画像を作り上げる方法を編み出したので、共有します。
お題は「mizutamaTODO」
数年前に、有名イラストレータmizutamaさんとのコラボアプリ 「mizutamaTODO」 をリリースしました。
(個人アプリでもこういうチャンスは流れてきますよ！)
iOS Android
mizutamaさんはインスタのフォロワーが36万人もいる、日本を超えてアジアで大人気のイラストレータさんなので、僕が作ったストア画像やUIでは、ファンからお叱りを受けるのではないか、、、と内心ビックンビックンしていたのですが
「mizutamaさんらしいカワイイアプリだ」
という声が多く、一安心しました。
作ったストア画像
このストア画像を、デザインができない生粋の開発者である僕が、どうやって作ったのかを解説していきます。
1. デザインのテイストを決める
まず、どんなデザインにしたいか考えましょう！
難しく考える必要は無いです。
- かわいく？
- カッコよく？
- 楽しそう？
もし具体的に、「インスタグラムっぽく！」などがあれば、なお良し。
そのテイストにあう画像をAppStoreやネットから探しましょう！
僕は
「mizutamaさんのイラストみたいなカワイイ感じ」
にしたいので、mizutamaさんの公式サイトに行ってみます。
「mizutama」
でググってポチっと。
カワイイの玉手箱です💗
スルスルッとスクロールさせると….
左下の、薄青い色、カワイイ！
ベースカラーに決定。
右上のカレンダーアプリのスキン用に作った水玉デザインかわいい💗
デザインはコレに決定。
ここまでわずか数分。
我々開発者は、うんうん悩んでもデザインなんて降りてこないので、無駄なことは止めましょう。
2.作る！
早速ストア画像を作って行きましょう。
必要な画像のサイズは年々変わってきているので、ググって調べてみましょうね。
まず、フォトショップで必要なサイズで新規作成。
ベースカラーに決めた画像の色をスポイトで吸出し (#b6e5e5)
上の方をベースカラーで塗りつぶしてみる。
さすがプロが選んだ色、もう何かカワイイ。
オリジナルの色を設定したい場合は、自分で試行錯誤しないで「Adobe Color」でイメージしている言葉で検索して色を決めるのが吉です。
キーワードを入れると色の組み合わせを提案してくれます。
試しに「かわいい」で検索すると、可愛い色に囲まれます。
さて、これ👇っぽい水玉を描きたいけど、今はやり方がわからないので、後回し。
ひとまずベース完成。
3.スクショを貼る
次に、画面のスクショを貼り付けましょう！
面倒だからと、スクショ画像だけ貼り付けないこと！
メタ(旧Facebook)さんが無料であらゆる端末のモックを公開してくれているのでそれを利用します。
スクショ + iPhoneのモック画像ぺったんこ。
もう、何かカワイイ！
この時、配置は目分量でやらないこと！
ちゃんとガイドを使って縦/横の1/2と1/4あたりに線を引いて、バランスを見ましょう。
(理論は良くわからないけど)キレイなバランスの所に合わせると、ソレっぽくなります。
感覚でやると絶対、何か違和感のある気持ち悪い配置になるので厳禁。
4.文字を書く
次はアプリをアピールする文字を入れて行きましょう！
我々開発者はむやみにグラデーションやドロップシャドーを掛けたくなりますが、1000%ダサくなるので我慢！
デザインの良し悪しは、個々のパーツの質ではなく
「個々のパーツが織りなす全体のバランス」
で決まる事を肝に銘じて下さい。
文言は、誰も読んでくれないので「ひと目で分かるキャッチフレーズ的なもの」で。
被ってるほうが、何があるんだろう…と気になるかと思って作ったtake1。
何でそう思った、ワイ？
ちなみに、新しい色が増えると、とっちらかったデザインになるので、文字色はスクショの色をスポイトで吸い取って使う事。
「見せたいスクショにガッツリ文字が被っちゃダメだろ！」
と正気に戻って配置を調整してみます。
アーーー！カワイイ💗
でも両サイド空きすぎでは…？
というより、全体を見せようとしすぎてどんなアプリなのか分かりづらくない？？？
と思って、おっきくしてみる。
キタ!!コレ??
良さそう。コレで行きます。
5.仕上げて行く
次、最初に決めたテイスト通り、水玉を描こう。
「photoshop 水玉」
でググってココのやり方で水玉を追加します。
水玉の配置は、mizutamaさんサイトで見つけたカレンダースキンの配置をオマージュ。
絶対、自分のスキルでデザインを創作しないこと！
我々開発者に、その機能は実装されていません。
ついでに、左右が寂しそうだからmizutamaさん素材を適当に配置してみます。
カワイイ💗
いつもだと 丸ゴシックで済ます(万能) のですが、目が肥えているmizutamaさんのファンが相手なので、かわいいフォントを探してきて変更。
文字を直線ではなく曲線状に配置したくなって来たので
「photoshop パスに文字を配置」
でググってやってみるが、出来なかったので良くわからない歪みフィルタを使いました。
ふと、mizutamaさんの素材はキャラとモノの2種類あることに気づいて、キャラとモノを綺麗に配置させてみます。
イラストに付いてる文字が邪魔と気づいてそれも削除。
配置をイジイジしてたら、六角形に配置するとカワイイことにも気づく。
基本的に、左右対称やら、キレイな図形状に配置など、規則的に素材を配置するとソレっぽくなります。重要テク。
あとは、適当に画像をシャッフルしていたら、いい感じになって来ました！
やっぱり文字は歪みフィルタを使うと、何か違和感。
文字が歪んでいるし、もっとフワ〜〜〜っと文字が曲がって欲しい…。
頑張ってパスに文字を乗せる方法を何度も試していたら何故か出来た！
衝動的に完成。
我々開発者は、デザイン理論は分からないけど、何か違和感が残る場合は諦めないで、位置を
変えたり、隙間を広げてみたりして、最大限、違和感が無くなるまで頑張ること！
原因の分からないバグ調査のために、色んな値を入れて試しながらデバッグをしていく感覚です。
つまり、プロのデザイナーさんはゴールに向かって積み上げていく開発型デザイン、我々開発者は、好きなデザインをオマージュした後、違和感(バグ)を抜いていくデバッグ型デザインで完成を目指しましょう！
まとめ
- イメージに合ったプロの仕事画像をネットから探す
- スクショはベタ貼りしないで端末モック画像に貼る
- Store画像に置く画像は真ん中や1/4の位置などキッチリした位置に合わせて配置する
- 詳細デザインは独自に創作しないで、ネットで見つけたプロの仕事をオマージュする
- 違和感がある場合は、イジイジして可能な限り違和感をつぶす
Discussion
良記事ありがとうございます！
辛辣笑笑
読んでくれてありがとうございます。
ついつい面白おかしく書こうとしてしまいました😂