App Store のスクリーンショットを、9言語ぶん Remotion で書き出した

公開日

Kosshi はこのあいだ日本語を足して 9 言語にしたのですが、そうすると、ストアのスクリーンショットも 9 言語ぶん要ることになります。前回はアプリの中身の話でしたが、今度はその外側、ストアページにも同じ作業が回ってきました。

しかも iPhone・iPad・Mac の 3 つぶんがそれぞれ要るので、9 × 3 で、1 枚あたりのカット数をかけると、ぜんぶで百数十枚になる。

手で 1 枚ずつ作っても、もちろん作れます。実際、世の中の多くのアプリはそうやって作っているはずです。ただ、まあ単純に、かなり時間のかかる作業です。文言を 1 つ直すたびに、9 言語 × 3 デバイスのファイルを開いて直して書き出して……となると、ちょっとやる気が削がれる。

前回、動画編集を Remotion でやってみたという話を書いたのですが、その流れで、じゃあストア画像も同じノリでコードから出せないか、と思って試してみました。これが、思っていたよりちゃんとハマったので、その話を書きます。

そもそも、見つけてもらえていなかった

少し背景を書いておくと、これをやろうと思ったのは、Kosshi の海外からのダウンロードがあまりに少なかったからです。

なんでだろうと思って調べてみたら、けっこう根本的でした。各国の App Store で関連しそうな言葉で検索しても、Kosshi はほとんど出てこない。おまけに当時は、こちらの設定ミスで、サイトが Google 検索にすら出ていない状態でした。そのうえ、国内では X や note でぽつぽつ投稿しているものの、海外向けには何ひとつ宣伝らしいことをしていません。これでは、ダウンロードされようがないわけです。

ただ、こんな状態でも、インストールしてくれた人はちゃんといます。たぶん、App Store で部分的に引っかかる検索ワードがあって、そこから見つけてくれたんだと思います。数としては多くないはずで、それでも来てくれたのが、なんだかありがたい。

海外向けに動けていないのは、売り込みが苦手なのと、どういう経路で発信するのがいいのか、いまだに考えあぐねているからです。今週末に Product Hunt に出してみようとは思っているのですが、それ以外の宣伝で思いつくような方法は、どうにも気が引ける。ただ、たどり着いてくれた人に、その人の言語でちゃんと中身が伝わるくらいの準備は、しておきたい。今回のストア画像も、そういう「来てくれた人向けの準備」のつもりで作りました。

ただ並べるだけにしない

そのつもりで、今回は画像の中身も作り直しました。

これまでの Kosshi のストア画像は、正直、アプリの画面をとりあえず並べただけのものに近かったです。スクショは載っているけれど、それを見て「自分ならどう使うか」が浮かぶかというと、微妙だった。

今回はちょっと想像力を働かせてみました。このアプリを使う人が、どんな場面で何をするか。それを思い浮かべながら、1 枚ごとに 1 つの使い方が伝わるように作りました。アウトライナーで書く、Markdown で見た目を整える、タスクを管理する、画像やファイルを貼る、複数のデバイスで同期する。順に見ていくと、ひととおりの使い方がなんとなく分かる。ただのスクリーンショット集というより、ちょっとした使い方のデモに近いです。

日本語版のストア画像を 5 枚並べたもの。アウトライナーで書く・Markdown で整える・タスク管理・画像やファイル・デバイス間の同期、と 1 枚ごとに 1 つの使い方を見せている

背景にも、ちょっと迷いました。最初はカラフルなものもいくつか試したのですが、どうもしっくりこない。Kosshi 自体が、装飾のほとんどない素っ気ないアプリなので、まわりだけ派手にすると浮いてしまう。結局、罫線やドットの入ったノートみたいな背景に落ち着きました。文章を書くためのアプリだ、というのが、それとなく伝わるといいなと思っています。

Remotion で画像を作る

Remotion は、コードを書くと、それがそのまま動画になって出てくる、という変わったツールです。前回の記事はその動画の話でした。

そして Remotion は、動画だけじゃなくて、動画の 1 コマだけを 1 枚の画像として書き出すこともできます。

App Store のスクリーンショットって、要するに「アプリの画面をいい感じにはめ込んだ 1 枚の画像」です。背景を敷いて、デバイスの枠を置いて、その上にキャッチコピーを乗せる。これなら、動画と同じ要領でコードから組み立てられる、と思いました。

ちなみに、App Store のスクリーンショットを作るための専用ツールやサービスは、ちゃんと世の中にあります。本来ならそういうものを使うのが素直だと思います。

それでも Remotion でやってみたのは、動画のためにある種の自家製のシステムみたいなものができつつあって、デバイスの枠や、Kosshi らしい背景や見出しのデザインも、そのまま使い回せるだろう、と思ったからです。

実際にやってみると、使い回せたものは思ったより少なくて、結局ほとんど一から作ることになりました。それでも、作り方そのものは「プログラミングで画像を作る」形で、動画とまったく同じです。Remotion が画像作りに一番向いているから選んだ、というよりは、動画で慣れたやり方をそのまま持ち込んだ、という感じです。

実際に作成したのは、こういう画像です。

同じ 1 カットを 9 言語ぶん書き出した iPhone のスクリーンショット。背景の模様・上部の見出し・デバイスの枠まで含めて 1 枚の画像をコードで組んでいる

背景の模様も、上の見出しも、iPhone の枠も、ぜんぶコードで描いています。中にはめ込んでいるアプリ画面だけを差し替えて、言語ぶんを書き出していく。

iPhone だけでなく、iPad と Mac のぶんも、同じやり方で書き出します。必要なサイズはそれぞれ違うけれど、作り方は変わらない。

同じ Markdown のカットを iPhone・iPad・Mac の 3 デバイスぶん書き出したもの。画面サイズが違っても同じやり方で生成している

数が増えるほど、楽になる

正直、最初の 1 回はそれなりに面倒です。設計図を組んで、9 言語ぶんのコピーを用意して、デバイスごとにサイズを合わせて、と立ち上げには普通に手間がかかる。出てきたものを見てはデザインを直し、また書き出して、と何度も行き来しました。1 枚だけ作るなら、Figma か何かで手で並べたほうが、たぶん早いです。

ただ、この作り方がいちばん効くのは、今回でいう「言語ちがい」のところです。デバイスごとのレイアウトは、それぞれ用意する必要がありました。ただ、1 つ型を作ってしまえば、そこから 9 言語に増やすのは、ほぼ中の言葉を差し替えるだけ。あとは、デザインも何度か直したのですが、一か所いじれば、自動で全部に反映されます。重いのは最初に形を決めるところまでで、言語の数が増えても手間はほとんど変わりません。

前回の動画のときに、一度仕組みにすれば次が楽になる、と書きました。今回のストア画像は、それを「スケールさせるほど楽になる」という形で実感した一例でした。

関連記事

記事の更新があった場合のみ、週に1度まとめてメールでお知らせします。

いつでも配信解除できます。

← すべての記事