Wix Codeでサイトを一部リニューアルしてわかった、Wixデータベースの良い点・困る点

Wix Codeとは
無料でホームページが作れるオンラインサービス「Wix」に
昨年12月に加わった新機能のこと。

私が個人的に運営しているフランス額装の教室&情報サイト
Encadrement-un (アンカードルモン・アン)」も
Wixを使っています。

掲載させていただく教室の数が
少しずつ増えてきてすごくうれしいのだけど
そのため1ページで収まらなくなって
2ページに分けざるを得なくなったり
1ページがやたら長くなってしまったりと
使い勝手がよくないのが気になっていました。

そこで、Wix Codeを使ってデータベースの作成と
データベースとテンプレートを連携させたページ自動生成に
トライしてみました。

ざっくり説明すると、まずこういう感じで
教室のデータベースを作ります。

Wix Code データベース










次に、新しいページを作って
下のように教室ページのデザインを決めます。

クリックすると拡大表示されますので見てみてください。
左上の見出しに当たる部分が「ヘッディング4」となっているように
写真もテキストも内容は全て仮です。
配置や大きさ、文字のフォントや色だけを決めます。

Wix Code 動的ページのデザイン

















右側のテキスト部分は、5つのブロックになっていて
それぞれデータベースから別の情報を読み込むイメージで作りました。

デザインが完成したら、あとはデータベースと連携させれば
自動的にデータベースから情報を読み込んで
下のようなページが作成されるというわけです。

Wix Code 動的ページ
















Wix Codeなかなかやるな、と思ったのは
文字数が違う場合、自動的に配置が調整されるという点。

たとえば、文字数が少ない教室のページはこのようになります。

Wix Code 動的ページ

















5つのブロックの間に変に空きができることなく
ページが作られてるのはスゴイ!

そして、これらの教室情報ページに行く前の一覧リストページも
同様にデザインだけを決めてデータベースと連動させれば
いちいち情報を打ち込まなくてもリストが出来上がります。

Wix Code 動的リストページ
















※追記
リニューアル翌日に、一覧リストページを
一度により多くの情報が見れるように
さらに以下に変更しました。

Wix Code 動的リストページ2
















ただ、Wix Codeはまだベータ版なのでバグもあります。
その1つが、一覧リストの表示順を調整できないこと。
データベースの順番がそのまま表示されてしまうのです。

データベースに「並び順を変更」という項目もあるのですが
変更してもリストにそれが反映されず
データベースを一度閉じてまた開くと
並び順が勝手に元に戻ってしまいます。

これが改善されると、より使い勝手がよくなるんだけどなあ。
改善されるのを待ちたいと思います。

※追記
Wixサポートに確認した結果
一覧リスト表示順を変更する方法がわかりました。
バグではありませんでした。
詳しくは下記記事を参照ください。

「訂正:WixCodeの一覧リストは並び順変更もちゃんとできます!」


Wix Codeの詳しい使い方は、たくさんのブログやサイトで紹介されています。
私がわかりやすいと思って参考にさせてもらったのは以下の記事です。

無料で大規模Webサイトが作れる!Wixの新機能「Wix Code」を紹介 【データベース作成編】

Webデータベースから自動でページ作成!Wixの新機能「Wix Code」を紹介【動的ページ作成編】

仕事の合間や週末にチマチマやったので、少し時間がかかりましたが
これだけに集中できたら
webデザイナーではない私でも2〜3日で完成できる感じ。
思っていたより簡単です。

Wix Codeを使って実際にリニューアルしたページはこちらです。
Encadrement-un 教室情報

それにしてもここまで無料でできるとは
Wix、本当にイケるサービスだと思います。