WEBデザイン
Wix -基礎編-
INDEX
目次

Wix -基礎編-

教材全体の目安学習時間:600分

この教材の学習時間:60分

目安の学習時間:5分

  • Wixとはいわゆる「ノーコードツール」と呼ばれるもので、HTML・CSSなど専門的な知識がなくても直感的にWEBサイト構築ができます!
  • ノーコードツールもどんどん進化しており、ほとんどのWEBサイト仕様はノーコードツールで十分に実現できます
  • ノーコードツールを使うと工数を減らしながら高いクオリティを出せます。さらに、クライアント目線でも納品された後クライアント自身で修正しやすいので喜ばれます!

0. できるようになること

実際にWixで作成されたHPをご紹介!!

Wixでは繊細なデザインのWEBサイトからダイナミックなデザインのWEBサイトまで、どんなWEBサイトでも自由に作成可能です!

  • 実際に自分で学ぶ前に、実際に作れるようになるWEBサイトのイメージを膨らませるため、以下のサイトを閲覧してみましょう!

1. Wixでの学習のポイント

目安の学習時間:5分

  • Wixは非常に直感的で操作しやすいので、「とりあえず触ってみる」精神でやっていくのがおすすめです。
  • 学習を進めるにあたって、プロのWEBデザイナーとして一生使える「自走力の型」を最初に身につけましょう!

■ Wixは頻繁にアップデートされる

WixなどのWeb業界で使用されるツールはユーザーがより使いやすくなるよう、日頃使っているスマホアプリと同じように頻繁にアップデートされています。
そのため、「教材の画像と、実際の画面のボタンの場所が違う」ということが起こり得ます。
しかし、実務の場ではそういったアップデートに対応していくスキルは必須です!
以下のことを意識しながら、学習段階からスキルを身に着けていきましょう!

アップデートされても学習を続けるためには

  • 「場所の暗記」ではなく「探し方」を学ぶ:
    ボタンの位置のみの丸暗記だと、アップデートされる度に覚えねばならず、困ってしまいます。
    探すコツを覚えていれば、ボタンぼ場所が変わっても迷うことなく作業を進められます!
  • 検索力を鍛える:
    学習中に「これどうやるんだろう?」と迷った時は、まずAIに質問したり、「Wix 〇〇(知りたいこと) 2026(最新年号)」と検索してみましょう。
    ※AIには「Wixのエディタで〇〇をする手順を教えて」のように、具体的な目的を伝えて質問するのがコツです。
    エラーが起きた際は、表示されているメッセージをそのまま貼り付けて相談するとスムーズに解決できることが多いです。
「検索力」と「変化に対応する力」を身につけることができれば、どんどんスキルアップすることができます!

2. Wix導入編

目安の学習時間:15分

■ Wixにログインする

早速ですが、「習うより慣れろ」が大事ですのでWixにログインしましょう!

まずは下のWixの公式サイトに遷移し、「今すぐ始める」からアカウントを作成しましょう!

 (42980)

メールもしくはGoogleアカウントで登録できます。

Google Chromeをデフォルトブラウザとして使う”で説明したように、今後Googleアカウントで作業を行っていくことを考えると、Googleアカウントでログインするのがおすすめです!

パスワードを設定すれば新規登録は完了です!

 (42983)

引き続き基礎編の学習を進めていきましょう!

■ はじめに - 網羅的に全ての機能を知るなら Wix ヘルプセンターがおすすめ

URL: Wixヘルプセンター

 (5110)

WixなどのIT系のツールは大抵の場合公式のマニュアルが充実しています。

色んなユーザーに使ってもらいたいから当たり前ですね。

網羅的に機能を知りたいなら公式ページを見るのが最も確実で正確です。

どんどん機能はアップデートされていっているので、公式情報に当たるのがWEBスキルの学習においては大切です。

プロからの一言
今後WEBスキルの学習をするに当たっては、公式情報にあたる癖をつけておくと良いでしょう。

これ以降、主要な機能に絞って解説していきます。

■ Wix マイサイトページとは

 (5115)

Wixのマイサイトページでは複数のWEBサイトを作成・管理することができます。

サイトごとにアカウントを分ける必要がないのでとても使いやすいです。

新しいサイトを作成すると、マイサイトページに作成したサイトが一覧で表示されます。ここでサイトを一元管理することができます。

サイトごとに有料プランを購入することができ、アップグレードすると独自ドメインの接続などが可能になります。またプランはサイト間で適用先を移動することもできたりします。

参考:マイサイトページについて

■ Wixのダッシュボードの説明

 (5117)

サイトを選択して管理メニューに入ると、写真のようなダッシュボードが表示されます。

この画面が、特定のサイトを管理する際に操作を行う主なページとなるので覚えておいてください。

サイトの編集、プランの設定、マーケティングツールの設定などあらゆることがこのページからできます。

参考:サイトのダッシュボードにアクセスする

■ Wixの基本課金体系

Wixの料金体系については、以下の公式ページから確認しましょう!

教材内で学習する内容は、全て無料の範囲内で使えるのでご安心ください。

Wixではサイト単位でドメイン接続、データ容量などに応じて課金額が変わります。それに加えてアプリ単位で月額で費用がかかってくるという形式になっています。

クライアントの要望に応じて、実際の案件では有料プランを検討しましょう。 個人で練習する分には無料プランで問題ありません。

3. Wix機能紹介

目安の学習時間:25分

WEBスキルは使いながら実践を通じて覚えていくことを推奨しているので無理にここで暗記する必要はありません。

気になる方は、Wixの機能一覧は以下の公式ページから確認するのがおすすめです。

まずは実践しながら掴んでいき、最後体系的に把握したりするのがおすすめです。

最初から体系的に全て暗記してから触ろうとするのは悪手なのでやめましょう。常に実践が勝ります!

■ 目的の機能が見つからない時の3つの手順

各機能を見る前に、場所がわからなくなった時の「探し方」をマスターしましょう。
  1. エディタ内検索:
    エディタ右上の「虫眼鏡アイコン」を活用しましょう。
    場所を探すより、機能名(ボタン、ストリップ等)を入力して呼び出すのが最短ルートです。
  2. 「エリア」でアタリをつける:
    アイコンの形が変わっても「役割」は変わりません。
    「左側は要素の追加や管理」「上側は保存や公開」といったエリアごとの役割を意識しましょう
  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分ルール

  1. エディタ内の「検索窓」に機能名を入れてみる。
  2. 関連しそうな「エリア(左・上・右)」をすべて開いてみる。
  3. 公式ヘルプやAIなどに聞いてみて最新の仕様を確認する。

■ コーチへの自分で試した内容の報告

5分試しても解決しない場合は、遠慮なくコーチを頼ってください!
その際、以下の「OK例」のように自分がどこをどう探したかを添えて質問するのが望ましいです。
❌ NG
「教材と画面が違うので分かりません。教えてください。」
✅ OK
「教材と画面が違いました。エディタ内検索を試し、公式ヘルプも見ましたが〇〇が見当たりません。探し方のコツを教えてください!」
コーチは「答え」だけでなく、あなたの「探し方」についてもアドバイスをくれます。

TIPS:WixとWordPressの使い分け

目安の学習時間:5分

今後学習するWordPressとの使い分けに関して簡単に説明します。

ツールはサイト制作の目的、使用用途、ツールの特徴、予算など様々な要素を加味して検討することが大切です。

ケースバイケースなのであくまで例としてどのような観点で使い分ければよいかご説明します。

予算という観点から

Wixの場合とWordPressの場合でもさほど変わらないので多くのケースで予算で選ぶべきではないと思います。

差があってもせいぜい数百円~数千円なのでそれよりは使える機能や用途の観点から考えていくことが大切です。

用途別で見ると?

通常のコーポレートサイトや宣伝ページなどを作る場合はWixとWordPressどちらでも良いと思います。

ただWixの方がより簡単にデザイン性の高いサイトを作れると思いますし、クライアントがその後自分で運用保守をしたいニーズなどがある場合は、Wixをおすすめするのはありだと思います。

ブログ・メディアを作る場合はWixではなくWordPressを選択した方が良いです。理由としてはWordPressの方がより大量に記事を書く必要があるブログやメディアに最適化されてシステムが組まれています。サイトスピードも早く記事のエディタ機能も充実しています。

WixとWordPress双方深く学んでいく中でよりどう使い分ければ良いのか見えてきます。

正解はないので、その状況に応じて判断してツール選定を行なっていくことが重要です。

大抵以下のような観点から要素を洗い出し検討していくことが多いです。

  • クライアントの目的
  • どの程度カスタマイズしたいか
  • 用件
  • 予算
  • スケジュール
  • 運用保守は外注か内製か

TIPS:ヘルプページから問い合わせする方法

目安の学習時間:5分

必要になるシーン

WixなどのIT系のツールでは、基本的にツール提供会社がヘルプページを用意しており、また問い合わせへの対応を行っています。

自分で試行錯誤しGoogleで検索しWixのヘルプページを熟読しても分からないときは、サポートチャットでお問い合わせするのがおすすめです。

実際にWixカスタマーサポート担当者が対応してくれます。

Wixも常に機能のアップデートがありますし、機能数は膨大です。

クライアントからWixでこの機能が実現可能か?と問われた場合などに自分でしっかりリサーチし試行錯誤した上で、カスタマーサポートに聞いてみるのが良いでしょう。

お問い合わせを行う方法

上記URLに直接アクセスする以外の方法としては例えば下記のようなヘルプページの下に、お役に立ちましたか?のような表示があります。

はい / いいえでいいえ > 「こちらをクリック」を選択することでサポートチャットページに飛び、お問合せすることができます。

 (5166)

おわりに:アップデートを見つけたら

運営としても、皆さんが常に最新の環境で学べるよう、Wixのアップデートに合わせた教材のメンテナンスを日々行っています。
ただ、学習中にアップデートされている箇所があった際は、些細なことでもぜひ以下のフォームでご報告お願いいたします🙇
あわせて、教材の分かりづらい箇所や改善してほしい点など、皆さんの率直なご意見もぜひお聞かせください!
※質問フォームではありません。(質問はコーチにお願いいたします)
 送信専用となっているので、UI変更などのアップデートを見つけた時のみの使用をお願いいたします。
 各章(初級、中級、上級)のページからでも送信できます。

皆さんの学習を少しでもスムーズにする、他の学習中の受講生を助けるためにも、ぜひよろしくお願いいたします!
フォームの内容を確認し、適宜教材を修正させていただきます!
プロからの一言

WEBスキルの学習に終わりはありません。業界は移り変わり流行のツールもどんどん変化していきます。

そういった業界で大切なのは学習能力です。

Wix学習でツール学習の要領を掴みましょう。

Wix以外のツールでも同じように公式のヘルプページを参照したり問い合わせを駆使しながら使えるようになっていきましょう。

WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH