Wix実践 -中級編-

INDEX

0. はじめに

初級編では動画を視聴しながら簡単なWEBサイトを制作していただきました。

いかがでしたでしょうか？Wixは基本的には、ドラッグ& ドロップのみの操作なので意外と簡単だなと思った方も多いと思います。

少し躓いてしまった方も心配する必要はありません。中級編、上級編とこなしていけばWixのスキルはほぼ完璧に身に付き、使いこなせるようになっています！

受講生の皆様は、もうすでにWixの基本的な操作方法はマスターしたと言っても過言ではありません。

中級編では、初級編で身につけたスキルを生かしてご自身の力のみでアウトプット課題を制作していただきます！

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

1 . 制作課題を確認する。

2 . ヒント・初級編を参考にしながら、ご自身の力のみで、1から白紙のテンプレートを用いて構築する。

3 . 解説動画を視聴し、間違っていたところ・分からなかったところなどを自己添削する。

4 . コーチにスラックにて共有する。

注意事項

分からないところがあっても、すぐに動画教材を見るのではなくご自身の力のみで自己解決を図ってください！
15分間は、初級編の動画を復習する・ヒントをみる・ググって解決法を模索するなど自己解決を図りましょう！
- 受講生の皆様がご卒業後にWEB業界で働く際には、新たなWEBスキルをご自身で身に付け、発生した問題を解決する”自己解決能力”が必要不可欠です。
画像は見本と全く同じものを使用する必要はありません。画像サイトからご自身でお選びください。
- サイトに合った良い素材を選定するのもスキルの一つです。
提出の際、コーチにメールアドレスを聞いてWixの権限を共有をしましょう！
添削をするにあたって、Wixの権限共有は必須です。権限共有の仕方がわからない方は、「WIX -実践編- ＞ d. WIXの権限共有機能を理解しよう」を確認しましょう🙌

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

1. 作成課題の確認

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

２. ヒント

初級編では扱わなかったスキルについてです！！

以下の記事を参考にして、トライしてみてください🙌

3. 解説教材

お疲れ様でした！

作成課題、いかがでしたでしょうか？

行き詰まるところも少なくなかったと思います。以下の動画教材を用いて自己添削をしましょう！

もしご自身で合っていると思っていても、より効率的な方法が紹介されているかもしれません。一つ一つ丁寧に動画を視聴しましょう！

また、動画で分からない点が出てきても、その後の動画で解説される場合がありますので一度はスキップしていただいて構いません👌

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

part.1はイントロダクションです。

この課題に取り組むにあたっての準備・注意事項について解説しています！

a.使用教材

wix実践 -中級編- part.1

b. ポイントチェック

以下の項目のポイントを確認してください！

check point

工数を見積もろう！
- 案件をこなしていく際、絶対にあってはならないことは期日に遅れることです。このWEBサイトを制作するのにどのくらいの時間がかかるのか見積もってから作業に取り掛かりましょう！期日までに終わらせることが難しいと判断した場合は事前に依頼者と相談しましょう。

本当に妥当な金額なのかも確認しましょう！

案件を獲得する際、依頼主はWEBに関する知識がないまま依頼してくる場合があります。その際、想定工数に対して妥当な値段ではない場合があります。例えば、24時間以上かかるものに対して5000円しか出さないというのは割に合わないですよね。。。妥当な見積もりをこちらから提示することもとても大切です🤝

WEBサイトの構成を把握しましょう！
- 構成、フォント、カラーはどのようになっているかを確認しましょう。カラーピッカー・ドロッパー , WhatFontなどのchromeのプラグインを利用してトンマナを合わせましょう！「カラーピッカー・ドロッパー , WhatFontの使い方はこちら」

「トンマナ」とは？？

トーン（tone）＆マナー（manner）の略称で、広告やWeb制作のデザインにおいてコンセプトや雰囲気に一貫性を持たせることです。ライティングやWebデザインなど、クリエイティブに関わる業務においてトンマナを合わせることは、企業のマーケティングやブランディングの観点から非常に重要です！！デザイン制作に取りかかる前に、ターゲットやコンセプトなどのトンマナをしっかりと理解し作業に入るようにしましょう！

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

part.2では、ヘッダー部分について解説しています！

主に初級編で学んだスキルが多いので復習がてら見てみてください🙌

a. 使用教材

wix実践 -中級編- part.2

b. ポイントチェック

point check

デベロッパーツール、カラーピッカー・ドロッパーを使いこなそう！
- WEBサイトを正確に模写する上で、上記2つのツールは不可欠です。デベロッパーツールは、今後学習するHTML/CSSを学習するとより深く理解できるようになります。なので、今はこんな便利なものがあるのか程度で結構です。以下の記事でデベロッパーツールの使用方法が載っているので参考にしてみてください！

Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説

この記事では、Google Chromeのデベロッパーツールの中でも利用頻度の高い、HTMLとCSSのテスト検証方法と、スマートフォン表示の検証方法について、初心者向けに詳しく解説しています。

検証ツール（デベロッパーモード）の使い方 | プログラミングの入門なら基礎から学べるProgate[プロゲート]

この記事では「Google Chrome」の検証ツール（デベロッパーモード）の使い方について説明していきます。

よくある質問：メニューの「home」が日本語で「ホーム」と表示されてしまいます...

メニューの名称の変更方法
1. 画面左端より「サイト・メニュー」を選択し、「ホーム」の「•••」から「名前を変更」をクリック

2. 名前を「ホーム」から「home」に変更すると、ヘッダー部分にも反映される

ヘッダーにアニメーション機能をつけよう！
- ここを忘れてしまう方が少なくありません🥲 瑣末な点ですが、今回は上からアニメーション機能の「浮上」を用いて変化をつけましょう！

よくある質問：アニメーションを上から下に動かしたいのにできない...

アニメーションの動く向きの変更方法
1. 「浮上」のアニメーションを選択して、「カスタマイズ」をクリック

2. 「方向」を「上から」に変更すると、見本通り上から出現するアニメーションに設定できます

よくある質問：メニューの部分のテキストの色が白に変更できないです！

メニューテキストの色の変更方法
1. 筆のアイコンを選択し、「デザインをカスタマイズ」をクリック

2. デザインする種類で「メニューアイテム」を選択し、「テキスト」をクリック

3. 「文字色」を白に設定する。
「通常時」「ホバー時」「現在のページ」の３つで設定する

Part2での完成経過（ここまで制作できていれば問題ありません！）

ログインバーについては、教材冒頭で紹介した以下のリンクを参照して追加しましょう。
「Home」以外のメニューの設定についてはPart16で詳しく説明します。

Wix ブログ：ブログにログインバーを追加する | サポートセンター | Wix.com

$CATEGORY_TITLEについての詳細は、よくある質問をご参照ください。

3-3. Wix - 中級編 - part.3 & part.4

part.3とpart.4 では、”Co-working”部分・”ABOUT US”部分について解説していきます！

a. 使用教材

wix実践 -中級編- part.3

wix実践 -中級編- part.4

b. ポイントチェック

point check

ストリップ背景の不透明度、背景色を設定しよう！
- コーディングで実装しようとするとかなり煩雑になる作業ですが、Wixでは簡単に行うことができます。瑣末な点ですが、適切に背景色・不透明度を設定するとかなり見やすくなるのでしっかりと設定しましょう！

設定方法
1. 背景画像の不透明度を「50」にする
2. 背景色を「黒」に設定する

文字間隔・行間隔・アニメーションを適切にしましょう！
- 忘れがちですが、見る人の印象がかなり変わるのでしっかりと設定しましょう。アニメーションは方向やエフェクト時間まで細かく設定することができます！

注意事項

WIXの仕様変更により、現在【初回読み込みのみ】が表示されなくなっています！
現在の表記は以下のようになっていますので、実際の操作画面と動画の画面が異なっていても気にせずに制作を続けてください！

オンライン予約ページを設定しよう！
- アプリケーションの「Wix Booking」を用いて可能です！part.10で詳しく解説するのでここではスキップしていただいて構いません。以下のサイトを参考にしてみてください。（料金設定は適当で構いません。）

予約システム｜予約サイト作成｜Wix.com

Webサイトやアプリでの予約受付、オンライン決済、予約状況と顧客管理がワンストップで行える予約管理システム。マーケティング機能と分析ツールも完備し、業務効率化でビジネスの成長を支援します。Zoomレッスン、フィットネス、サロン、スクール、医療サービスなどの予約管理に最適。

スクロールエフェクトを設定しよう！
- エフェクトはプレビュー、もしくはURLから確認可能です。名称などを暗記する必要はないので、実際に手を動かして試しながらサイトに最適なものに設定しましょう！

3-4. Wix - 中級編 - part.5

part.5では、”OUR COMMUNITY”部分について解説しています！

a. 使用教材

wix実践 -中級編- part.5

b. ポイントチェック

point check

ギャラリーを追加しよう！
- WIxにはさまざまなギャラリーがありますが、「プロギャラリー」が機能的にも充実していておすすめです👌 以下の項目を動画でしっかり確認してギャラリーを設定してください！
==
- レイアウト
- 拡大表示のカスタマイズ
- オーバーレイ
- 矢印ボタン
- アイテムスタイル
- マウスオーバー効果
＝＝

オーバーレイとは？？？

オーバーレイとは、背景動画の上に表示されるパターンやテクスチャで、クールで面白い効果を追加することができます！しかし、モバイル版サイトでは表示されません。

3-5. Wix - 中級編 - part.6 & part.7

part.6,7では、”SPACES”部分の作成について解説しています！

a. 使用教材

wix実践 -中級編- part.6

wix実践 -中級編- part.7

b. ポイントチェック

point check

ギャラリーを正しく設定しよう！
- 以下の項目がしっかりと設定できていたか、確認してみてください！
==
- レイアウトは「グリッド」
- サムネイルのサイズは「クロップ」、画像の比率は「16 : 9」、間隔はなし
- オーバーレイは「フルオーバーレイ」、オーバーレイ効果は「フェードイン」
- マウスオーバー効果は「ぼかし」
- SNSシェアボタンをオン
- テキストはタイトルのみ表示
＝＝

よくある質問：それぞれの画像のタイトルはどこから設定するの？

→プロギャラリーの「メディアを管理」をクリックし、各画像を選択すると「タイトル」の記入欄が表示されます。

※SNSシェアボタンが正しく表示されているか確認するときは、「プレビュー」機能ではなく、画面右上の「公開」ボタンを使用する必要があります。

1. 「公開」ボタンを押すと以下のような画面が表示されるので、「サイトを見る」を選択します。

2. すると動画のようにSNSシェアボタンが機能するかを確認できます。

3-6. Wix - 中級編 - part.8

part.8では、Spaces内部のページ作成について解説しています！
この動画は少し長いですが、集中して頑張りましょう🙌

a. 使用教材

wix実践 -中級編- part.8

補足動画_WIX中級編_SNSシェアボタンの表示設定など

SNSシェアボタンの表示設定やリンク設定、Go Backボタンの設定方法、ページの複製方法について詳しく解説しています。特にSNSシェアボタンの表示に関しては、プレビュー画面でボタンが機能しない問題についても触れています。

b. ポイントチェック

point check

動画冒頭のページ制作手順
1. part7の最後に作った新しいページで、新規セクションにストリップを被せる

2. 「SPACES」で使用したものと同じ画像を背景に使用し、不透明度や背景色を調整する

3. セクションの幅を、見本通り「923px」まで引き延ばす

アンカーを設定してみよう！
- ホームページ作成の分野では、サイト内の同じページ、または別のページで特定の位置に移動する際に使用される位置マーカーのことを指します。アンカーを使いこなすことができれば、顧客目線、WEBサイトがかなり快適に利用できます。詳しい説明は以下の記事をご参照ください🙌

アンカーリンク(aタグ)とは？種類や使い方のポイントを解説

アンカーリンク（Anchor link）とは、ウェブページ上にあるボタンやテキスト、にリンクを設定し、同ページの項目や別のページに移動できるようにするリンクのことです。この記事では、アンカーリンクの使い方をわかりやすく説明します。

ベクターアートを追加しよう！
- 「サイトに追加」→「装飾」からベクターアートを追加することができます。 Wixにはそこまで良い素材がないので、他のサイトから素材を取得することをおすすめします🙌

「複製」を有効活用しよう！

同じような構造のページを複数制作する場合、1個1個作っていたら時間が勿体無いですよね。。。その場合は、ページを複製し、タイトルやテキストだけ変更して時間短縮を図りましょう！常に「どうやったらこの作業を効率良くできるのか」という意識で作業することが大切です。

ページ複製の方法
「サイトページとメニュー」の欄から、複製したいページの「•••」をクリックし、「複製」を選択

3-7. Wix - 中級編 - part.9 & part.10

part.9では、予約機能について、part.10では、予約ボタンの実装について解説しています！

a. 使用教材

wix実践 -中級編- part.9

wix実践 -中級編- part.10

補足動画_WIX中級編3-7_テキストとスタイル設定

WIXのボタンデザイン変更について、特にテキストのサイズ調整やフォームボタンのフォーカス・ホバー時の設定方法を動画にて簡単に解説しています。

補足動画_WIX中級編3-7_ブッキングページアプリの追加方法

b. ポイントチェック

point check

予約ページの詳細設定をしましょう！
- 教材に沿って予約ページの詳細設定を進めましょう。料金は任意で構いません。わからないことがありましたら、こちらの記事を参照してみてください！

3-8. Wix - 中級編 - part.11 & part.12

part.11では”MEMBERSHIP”部分について、part.12では”CONTACT US”部分について解説しています！

part.11はこれまでやったスキルのみで構成されているので、若干割愛させていただいております。ご了承ください🙇‍♂️

a. 使用教材

wix実践 -中級編- part.11

wix実践 -中級編- part.12

b. ポイントチェック

point check

フォームを設定しよう！
- 「サイトに追加」→「「フォーム」→「登録」から追加できます。ホバーの時、フォーカスの時、エラーの時など細かく設定しましょう！以下の項目は確認しておいてください。
==
- ホバーの時、フォーカスの時、エラーの時など細かい設定
- 送信完了メッセージの設定
==

ホバーとは？？？

ホバーとは、画像やリンクにマウスカーソルを合わせた際、クリックしなくてもアニメーションが始まったりするような変化が起こる表現のことです。ホバーのデザインによってフォームの送信率なども変わってくるので、瑣末な点ですが丁寧に設定しましょう！

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

フォームの作り直しを行っていると「利用できるフォームの上限数に到達しました」と表示されることがございます。以下のURLを参考に、不要なフォームを削除して対応してください！

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

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

スクロールエフェクトも忘れずに！
- CONTACT USの部分には、実は、パララックスのエフェクトが設定されています。

3-9. Wix - 中級編 - part.13 & part.14

part.13では”MAP”部分について、part.14では”フッター”部分について解説しています！

a. 使用教材

wix実践 -中級編- part.13

wix実践 -中級編- part.14

b. ポイントチェック

point check

Mapを追加しよう！
- 「サイトに追加」→「フォーム」→「地図」から追加させることができます！

ERRORが出た時は、「command + R」を押してみましょう！

Wixはたまにバグが発生することがあります。そのような場合は、一度保存ボタンを押していただき、リフレッシュしてみてください。それだけで解決する場合が少なくないんです🤫

PCが重くなった時は、他のタブを全て閉じるか再起動してみましょう！

WixでHP制作をしていく過程で多くの画像をアップロードしたり、ページ数を増加させるとPCが重くなり、作業に支障をきたすことがあります。そのような場合は、まずは他のタブを閉じてみましょう！メモリ使用量に空きができます。それでもダメな場合は一度、電源を消してPCを冷ましてみましょう！普段からPCを切らないで放置する方も少なくありません。その間もPCは消耗してしまうので電源を切る癖をつけましょう🙌

3-10. Wix - 中級編 - part.15

part.15ではチャット機能について解説しています！
この動画は復習がメインです！覚えていたか確認してみてください🙌

a. 使用教材

wix実践 -中級編- part.15

b. ポイントチェック

point check

チャット機能を追加しよう
- 「Wix App Market」→「Wixビジネスソリューション」から追加することができます。チャット機能は初級編でも学習しましたね！
InBoxを活用しよう
- InBoxでは「メールに対する返信」「過去メッセージの確認」などを行うことができます！

3-11. Wix - 中級編 - part.16 & part.17

part.16 ではアンカーリンク、part.17ではヘッダー部分について解説しています！

a. 使用教材

wix実践 -中級編- part.16

wix実践 -中級編- part.17

補足動画_WIX中級編_アンカーリンクの設定

補足動画_WIX中級編_ナビゲーションとメニュー管理

b. ポイントチェック

ヘッダーを完成させよう
- 先ほど説明したアンカーを活用して、操作のしやすいHPを制作しましょう！アンカーの復習はこちら🙌
メンバーページの編集をしよう
- 今回はマイアカウントとマイブッキングしか使わないので、それ以外は削除していただいて結構です！
  ページ背景・サイト会員プロフィールカードは、ご自身の好きなようにデザインしてみてください！

Wixだけが最適なツールとは限りません！

例えば、Wixではサイトの会員ページの細かい設定はできません。もし、クライアントが細かい会員ページを望むのであれば、Wordpressなどの他のツールを用いなければなりません。

Wixは確かに有能なツールですが、クライアントにとって何がベストなツールであるかを考えて案件をこなしましょう！

現代におけるWEBサイトはモバイル版が必須です❗️

現在の世の中ではPCよりもスマホを用いてWEBサイトを見られることが多くなっています。どの案件を受ける際も、モバイル版対応は必須だと思っていただいて構いません。そのことを意識しながらPC版を作ってみましょう！

3-12 Wix - 中級編 - part.18

part.18ではモバイル版サイトについて解説しています！
いよいよラストの教材です！やり切りましょう！

a. 使用教材

wix実践 -中級編- part.18

b. ポイントチェック

point check

モバイル版は必要な要素のみ掲載しよう スマートフォンは画面が小さいので、情報量が多いと見にくくなってしまいます。必要な要素のみ表示し、他は非表示にしましょう！また、Wixではモバイル版で追加した要素はPC版では反映されません。

Wixを用いて複雑な構成のWEBサイトを作るには？

Wixの機能のみを用いて、複雑な構成のWEBサイトを制作するのは難しいですよね。。。そのような場合ではこの後、学習予定の「Figma」「Adobeツール」を用いて画像を編集し、それをアップロードするのが最適です！大手企業のHPもこの方法を採用している場合が多いです。

モバイル版限定であるモバイルツールを活用しよう モバイルツールについては初級編で詳しく解説したと思います。モバイルアクションバー、トップに戻るボタンなどはとても便利なのでぜひ搭載してみてください！

3.13 WIX -中級編- 用語解説

補足動画_WIX中級編_用語解説

4. まとめ

動画視聴お疲れ様でした！

中級編、いかがだったでしょうか？
Wix初級編で学んだスキルをおさらいしつつ、新たなスキルもたくさん習得できたかと思います。
それでは、自己添削に取り組んでください！現在の自分ができる100%の状態のWEBサイトを完成させましょう！

そして、下記のテンプレートを参考にし、Slackの「 c-【受講ID】-【お名前】」のチャンネルでコーチをメンションし、制作課題を共有してください🙌

注意事項

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

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

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

お世話になっております。

Wix〇〇編の制作課題が終了いたしました。

以下のURLのサイトに権限共有もいたしましたのでご確認いただき、添削をよろしくお願いいたします。

サイトURL

まだWEBスキルについての学習を始めたばかりで、このような難易度の高い動画を視聴するのはかなり大変だと思います。

しかし、2,3ヶ月経てばこのくらいのWEBサイトであれば簡単に作れるようになっているはずです。

次は「Wix実践 -上級編-」です！引き続き頑張っていきましょう🙌

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