本書は 2020 年 1 月までの Wix.com の情報をもとに執筆されています。今後のアップデートなどにより、本書の記述と Wix.com の実際の動作に食い違いが発生する可能性があることを予めご了承ください。

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

はじめに

Wix.com は、世界 190 カ国、1 億 6000 万人以上が利用しているウェブ制作のプラットフォームです。プログラミングは不要、しかもクオリティの高いデザインで、サイトに様々な機能を追加できるアプリケーションも豊富に用意されています。
ウェブデザインにおける簡易性と自由度のバランスのとれたツールです。Editor
X というプロ向けの機能も追加され、ウェブ制作ツールとしての存在感が高まっています。
本書では、初心者の方でも Wix.com でホームページの制作ができるように、チュートリアル形式で架空の飲食店のサイトを作り上げていきます。プロのウェブ制作者が業務用に使うソフトなどは使用せずに完成できる内容にしました。
Wix.com は、ホームページ制作のコストを抑えたいと考えている中小企業、スモールビジネスに是非知っていただきたいツールです。本書を通じて皆様のビジネスのお役に立てれば幸いです。
一般社団法人日本ワークパフォーマンス協会

神戸洋平

iii

この本の使い方・読み方
本書では基本編と応用編に分けて、チュートリアル形式で架空の飲食店のホームページを制作しながら Wix の機能や編集方法を学んでいきます。主な機能としてメニュー表、マップ、お問い合
わせフォーム、SNS、ネットショップ、ギャラリー、ムービーなどを盛り込み、完成時には以下のようなホームページが仕上がります。
サンプルサイトは以下の URL から確認できます。
https://jwppor.wixsite.com/sample01

iv

メイン

メニュー

マップ

お問い合わせフォーム

SNS

ショップ

ギャラリー

ムービー

本書で使用するアイコンの種類
注意
注意！・・・作業上の注意点

ポイント
ポイント・・・抑えておくべきポイント

チェック
チェック !・・・プレビューモードで表示や動作の確認を行いましょう。

本書で制作するホームページの設定
本書ではチュートリアル形式で、飲食店のホームページを制作していきます。
飲食店の設定業種：飲食店（日本料理）
店名：海老の宮川
ホームページの要件設定
サイトの目的：新規顧客の獲得、リピーターの獲得
ターゲット：ファミリー、カップル、宴会客、お一人様

ホーム

背景動画を設定してスクロールが楽しくなるデザインにしますvvi

店舗情報ページの下段へジャンプさせてページアンカーの概念を学びます

メニュー

料理のメニューをリストで分かりやすく伝えます

お問合せ

会員登録を行うと、お問合せフォームが表示されます

ブログ

ショップ

ブログを設置して日々の情報発信に利用します

通販のための商品ギャラリーとカートを実装しますvii

Wix とは
Wix は CMS（コンテンツ・マネジメント・システム）の 1 つで、従来ホームページを制作するために必須の知識であった HTML や CSS、JavaScript などの各種プログラム類を使用せずに、最新の技術で驚くほど簡単にウェブサイトが作れるサービスです。
ビジネスやサービスとしてのページ、デザイナーやアーティストのポートフォリオ、趣味としてのページなど多種多様な、しかもデザイン性の優れたテンプレートを用意しており、オンライン上で誰でも簡単に、無料でホームページを持つことができます。

viii

Wix は、最新のブラウザさえあれば無料で使えるオンラインエディタで、スマホ対応も標準装備されています。基本的な操作はドラッグ & ドロップで行え、直観的なウェブデザインが可能です。また、Wix App という専用のアプリケーションを追加することで、フォトギャラリーや動画なども簡単に追加できます。ウェブサイトに欠かせない問合せフォームやマップ、Facebook やTwitter などの SNS の実装、ブログの実装によるコミュニケーションスタイルも自在に制作可能です。また、これまで「ホームページを持つ」ためには、ドメインの取得やサーバースペースの確保、ウェブサイト制作のためのソフトウェアなど、初期制作コストとランニングコストが必要でした。
しかし、Wix は制作から公開までの全てを無料で行うことが可能なのです。

従来のホームページ制作
作成ソフト

サーバー
スペース

○○○.com○○○.jp

ホームページビルダー
Dream Weaver

レンタル月額
自前購入

公開

制作

ドメイン取得全て費用が発生
Wix のホームページ制作
作成ソフト

サーバー
スペース

○○○.wix.comが割当てられる独自のオンラインエディタを搭載

Wix の無料
サーバーに保存

無料！

無料！

無料！

公開制作

ドメイン取得Wix は本社をイスラエルのテルアビブに置き、アメリカのニューヨークとサンフランシスコ、ウクライナのドニプロペトロウシクなどに拠点を持つ世界企業です。アビシャイ・アブラハミと2 名の共同創設者はサイト構築の複雑さに疑問を感じたことをきっかけに Wix を創設し、今では世界 190 カ国で約 1 億 6000 万人以上が利用しています（Wix オフィシャルサイト

2020

年 1 月現在）。また、ニューヨークヤンキースのオフィシャルスポンサーであったり、ハリウッド俳優のジェイソン・ステイサムを CM に起用するなど、世界的にもポピュラーな存在です。日本語化は 2012 年 11 月に行われ、2019 年には Wix.com Japan として日本法人が設立され、日本国内でのシェアは日々拡大しています。アプリケーションの一部では完全に日本語化が済んでいない部分もありますが、それでも十分にデザイン性の高い最新のウェブサイトを持つことを容易にしてくれます。
制作をプロに依頼するのは、作業の手間という部分も大きいでしょうが、デザインや機能を重視したホームページ制作にはプログラミングなどの専門的な知識が必要だという理由が大きいでしょう。こうした専門知識を持たなくても簡単に高機能でプロ仕様のデザインのホームページが無料で作れる Wix は、世界中でそうであったように、日本のウェブ制作を根幹から変えるような革新的なツールなのです。

ix

Wix のメリット・デメリット
Wix でのホームページ制作は驚くほど簡単です。しかし、「制作が楽」=「型が決まっていて簡易的」=「自由度が低い部分もある」といったような長所短所など、Wix の特性を理解してホームページ制作にあたりましょう。

1 Wix のメリット
Wix では、これまでウェブ制作から公開までに必要だった技術と設備が無料で提供されています。

●

技術面- HTML、CSS、JavaScript といったプログラミング知識が不要- ボタン 1 つで「保存」「公開」が可能なので、FTP によるアップロードが不要- サイトにアプリケーション（Wix App）で簡単に機能を追加できる- モバイルサイトもドラッグ & ドロップで編集できる- Google とパートナーシップを結んでおり、インデックスが速く SEO にも有利
- ダッシュボードからメルマガ、顧客管理や宿泊予約、ネットショップなどのビジネスに必要な機能を一元管理できる- Wix SEO Wiz で改善箇所をレポート。初心者でも簡単に対策できる- Corvid by Wix でデータベースを利用し、大規模なポータルサイト構築もできる- Wix ADI で人工知能を使い、更に簡単にウェブデザインができる●

設備面- オンラインでいつでもどこからでも制作・更新ができる- エディタを装備しているのでウェブ制作の専用ソフトが不要- 別でサーバーを用意する必要がない- ドメイン取得不要（無料プランの場合）- 独自ドメインも Wix から取得できる

Wix と同様のサービスで Jimdo やブログなどがありますが、デザイン面では Wix の方が自由度が高く、カスタマイズも可能です。機能面においても、ショッピング機能や SNS 機能など拡張が可能です（一部有料）。無料版のドメインは登録時のメールアドレスがベースになりますが変更も可能ですし、外部で取得した独自ドメインへの接続や、アップグレードによる Wix 上での独自ドメイン取得も可能です。
また、実際の制作で使用するエディタは、メールやエクセル、パワーポイントで画像やテキストを配置していくのと同じ感覚で操作でき、HTML などの知識を必要としません。一般的なアプリケーションを扱える程度のスキルレベルで十分に使いこなすことができます。

x

CMS のなかでも特に Wix は、デザイン性の高さと操作の容易さを兼ね備えた、初心者にうってつけのサービスといえます。

2 こんなサイトにおすすめ●HTML などの知識をお持ちでない方●

更新頻度が高く、自分で更新したい方●

ホームページに多少広告が入ってもかまわない方（有料版で広告は削除可）●

制作費用をかけたくないので自分で作りたい方●

最新のデザインを求める方

メニュー表を頻繁に更新する飲食店や、イベントなどを行うアパレルショップ、逆にページ数も少なく、ほとんど更新不要で名刺代わりに持っておきたい中小企業のサイトなどにもおすすめです。
また、特にこれから起業したいが予算をかけたくないといった方には、Wix をマスターしていただき最大限に活用していただければ、大変重宝するツールとなるはずです。Wix には画像の編集機能まであり、素取りした写真の明暗やコントラストの変更、様々な効果やテキストの追加なども可能です。Wix １つでクオリティーの高いサイトが簡単に作れます。

3 Wix のデメリット●

Internet Explorer（バージョン 10 以上）、Firefox、Google Chrome、Safari（Safari 7 以上）に対応（Internet Explorer の旧バージョンを使用している訪問者には、サイトを正常に閲覧するためブラウザをアップグレードすることを勧めるバナーが表示される）●

ページ構造は 2 階層まで●

無料プランの場合、広告表示・アナリティクスを使用できない●

サイトファイルから他サーバーへの移転不可●

モバイルサイト自動作成の場合、モバイルサイトでは独立したパーツは設置できず、すべてPC サイトからの流用となる

4 こんなサイトには不向き●

完全に自由なデザインを求める場合●

サーバー移管する予定がある場合

従来の HTML でタグを打ってウェブ制作する方法が「まっさらなノート」とするなら、CMSは「システム手帳」といったところでしょうか。システム手帳はページごとに決まったレイアウ
トで情報は整理されていますが、一つのページにアドレスや日程やメモなどの様々な情報を記載するには自由度が低くなり、ノートの方が優位になります。
自由度と簡易性の両方の側面から Wix の特性を理解してご利用いただくことをお勧めします。
また、先々サーバーの移動が発生する場合は従来の方法では対応できません。全ページをコピーxi

した上でプログラムを書き出す必要があるので、事実上エクスポートはできないと考えてください。

Wix でのサイト制作の流れ
著者が実際に行っている Wix でサイトを制作する場合の流れについて紹介します。

1 おおまかな流れ
1.

登録してアカウントを取得

2.

ログイン

3.

テンプレートを選択

4.

不要なページの削除

5.

配色・レイアウトの編集

6.

フォントスタイルの設定

7.

ページの追加、複製とページ名の編集

8.

テキスト・画像・動画などの編集

9.

サイトへ各種機能の追加

10. サイト名をつけて保存
11. テキストや画像などの見直し
12. ページ SEO の編集
13. モバイルレイアウトの調整
14. サイトを公開（必要に応じて有料プランにアップグレード）

2 テンプレート選びが作業効率の最大のポイント
時間をかけずに素早くサイトを制作したい場合、この中で最もポイントとなる手順は、上記の「3.
テンプレートを選択」です。あらかじめ用意されたテンプレートを活用すれば、Wix でのホームペー
ジ制作はスピーディーに行うことが可能です。しかし、テンプレート選びを誤ってしまうとデザインは迷走したり、大幅な編集が必要となってしまいます。完成後のイメージをより具体化してテンプレートを選択しましょう。また、デザインされたテンプレートに理想のものが無ければ白紙テンプレートも選択できます。

xii

3 土台づくりが面倒な手間を減らす
上記の手順「4. 不要なページの削除」、「5. 配色・レイアウトの編集」、「6. フォントスタイルの設定」、「7. ページの追加、複製とページ名の編集」はサイト制作を開始する上での土台づくりです。上記の手順を守らずに、いきなりテキストの編集を開始してフォントを変更してしまった
場合、後に複数あるテキストを一つずつフォントの設定が必要になってしまったり、先にページ追加を行ってしまうと同じレイアウトのページを複製すれば簡単にできることを 1 ページずつ変更する手間が発生してしまいます。4 ～ 7 の項目は効率よく作業ができる手順です。

4 ホームページは画像とテキストと動画が基本
ウェブ制作において「高級感」や「安心感」が出せるかは写真やイラストなどの画像と動画で決まってきます。逆を言えばこれらがお粗末だと販売サイトであれば商品が安っぽく見えたり、飲食店の場合は不味そうに見えてしまいますので力の入れどころです。撮影、画像加工はプロに任せても良いですが、スマートフォンのカメラでも十分な撮影は可能ですし、アプリを使用して明度やコントラストの調整、テキストの埋め込みなどの加工もできます。
また、最近のデジタル一眼レフカメラは素人でも自動設定で良い写真が撮れるので、チャレンジしてみるのも良いでしょう。適正な解像度での撮影や、構図などカメラの撮影テクニックも向上心を持って取り組まれることを望みます。
テキストデータは文章力というよりも、まずは正確なものを入力しておかないと、いろいろなトラブルになりかねません。制作時に文章を考えながら直接入力するのではなく、きちんと原文をデータやペーパーで準備する、公開前には見直しをするなどしてミスを防ぎましょう。

5 確認作業も可能な限り行おう
通常、ウェブ制作する場合にはアップロードによる公開処理や複数のブラウザ・メディアでのテストなど様々な工程が必要となりますが、Wix の場合にはそうした作業の必要がなかったり、簡略して行うことができます。以前 Wix で制作したサイトを Internet Explorer 8 でブラウジングテストした際に、Google Map のアプリを追加したら、指定した座標が表示されず、アメリカのサンフランシスコが表示されるという現象がありました。このようにマップなど一部の機能は旧バージョンのブラウザでは正常に動作しないこともあります。パソコンでの制作時にはきちんと表示されていたにもかかわらず、他のモバイル端末で見てみたらレイアウトが崩れていた、ということもあります。複数のデバイスを用いてブラウジングテストも可能な限り行ってみましょう。
Wix で、このような不具合などを発見した場合は、サポートフォーラムで改善要求をすることも可能です。
Wix ヘルプセンター

https://support.wix.com/ja/xiii

6 PC 版の編集が終わってからモバイル編集
Wix エディタでは PC 版とモバイル版をボタン一つで切り替えて編集を行うことができます。
しかし、PC の後にモバイルという順番を守らないと作業が 2 度手間になってしまうことがあります。PC 版の編集はモバイル版に影響を与えますが、逆は無いためです。

7 広告を削除し、独自ドメインをつかう
Wix は無料と有料のプランが用意されており、有料プランを利用すると広告が削除され、独自ドメインが利用できます。有料プランへのアップグレードを行うタイミングには注意が必要です。
有料プランは手続きを完了した日から 1 か月や 1 年の期間をカウントされます。そのため、サイト制作は無料プランで行い、完成後にアップグレードすることで有料期間を無駄なく利用しましょう。

xiv

目 次
目次
はじめに.........................................................................................................................iii

第 1 章 基本操作……1
01 Wix への登録・テンプレートの選択.................................................................2
02 エディタ画面の構成............................................................................................603 ページの追加・削除.........................................................................................13
04 保存と公開........................................................................................................20
05 ログイン・ログアウト.....................................................................................22
06 背景....................................................................................................................24
07 テキスト............................................................................................................3408 画像....................................................................................................................41
09 ギャラリー........................................................................................................51
10 ベクターアート.................................................................................................61
11 シェイプ.............................................................................................................65
12 インタラクティブ.............................................................................................67
13 ボタン................................................................................................................75
14 ボックス............................................................................................................78
15 ストリップ........................................................................................................80
16 リスト＆グリット.............................................................................................86
17 動画....................................................................................................................91
18 音楽....................................................................................................................95
19 ソーシャル........................................................................................................99
20 コンタクト.....................................................................................................106
21 メニュー.........................................................................................................110
22 ライトボックス..............................................................................................115
23 ショップ.........................................................................................................120
24 ［追加］の［その他］......................................................................................147
25 ブログ.............................................................................................................155
26 Wix App Market..........................................................................................168
27 メディア.........................................................................................................173xv

第2章サイトの管理……177

28 サイトの管理..................................................................................................178
29 ドメインの変更..............................................................................................185
30 サイトの復元..................................................................................................187
31 サイトの複製と削除......................................................................................189
32 アカウント間の移動......................................................................................191
33 SEO ウィザード............................................................................................193
34 Wix サイトの SEO・SEM...........................................................................197
35 Google Analytics.......................................................................................201

第3章

もっと Wix App!……205

36 Wix App の一覧............................................................................................206
37 Google カレンダー......................................................................................217
38 PDF ビューワー............................................................................................220
39 オリジナルお問合せフォーム（123 Form Builder）.............................224
40 カウントダウン・クロック..........................................................................229
41 テーブルマスター..........................................................................................231
42 Wix FAQ........................................................................................................234

第4章

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

43 モバイルエディタ..........................................................................................238
44 メニュー & ページ.........................................................................................23945 モバイル背景..................................................................................................240
46 モバイルサイト..............................................................................................244
47 ページレイアウト最適化／非表示のパーツ...............................................249

第5章

アップグレード……253

48 プレミアムプラン..........................................................................................254
49 アップグレードの方法..................................................................................256

xvi

第6章

ドメインとメール……259

50 Wix からドメイン購入..................................................................................260
51 独自ドメインのセットアップ.......................................................................264
52 G Suite カスタムメールアドレス..............................................................266
53 さくらインターネットのメールサーバーとの接続....................................270

第7章

Wix ADI と Corvid by Wix……277

54 Wix ADI の概要.............................................................................................278
55 Corvid by Wix..............................................................................................285
56 Corvid by Wix の 5 つの用途.....................................................................288
索引.......................................................................................................................313

xvii

第1章

基本操作
画像やテキストの編集、公開処理までの主要な機能をチュートリアル形式で学んでいきます。テンプレートを活用することでスピーディーな制作が可能です。Wix の基本操作をマスターしてオリジナルのホームページを制作しましょう。

第1章

基本操作

01

01

Wix への登録・テンプレートの選択

Wix への登録・テンプレートの選択
事前準備するのはメールアドレスだけ。登録はいたってシンプル。プロがデザインしたテンプレートは見るだけでも参考になります。
参照ページ URL https://ja.wix.com/

1 Wix への登録
(1) https://ja.wix.com/ へアクセスし［今すぐはじめる］をクリックします。

第クリック

章

1

基本操作

(2) ログイン／新規登録の画面へ切り替わります。

2

(3)［無料新規登録はこちら］をクリックして E メールアドレスと希望のパスワードを入力し、［新規登録］をクリックします。
※登録したメールアドレス宛に Wix チームからメールが届きますが、このメールに関係なく先へ進むことが可能です。また、Facebook もしくは、Google のアカウントを使用して登録を行うことも可能です。
注意パスワードは 4 文字以上 15 文字未満

E メールアドレスを入力

01
WWW

希望のパス
ワードを入力

W
W
W
W
W
W
W
W
W
W
W
W
W
W

Facebook または Google+ アカウントでのログインも可能
クリック

2 テンプレートの選択
今回は飲食店を想定したホームページ制作を行うので、テンプレート選択の画面では［飲食店＆グルメ］を選択します。

クリック

3

次に、
「Wix エディタ」で作成の［テンプレートを選ぶ］をクリックします。
※ Wix ADI で自動作成の場合は 279 ページを参照

クリック［飲食店 & グルメ］テンプレートのカテゴリの中から［レストラン］を選択します。
第章

1

基本操作

クリック

ポイント
画面左の一覧からジャンル分けされた様々なテンプレートを確認できます。

4サンプルサイトのページ遷移やスライドショーを使っているテンプレートの場合は、サンプル画像下の［表示］から、実際の動きを確認することが可能です。

クリックして確認［表示］で確認したテンプレートの編集を決定した場合は上部の［編集］でエディタ画面へ進みます。
※本チュートリアルでは「シェフ」のテンプレートを使用します

01
WWWW
W
W
W
W
W
W
W
WW
W
W
W
W

クリック

読み込みが完了すると、このようなエディタ画面が表示されます。

5

02

エディタ画面の構成

エディタ画面の構成

02

テンプレートを編集する上での基礎となる部分です。各部の役割を覚えて正確かつスピーディーな編集を可能にしましょう。

1 メニューとボタンとツールバー
画面上段の白い［メニュー］と［ボタン］と［ツールバー］の 3 か所に分かれています。

メニュー

第章

1

基本操作

ボタン

ツールバー

2 メニュー
メニューは主にデザイン以外のページの切り替えや設定、保存などの編集を行うためのものです。
ツールバー、定規等の表示
PC とモバイル編集モード切替

Corvid

やり直す
メニューを隠す

最近使ったページ
公開、複製、履歴などの操作

プレビュー

ズームアウト
ヘルプ、利用規約

SEO、ファビコン、共同管理など

6

戻る

公開
保存

プランのアップグレード

3 メニュー各部ページ

最近閲覧したページ、ページの切り替え、ページの管理

デスクトップ

デスクトップからアクセスした時に表示される「デスクトップエディタ」に切り替え
エディタ画面の構成

02

モバイルエディタに切り替え

スマホからアクセスしたときに表示されるサイトを編集する「モバイルエディタ」に切り替え

7

サイト

設定

編集内容の保存やプレビュー、公開、編集履歴など

ドメインを接続、メールアカウントを作成、SEO レポートやアクセス解析など

第章

1

基本操作

ツール8

ツールバーやガイド線、スナップの表示と非表示など

コード

Wix Corvid はプロ向けのデータベースやプログラミングが可能なツール

ヘルプ

エディタのヘルプ、ショートカットの一覧など

エディタ画面の構成

02

アップグレード

プレミアムプランへのアップグレード

9ズームアウト／並び替え作業を 1 単位戻します

やり直す

作業を 1 単位進めます

第元に戻す

章

1

基本操作10