こんにちは！最近銭湯にハマっているIT女子のちーさんです。
ちょっとしたきっかけで銭湯に通うようになり、銭湯の面白さに気づき、思わず発信したくなってしまいました。
「若者にもっと銭湯の魅力を知って欲しい！」という謎の使命感のもと、「wix」というサービスを使って、銭湯のポータルサイトを作りました。
今回の記事では、このサイトの作り方について書きたいと思います。
銭湯サイトの紹介
サイト名は、「銭湯千裕の風呂探し」です！
あの有名映画のイントネーションを拝借させていただきました。笑
現在のコンテンツは主に３つ。
- かゆいところに手がとどく銭湯のデータベース
- 銭湯の良さ、豆知識を発信するコラム
- Googleマイマップ を使った銭湯マップ
を更新中です！
データベースを集めるため、銭湯通いの日々です。
wixを選んだ理由
完全無料で使える
銭湯のサイトを作ろうとなったとき、ブログのようにただ記事をためていく構成ではなくて、ポータルサイトっぽい構成にしたかったんですね。
そうなると、はてなブログとかは合わなくて、ワードプレスで作るというのが自然だと思います。
最初は、ワードプレスで作ろうとしたのですが、ワードプレスだとどうしても「ドメイン代」と「サーバー代」がかかってしまいます。
さらに、無料テンプレートの中に理想のものが見当たらず、テンプレートを買おうとすると結構高かったりします。
wixは、無料でもおしゃれなテンプレートが揃っており、サーバー代もドメイン代もかかりません。
（独自ドメインを設定しようとするとお金がかかります）
始める時点では、お金かけてやるほどのものかどうか分からなかったので、とりあえず無料で始められるwixにしました。
コードを書かずに自由にデザインできる
ワードプレスで「ここの色を変えたい」「この図の位置を少し変えたい」とかなった場合に、CSSやHTMLをいじる必要が出てきます。
実はエンジニアではないIT女子の私は、そういうのが苦手で、できれば避けたいところです。
wixでは、色の変更や位置の変更がまるでパワーポイントかというくらい簡単にできます。
基本的に操作は、ドラッグ＆ドロップです。
こんな感じですごく直感的なので、非エンジニアにはすごくやりやすいです。
データベースが使える
「データベース」というのは、エクセルのような一覧表にデータをためていき、それをwebサイトに紐付けるということです。
図解するとこんな感じ。
銭湯サイトでは、１つ１つの銭湯の情報を記載したページがあるのですが、これは実はこのページ自体を編集して作ったのではなく、データベースの方を編集して作りました。
サイトの編集画面は、以下のようなベース構成の画面（動的ページ）があり、ひとつひとつのテキストをデータベースに紐づけています。
データベースは、こんな感じ。
この表を入力していけば、自動的にページが作られていきます。
とても楽ちんです♪
ここから、具体的にデータベースをどうサイトに落とし込んでいくかを説明します！
wixでデータベースサイトを作る方法
ステップ①コレクションを作る
まずは、表を作っていくことから始めます。
編集画面「Database」の「New Collection」で新しい表を作ることができます。
ここでコレクション名を設定するのですが、この名前がURLになり、後から変更ができないようなので、慎重に決めてください。
その表にデータベース化したい情報を入れていきます。
銭湯サイトの場合、銭湯の名前や住所、概要の説明文、写真などですね。
ステップ②コレクションのデータと紐付けるページを作る
コレクションの横メニュー「動的ページを追加」を選択します。
アイテムページかカテゴリページを選ぶ画面に飛びます。
アイテムページというのは１つのデータを１ページにまとめるためのページ、つまり銭湯の詳細ページです。
このページのことです。
カテゴリページというのはデータを一覧化するためのページです。
つまり、このページのことです。
ステップ③アイテムページ/カテゴリページ構成をデザインする
アイテムページやカテゴリページは、ステップ②を終えた時点では白紙のままなので、デザインしていく必要があります。
データベースを構成するページの型（フォーマット）を作っていくイメージです。
アイテムページの場合、まずは「銭湯名はどこに表示させよう」「どの項目をどこに並べよう」みたいな感じで作っていきます。
銭湯のアイテムページの全体構成はこんな感じになっています。
右上にあるデータベースマークは、このページはデータベースと紐づけるためのサイトですという表示です。
カテゴリページも作っていきましょう。
カテゴリページは、「リスト＆グリッド」を使うと便利です。
構成ページはこんなデザインになりました。
ステップ④データと紐づける
最後に、ひとつひとつのテキストや画像を表データと紐付ければ完成です。
アイテムページの「銭湯の名前」のテキストをクリックすると「Connected to data」が出てくるのでそこをクリックします。
すると、コレクションとどの項目と紐づけるかが選択できるので、「TOKYOSENTO」の銭湯名が書いてある項目「Title」を選択すれば紐付け完了です。
これを紐付けしたい全てのテキスト・画像でやっていきます。
データを紐づけた後に、プレビューを見てみると、このように入力したデータが紐付けされたページができています。
カテゴリページも同様に紐づけていきます。
カテゴリページは、コレクション自体を紐づけるので、アイテムページほど細かく設定しなくても大丈夫です。
これを踏まえてもう一度図解をどうぞ。
おまけ：区ごとの銭湯ページの作り方
ステップ③④で、全てのアイテムを一覧するページは作ったのですが、東京の銭湯サイトなので、区ごとに見れるページが欲しいなと思いました。
このように、中野区を選ぶと中野区の銭湯だけが出てくるページです。
このページの作り方を紹介します。
動的ページを追加のあと、カテゴリページを選択し、フィールドを追加で「区」を選択します。
そうすると、TOKYOSENTOコレクションのなかの「区」ごとのページを作ることができます。
これができたら、ステップ③④と同様に、リスト＆グリッドを使ってデータを紐づけていきます。
wixは、機能は充実していてとても良いのですが、唯一の難点が公式のヘルプページがわかりづらいことです。
というか、ほとんど英語です（泣）。
使っている人口が少ないからか、日本語で解説しているサイトも少なく、今回なんとか習得したことを記事にしてみました。
wixでデータベースサイトを作ってみたい人は参考にしてみてください。
この記事だけではなく、実際のサイト「銭湯千裕の風呂探し」もいじりながら見ていくとよりわかりやすいと思います！