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