Wixで簡単に表を作成する活用術！Wixテーブルマスターアプリを使った表の作成とカスタマイズ方法をご紹介

3月12日
読了時間: 7分

Web Almanac の分析により、Wix は主要CMSの中で Google Lighthouse（SEO）スコアの中央値100点を達成しているCMS であることが示されています。

これは単なるデザイン性の評価ではなく、CMSが生成するページ構造や技術的SEO品質そのものが高水準であることを意味します。

つまり、Wixで作られたページは検索エンジンに正しく理解されやすいため、検索に拾われやすいということです。

ですが、たとえ検索をされてもユーザーがそのサイトを見づらいと判断をしたらどうでしょうか？

ユーザーはページから離れ、二度と戻ってこないでしょう。

インターネット上で人が情報を判断するまでの時間は、人間工学的な研究からも0.5秒と結果が出ています。

1秒にも満たない時間で、情報の価値が判断されてしまうのです。

ではどう対応したらいいのでしょうか？

人は情報を求めてやってきます。

ですので、情報を見やすくデザインすればいいのです。

そこで、Wixでとても便利な機能である「表」の機能をご紹介いたします。

あなたのユーザーフレンドリーなサイト制作に役立てれば幸いです。

Wixで表を作成することで何ができるのか、どのような場面で活用されるのか、そしてどのような成果につながるのかを、初級者向けに整理して解説します。

↓今すぐ追加方法を見る↓

表（テーブル）機能で何が達成できるのか？

表機能を活用することで、次のような成果が得られます。

・情報理解の高速化

ユーザーはスクロールしながら一目で差異を把握できます。これは滞在時間や直帰率にも影響します。

・情報の構造化

整理された情報は、論理的なページ構造を形成します。これはSEOにも好影響を与えます。

Lighthouseで評価される「構造の明確さ」は、こうした情報整理の積み重ねによって支えられます。

・更新作業の効率化

価格変更や仕様変更があった場合も、該当セルのみ修正すればよいため、運用負荷が低減します。

文章を全面修正する必要がなくなります。

・信頼性の向上

整理された表は、情報が明確で透明性がある印象を与えます。曖昧な説明よりも、具体的な一覧表示の方が信頼性は高まります。

どんなところに使用されるのか

価格表の作成

ベーシック／スタンダード／プレミアムなどのプラン比較
月額料金の一覧表示

サービス内容の一覧化

含まれる機能の有無を○×で表示
対応範囲の明示

製品スペックの表示

サイズ
重量
素材
型番

営業時間やスケジュール表

曜日ごとの営業時間
イベント日程一覧

文章で書くと冗長になる情報を、コンパクトに整理できます。

特に「比較」が必要な場面では、表は不可欠です。

Wixにおける表とは、行と列で構成されたデータ表示ブロックです。

列（横）：項目の種類
行（縦）：個別のデータ

この構造により、複数の情報を規則的に整理できます。

早速追加してみましょう！

今回はデモンストレーションとして、価格表を作成いたします。

・エディターの左上の「＋」をクリックしてパネルを開きます

レイアウトツール

↓

表

↓

テンプレートの中から作りたい表に近いデザインを選択

↓

選択した表をドラッグ&ドロップで追加したい場所に持っていきます

※表はどれを選んでも同じです。全てデザイン編集可能ですので、作業工数を減らすためにも表現したいデザインに近いものを選択することをお勧めいたします。

・追加した表のデザインを変更していきます

表のデザインは右のデザインパネルから設定ができます。

デザインできる項目は赤枠の中です。

項目を順に見ていきましょう。

【色・不透明度】

設定項目の相互関係は画像の通りです。

赤とピンクは「ホバー時」「選択時（クリック）」にどのような色になるかを意味します。

【枠線】

枠線は以下の項目の変更が可能です。

・色

・太さ

【角】

表の大枠の端の丸みを設定できます。

25pxと5pxを設定して並べて比較いたしました。

余談ですが、PC/タブレット/スマートフォンの画面それぞれ個別に角の丸みを設定できます。

大きい画面で設定していた丸みは画面が小さくなると大きすぎる印象になることが多いので、各画面で設定することをお勧めいたします。

【影】

ドロップシャドウをつけることができます。

「影をつける」のトグルをONにすると設定が可能になります。

シャドウの数値は柔軟に設定が可能ですが、赤枠内の数値がお勧めです。

シャドウはわかるかわからないくらいの設定がデザインのセオリーとなっております。

・距離は1~2px

・サイズは0

・ぼかし4~5px

・不透明度25~60%

上記の数値の間で設定することがお勧めです。

※下記の画像は赤枠の設定でのものです。参考にしていただけると幸いです。

【テキスト】

各枠内の色を変更することができます。

緑色はリンク設定を行ったテキストの色がその色に変更されます。

以上が表の装飾に関する設定項目です。

それでは、次は表の中身（情報）の入れ方をご紹介いたします。

表の中に情報を入れる方法

表の中身はCMSのコレクションというシステムの情報と紐付けることで表示させることが可能です。

ですので、まずは情報であるコレクションを作成していきます。

コレクションの作成を飛ばして接続方法を知りたい方はこちら

■CMSとは？

CMS（コンテンツマネージャーシステム）とは、デザインに反映させる情報を別のところに保管するシステムのことを指します。

今回で言うと、エディターとは別の管理画面にエクセルのように情報を入力する場所があり、そこに入力するとエディターのデザインに反映されます。

Wixではこのエクセルのような場所を「コレクション」と呼びます。

・まずはコレクションを作成します

左のパネルから、矢印の順番に選択してください。

・作成方法を選択

【CSVデータをインポートする】

エクセルのデータをCSVでエクスポートしたものをインポートできます。

【AIで作成する】

どんな情報を管理したいかを入力するとAIが作成してくれます。

【ゼロから始める】

自分で項目（フィールド）を追加して作成します。

この3通りで可能です。

今回はAIで作成いたします。

・プロンプトを入力する

コレクションの説明文を追加するところに、プロンプトを追加します。

ここが詳細であるほど想像に近いものができますが、以下のような内容を入力するだけでもフィールドは作成できます。

例：商品名、日付、商品画像、プラン説明、料金

今回は作りたい価格表の画像をChatGPTに入力してプロンプトを作成しました。

以下の画像のように、作成するフィールドを一覧で見せてくれます。

さらに、自動でダミーのコンテンツを作成もすることができます。内容があるとデザインの調整もしやすいため、今回はコンテンツも生成してもらいます。

「コレクションを作成する」を選択して次に進みましょう。

このように、情報を入力する項目（フィールド）が作成されたコレクションが作成されます。

表に反映する情報の作成はこれで完了です。

表にコレクションを接続し、表に情報を反映させる

・表とコレクションを接続します

表を選択

↓

右側のパネルの紐のマークを選択

↓

①データセットを追加（初めて接続する場合）

②データセットを選択（このページですでにデータセットがある場合）

上記のどちらを選択しても以下の画像になります。

ここで、先ほど作成したコレクションを選択しましょう。

データセット名は任意のもので問題ございません。

・カラムを追加を選択しましょう

すると、先ほど作成したコレクション（エクエルのような場所）の項目（フィールド）が表示されます。

表に選択させたいものを選択していきましょう。

追加すると以下のように選択されます。

同じように項目を追加していきましょう。

カラムを追加して、レイアウトを簡単に整えます。

カラムの幅、カラムの表示されている項目のテキストを変更します。

レイアウト変更は、表をクリックすると表上部に表示されるツールバーから行います。

整えた表の全体像が以下の画像です。

お疲れ様です！

これで表の追加方法は以上です。

表ではないレイアウトツールを使用して表を作成することも可能ですが、その場合はエディターでテキストを変更する必要がございます。

Wixstudioに搭載されたこの表（テーブル）機能を使うことで、簡単に誰でも情報を更新ができるようになります。

手順のおさらい

■表の追加

↓

■表のデザイン設定

↓

■表の中身を作成（コレクション作成）

↓

■レイアウト調整

まとめ

いかがでしたでしょうか？

CMSが絡んでくるので、少し難しく感じる箇所もあったかもしれません。

しかし、一度設定を済ませれば誰でも柔軟に更新できますので、情報を見やすく伝えたい場合は是非とも選択肢に入れてみてください！

Wixの最新情報を届けるメディア