最初のきっかけは、「自分で作ったゲームを紹介するブログを作りたい」ということでした。ゲームを置くだけでなく、どんな作品なのかを伝えて、気になった人がそのまま遊べる場所にしたい。そこから、今のFresh Bananappleのサイトづくりが始まりました。
デザインを考え、ページをつなぎ、画像や説明を足していく。今回は、そんなサイトの成長をまとめて振り返ります。
まずは、明るいデザインから
はじめはHTML・Tailwind CSS・JSONを使って、2つのデザイン案を考えるところから。そこから明るい雰囲気の方向を選び、WordPressのテーマにしていきました。
最初から全部が決まっていたわけではありません。ページを開いて最初に見えるファーストビューも、見直して作り直しています。見た目を一度作って終わりではなく、実際に見ながら整えてきたサイトです。
「ゲームにはどうやって飛ぶ？」から、入口を整理
ゲームを紹介していても、遊ぶ場所がわかりにくければ、そこで迷ってしまいます。そこで、すぐに遊びたい人と、先に内容を知りたい人の入口を分けました。
- サムネイルを押すと、ゲームへ。ゲーム本編は別タブで開きます。
- 「紹介記事を読む」を押すと、説明へ。作品の内容や操作方法を確認できます。
ゲームを開いても、元の一覧や説明はそのまま。制作秘話への案内をゲームの横に増やすのではなく、まず「遊ぶ」と「読む」をわかりやすくする形に落ち着きました。
9つのゲームに、それぞれの顔と説明を
次に整えたのが、ゲームごとのサムネイルです。用意したイラストをそれぞれの作品にはめ込み、横長の16:9で統一しました。スライム、将棋の駒、麻雀牌、ネオンの鬼ごっこ。画像が並ぶことで、作品ごとの違いも見つけやすいゲーム棚になりました。
ただし、絵だけでは遊び方までは伝わりません。紹介ページには、何をするゲームなのか、最初にどのボタンを押すのか、どう操作するのかを追加しました。SLIME GENESISの公開もあり、9つの作品を見つけて、説明を読んで、遊べる形がそろってきました。
ゲームだけでなく、制作の記録も残す場所に
トップページの「制作机のとなりから。」には、制作日誌を掲載しました。ゲーム棚の紹介や、遊ぶ入口と読む入口を分けた話、SLIME GENESISの公開についての記事などです。
作品そのものを紹介するページと、更新や工夫を記録するページ。それぞれの役割を分けることで、遊ぶためのサイトに、作っている途中のことを読める場所も加わりました。
小さなマークと、YouTubeへの新しい入口
ブラウザーのタブには、バナナップルのマークをファビコンとして設定しました。小さな部分ですが、タブからもこのサイトを見分けられる目印です。表示するサイズに合わせた画像を用意し、透過を保ったまま使っています。
そして、新しく開設したYouTubeチャンネル「なんでも棒の部屋」への案内も追加しました。最新ゲームの下に、短い紹介と「YouTubeで見る」ボタンを置いています。動画は埋め込まず、チャンネルへ別タブで移動する、シンプルな入口にしました。
少しずつ、見つけやすく、遊びやすく
ここまでの変化は、見た目を変えることだけではありませんでした。「どこを押したら遊べる？」「遊び方はどこにある？」「どんな作品が並んでいる？」という、訪れた人の最初の一歩を整えてきた記録でもあります。
デザイン案から始まったサイトは、ゲームを遊ぶ場所、紹介記事を読む場所、制作の記録を残す場所へと広がってきました。この制作日記も、その途中のひとつの記録です。
気になる作品があれば、まずはゲーム棚から。説明を読んでからでも、そのまま画像を押して遊んでも大丈夫です。