Wix実践 -初級編-

前の章に戻る次の章に進む

1. はじめに

この教材の学習時間: 8時間

いよいよ実際に手を動かしてWEBサイトを構築してもらいます！

はじめてのWEBスキルの学習を進めていく上で行き詰まることもあると思います。

ゆっくりでいいので止まることなく、頑張っていきましょう！

以下のフローに沿ってこの初級編を進めてください！

==

制作課題を確認する。
動画を視聴しながら、実際にWEBサイトを制作してみる。
間違っているところがないか自己添削する
コーチにSlackにて共有する。

==

注意事項

動画の視聴後は必ずポイントチェックを確認してください
ポイントチェック集に大事な要点と頻出の質問に対する回答がまとめられています。効率的に復習ができるのでぜひ活用してください🙌
提出の際、学習管理シートに記載されているメールアドレスを用いて、Wixの権限を共有しましょう！
添削をするにあたって、Wixの権限共有は必須です。権限共有の仕方がわからない方は、「Wix -実践編- ＞ d. Wixの権限共有機能を理解しよう」を確認しましょう🙌
Webデザインで扱うツールは日々UI（画面の見た目）が変更されます。
運営では日々教材の改善に努めておりますが、Wixも日々アップデートされ、機能やボタンが常に追加・変更されていくため教材の画面と異なる場合があります。また、ユーザーごとに表示されるUIが若干異なる場合があります。教材の通り進めていてご不明な点ございましたら以下のフローに従って解決していただけますと幸いです🙌

・分からないことが出てきたときの対処方法

1.画面のスクリーンショットを取る。
Windowsは「Windows + Shift + S」や「PrtSc」、Macは「Command + Shift + 3」や「Command + Shift + 4」を使います。

2.AI（Chat gpt や google gemini など）にそのスクリーンショットを添付し疑問点を書く。

3.AIにきいても解決しなかった場合はコーチに聞く。

分からないことがあれば遠慮なく質問しましょう！また、以下のフォーマットに従って質問をするとよいです！

・実現したいこと
・エラーの内容、わからないこと、できないこと
・原因の予想
・実際に試したこと
・回答者が参考になりそうなソースコードやファイルなど

それでは、頑張っていきましょう！

2. 作成課題の確認

目安学習時間: 5分

こちらが制作課題となります！

3. 解説教材

目安の学習時間: 8時間

Wixはかなり直感的に操作することができます。

この動画でも直感的に操作方法を解説しているので、5つの動画を見れば基本的な操作は網羅することができます。順番に焦らず進めていきましょう！

動画で学習を進めていく上での注意事項

はじめは流し見でも構いません。最初はできなくても当たり前なので、焦らずゆっくり進めましょう！
画面分割機能やスマホ、ディスプレイを用いてPCでWixを操作しやすい環境を整えましょう！
完璧主義は学習の進度を遅くしてしまいます。わからないところは飛ばしてどんどん学習を進めましょう！

教材を学習していくにあたってWixの保存、作業していた編集画面を再び開きたい場合は以下の手順で行うことができます。

・Wixの保存方法

1. デフォルトの設定で自動保存がオンになっているのでそのままタブを閉じて問題ありません。Wixの編集画面右上にある「保存」をクリックして保存することもできます。

・作業していた編集画面を再び開く方法

1.Chromeで「Wix ログイン」と検索し、登録したメールアドレスでログインする。
ログイン用URL：https://users.wix.com/signin?overrideLocale=ja

2.画面左上にある「すべてのサイト」を選択し、開きたい編集画面のサイト名を選択します。

3.画面右上にある「サイトをデザイン」を選択する。

3-1. Wix -初級編- part.1

Wixは開けましたか？

ここからは動画を停止させながら動画と同じサイトを作成していきます。
基本的な操作から丁寧に解説されている動画になるので安心して取り組んでいきましょう！

part.1ではWixの基本知識・基本操作について解説しています！

白紙のテンプレートを開く

Wixのアップデートによって、動画の手順で白紙のテンプレートが開けない場合があります
その際は以下のURLから白紙のテンプレートを開いてください！

Wix 白紙のテンプレート

白紙のテンプレートが開きます

a. 使用教材

Wix実践 -初級編- part.1-4

b. ポイントチェック

学習で使用するツールをダウンロードしよう！
以下の二つのリンクから、使用するツールをダウンロードしてください。

ColorPick Eyedropper

ページ構成の理解をしよう！
WEBサイト作成時には今回のようにまずページ構成を明確化する必要があります！

今回のサイトのページ構成は何か？

A.

ヘッダー
サムネイル画像（タイトル、キャッチコピー）
コンセプト
特徴（OUR VALUE）
事業紹介 (SERVICE)
画像
問い合わせ (CONTACT)
フッター
チャット機能

HPセットアップの際の初期設定をしましょう！ Wixでは主に以下の２つの方法でHPを制作することができます。
- エディタによる制作
  
  主にテンプレートを用いて、自分で編集して制作する方法です。クライアントの意向を反映しやすいため、基本的にはこちらを使いましょう！
- Wix Harmonyを用いた統合AI制作
  
  AI の技術でウェブ制作の全工程を調和させる Wix Harmony（ウィックスハーモニー）。
  
  プロンプトから得た情報を元にAIがサイトの構造やコンテンツ、高度なレイアウトを統合的に判断し、洗練されたHPをデザインします。複雑なレスポンシブ設定の自動化や、ブランドの世界観に合わせた素材の生成を自動で実行してくれます。しかし、機能を最大限に引き出すにはプロ向けの編集操作が必要となるため、初心者による手軽な作成よりも制作の効率化を求めるプロフェッショナルに特化して利用されています。

Wix Harmonyでサイトを作成してしまったときには
画像のような画面が表示されている場合はWix Harmonyでサイトを作成してしまっています。

一度Wix Harmonyでサイトを作成してしまうと、Wixエディターに変更はできないため、再度新規サイトを作り直す必要があります。

Wix Harmonyでサイトを作成してしまった際の対処法(左の▶をクリックすると開けます)

左上の「Wix」から「ダッシュボードに移動」をクリック
左上のサイト名をクリックし、「新しいサイトを作成」をクリック
初級編1.3の動画を見て、Wix editorで作成する

基本操作について理解しよう！
- 配置方法 ドラッグ&ドロップで行う。ピンクの線が中央であることを意味するのでそれに合わせて移動させます。また、あらゆるものがコピー&ペーストできます！

Q. 複数のパーツを同時に選択したい場合にはどのようにすればいいですか？

A. shiftを押しながらパーツをクリックすることで複数パーツを同時に選択できます！
　「まとめてサイズを変えたい！」、「まとめて削除したい！」という場合に便利です！

Q. コピーとペーストをもっと楽にやりたいのですがどうすればいいですか？

A.「 Command+C(Mac)/Ctrl＋C(Windows) 」でコピー、「 Command+V(Mac)/Ctrl＋V(Windows) 」でペーストができます。
基本的にWix以外のどの場面でも使用できる便利なショートカットキーです！押さえておきましょう！

Q.ツールバー、レイヤーが作業のときに邪魔です。どうすればよいですか？

A.ドラッグアンドドロップで簡単に移動できます！
バーの上にカーソルを合わせ、カーソルが十字のとき移動できます！

ヘッダーを編集してみよう！ たくさんのデザイン方法があるので、一つ一つ暗記するのではなく、実際に手を動かして少しずつ覚えましょう！以下2点、動画で確認してください！
- 色・不透明度の変更
- 枠線の編集方法
テキスト編集 以下の項目を動画で確認しましょう！
- フォント選択 サイト全体でフォントがバラバラだと統一感が出ない場合が多いです。特に目的がない場合には統一するとよいでしょう！
- サイズ調整
- 太字・斜体の利用
- エフェクトの利用
- 色選択
- 配置中央揃え、左揃え、右揃えなど選ぶことができます。

3-2. Wix -初級編- part.2

part.2では主にWixの主な編集ツールについて解説しています！

もし今後、Wixについて復習する際は、この動画を見返すのがおすすめです👌

a. 使用教材

Wix実践 -初級編- part.2-2

b. ポイントチェック

Wixの主な編集ツールを把握しよう！ 編集ツールとは画面左側にカーソルを合わせると、出てくるものです。
- パーツを追加
  - 以下の機能がここから利用できます✨
    - テキスト
    - 画像
    - ボタン
    - ストリップ
    - 装飾
    - ボックス
    - ギャラリー
    - メニュー・アンカー
    - フォーム
    - 動画・音楽
    - インタラクティブ
    - リスト
    - 埋め込みコード
    - ソーシャル
    - コンテンツマネージャー
    - ブログ
    - ショップ
    - サービス予約
    - イベント
    - コミュニティ
    - マイデザイン
- セクションを追加
  
  セクションは、サイトページの構成要素です！
  
  セクションを有効活用して、ページを分割し、サイト訪問者にとって明確で構造化されたレイアウトを作成しましょう✨
- ページ・メニュー
  
  こちらよりHPにページを追加することができます！様々なテンプレートが準備されているので、有効活用しましょう！
  
  詳しくは「Wix -中級編-」でやります！
- サイトデザイン
  
  デザインに自信がない方でもこの機能を用いれば、サイトのデザイン性が向上します！「サイトスタイル機能」を用いて、業務最適化をしましょう！
- アプリ
  
  アプリを用いて、サイトに機能を追加することによりサイトのクオリティを向上させましょう✨
  
  種類が豊富なので暗記するのではなく、必要な際にリサーチをして、最適なものを選びましょう！
- マイビジネス
  
  こちらからインストールしたアプリケーションの設定、追加などができます。
- メディア
  
  画像・動画の格納、編集などができます。あまり使用されることはありません。
- コンテンツマネージャー
  
  こちらで制作したテキスト、画像などのコンテンツを管理します。

3-3. Wix -初級編- part.3

part.3では主にサムネイル画像・コンセプト（CONCEPT）部分の編集方法について解説しています！

a. 使用教材

補足動画_Wix初級編3-3_セクションとストリップの違い

Wixのセクションとストリップの使い分けについて、その違いと適切な活用方法を動画にて簡単に解説しています。

b. ポイントチェック

ストリップを活用しよう！ 以下のポイントを押さえて、しっかり設定しましょう。
- カラム機能（今回は使用しません）ストリップを縦に分割することができます。
- 背景画像 ストリップでは背景画像を選択することができます。
- ストレッチ機能 全幅 or ページを選択することができます。

Q. ストリップを切り替えるタイミングはいつが適切ですか？

A. コンテンツの区切りとなるタイミングでストリップを分割すると、ストリップ毎の移動なども可能なので便利です！

ツールバーを活用しよう！ 便利なのでツールバー / レイヤー / ルーラー / グリッド線 / スナップは全てオンがおすすめです👌 以下、各機能の特徴についての説明です。
- ツールバー 特に傾き、サイズ、位置を数値で指定できるのが便利です。
- レイヤー アイテムが自分が意図しない順番で重なって困ることがよくあります。そんなとき、レイヤーですぐに順番を調整できます。
- ルーラー 好きなX座標に縦線を配置することができます。

Q. 画像や挿入した図形のサイズを統一したい場合、どうすればいいですか？

A. ツールバーを使用するとサイズを数値で指定できるので、全ての図形のサイズを厳密に調整できます！

フォントサイズの決定基準を設定しよう！ 基本的にはタイトル、サブタイトルは大きくしましょう。本文は15~16pixelにするのが一般的です。
アイテム間のスペースを均一に整えよう！
- Wixはノーコードで簡単に作れる一方、スペースを揃えるのが難しいです。 Wixにおいては長さが同じボックスを使うorツールバーを活用することによってスペースを揃えることができます。

プロの世界ではスペースが均一で統一感があるのが必須です！このテクニックは絶対習得しておきましょう

3-4. Wix -初級編- part.4

part.4では、主にOUR VALUE(３つの特徴)・SERVICE（事業紹介）部分の編集方法について解説しています！

a. 使用教材

補足動画_Wix初級編4-1_サイトファイルの使用方法・リピーター機能の配置

Wix初級編の4-1セクションにおいて、サイトファイルの使用方法とリピーター機能の配置に関する疑問点について、動画にて簡単に解説しています。

補足動画_Wix初級編4-2_ボックスに挿入する際の問題点

画像の切り抜き機能の操作方法と画像をボックスに挿入する際の問題点について、動画にて簡単に解説しています。

b. ポイントチェック

・素材のダウンロード方法

1. 左の「メディア」(写真アイコン)をクリックし、「メディアをアップロード」(青いアイコン)をクリックします。

2. 「PCへアップロード」をクリックしPC内に保存されたファイルを選択することでアップロードされます。

リスト機能について理解しよう！

リピーターで簡単にアイテムを複製し綺麗に配置することができます。

一つのリピーターを編集すると、他のリピーターにも反映されるため、作業時間が短縮される一方で、融通が効かないというデメリットもあります。

Q. リピーターとはなんですか？

A. リスト機能で分割される単位のことです！

Q. アイコンの画像はどこから探せばいいでしょうか？

A. 以下のサイトを参考にするといいです！ https://icooon-mono.com/

今回の課題では、以下の素材を使用しています！
レポートのアイコン
財布のアイコン
時計のアイコン

フォトスタジオについて理解しよう！ Wixでは画像編集サイトを用いることなく、簡単な画像編集をすることができます！以下の簡単な機能を利用できます！
- クロップ・切り抜き✂️
- 画質調整
- フィルター
- テキスト挿入

3-5. Wix -初級編- part.5

part.5では、主にCONTACT(お問い合わせ)部分について解説しています！

少し長い動画ですが頑張りましょう🙌

a. 使用教材

Wix実践 -初級編- part.5-2

b. ポイントチェック

スクロールエフェクトを活用しよう！

種類がたくさんあります！まずはパララックスを使いこなせるようになり、余裕があれば他のエフェクトも試しに使ってみましょう！

スクロールエフェクトの調整

Q.スクロールエフェクトが見本通りにならないのですが、どのように修正すればよいですか？
A.次の表から今の状態を探して、修正してみてください！

状態	解決策
写真が見える窓が大きい	CONTACTのストリップとフッターを上に移動する
写真が見える窓が小さい	CONTACTのストリップとフッターを下に移動する
写真が窓から写る位置がほぼ変わらない	「パララックス」の「速度」を小さくする
写真が窓から移る位置の変化が大きすぎる	「パララックスの」「速度」を大きくする

サイトを見やすいものにすることで最後まで読んでもらえる確率が上がるので、ここをマスターするだけで大きな武器になります！

お問い合わせページを作ろう！

色んなデザインパターンがあるので、WEBサイトにあったものを選択しましょう！

今回のお問い合わせのデザインは非常にシンプルですが、この後学習するFigmaによるデザインを習得すれば、デザイン性を上げて送信率を高めることが可能です！

以下の機能はよく使うのでマスターしましょう！
- 通知メール
  
  フォームが送信されたことに気付くためにEmailを設定する必要があります。
- 自動返信
自動返信するメールのテンプレを作っておけば、フォームが提出された際、自動で返信することができます。
- 送信完了メッセージ
フォームが提出された際に、新たに表示されるメッセージです。一般的には、別のサイトに遷移させるようになっています。

通知メールの設定方法（※メールの設定は必須ではありません。学びたい人以外は飛ばして大丈夫です！）

1. 「フォームを編集」をクリック

2. ダッシュボードで「設定」を開き、画像の該当箇所で「編集」をクリック

3. 「メールを送信」の項目をクリックし、受信者を設定する。

「利用できるフォームの上限数に到達しました」と表示された場合の対処法

Wixの無料プランでは、サイトに作成できるフォームの数に上限があります。練習でフォームを何度も作り直していると、この上限に達してエラーが表示されることがあります。

このエラーは、サイトのダッシュボードから不要なフォームを削除することで解決できます。

サイト編集画面を一旦閉じ、サイトの管理ページであるダッシュボードを開きます。
左側のメニューから「顧客・リード管理」>「フォーム・回答内容」に進みます。
作成したフォームの一覧が表示されるので、不要になったフォーム（練習で作成した古いものなど）を見つけます。
該当フォームの右側にある「その他のアクション」（•••）アイコンをクリックします。
表示されたメニューから「削除」を選択してフォームを削除します。

この手順で空きができた後、エディタに戻って新しいフォームを追加できるようになります。

以下のリンクも参照してください。

Wix フォーム：ダッシュボードからフォームを管理する | サポートセンター | Wix.com

Wix フォーム：ダッシュボードからフォームを管理する

3-6. Wix -初級編 - part.6

part.6では、主にフッターとチャット機能について解説しています！

あともう少しです！頑張りましょう🙌

a. 使用教材

Wix実践 -初級編- part.6-2

b. ポイントチェック

フッターを作ろう！

今の時代全てのWEBサイトはPCで見たときだけでなく、スマホver.にも対応する必要があります。

WEBサイトにおいてはフッターは必須です

ロゴ、サイト内他ページへのリンク、著作権表示、特定商取引法表示などを表示するケースがほとんどです。
チャット機能を搭載しよう！

他社製品を導入すると高額な費用がかかるチャット機能ですが、「Wixスマートチャット」というアプリケーションをインストールすれば無料で利用することができます！

搭載方法
1.画面左のバーから「Wix App Market」をクリックし、「Wix ビジネスソリューション」を選択します。

2.下へスクロールし、「Wix スマートチャット」を選択し、インストールします。

これでチャット機能が導入されます。

設定項目

・メイン
この項目では、チャット機能の全体的な動作テストやダッシュボードへの移動といった基本操作が行えます。また、現在のチャットの接続状態が「オンライン」か「オフライン」かといったステータスの確認もこの画面でまとめて管理できます。
・レイアウト
この項目では、WEBサイト上でチャットボタンを設置する位置や表示形式を変更することができます。画面の「右下」か「左下」のどちらに置くかを選べるほか、丸いアイコン型でシンプルに見せるか長方形のバー型で目立たせるかといった配置スタイルを調整できます。
・テキスト
この項目では、訪問者が目にするチャット内のすべての文言を編集することができます。チャットの上部に表示されるタイトルや初期表示の挨拶文をはじめ、入力欄に表示する案内メッセージやオフライン時に表示される通知テキストなどを自由に書き換えることが可能です。
・デザイン
この項目では、チャットウィンドウ全体の見た目を自分のWEBサイトの雰囲気に合わせてカスタマイズできます。背景色やボタンの色、文字のフォントやサイズを変更できるほか、チャットを立ち上げるためのボタンアイコンのデザインも細かく設定できます。
・カスタム
この項目では、より詳細な動作や通知に関する設定を行うことができます。管理者が不在のオフライン時に名前やメールアドレスを受け取るフォームを表示させるかどうかを選べるほか、メッセージが届いたときの効果音の有無やチャットが開く際のアニメーション効果などを設定できます。

チャット機能の最大の強みは、サイト訪問者とリアルタイムでコミュニケーションが取れる点です。例えば、商品のサイズ感や仕様に悩んでいるお客様の疑問をその場で解消できれば、購入へのハードルを一気に下げることができます。

また、パソコンだけでなくスマホアプリ（Wix Ownerアプリ）と連携させれば、外出先からでも訪問者からのメッセージに素早く返信が可能です。購入を迷っている潜在顧客との個人的なタッチポイントを作り、親切丁寧に対応することで、成約率の向上やリピーターの獲得に大きな効果が見込めます🙌

自動ウェルカムメッセージの設定もできるため、まずはインストールして訪問者を温かく迎える準備を整えましょう！

制作上のポイント：#000000（純黒）の使用は避けるべき？

今回の制作例では#000000（純黒）を使用していますが、実際の制作例では純黒の使用はあまり推奨されていません。
これは、純黒は自然界にほとんど存在しない色であり、読み手の目を疲れさせてしまうからです。
そのため黒を使う際は、#2b2b2bや#333333を使用することが推奨されます。
有名企業の黒いロゴやアイコンも、実際は純黒でないことが多いです！（例： Instagramのロゴ）冒頭でインストールしたカラーピッカーツールで確認してみましょう！

3-7. Wix -初級編- 用語解説

補足動画_Wix初級編_用語解説

4. まとめ

目安学習時間: 5分

いかがでしたか？

サイト作成に必要な手法が一通り学習し終わり、「意外とサイト作るのって簡単なんだ！」そう感じた人が多いかと思います。

ここからよりアウトプットを重視し、実践的なサイト作成を行なっていきます。今後、Figmaでデザイン能力を身につけることによってさらにクオリティの高いサイトが作成できるようになります。

最初から完璧なものができなくても焦らないでゆっくり着実に学習していきましょう！

制作課題ができたら

自己添削をしましょう
- お手本としたサイトと上から順番に見比べ、ミスがないか確認しましょう
コーチにSlackで共有しましょう
- 「c-【受講ID】-【お名前】」チャンネルでコーチをメンションして共有します
- 提出時はWixの権限共有も必須です（サイト名は「初級編-名前」で統一）

注意事項

その際、権限共有も忘れないでください！権限共有の仕方がわからない方は、「Wix -実践編- ＞ d. Wixの権限共有機能を理解しよう」を確認しましょう🙌
また、サイト名は作成者が分かるように初級編-名前で統一しましょう！

コーチにSlackで共有する際のテンプレート

〇〇コーチ (@メンション)

お世話になっております。
Wix -〇〇編-の制作課題が終了いたしました。
以下のURLのサイトに権限共有もいたしましたのでご確認いただき、添削をよろしくお願いいたします。

==
サイトURL
==

次回は「 Wix実践 -中級編- 」です。初級編で出てきた知識に加えて、より高度なスキルを学習し、高クオリティなサイトを制作していただきます🙌

Wix教材報告フォーム

アップデート箇所の報告/教材へのご意見を募集しております！

※質問フォームではありません。(質問はコーチにお願いいたします)

前の章に戻る次の章に進む