top of page

コンテンツ集約型のサイトを CMS でスマートに構築

コンテンツが豊富な動的サイトをノーコードで制作しましょう。デザインを変更せずに、バックエンドで簡単にサイトのコンテンツを管理・拡張できます。

は建築会社のプロジェクトページ、には CMS コレクション。数件の新しいプロジェクトがCMS に追加され、プロジェクトページのデザインが更新されて新しいプロジェクトが表示される様子がわかる。
An animation to demonstrate how the Wix Studio CMS works. There’s a project page for an architecture firm on the right, and to the left there’s a CMS collection. Several new projects get added to the CMS and the project page design updates to show the new projects.

サイトの基盤をスムーズに構築

プリセット、テンプレート、またはゼロから必要なコンテンツ構造を構築します。CSV からコンテンツをインポートしたり、テキスト、画像、リッチコンテンツなどを手動でアップロードできます。

デザインに接続

Wix Studio エディタで自由にデザインを作成し、コレクションを接続して動的コンテンツを表示できます。繰り返し表示のレイアウトを作成したり、フィルターを追加したり、サイト訪問者からコンテンツを収集したりと、さまざまな動作をノーコードで実装できます。

コンテンツをシームレスに管理

直観的に使えるダッシュボードを使用して、クライアントやチームでサイトを管理。デザインを変更せず、コンテンツだけを簡単に変更できます。

動的ページで限りないスケールアップを実現

あるページをもとにして、同じレイアウトでコンテンツや URL、SEO 設定が異なるページをいくつでも作成できます。作成した内容はダッシュボードやエディタから180以上の言語に翻訳可能。

アートギャラリーで開催の展覧会「Mineral Treasures」の動的ページの例。
ギャラリー開催の展覧会「Modular Visions」の動的ページの例。それぞれの展覧会ページは同じレイアウトだが、画像、テキスト、固有の URL は異なる。
展覧会「Organic Impressions」についての情報が掲載された、コンテンポラリーアートギャラリーの動的ページの例。

プリセット、テンプレート、AI ツールで制作効率を向上

すぐに使える既成のレイアウトや、独自のコンテンツ/デザインでカスタマイズ可能なコレクションを使って、より速くサイトを構築しましょう。また、AI ツールに希望を伝えるだけでニーズに合ったコレクションを簡単に設定できます。

Web サイトの「プロジェクト」セクションのレイアウト例。画像、テキスト、説明文が統一されたレイアウトで表示されている。

プリセット

賃貸・売買物件の画像、価格、住所を表示する不動産サイトのテンプレート。

テンプレート

鉱物から作られたオブジェの画像を表示する、AI が生成した美術館の展示用 CMS コレクション。

AI

企業向けソリューション

ひとつの CMS で大規模なコンテンツ管理を実現

アカウントレベルの CMS を利用して複数サイトのコンテンツ管理を一元化。コンテンツの表示先の指定・管理や一括更新、フォーム送信内容の収集などもすべて一箇所で。CMS の割り当て上限をカスタマイズできるため、より多くのコンテンツが必要になった場合も安心です。

タイトル、写真、説明、リンク、年のカラムがある「取り扱い物件」テーブルが表示されたダッシュボード。テーブルの下には高級不動産物件を紹介する3つの Web サイトのプレビューがあり、それぞれモダンな住宅の画像、価格帯、エージェントの連絡先オプションが表示されている。

求める機能に応じてサイトを拡張

Wix Data API を使用して、コードで CMS コンテンツを管理。フィルターや並べ替え、アイテムのクエリ、データフックを使用したインタラクションのインターセプト、コレクションからのデータの集約など、ビジネスニーズに適した機能を構築できます。

1   import wixData from 'wix-data';

2   import { addDays } from 'public/utils';

3   $w.onReady(function () {

4     $w("#search").onClick(async () => {

5       const origin = $w("#origin").value;

6       const destination = $w("#destination").value;

7       const departDate = new Date($w("#depart").value);

8       const returnDate = new Date($w("#return").value);

9       const numberOfTravelers = $w("#travelers").value;

10      const { items: foundFlights } = await wixData

11        .query("availableFlights")

12        .eq("origin", origin)

13        .eq("destination", destination)

14        .between('departDate', addDays(departDate, 1),

15        addDays(departDate, -1))

16        .between('returnDate', addDays(returnDate, 1),

17        addDays(returnDate, -1))

18        .ge("availableSeats", numberOfTravelers)

19        .find()

20      renderResults(foundFlights);

21      });

22  });

import wixData from 'wix-data';

import { addDays } from 'public/utils';

$w.onReady(function () {

  $w("#search").onClick(async () => {

    const origin = $w("#origin").value;

    const destination = $w("#destination").value;

    const departDate = new Date($w("#depart").value);

    const returnDate = new Date($w("#return").value);

    const numberOfTravelers = $w("#travelers").value;

    const { items: foundFlights } = await wixData

      .query("availableFlights")

      .eq("origin", origin)

      .eq("destination", destination)

      .between('departDate', addDays(departDate, 1),

      addDays(departDate, -1))

      .between('returnDate', addDays(returnDate, 1),

      addDays(returnDate, -1))

      .ge("availableSeats", numberOfTravelers)

高級旅行代理店の Web サイトの例。ユーザーが目的地、日付、旅行者数を入力できる検索バーがあり、Wix Data API を使用して複雑なコンテンツを扱う方法が示されている。
高級旅行代理店の Web サイトの例。ユーザーが目的地、日付、旅行者数を入力できる検索バーがあり、Wix Data API を使用して複雑なコンテンツを扱う方法が示されている。

デザインに触れずにコンテンツのみを更新

カスタム役割・権限を設定して、クライアントや共同管理者がバックエンドでコンテンツを管理できるようにしましょう。サイトのデザインを崩さず、コンテンツのみを簡単に変更できます。直観的に使えるダッシュボードやモバイルアプリ、または Wix アプリからサイトの操作が可能です。

旅行代理店の Web サイトのバックエンドのモックアップ。クライアントに CMS を編集し、目的地の詳細を追加する権限が付与されている。

Wix のヘッドレス CMS でより自由なサイト構築を

CMS 機能を導入することで、複数の Web サイトやアプリのデータをひとつのダッシュボードでまとめて管理できます。

1   import { createClient, OAuthStrategy } from '@wix/sdk';

2   import { items } from '@wix/data';

3

4   const wixClient = createClient({

5   modules: { items },

6   auth: OAuthStrategy({ clientId: 'MY-CLIENT_ID' }),

7   });

8   

9   const dataItemsList = await wixClient.items.queryDataItems({

10  dataCollectionId: 'Billing/PriceQuotes',

11     // Please specify the dataCollectionId you require

12   }).find();

13   console.log('My Data items:');

14   console.log('Total: ', dataItemsList.items.length);

import { createClient, OAuthStrategy }

from '@wix/sdk';

import { items } from '@wix/data';

const wixClient = createClient({

  modules: { items },

  auth: OAuthStrategy({ clientId:

  'MY-CLIENT_ID' }),

});

const dataItemsList = await wixClient.items.queryDataItems({

  dataCollectionId: 'Billing/PriceQuotes',

  // Please specify the dataCollectionId

  you require

}).find();

console.log('My Data items:');

console.log('Total: ',

dataItemsList.items.length);

1   import { createClient, OAuthStrategy } from '@wix/sdk';

2   import { items } from '@wix/data';

3   

4   const wix = createClient({

5   modules: { items },

6   auth: OAuthStrategy({ clientId: 'MY-CLIENT_ID' }),

7   });

8       

9   // New API

10  const { items: results } = await wix.items

11     .query('Billing/PriceQuotes') // <— collectionId

12     .find();

13        

14  console.log('My Data items:', results);

15  console.log('Total:', results.length);

列と行で構成された CMS インターフェースの例。各行は独立したプロジェクトで、タイトル、写真、説明などのフィールドがある。
列と行で構成された CMS インターフェースの例。各行は独立したプロジェクトで、タイトル、写真、説明などのフィールドがある。

サポート対象の テクノロジー

サポート対象の
テクノロジー

複雑なサイトもスピード作成。常に期待値を超える納品物を

bottom of page