top of page

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

引き継ぎもシームレスに

直観的に使えるダッシュボードを使用して、クライアント側でデザインを変更せずにコンテンツだけを管理できます。PC はもちろん、モバイルアプリからもサイトの更新が可能です。

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

あるページをもとにして、同じレイアウトでコンテンツや URL、SEO 設定が異なるページをいくつでも作成できます。コンテンツの更新が簡単な上に、CMS コレクションからすぐに新しいページを追加できます。

An example dynamic page for one of the art gallery’s exhibitions called Mineral Treasures.
An example dynamic page for a gallery exhibition called Modular Visions. All the pages for the different exhibitions have exactly the same layout, but different images, text and unique URLs.
An example dynamic page for a contemporary art gallery that shares information about a specific exhibition called Organic Impressions.

プリセットで制作効率を向上

すぐに使える既成のレイアウトや、独自のコンテンツ・デザインでカスタマイズ可能なコレクションを使って、より速くサイトを構築できます。

An example layout for a website section featuring team members.
A example layout for the “Our projects” section of a website with images, text and a description displayed in a uniform layout.
An example layout for a blog listing page.

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

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)

An example website for a luxury travel agency. There’s a search bar where users can enter their destination, dates and number of travelers, demonstrating the ways you can use the Wix Data API to work with complex content.

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

引き継ぎが終わり、クライアント側でサイトを変更する場合もサイトのデザインが崩れる心配はありません。コンテンツの更新権限を担当者に付与することで、直観的に使えるダッシュボードやモバイルアプリ、または Wix Owner アプリからサイトの操作が可能です。

A mockup of the back end of the travel agency website, where the client has permission to edit the CMS and add destination details.

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);

An example of the CMS interface, which is organized into columns and rows. Each row is a separate project, with a field for title, photo, description and more.
An example of the CMS interface, which is organized into columns and rows. Each row is a separate project, with a field for title, photo, description and more.

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

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

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

bottom of page