.png)
Wix studioで制作したホームページ事例をご紹介！【弊社作成事例も転載】
- 2月25日
- 読了時間: 6分
更新日：3月12日
Web Almanacの分析によると、Wixは主要CMSの中でGoogle Lighthouse（SEO）スコアの中央値100点を達成しているCMS として評価されています。
これはデザイン性の評価ではなく、CMSが生成するページ構造や技術的SEO品質を測定した指標です。
つまり、情報を整理して伝えることに非常に優れており、見やすいだけでなく、検索にも表示されやすいということを表します。
本記事では、ホームページ制作事例というテーマのもと、wixstudioでも特に便利な機能をご紹介いたします！
今回は、弊社で作成したサイト構造を参考にしてご紹介いたします。
その上で、Wix Studioで重要となる
リピーター
CMSの動的ページ（Itemページ）
という2つの機能に絞って解説します。
Wix Studioの全体像
Wix が提供するWix Studioは、構造化されたWebサイトを効率的に設計・管理できる制作プラットフォームです。
特徴は以下の通りです。
レイアウトとデータを分離できる
CMSで情報を一元管理できる
一覧ページと詳細ページを自動連携できる
特に企業サイトでは、
情報更新が発生する
同じ形式の情報が複数存在する
一覧と詳細の整合性が必要
といった構造的課題があります。
これを解決するのが、リピーターと動的ページです。
Wix StudioのCMS概要
構造化データをもとに一覧と詳細を自動生成可能なCMS。 エクセルのようにデータを保存し、そのデータはデザインされたページに自動的に反映されるというもの。
今回解説する機能とは何か
今回紹介するのは、以下の2つの機能です。
① リピーター
同じレイアウトを複数データに対して繰り返し表示する機能。
② CMSの動的ページ（Itemページ）
1つの雛形となるページから、各データごとの詳細ページを自動生成する仕組み。
この2つは必ずセットで考えるべき機能です。
一覧を作るのがリピーター。
詳細を制御するのが動的ページです。
つまり、一覧の情報としてユーザーに見せるのがリピーターで、 クリックした先に情報ごとに見えるページが動的ページです。
制作事例から見る「よく使われるセクション」とリピーター
セクション①：お知らせ一覧
企業サイトで必ず設置されるのが「お知らせ」セクションです。
企業が発信する情報が設置されるセクションで、以下の情報が設置されていて、クリックするとブログに遷移するという使い方がされます。
投稿日
タイトル
概要
が一覧形式で並ぶ構造がよく見られます。
こういった情報をよく見ますよね。
ここで使われるのが リピーター です。
リピーターの一つのアイテムをデザインすると、そのデザインが他のアイテムにも反映されるというものです。
構造的に見るとこのようになります。
①の中に設置してテキストが、同じ場所に設置されます。
ここでアイテムを追加をすると、①で設定していたものが複製されていくというものです。
同じ見え方で繰り返し表示させたいものに使用します。
あとはCMSとテキストなどを紐付けることで、自動で情報が更新されます。
利点
更新作業の簡略化
表示順の自動制御
レイアウト崩れの防止
トップページを常に最新状態に保てます。
セクション②：サービス一覧・事業所一覧・物件一覧など
運営施設一覧、 展開しているサービス一覧、
物件一覧などのずらりと見せるような一覧のセクションはホームページには必ず存在します。
共通点としては、
画像
タイトル
概要
詳細リンク
これらが整列していることがほとんどです。
ここでも リピーター を使用します。
1つのアイテムをデザイン作成し、
画像 → CMS画像フィールド
タイトル → テキストフィールド
ボタン → 動的ページURL
に接続します。
※ここでの接続方法は一例です
データが増えても、構造は変わらずに増やしたり減らしたりしながらレイアウトも制御が可能です。
横一列に幾つ表示させるかなどです。
セクション③：会社概要など
会社概要のページなどが設置されているホームページがほとんどですが、ページ下部に設置されていることも多いためセクションとして紹介いたします。
会社概要セクションでは以下の写真のような情報が繰り返し表示されます。
このような情報をよく見ませんか？ こちらもリピーターで作成しています。
利点
情報同士との間隔が揃えられる
デザインを変更した際に全てに適応されるため、設定忘れなどが起きにくい
ここまでは、HP制作でよく使われる機能であるリピーターを、制作事例を交えてご紹介いたしました。
では、次にもう一つ便利でwixstudioで最も優れている点とも言えるCMSをご紹介いたします。
CMS（コンテンツマネージャーシステム）
弊社で作成した不動産のサービスサイトでは、
一覧から各物件の詳細ページへ遷移します。
ここで使われるのが CMSの動的ページ（Itemページ） です。
動的ページとは？
別のところに保存された情報を、保存されたところから引っ張ってきて、デザインされた場所に反映させて表示されるページ、自動的に生成されるページです。
画像で説明いたします。
まずこのように、エクセルのように情報を保存できる場所があります。 横一列が一つの情報群です。
そして、デザインされたページのテキストに接続されて、表示されるというものです。
ページに表示されるのは、保存されたデータの横一列の情報群です。（もっと細かく制御もできますがここでは割愛いたします）
このように、見せたい決まった情報があり、それらをページごとに繰り返して表示させたい時などに使用できます。
よく見られるのは、
社員インタビューのインタビューページ
コーポレートサイトの職業の募集要項ページ
事例紹介ページ
商品ページ
上記のものがよく見られます。
利点
商品一つ一つにページを作成しなくていい
情報の入力さえすればページに反映されるので、エクセルの入力ができれば誰でも簡単に作業ができる
いかがでしたでしょうか？
ホームページには欠かせない要素を、簡単かつ有利に検索エンジンに働きかけてユーザーに届けられるwix studioの機能をご紹介いたしました。
今回の機能で何が達成できるのか
① 一覧と詳細の自動連携
リピーターで表示されたカードは、繰り返し表示することでレイアウトを維持することができ、デザイン性を担保することができます。
また、CMSと連携することで自由自在に表示させる情報を設定して自動的に数を制御できるので、誰が情報を追加してもデザインを崩しません。
② 更新の一元管理
修正はCMS内のデータのみ。エクセルシートに入力ができれば誰でもできます。 ※CSVデータを取り込むことで情報を自動的に保存することも可能です。
内製化
作業時間の大幅な短縮
③ サイト拡張への対応
サービス内容や物件が増えても、
ページを増やす必要なし
デザイン修正なし
データ追加のみで拡張可能です。
これは静的サイトと呼ばれる１ページずつ作成しているホームページでは難しい課題です。
まとめ
Wix Studioは、世界的に高評価を得る構造的CMS基盤を持っています。
その上で、ホームページに必須となる、
お知らせ
一覧表示
詳細ページ
を効率的に構築するできる、
リピーター
CMSの動的ページ
という機能がwix studioでは特に優れています。
今後のサービスの拡張なども考えると、ホームページをwix studioで作り直すことが将来の発展に寄与することは間違いありません！
是非、ホームページ制作の際にはwix studioでの制作を検討してみてください！
今回ご紹介した機能を実装したサイトはこちらから閲覧可能です。