web関連

2014/06/10

AppStoreの適切なスクリーンショットについて考えてみた

screen-cover

こんにちは、デザイナーのさっちゃんです。(*・ε・*)

普段新規アプリやサービスを作る際に
AppStoreに載せるスクリーンショットの適切なデザインってなんだろう?
と悩むことが多いので、実際のアプリを調べて適切なスクリーンショットとは?を探ってみました!

参考にしたアプリはこちら!↓

サンプルがニュース系というのもありますが、シンプルなデザインが比較的多いようです。

共通点からスクリーンショットの適切な配置を考える

スクリーンショットを見ていると、共通点っぽいものが見えてきました。

●フォントサイズは大きめに
解像度の原寸は640*1136(iphone5)または640*960(iphone4s以前)なので、
ついついデザイン上文字を小さめに…沢山情報を入れたくなります。
が!iPhone端末の画面実寸サイズは横5cm、縦8.9cm(自分調べ)のためあまり大きくありません。
読んでもらうためには、大きめの文字にしておくのが良さそうです。

個人的にはメインのキャッチコピーは60pxくらいがいいかな、と思います。

●説明は簡潔に
人間が一度に認識できるのは13文字以内と言われているので、
それを意識して組むと良さそうです。

参考URL:Yahoo!ニュース トピックスが13文字である理由

●キャッチコピーは上に(割りと重要)
iOS8ではまたマーケットが変わるようですが、現状(2014年6月時点)では、
アプリの詳細画面に行くとファーストビューで下のほうが切れてしまいます。
ユーザーに読んでもらいたい情報は上に持ってくると、確実に目に入りますね!

具体的には、ファーストビューでは縦886pxくらいの範囲までしか出ないようです。

screenshot-1

screenshot-2

これくらいの範囲で、最初に見てもらいたい情報を入れると良さ気。

●色数は絞る
これは、アプリがフラットデザインになったことに関連していそうですが
フラットなスクリーンショットが多い印象です。
また、グラデーションや効果を沢山つけた画像よりもシンプルな方が読みやすく
内容が頭に入ってきやすい気がします。

適切な配置に基づいて作ってみた!

というわけで、上記の共通点にもとづき、スクリーンショットを作成してみました!

screenshot-3

が、実はこれ今制作中の新サービスのため、まだ秘密です!
公開されましたら、追ってご報告します。

では!(^O^)/