本書で取り上げられているシステム名 ／製品名は、一般に開発メーカーの登録商標／商品名です。本書では、™ および ® マークを明記していませんが、本書に掲載されている団体 ／商品に対して、その商標権を侵害する意図は一切ありません。本書で紹介している URL や各サイトの内容は変更される場合があります。

はじめに
最近は、Twitter や Instagram といった SNS がネット・コミュニケーションの中心になっています。では、SNS があればホームページは必要ないかというと、そうではありません。
「 キャンペーン情報 」や「 新たに入荷した商品の紹介 」など、トレンド性のある情報発信に SNS は大きな威力を発揮してくれますが、その一方で「 メニューの紹介 」や「 サービス内容の紹介 」といった恒常的な情報発信には向いていません。こういった情報の発信は、やはりホームペー
ジ（ Web サイト ）に分があると考えられます。SNS は、Google の検索結果にほとんどヒットしないことも弱点のひとつといえます。
このため、「 SNS だけでなく、ホームページも用意しておきたい 」と考える方は沢山います。
しかし、そのためには克服しなければならない課題があります。ホームページの制作は SNSほど手軽でないため、自分で HTML や CSS を勉強するか、もしくは Web 制作会社に依頼しないと、自分のホームページを所有することはできません。
このような問題を解決してくれるのが Wix です。Wix は誰でも無料でホームページ（ Webサイト ）を作成できるサービスです。皆さんが普段から使用している「 Google Chrome 」や「 Firefox 」などの Web ブラウザがそのまま編集ツールになるため、あらためて特別なアプリケーションを用意する必要はありません。パソコンとネット環境さえあれば、思い立ったその瞬間にホームページの作成を開始できます。
また、洗練されたデザインのホームページを作成できることも Wix の特長のひとつです。
Wix には 800 種類以上のテンプレートが用意されており、これをベースに各ページをカスタマイズしていくだけで、見た目に優れたホームページを作成できます。
そのほか、多くの写真をグリッド配置できる「 ギャラリー 」、アニメーションとともに次々とコンテンツを表示していく「 スライドショー 」、画面全体にポップアップ表示する「 ライトボックス 」、「 地図や動画の埋め込み 」など、Web サイトでよく見かける “ 仕掛け ” も手軽に作成できます。
「 ホームページを作成したい！ 」と考えている方は、この機会にぜひ、Wix を試してみてください。本書は、初めて Wix を使用する方を対象に執筆されているため、ホームページの作成に不慣れな方でも安心して挑戦できる思います。「 自分のホームページを持つ 」を実現するための一助として、本書を活用していただければ幸いです。

相澤 裕介

iii

目 次
第１章

Wix の基本操作 …… 101 Wix の概要 ............................................................................................................................... 202 ユーザー登録と Web サイトの準備 . ......................................................................... 1003 テキストの編集 .................................................................................................................. 26
04 画像の編集 ........................................................................................................................... 4205 エディタの基本操作 . ....................................................................................................... 58
06 ページの追加と削除 . ....................................................................................................... 68
07 セクションの追加と削除 . .............................................................................................. 8108 ヘッダー・フッターの編集 ........................................................................................... 89
09 サイトデザインの変更 .................................................................................................... 94

第２章

パーツの編集 …… 101

10 ボタン .................................................................................................................................. 102
11 ストリップ ......................................................................................................................... 109
12 ギャラリー ......................................................................................................................... 122
13 メニュー . ............................................................................................................................ 132
14 Google マップ . ................................................................................................................. 140
15 動画・音楽 ......................................................................................................................... 143
16 ソーシャル（ SNS ）. ......................................................................................................... 150
17 リスト（ リピーター ）..................................................................................................... 155
18 インタラクティブ ........................................................................................................... 164iv

第３章

Wix アプリの活用 …… 177

19 アプリの基本操作 ........................................................................................................... 178
20 レストランメニュー . ..................................................................................................... 182
21 ブログ .................................................................................................................................. 198
22 フォーム . ............................................................................................................................ 212

第４章

モバイルサイトの編集 …… 219

23 モバイルサイト編集の基本 ......................................................................................... 220
24 モバイルのみ表示 ／非表示 . ........................................................................................ 224
25 モバイルサイトの背景 .................................................................................................. 227
26 モバイルアクションバー . ............................................................................................ 229
27 ［ トップに戻る ］ボタン ................................................................................................ 234
28 ウェルカム画面とアドレスバーの色 . ..................................................................... 236

第５章

Web サイトの管理 …… 239

29 Web サイトの公開 .......................................................................................................... 240
30 ビジネス情報の入力 . ..................................................................................................... 244
31 複数サイトの管理 ........................................................................................................... 247
32 アップロードしたファイルの整理 ........................................................................... 250
33 アカウント設定の変更 .................................................................................................. 261
34 Wix のアップグレード ................................................................................................... 262

索引 .................................................................................................................................................. 265v

第1章

Wix の基本操作
まずは、Wix を使って Web サイトを作成するときの基本操作について解説します。テンプレートの中から好きなデザインを選択する、文字を編集する、画像を編集する、ページを追加 ／削除する、ヘッダー・フッターを編集する、などの基本的な操作方法を学んでおいてください。

第1章

基本操作

01

Wix の概要
Wix は、誰でも無料で使える「 Web サイトの作成ツール 」です。まずは「 Wix にどのような機能が用意されているか？ 」など、Wix の概要について説明します。

1 Web サイトの編集画面
Wix は、誰でも無料で「 自分の Web サイト 」を作成できるサービスです。皆さんが普段から使用している「 Google Chrome 」や「 Firefox 」などの Web ブラウザがそのまま編集ツールになるため、あらためて特別なアプリケーションを用意する必要はありません。思い立ったその瞬間に、Webサイトの作成を開始できます。
Web サイトの編集作業も特に難しいものではありません。現在のページ状況を画面で確認しながら、文書を作成するような感覚で Web サイトを作成できます。このため、HTML や CSS をまったく知らない初心者の方でも安心して Wix を使用できます。画面上に文字を入力して書式を指定す
第る、画像を選択して配置する、といった基本的な操作の仕方はすぐに覚えられるでしょう。

章

1の基本操作Wix

Web サイトの編集画面の例

2

2 豊富なテンプレートとフリー素材
Wix には、800 種類以上のテンプレートが用意されています。このため、好きなテンプレートを選択するだけで Web サイトのデザインを構築できます。また、無料で使えるフリー素材も豊富に提供されているため、イメージ写真などを自分で準備していなくても、すぐに Web サイトの作成を始められます。

01
WWW「 レストラン 」のテンプレート

W
W
W「 車・バイク 」のテンプレートキーワードでフリー素材を検索

Wix に用意されているフリー素材

33 Web サイトを彩る豊富な機能
Web サイトを効率よくデザインするための機能も数多く用意されています。これらの機能を上手に活用すれば、見た目に優れた Web サイトを簡単に作成できます。

第章

1の基本操作
Wix

多くの写真をデザインして配置できる「 ギャラリー 」

画面を縦に分割してデザインする「 ストリップ 」

4

オフィスや店舗の位置を地図で示す Google マップをはじめ、YouTube で配信されている動画、自分で用意した音楽などを Web サイトに埋め込むことも可能です。

01
WWW「 Google マップ 」の埋め込み

W
WW「 動画・音楽 」の追加機能

5そのほか、Twitter や Instagram などの SNS に誘導するソーシャルバー、内容を次々とアニメーション表示するスライドショー、写真や告知をポップアップ表示するライトボックスなど、Web サイトでよく見かける “ 仕掛け ” も手軽に作成できます。

SNS へのリンクを設置する「 ソーシャルバー 」の追加機能

第章

1の基本操作
Wix

アニメーションで表示内容を自動的に変更していく「 スライドショー 」

6

同じ形式のコンテンツを並べて配置する「 リスト 」

01
WWW
W
W
W

画面全体にポップアップ表示する「 ライトボックス 」

7

4 無料プランとプレミアムプラン
本書は、Wix を無料プランで利用する場合を前提に執筆されています。無料プランの Wix でも十分に優れた Web サイトを作成できますが、少しだけ欠点があります。それは、Web サイトの上部に Wix の広告が表示されることです。面積の小さい広告とはいえ、これが気になる方もいるでしょう。
また、Web サイトの URL が「 https:// ○○○ .wixsite.com/ △△△ / 」という形になり、独自ドメインを使えないことも欠点のひとつといえます。

Wix の広告

第これらの欠点を改善するには、有料のプレミアムプランにアップグレードする必要があります。
アップグレードすると、サーバーのデータ容量が増える、帯域幅が増える、優先的にサポートを章

1の基本操作Wix受けられる、などの特典も受けられるようになります。

プレミアムプランの特典（ ホームページプラン ）8さらに、決済機能やネット予約機能などを使えるビジネス & E コマースプランも用意されています。ネットショップを運営したり、本格的な Web ビジネスを行う場合は、こちらのプランを契約する必要があります。

01
WWWWW
W

プレミアムプランの特典（ ビジネス & E コマースプラン ）とはいえ、最初から有料プランを契約しなければならない訳ではありません。本書を参考に、まずは「 無料プラン 」で Wix の使い方を把握し、そのうえで上位プランへのアップグレードを検討する、という流れで作業を進めていくとよいでしょう。もちろん、情報を発信するだけの場合は、「 無料プラン 」のままでも十分な Web 作成機能が備えられています。
※ 各プランの料金は 2022 年 12 月現在の情報です。

9

02

ユーザー登録と Web サイトの準備
Wix を使って Web サイトを作成するには、最初にユーザー登録を済ませておく必要があります。その後、Web サイトの種類やデザインを選択して Web サイトの作成を始めていきます。

1 Wix へのユーザー登録
まずは、Wix にユーザー登録するときの操作手順を解説します。この際に必要となるのはメールアドレスだけ。もちろん、誰でも無料で登録できます。
（ 1 ）Web ブラウザで「 日本語版 Wix の公式サイト 」（ https://ja.wix.com/ ）を開き、［ 無料ではじめる ］ボタンをクリックします。
第① URLを入力

章

1の基本操作
Wix②クリック

ポイント
Google などの検索サイトを開き、「 wix 」のキーワードで Web 検索して「 日本語版 Wix の公式サイト 」へ移動しても構いません。

10

（ 2 ）新規登録の画面が表示されるのでメールアドレスとパスワードを 2 回ずつ入力し、［ 新規登録 ］ボタンをクリックします。

①メールアドレスとパスワードを入力

②クリック
02

2 Web サイトの準備以上でユーザー登録は完了です。続いて、以下のような画面が表示されるので、作成する Webサイトの準備を行います。
［ サイト作成をはじめる ］ボタンをクリックします。
（1）クリック11

（ 2 ）一覧からサイトの種類を選択するか、もしくは適当なキーワードを入力して［ 次へ ］ボタンをクリックします。

①キーワードを入力②クリック①サイトの種類を選択

第章

1の基本操作Wix（ 3 ）作成する Web サイトの名前（ サイト名 ）を入力し、［ 次へ ］ボタンをクリックします。

①サイト名を入力

②クリック

ポイント
最初は「 テスト 」などの名前で「 練習用の Web サイト 」を作成してみるとよいでしょう。Wix
では、複数の Web サイトを作成・管理できます。このため、「 練習用の Web サイト 」で操作に慣れてから、「 正式な Web サイト 」を新たに作成しなおすことも可能です。

12

（ 4 ）Web サイトに追加する機能を選択します。とりあえずは、初期設定のまま［ 次へ ］ボタンをクリックします。

02

クリック

（ 5 ）このような画面が表示されるので、［ ダッシュボードを開く ］ボタンをクリックします。

クリック

13

（ 6 ）ダッシュボードが表示されます。［ サイトを編集 ］ボタンをクリックし、先ほど準備した Webサイトの編集を開始します。

クリック

3 AI を使ったサイト・デザインの構築
第初めて Web サイトを作成するときは、Wix の AI を使って Web サイトのデザインを構築します。

章

1AI を使ってサイト・デザインを構築するときは、以下のように操作を進めていきます。

の基本操作
Wix

（ 1 ）メールアドレスや住所、電話番号などの情報を入力します。個人用の Web サイトで住所や電話番号などを公開したくない場合は、空白のまま［ 次へ ］ボタンをクリックします。

①情報を入力※公開しない場合は入力しない

②クリック

14

（ 2 ）フォントと色を組み合わせたスタイルが表示されるので、好きなスタイルを選択し、［ 次へ ］ボタンをクリックします。

①スタイルを選択

02

②クリック

（ 3 ）トップページのデザインが 3 つ表示されるので、この中から好きなデザインを選択し、［ 次へ ］ボタンをクリックします。
①トップページのデザインを選択

②クリック

15

（ 4 ）Web サイトに追加するページを選択します。追加するページにチェックを入れてから［ サイトを編集 ］ボタンをクリックします。
①追加するページにチェックを入れる

第章

1②クリック

の基本操作Wix（ 5 ）以上でデザインの構築は完了です。数秒ほど待つと、Web サイトの編集画面（ エディタ ）が表示されます。

16

4 準備した Web サイトの保存
Web サイトの編集画面（ エディタ ）が表示されたら、これまでの作業を保存しておきましょう。
以下のように操作します。
（ 1 ）Web サイトの編集画面の右上にある「 保存 」をクリックします。

クリック

02

（ 2 ）Web サイトの URL を指定し、［ 保存して続行 ］ボタンをクリックします。

①この部分の URLを変更

②クリック

ポイント
Wix で作成した Web サイトの URL は、以下のような構成になります。
https://（ アカウント名 ）.wixsite.com/（ サイトアドレス ）/・アカウント名 ..................... 各ユーザーのアカウント名です。
※「 アカウント設定 」で変更できます（ P261 参照 ）。
.
...............
それぞれの Web サイトに指定する URL です。
・サイトアドレス※ Web サイトの保存時に変更できます。
なお、有料プランにアップグレードすると、好きな URL（ 独自ドメイン ）を指定できるようになります。

17

（ 3 ）このような確認画面が表示されます。現時点では Web サイトを制作中なので、まだ公開しないで、そのまま［ 閉じる ］ボタンをクリックします。

クリック

注意

第作成した Web サイトを誰でも閲覧できる状態にするには、「 公開 」を指定する必要があります。
ただし、作成途中の Web サイトは公開しないのが一般的です。Web サイトがひととおり完成した時点で「 公開 」を指定するようにしてください（ 詳しくは P240 〜 242 参照 ）。

章

1の基本操作Wix

5 テンプレートを使ったサイト・デザインの構築
Wix には、テンプレートの中からデザインを選択して Web サイトを作成する方法も用意されています。AI が自動構築したデザインではなく、好きなデザインを選択して Web サイトを作成した
いときは、以下のように操作します。
（ 1 ）左上にある「 Wix のロゴ 」をクリックすると、ダッシュボードが表示されます。この画面にある［ アクション ］ボタンをクリックし、「 新しいサイトを作成 」を選択します。

①クリック

②クリック

③これを選択18

（ 2 ）一覧からサイトの種類を選択するか、もしくは適当なキーワードを入力して［ 次へ ］ボタンをクリックします。

①キーワードを入力②クリック①サイトの種類を選択

02（ 3 ）作成する Web サイトの名前（ サイト名 ）を入力し、［ 次へ ］ボタンをクリックします。

②クリック①サイト名を入力

19

（ 4 ）Web サイトに追加する機能を選択します。とりあえずは、初期設定のまま［ 次へ ］ボタンをクリックします。

第章

1クリック
の基本操作
Wix

（ 5 ）デザインの構築方法を指定する画面が表示されます。テンプレートの中からデザインを選択する場合は、「 Wix ホームページテンプレートを使う 」をクリックします。

こちらをクリック

20