Think Big Act Local

iPhone開発を軸にブレブレの記事を書いていきます。

KeynoteでAppStoreのスクリーンショットをつくる

最近 Go Memo という個人開発のアプリ をリリースしたのですが、AppStoreに載せるスクリーンショットKeynoteで作ってみました。手軽にできて便利だったのでやり方を紹介してみます。

最終的にはこんな感じのが出来上がりました:

f:id:himaratsu:20140816001415j:plain f:id:himaratsu:20140816140112j:plain

Go Memo を AppStore で見る

それっぽいのが出来てる気がします。

前提

AppStoreにアプリを申請する時、スクリーンショットが必要です。
アプリ名のすぐ下に表示されるので、どんなアプリか?を知ってもらうためにスクショは非常に重要です。初期の頃は単純にアプリの各画面のキャプチャが貼られていました。

f:id:himaratsu:20140816033056j:plain

しかし、この部分には、

  • 640x1136(4inchの画面サイズ)
  • 640x960(3.5inchの画面サイズ)

であればどんな画像でも入れられます。サービスの魅力がより伝わるように、現在では以下のように様々な彩りが施されたスクショはが載せられることが多くなってきました。

f:id:himaratsu:20140816002433j:plain f:id:himaratsu:20140816002418j:plain

こういった画像は Photoshop などがあれば簡単に作れるのかもしれませんが、自分はソフトを持っていません。新しいツールを使うのも、学習するのが大変です。

そこで、Keynoteを使ってスクリーンショットを作ってみました。

Keynoteを使ってスクリーンショットを作る

Keynoteを起動し、スライドのサイズを 640x1136 に変更します。

f:id:himaratsu:20140816002723p:plain

オブジェクトやiPhoneのフレーム素材画像を配置して、レイアウトします。 マスクやインスタントアルファを使えば簡単に作ることができます。

マスク・インスタントアルファの使い方はこちらのスライドが分かりやすいです。

最終的には以下のように出来上がります。

f:id:himaratsu:20140816003105p:plain

これを ファイル > 書き出す > イメージ からpng形式で書き出せば完成です。

3.5inchサイズの準備も簡単

640x960 サイズの用意も簡単です。
3.5インチの端末でスクリーンショットをわざわざ撮る必要はなく、Keynoteでスライドのサイズにあわせて文字サイズや画像の配置を調整するだけ。申請作業の途中に「あ、3.5インチのスクショ撮らなきゃ…」とならなくて楽ですね。

まとめ

デザイナーさんに作ってもらったり、自分でPhotoshopを使える場合は必要ないと思いますが、自分は一人で作ってサッと出したい場合があるので良いなと思いました。 使い慣れたツールであるKeynoteで作れるというのも良いですね。

最近はKeynoteでプロトタイピングを作る みたいな話も出てきてますし、Keynote好きの自分はちょっと嬉しいです。

Keynoteでスクショ作り、良ければ試してみてください◎

<宣伝>

今回の題材となった Go Memo のダウンロードはこちらから:

Special Thanks

Keynoteスクリーンショットを作る発想と方法は id:shoma2da くんに教えてもらいました。ありがとうございます!

Keynoteの購入はこちらから

関連書籍

ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする

ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする

広告を非表示にする