Wix Studioでニュース欄を作る方法
2025年6月5日
Wix Studioでは、CMS（コンテンツマネージャー）と動的ページを組み合わせることで、簡単かつ効率的に「ニュース欄」を構築できます。本記事では、ニュース一覧ページと詳細ページを一括管理し、更新コストを最小限に抑える方法を、5つのステップで丁寧に解説します。
まずはニュース情報を格納するためのCMSコレクション（データベース）を作成します。
【手順】
Wix Studio左側メニューから「CMS」 > 「新しいコレクションを作成」をクリック。
コレクション名を「news」などに設定。
以下のようなフィールドを追加：
タイトル（Text）
公開日（Date）
本文（Text）
サムネイル画像（Image）
記事をいくつかサンプルとして登録しておくと、後の作業で便利です。
このページでは、CMSに登録したニュースデータをリスト形式で表示します。
【手順】
新規ページを追加し、「ニュース一覧」などと命名。
画面上に「リピーター」を設置。
リピーターの中に、以下の要素を配置：
画像（サムネイル）
テキスト（タイトル）
テキスト（日付）
ボタン（詳細ページへのリンク）
リピーター全体をCMSコレクション「news」と接続。
各要素に対応するCMSフィールドを割り当てる。
リピーターのデータソースの並び順を「公開日（降順）」など任意のものに設定。
CMSと連動する動的ページ（※）を使えば、1つのテンプレートで全ニュース記事の詳細ページを生成できます。
【手順】
ページ管理画面で「動的ページを追加」をクリックし、用意されたテンプレートか「白紙ページ」を選択する。
URL形式が /news/{スラッグ} のように自動設定される。
以下の要素をページに追加し、CMSと接続：
タイトル（Text）
公開日（Text）
本文（Rich Text）
サムネイル（Image）
デザインはブランドに合わせて整える。
CMSの項目と画面上に配置した要素を接続する
※動的ページ：あらかじめ作成したテンプレートに沿って自動生成されるページ
一覧ページのリピーター内から、該当記事の詳細ページに遷移できるように設定します。
【手順】
ボタンなどにリンクを設定。
「リンク設定」 > 「動的ページ」 > 「このアイテムの詳細ページ」を選択。
これで、クリックされたニュースに応じた詳細ページへ正しく遷移します。
見た目と操作性のチューニングはとても重要です。
【ポイント】
一覧ページ：
日付フォーマットを「2025年6月7日」など日本語形式に。
新着順（降順）で並び替え
ホバー時にカードが浮くアニメーションなどを追加すると印象アップ
詳細ページ：
「← ニュース一覧に戻る」などのナビゲーションを設置
SEO対応として、構造化データの設定も考慮
Wix StudioのCMSと動的ページ機能を活用すれば、日々の情報更新が必要な「ニュース欄」も効率的に運用できます。
開発者に頼らず、ノーコードで更新できる仕組みを構築しておけば、マーケティング施策やブランディングにも大きく貢献できるでしょう。
「やってみたけど、思ったようにできない…」「途中で詰まってしまった…」
そんなときは、無理せず制作のプロにご相談ください。
Strutでは、Wix Studioを活用した企業・ブランド向けのサイト制作を得意としています。まずはお気軽にお問い合わせください！