同人サークルが自前でウェブサイトを作る時に考えたこと

こんにちは　デバッグモンキーズのゾンビ担当、MONDYです。

デバッグモンキーズは同人ボードゲームを作る団体です。

突然ですが、デバッグモンキーズのウェブサイトは、テンプレートなどを使わず、自前でウェブサイトを作成しています。
是非一度お越しください！

https://debugmonkeys.netlify.app/

このウェブサイトは普段はウェブ屋さんをしているMONDYが自作しました。

今日はいつものボドゲ談義とは趣向を変えて、このサイトをどのような思想をもとに作っていったかをお話ししようと思います。

サイトの目的を決める

まずウェブサイトを作るとき、最初にサイトの目的を定めます。

「なぜデバッグモンキーズ自前のウェブサイトが欲しいのか？」

最初にウェブサイトを作りたいという話題があがったのは、
デバッグモンキーズがこれまでに作った作品のアーカイブを貯めておける場所が欲しいということでした。

自分たちの作る同人ボードゲームは基本的に少ロット生産で、完売してしまったゲームも少なくありません。
それらのゲームの記録を残す場所が欲しかったのです。

そこで、作成するウェブサイトは作品第一のサイトにすることを決定しました。
サークルの説明とかも省いて、とにかく作品ドーン！というイメージです。

ファーストビューを決める

基本的にウェブサイトというものは、コンテンツが下に行くほど次ページへの遷移率は低くなります。

ほとんどの人はスクロールをせずにページを離れてしまうのです。

ページを読み込んだ瞬間に表示される内容はファーストビューと呼ばれ、最も多くのユーザーが見る部分であり、ウェブサイトの最も大切な部分になります。

このウェブサイトは作品第一なので、ファーストビューも作品がいきなり目に入ってくるように設計しました。

サイトの運用方法を決める

ウェブサイトの運用方法はいろんな方法がります。
ウェブサイト更新はできるだけ手間をかけたくないので、運用方法は慎重に考えなければいけません。

このサイトは作品第一であるため、軸となるのはゲームの情報です。

これを踏まえて、このサイトでは1つのファイルにゲームに関する情報をすべて集約し、すべてのページをこのファイルだけで管理するということを行っています。

jsonというファイル形式はウェブ上でデータを管理しやすいので、このファイルを軸にウェブサイト設計を行います。
このファイルはgame.jsonと名付けます。

game.jsonには、各ゲームのタイトル、リード文、記事の中身なども含めて、すべての情報をまとめており、そこから情報をひっぱっていろんなページを生成させます。
こうすることで、これから作品が増えても、いろんなページのあちらこちらを触ることなく、一つのファイルを修正するだけですべてのページの修正が完結するという、管理のしやすい状況が出来上がりました。

実際に運用を始めて1年ほどたちますが、更新があっても迷わずに一瞬で修正できるので、気が楽です。
また、こっちのページの情報修正したのにあっちのページは古い情報のままだ！というような修正漏れも発生しません。

ちなみに技術的な話をすると、言語はVueを使っています。
最初は勉強がてら使ってみるかという感じだったんですが、滑らかなページ遷移が簡単にできたり、jsonの情報にもとづいた各要素の出し分けも簡単で、今回のサイトでは大正解でした。

あとは、がんばって作るのみです。

なぜ自前でつくったのか？

さて、ここまでサイト作成までの流れを説明してきました。

では、なぜ今回自前でウェブサイトを作ったのか？
テンプレート探せばいいのいっぱいあるし、ノーコードでウェブサイト全然作れるのでは？

その答えは、サークルメンバーにウェブ屋さんがいたからです。

ぶっちゃけ１からサイト作る必要性はないと思います。

ただ同人サークルというものは、メンバーは普段の仕事もみんなバラバラで、得意な分野もバラバラで、だからこそできることも広いというのが強みなんじゃないかなと思っています。

無理やり結論を書いてみたところで、締めようと思います。

よかったら、来週ゲームマーケットで販売する作品「Bana-na」もチェックしてみてください！
とても面白いゲームに仕上がってます！

Bana-na｜デバッグモンキーズ公式サイト