KICOOYA MP3 Player for Playdate

はじめに

　以前所属していた会社の同僚が Playdate プラットフォーム上で何やら MP3プレーヤーなる物を作っていました。友達であると同時に希少な日本人開発者です。これはサポートしなきゃと、軽い気持ちでアートワークの提供を開始しました。すると、パニックが公式ストア「Catalog」をオープン、あれよあれよとそこに並ぶ運びとなりました。それならばと時間を作って本格的に開発に参加することにしたのです。

ロゴデザイン

　カセットテープを量産するための架空のサプライヤー「株式会社キコーヤ」を設立し、そのロゴをデザインしました。ロゴはキコーヤの頭文字「K」と音の波紋を組み合わせた至極単純なものです。手垢の付いてない素直なデザインで二人とも一目で気に入りました。

　配色に関しては１ビット由来の白と黒は初めから念頭にありました。それに加え、他のプロダクトと差別化するブリリアントな色が欲しかったので、公式ストアを見渡してあまり使われていない色相を探しました。一通り眺め終わった後、白と黒に合う暗めの青がピッキーーンっとニュータイプを思い起こすエフェクトと共に飛来し試してみることにしました。想像した通りこの三つの相互補完はアメイジングで製品をとてもクールに見せてくれるだろう、と一日中高笑いが止まりませんでした。

*キコーヤという製品名は僕らが一緒に仕事をしていた大阪の方言に由来します。英語の発音ではどうやらキクゥーヤァとメチャクチャかっこよく発音される模様。

**使用ソフトウェアは、これまた別の友人が解説本を作っている Affinity Designer を使いました。買い切りなのでサブスクが苦手な方に打って付けのベクターグラフィックアプリケーションです。

フォント

　未だ多言語対応を果たしていない Playdate でも日本語フォントを組み込めば日本語を表示できます。日本人グループで作るなら日本語対応は是非とも実現したい正に最優先の課題でした。OSが多言語対応予定であるとは言え、個々のゲームやソフトウェアが日本語対応するかどうかは、各々のデベロッパー次第なのです。

　ネットを探していると、ある一つのフォントが目に付きました。LINE Seed JP です。規約を見るとライセンス関係は問題なさそうなので意気揚々ズバッと提案します。いざ組み込んでみると、極小のサイズ、且つ１ビットでもフォントが持つジオメトリな形は健在で画面を見る度にこれ以外は考えられないと心酔していきました。LINE カンパニーの皆さん、素敵なフォントをあざます！

メインメニュー

　セブイレのカフェマシンと同じシャープ製のくっきりディスプレイを採用しているとは言え、Playdate の画面サイズはそれほど大きくありません。兎に角シンプルな構成で視認性を担保しようと考えました。いつも通り Photoshop でいくつもエゴ丸出しの画面を作り、ああでもないこうでもないと彷徨い始めます。それが時間の経過と共にあるべき姿に変容して洗練されて行く様を楽しむのです。

　メインメニューはカセットテープの箱をモチーフにデザインされていて、再生時に表示されるカセットテープのフェイスとの関連性を持たせました。これにはユーザも大変満足だろうという勝手な妄想が止められずこのまま突き進むことにしました。

　この画面では音楽が鳴っていることを想定して余計なシステム音の類は一切出しません。Bボタンを押すと設定画面が出てきて、オプションやイコライザ、、ファイルブラウザなどにアクセスできます。再生中の曲がある場合はこのメニューの一番上に表示され、すぐに再生画面に戻ることができます。

フェイス

　設計の根幹にあるカセットテープのアイデアは Playdate のために作られたのではないかと勘違いするくらいハードウェアに超絶馴染んでいます。このアイデアが降ってきた瞬間、今まで気に入っていた最愛のアイデアをいとも簡単に投げ捨て、亡き者にしました。これが社会の厳しい現実なのです。

　フェイスのグラフィックは Photoshop で描きます。それをアニメーションさせるパーツ毎に書き出し After Effects に持っていきます。今回はテープの部分を回転させるだけなのでサクッと回転と時間軸を設定して、アニメーションを連番のPNGで書き出します。

　開発の最終段階にあっても曲の再生とテープの回転は完璧な関連付けがなされていませんでした。それが二人共どうにも不快で堪らなく、僕らの敬愛するドラクエの「序曲」が止まったらテープのアニメーションも連動して止まらなきゃ嘘だろ！と叫び二人の連帯感はMAX、エンジニアは「一人で」過酷な作業に取り掛かります。結果、テープは至極当たり前に止まるようになったのです。

　テープの回転は右と左で微妙に速度が違うこともこの機会に知りました。デッドラインが迫りどうしてだろうと考える時間もなかったので、全て受け入れそのまま再現しました。いつか図書館で調べてみたいと思っています。また、A面とB面の切替のことはずっと頭の片隅にあってどうしたものかと悩んだこともありました。ですが、終わってみれば上手く無かった事に出来たようで自分の忘れる才能と適当さに感謝しています。

アイコンデザイン

　白黒のアイコンを作るのは初めてでしたが碌にスケッチもせず Photoshop で自由気儘にトラックパッドを連打してたら、案の定それっぽい物が出来上がりました。太古の遺産 MacOS やスーザン・ケアがデザインした可愛らしいアイコンを参考に、鼻歌混じりにリラックスしてデザインしたのが良かったのかもしれません。

　アイコンは Photoshop の選択範囲やシェイプ、階調化、閾値などを駆使して描いています。フルカラーのように気の利いた中間色が使えないので綺麗に見える配列を探しました。白黒のアイコンを眺めていると、昔触ったことがある ResEdit を思い出して懐かしい気持ちになります。