この公式サイトができるまで

オオバです。

今回はゲーム本体の話をひと休みして、いま読んでいただいているこのサイトの話をします。

8月なかばに開いてから、3週間ほどで見た目がずいぶん変わりました。

その道のりをまとめておきます。

最初の形

このサイトは、開発ログを1枚書き足すだけで更新できる形にしたくて作りました。

markdownのファイルを1つ置くと、サイトが自動で建て直ります。

毎週書くと決めたので、書く以外の手間をなるべく減らしておきたかったんです。

最初のコンセプトは「夜の道具屋の店内」でした。

深い藍の背景に、ランプの琥珀色を主役として置く。

ドット絵のアイコンは、12×12のマス目を自分で打って描いていました。

温度が合っていなかった

公式Xのヘッダー画像と、このサイトを並べてみたときのことです。

Xのほうは金色の市場で、暖かい茶色のキービジュアル。

サイトのほうは藍紫の夜。

同じゲームなのに、温度が真逆でした。

そこで背景の色をまるごと、木と琥珀の暖色に差し替えました。

コンセプトも「ランプの灯る道具屋の店内」に言い直しています。

Xから来た人が、店の中にそのまま入ってこられるように。

ドット絵を、ゲームの実素材に

色を合わせると、今度はアイコンが気になり出しました。

サイト用に自分で打ったドット絵が、ゲーム本体のドット絵と明らかに違う顔をしていたんです。

なので思い切って全部捨てました。

いま並んでいるのは、ゲームの中で実際に使っている道具や家具、ちびキャラたちです。

トップの「どうぐ棚」は、枝から剣、剣から宝剣へと育っていく列をそのまま棚に置いています。

重ねるほど良い道具になる、というこのゲームの手ざわりを、説明せずに棚で見せたかった。

ちびキャラはヒーローに3人、見出しの横に1人ずつ。

ぴょこぴょこ跳ねているのは、ゲームの中の歩きかたに寄せたものです。

タイトルの題字も、ゲームの紋章ロゴに置き換えました。

背景には会話シーンで使っている店内の絵を敷いています。

スクリーンショットを5枚

実機の画面も5枚、載せるようになりました。

マージの盤面、店の中、クエスト、会話シーンが2つ。

ここでひとつ、小さな不具合がありました。

並べたスクショの高さが、1枚ごとに数ピクセルずつ違う。

原因は元画像の幅が3ピクセルほどばらついていたことでした。

画像そのものを揃え直す手もあったのですが、今後スクショを足すたびに同じ作業が要るのでやめました。

表示側で比率を9:16に固定して、どんな実寸の画像を置いても揃うようにしています。

事前登録のフォーム

いちばん新しい変更が、ページの下にある事前登録です。

メールアドレスを入れておくと、お店が開く日にお知らせが届きます。

このフォーム、最初のサイトには置いていませんでした。

送り先が決まっていないうちは、動かないフォームを飾りで置きたくなかったからです。

それまでの受け皿は公式Xのフォローでした。

送り先が決まったので、今回ようやく本物のフォームに切り替えています。

登録したあとのページと、すでに登録済みだったときのページも用意しました。

これから

サイトはこれでひと区切りです。

来週からは、またゲーム本体の話に戻ります。

事前登録は、ページのいちばん下から。

お店が開く日を、いちばん先にお知らせします。