この世界に生まれた人間は、だれでも二つのものをもらっていると思います。それは、「感情」と「考え」です。人はこの二つを使いながら、自分の人生を生きています。この物語の主人公であるTraveler(旅人)も、最初はその二つを持っていました。しかし、ある理由でTravelerはその一つをなくしてしまいました。それは「感情」です。
感情をなくしたTravelerは、世界を見るとき、すべてを「正しい」か「まちがい」かで考えるようになりました。0と1、善と悪、そして白と黒。世界はとても単純に見えるようになりました。でもある時Travelerは気づきます。自分の中から、何か大切なものがなくなっていることに。そして、それをもう一度さがしたいと思うようになりました。
基本的に、Travelerの物語は、私自身の人生の小さな一部です。2025年の終わりに、私は一つの旅を終えました。その旅の中で、本当にたくさんのものをもらいました。でも、その時の私は、まだそれらをうまく整理できていませんでした。そして新しい年が始まったころ、私は少しずつ自分の中にある思い出や気持ちを整理し始めました。すると、前よりももっとあたたかく、その一つ一つを感じられるようになりました。
最初は、この物語をだれかに見せるつもりはありませんでした。でも、大学の先輩がこのProConの情報を教えてくれました。その時、私はもう一度考えました。「この小さなあたたかさを、ProConを通して少しだけ分けてもいいのではないか」そう思いました。私はいつも、自分の気持ちを話したり、文章に書いたりして伝えてきました。でも、このようにアプリとして表現するのは、今回が初めてです。まだ上手ではないかもしれません。それでも、この物語を通して、みなさんにも少しだけあたたかさを感じてもらえたらうれしいです^^。
このアプリでは、Travelerといっしょに「色のない世界」を歩きます。歌詞に合わせて動いたり、キャラクターと話したり、思い出のかけらを集めたりします。
この世界には、3つの大切な場所があります。
-
上のレイヤー
空の近くを飛ぶ場所です。ここでは、思い出のオブジェクトを集めることができます。
-
まん中のレイヤー
歌詞が流れる場所です。ここで歌詞と共鳴します。
-
下のレイヤー
道を歩く場所です。ここでは、大切なキャラクターたちと出会うことができます。
Travelerは、上に行ったり、下に行ったりしながら、世界の中にある大切なものを探していきます。
Travelerを動かすには、次のキーを使います。
- ↑/W：上に移動する
- ↓/S：下に移動する
画面の中にあるDパッドを使って動くこともできます。スマホで遊ぶ時は、このボタンを使うことができます。
歌詞が画面の線に近づいた時、Spacebarを長く押してください。うまく押すと、歌詞と共鳴することができます。共鳴の結果には、いくつかの種類があります。
- Resonant
- Warm
- Faint
- Lost
タイミングがよいほど、たくさんのかけらを集めることができます。これは、Travelerがもう一度「感情」を思い出すための大切な行動です。
この世界には、たくさんの「思い出のかけら」があります。かけらは、次の方法で集めることができます。
- 歌詞と共鳴する
- 思い出のオブジェクトを集める
- キャラクターと出会って話す
かけらを集めると、世界に少しずつ色が戻っていきます。最初は白と黒に見える世界も、Travelerの心が動くことで、少しずつ変わっていきます。
下のレイヤーを歩いていると、キャラクターたちに出会うことがあります。キャラクターたちは、それぞれ違う思い出や言葉を持っています。キャラクターとの会話は、Travelerにとってとても大切です。なぜなら、その言葉の中には、なくした感情を思い出すためのヒントがあるからです。
上のレイヤーには、思い出のオブジェクトが流れてきます。Travelerが上のレイヤーにいる時、そのオブジェクトを集めることができます。オブジェクトは、旅の中で残った小さな記憶のようなものです。一つ一つは小さいですが、集めることで大切な意味を持つようになります。
たくさんのかけらを集めると、特別なエンディングを見ることができるかもしれません。くわしいことは、ここでは書きません。ぜひ、自分の手で探してみてください。
このアプリは、PC と スマホ の両方で遊ぶことができます。スマホでは、画面のボタンを使って移動したり、操作したりできます。そのため、キーボードがなくても遊ぶことができます。でも、私は PCで遊ぶことをおすすめします。PCでは、画面が広いので世界が見やすくなります。また、アニメーションや歌詞の動きも、より分かりやすく感じられます。キーボードで操作できるので、歌詞との共鳴もしやすいと思います。一番よい体験をしたい場合は、ぜひPCで遊んでみてください。
このアプリは、次の二つの言語に対応しています。
- 日本語
- 英語
ゲームの中には、言語を切りかえるボタンがあります。日本語で遊ぶことも、英語で遊ぶこともできます。自分が読みやすい言語を選んで、物語を楽しんでください。
このプロジェクトはBunとViteを使用して構築されています。ローカル環境で開発とビルドを行う場合は、以下の手順に従ってください。
ターミナルでプロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。
bun installローカルでアプリを動かして動作確認を行うには、以下のコマンドを実行します。
bun run dev実行後、ターミナルに表示されるローカルホストのURL（例: http://localhost:5173/colorless-world）にブラウザからアクセスしてください。
配布用と公開用の最適化されたファイルを生成するには、以下のコマンドを実行します。
bun run build --minifyビルドが完了すると、distディレクトリにファイルが出力されます。
ビルドしたアプリがローカル環境で正しく動作するかを確認したい場合は、以下のコマンドを実行します。
bun run previewTextAlive App APIの機能（楽曲の読み込みなど）をローカル環境で完全に利用するには、プロジェクトのルートに.envファイルを作成し、TextAliveから発行されたAPIトークンを設定してください。
VITE_TEXTALIVE_APP_TOKEN=あなたのトークンをここに貼り付けこのアプリは、主に次の技術を使って作りました。
- HTML
- CSS
- TypeScript
- Vite
- TextAlive App API
TextAlive App API を使って、楽曲の歌詞やタイミングをアプリの中で使っています。そのおかげで、歌詞に合わせたインタラクションを作ることができました。このアプリは、ブラウザで動くWebアプリです。特別なインストールは必要ありません。
このアプリでは、たくさんのすてきな作品を使わせていただきました。本当にありがとうございます。
Travelerのいろいろな動きに関係するアートを使わせていただきました。歩く、飛ぶ、すわる、抱きしめるなどの動きが、この世界の空気を作ってくれました。
- @__mp40さん
物語に出てくるキャラクターたちのアートを使わせていただきました。それぞれのキャラクターが、この世界に大切な色をくれています。
アプリのカーソルに関係するアートを使わせていただきました。小さな部分ですが、アプリの雰囲気をより楽しくしてくれました。
歌詞と音楽に合わせた体験を作るために使わせていただきました。このアプリの大切な部分を支えてくれています。
このアプリは、私一人だけでは作れませんでした。すてきな作品、技術、そしてこのProConの機会があったからこそ、形にすることができました。本当にありがとうございます。