Wix -基礎編-
教材全体の目安学習時間:600分
この教材の学習時間:60分
目安の学習時間:5分
- Wixとはいわゆる「ノーコードツール」と呼ばれるもので、HTML・CSSなど専門的な知識がなくても直感的にWEBサイト構築ができます!
- ノーコードツールもどんどん進化しており、ほとんどのWEBサイト仕様はノーコードツールで十分に実現できます。
- ノーコードツールを使うと工数を減らしながら高いクオリティを出せます。さらに、クライアント目線でも納品された後クライアント自身で修正しやすいので喜ばれます!
0. できるようになること
実際にWixで作成されたHPをご紹介!!
Wixでは繊細なデザインのWEBサイトからダイナミックなデザインのWEBサイトまで、どんなWEBサイトでも自由に作成可能です!
- 実際に自分で学ぶ前に、実際に作れるようになるWEBサイトのイメージを膨らませるため、以下のサイトを閲覧してみましょう!
ハンドメイド | So Jake | 東京
SUNPEDAL さんぺだる
フレディ レック・ウォッシュサロン トーキョー / 目黒原町店
1. Wixでの学習のポイント
目安の学習時間:5分
- Wixは非常に直感的で操作しやすいので、「とりあえず触ってみる」精神でやっていくのがおすすめです。
- 学習を進めるにあたって、プロのWEBデザイナーとして一生使える「自走力の型」を最初に身につけましょう!
■ Wixは頻繁にアップデートされる
そのため、「教材の画像と、実際の画面のボタンの場所が違う」ということが起こり得ます。
しかし、実務の場ではそういったアップデートに対応していくスキルは必須です!
以下のことを意識しながら、学習段階からスキルを身に着けていきましょう!
アップデートされても学習を続けるためには
- 「場所の暗記」ではなく「探し方」を学ぶ:
ボタンの位置のみの丸暗記だと、アップデートされる度に覚えねばならず、困ってしまいます。
探すコツを覚えていれば、ボタンぼ場所が変わっても迷うことなく作業を進められます! - 検索力を鍛える:
学習中に「これどうやるんだろう?」と迷った時は、まずAIに質問したり、「Wix 〇〇(知りたいこと) 2026(最新年号)」と検索してみましょう。
※AIには「Wixのエディタで〇〇をする手順を教えて」のように、具体的な目的を伝えて質問するのがコツです。
エラーが起きた際は、表示されているメッセージをそのまま貼り付けて相談するとスムーズに解決できることが多いです。
2. Wix導入編
目安の学習時間:15分
■ Wixにログインする
早速ですが、「習うより慣れろ」が大事ですのでWixにログインしましょう!
まずは下のWixの公式サイトに遷移し、「今すぐ始める」からアカウントを作成しましょう!
無料ホームページ作成 | ホームページの作り方 | Wix.com
メールもしくはGoogleアカウントで登録できます。
”Google Chromeをデフォルトブラウザとして使う”で説明したように、今後Googleアカウントで作業を行っていくことを考えると、Googleアカウントでログインするのがおすすめです!
パスワードを設定すれば新規登録は完了です!
■ はじめに - 網羅的に全ての機能を知るなら Wix ヘルプセンターがおすすめ
URL: Wixヘルプセンター
WixなどのIT系のツールは大抵の場合公式のマニュアルが充実しています。
色んなユーザーに使ってもらいたいから当たり前ですね。
網羅的に機能を知りたいなら公式ページを見るのが最も確実で正確です。
どんどん機能はアップデートされていっているので、公式情報に当たるのがWEBスキルの学習においては大切です。
これ以降、主要な機能に絞って解説していきます。
■ Wix マイサイトページとは
サイトごとにアカウントを分ける必要がないのでとても使いやすいです。
新しいサイトを作成すると、マイサイトページに作成したサイトが一覧で表示されます。ここでサイトを一元管理することができます。
サイトごとに有料プランを購入することができ、アップグレードすると独自ドメインの接続などが可能になります。またプランはサイト間で適用先を移動することもできたりします。
参考:マイサイトページについて
■ Wixのダッシュボードの説明
この画面が、特定のサイトを管理する際に操作を行う主なページとなるので覚えておいてください。
サイトの編集、プランの設定、マーケティングツールの設定などあらゆることがこのページからできます。
■ Wixの基本課金体系
教材内で学習する内容は、全て無料の範囲内で使えるのでご安心ください。
Wixではサイト単位でドメイン接続、データ容量などに応じて課金額が変わります。それに加えてアプリ単位で月額で費用がかかってくるという形式になっています。
クライアントの要望に応じて、実際の案件では有料プランを検討しましょう。 個人で練習する分には無料プランで問題ありません。
3. Wix機能紹介
目安の学習時間:25分
WEBスキルは使いながら実践を通じて覚えていくことを推奨しているので無理にここで暗記する必要はありません。
気になる方は、Wixの機能一覧は以下の公式ページから確認するのがおすすめです。
Wix 機能紹介 | Wix.com
最初から体系的に全て暗記してから触ろうとするのは悪手なのでやめましょう。常に実践が勝ります!
■ 目的の機能が見つからない時の3つの手順
- エディタ内検索:
エディタ右上の「虫眼鏡アイコン」を活用しましょう。
場所を探すより、機能名(ボタン、ストリップ等)を入力して呼び出すのが最短ルートです。 - 「エリア」でアタリをつける:
アイコンの形が変わっても「役割」は変わりません。
「左側は要素の追加や管理」「上側は保存や公開」といったエリアごとの役割を意識しましょう - 公式ヘルプセンター:
困った時はWixヘルプセンターに聞いてみましょう。
Wixの質問に特化したAIが対応してくれるので、気軽に質問できます!
これらを駆使して、以下の主要な機能に触れてみましょう!
■ Wix エディタ
Wixでページ編集に使う機能です。500種類以上のテンプレートから好きなスタイルを選び、それをもとにドラッグ&ドロップの直感的な操作でページを作成できます。 もちろん白紙のページを使って0から構築することもできます。
機能がたくさんあり非常に充実しています。
- プロのWEBデザイナーが構築した大量のテンプレート
- ドラッグ&ドロップによる直感的な操作
- 高度なSEOツール
- モバイル完全対応
- App Market:豊富なアプリをインストールすることで機能をさらに拡張できます
- ビジュアルエフェクト:アニメーション、スクロールエフェクトなどのアニメーションがワンタップで実装可能
- フォントアップロード:フォントファイルをアップロードすればいくらでも追加できます
- 画像や動画の追加
■ AI サイト生成機能
いくつかの質問に答えるとAIが自動で最適なホームページを作成してくれる機能です。 相当簡易的にページを作成したい場合以外ではあまり使用頻度は多くないです。
■ Velo by Wix
Veloは高度なWEBアプリケーションをWixで構築するためのオープン開発プラットフォームです。
自由なWEBプロジェクトの制作、管理、公開を可能にします。
Wixエディタの標準機能で実装が難しい場合は、Velo 開発モードを使うことによってコードでカスタマイズすることができます。
こちらに関してはおいおい、HTML、CSS、JavaScriptを学習した上でトライしてみると良いでしょう。
■ Wix ストア
Wixを用いてECサイトを構築することができます。
商品の追加、受注状況の確認、商品ページのカスタマイズ、複数の決済方法など柔軟にカスタマイズすることが可能です。
ただし、ECサイト構築ツールとしては、ShopifyやBASEの方がスタンダードであるため、ECが目的である場合はそちらのツールの活用をおすすめします。
■ Wix ブッキング
Wixを用いて予約機能を構築することができます。
24時間の予約受付、オンライン決済、プライベート/グループサービス、Googleカレンダーと同期、自動リマインダーなど予約機能に必須の機能が全て備わっています。
■ Wix ブログ
ブログを開設することで記事の投稿やコメントの確認などを行うことができます。
コーポレートサイトにおいてはプレスリリース打つことがよくあると思います。
そういった場合にこちらの機能は非常に便利です。
本格的なブログやメディアを構築する場合は今後学習するWordpressをおすすめします。理由としては、大容量に対応でき、サイトスピードが速く、ブログ記事作成ツールが充実しているからです。
■ Wix ミュージック
サイト上から音楽を配信できます。
音楽プレイヤーの色やデザインのカスタマイズ、ダウンロード販売機能、配信レポートなどが搭載されています。
■ Wix フォトグラフィ
30種類以上のレイアウトからメディアギャラリーを選択することができます。
画質補正ツールが搭載されており、高画質な画像を美しいレイアウトで表示することができます。
■ Wix ビデオ
動画配信、動画のアップロード、有料配信を行うことができます。
動画のアップロード容量には限界があるので、そういった場合にはYouTubeチャンネルなどと併用することをおすすめします。
■ Wix イベント
イベント招待メールの送信、ゲストリストの管理、チケット販売機能が搭載されています。
■ Wix レストラン
オンラインメニューの作成、ネット注文対応、ネット予約機能が充実しています。
■ マーケティングツール
Wixには強力なマーケティングツールが搭載されており、集客に強いサイトを構築できます。
- SEOチェックリスト GoogleへのインデックスとSEO最適化のガイドとなるチェックリストを作成可能
- 高度SEOツール
メタタグ、構造化データ、robots.txtファイルなどをカスタマイズ可能
- メルマガ配信 デザインは自由に編集可能でメルマガ送信ができます。 普通はメルマガ機能は別途システムを導入しなければならないことも多いので、Wixでは普通に使えるのでとても便利です。
- アクセス解析 アクセス地域や滞在時間などサイト訪問者の動向を詳しくチェックできます。 こちらに関してはGoogle Analyticsを活用することをおすすめしています。 Google Analyticsの方がより詳細な分析が可能だからです。
- SNSツール Facebook、X(旧Twitter)、Instagramの投稿を行うことができます。アカウント連携することでWixから投稿を確認できます。
- お問合せフォームの設置 通常これだけでも別途システムを導入し高額な費用がかかるケースもありますが、Wixでは標準機能として使用することができます。
WEBスキル学習においては読んで覚えたり見て覚えたりするのではなく、あくまで「実際にやってみて習得する」のが最も効果的です。
早速Wix実践編でどんどんアウトプットしていきましょう!
TIPS:5分ルールと質問のしかた
目安の学習時間:5分
ただし、「自走力」を育てるために、質問前に必ず「5分間」だけ以下のステップを試してみてください。
■ 5分ルール
- エディタ内の「検索窓」に機能名を入れてみる。
- 関連しそうな「エリア(左・上・右)」をすべて開いてみる。
- 公式ヘルプやAIなどに聞いてみて最新の仕様を確認する。
■ コーチへの自分で試した内容の報告
その際、以下の「OK例」のように自分がどこをどう探したかを添えて質問するのが望ましいです。
|
❌ NG
|
「教材と画面が違うので分かりません。教えてください。」
|
|---|---|
|
✅ OK
|
「教材と画面が違いました。エディタ内検索を試し、公式ヘルプも見ましたが〇〇が見当たりません。探し方のコツを教えてください!」
|
TIPS:WixとWordPressの使い分け
目安の学習時間:5分
今後学習するWordPressとの使い分けに関して簡単に説明します。
ツールはサイト制作の目的、使用用途、ツールの特徴、予算など様々な要素を加味して検討することが大切です。
ケースバイケースなのであくまで例としてどのような観点で使い分ければよいかご説明します。
予算という観点から
Wixの場合とWordPressの場合でもさほど変わらないので多くのケースで予算で選ぶべきではないと思います。
差があってもせいぜい数百円~数千円なのでそれよりは使える機能や用途の観点から考えていくことが大切です。
用途別で見ると?
通常のコーポレートサイトや宣伝ページなどを作る場合はWixとWordPressどちらでも良いと思います。
ただWixの方がより簡単にデザイン性の高いサイトを作れると思いますし、クライアントがその後自分で運用保守をしたいニーズなどがある場合は、Wixをおすすめするのはありだと思います。
ブログ・メディアを作る場合はWixではなくWordPressを選択した方が良いです。理由としてはWordPressの方がより大量に記事を書く必要があるブログやメディアに最適化されてシステムが組まれています。サイトスピードも早く記事のエディタ機能も充実しています。
WixとWordPress双方深く学んでいく中でよりどう使い分ければ良いのか見えてきます。
正解はないので、その状況に応じて判断してツール選定を行なっていくことが重要です。
大抵以下のような観点から要素を洗い出し検討していくことが多いです。
- クライアントの目的
- どの程度カスタマイズしたいか
- 用件
- 予算
- スケジュール
- 運用保守は外注か内製か
TIPS:ヘルプページから問い合わせする方法
目安の学習時間:5分
必要になるシーン
自分で試行錯誤しGoogleで検索しWixのヘルプページを熟読しても分からないときは、サポートチャットでお問い合わせするのがおすすめです。
実際にWixカスタマーサポート担当者が対応してくれます。
Wixも常に機能のアップデートがありますし、機能数は膨大です。
クライアントからWixでこの機能が実現可能か?と問われた場合などに自分でしっかりリサーチし試行錯誤した上で、カスタマーサポートに聞いてみるのが良いでしょう。
お問い合わせを行う方法
上記URLに直接アクセスする以外の方法としては例えば下記のようなヘルプページの下に、お役に立ちましたか?のような表示があります。
はい / いいえでいいえ > 「こちらをクリック」を選択することでサポートチャットページに飛び、お問合せすることができます。
Contact Wix
おわりに:アップデートを見つけたら
ただ、学習中にアップデートされている箇所があった際は、些細なことでもぜひ以下のフォームでご報告お願いいたします🙇
あわせて、教材の分かりづらい箇所や改善してほしい点など、皆さんの率直なご意見もぜひお聞かせください!
Wix教材報告フォーム
送信専用となっているので、UI変更などのアップデートを見つけた時のみの使用をお願いいたします。
各章(初級、中級、上級)のページからでも送信できます。
皆さんの学習を少しでもスムーズにする、他の学習中の受講生を助けるためにも、ぜひよろしくお願いいたします!
フォームの内容を確認し、適宜教材を修正させていただきます!
WEBスキルの学習に終わりはありません。業界は移り変わり流行のツールもどんどん変化していきます。
そういった業界で大切なのは学習能力です。
Wix学習でツール学習の要領を掴みましょう。
Wix以外のツールでも同じように公式のヘルプページを参照したり問い合わせを駆使しながら使えるようになっていきましょう。





