職業訓練ユニット12｜Wix ・Web制作ツール演習 (15時間）

Wix編 Wix
Wix編
2026.01.01

ユニット12では、Wixを使って“ノーコードでWebサイトを形にする流れ”を演習しました。
デザインツールと違い、Wixは「見た目」だけでなく「公開」「スマホ」「SEO」まで一気に繋がるので、最初はどこを触ればいいか迷いやすいです。この記事では、私が迷わなくなった順番を、初心者向けに手順として残します。 Wixサポートセンター+2Wixサポートセンター+2

この記事でわかること（3つ）

  • Wixでサイトを作る基本の流れ（迷わない順番）

  • つまずきやすいポイント（原因→対処）

  • 公開・提出前チェックリスト

学習内容の全体像（ユニット12でやったこと）

  • テンプレ選定とサイト構成（ページ・メニュー）

  • セクション追加、テキスト・画像差し替え

  • スマホ表示の調整（モバイルエディタ）

  • SEO（タイトル・説明文などの基本設定）

  • 公開（保存と公開の違い） Wixサポートセンター+2Wixサポートセンター+2

基本設定（最初にここだけ押さえる）

  • 先に「サイトの目的」と「ページ構成」を決める（ホーム/プロフィール/お問い合わせ等）

  • フォントと見出し階層（h2中心）を統一してから装飾に入る

  • スマホは最後ではなく“途中で”確認する（崩れの早期発見） Wixサポートセンター+1

ユニット12の作業手順（私の手順メモ）

  1. テンプレを選ぶ（目的に近いもの）

  2. ページ構成を決める（必要最小限）

  3. 文章→画像の順に差し替え（先に情報を確定）

  4. ナビ/フッターを整える（全ページ共通を先に）

  5. モバイルエディタでスマホ調整

  6. SEOの基本（タイトル/説明文）を入れる

  7. 公開（保存では公開されない） Wixサポートセンター+2Wixサポートセンター+2

つまずいた点と解決（原因→対処）

  • 例1：保存したのに公開サイトが変わらない
    → 原因：保存（Save）と公開（Publish）は別
    → 対処：更新を反映したい時は必ずPublish Wixサポートセンター

  • 例2：PCは綺麗なのにスマホが崩れる
    → 原因：スマホ用の調整が未対応
    → 対処：モバイルエディタに切り替えて、余白・並び・非表示を調整 Wixサポートセンター+1

  • 例3：タイトルや説明文をどこで入れるか分からない
    → 対処：SEO設定（SEO Basics）でページ単位にタイトル/メタ説明を設定 Wixサポートセンター+1

提出前チェックリスト（1分で確認）

学習のコツ（初心者向け）

  • 先に「文章（情報）」を確定してからデザインを整える

  • 迷ったら「余白」「整列」「見出し階層」の3点に戻る

  • “できた風”より、“再現できる手順”をメモする方が次が早い

まとめ｜次に読むおすすめ

参考（外部リンクと授業動画タイトル）

公式ヘルプ（分からない時はここ）

＜授業動画タイトル＞
授業動画が視聴できないため、下の「授業動画タイトル一覧」は“チェックリスト”として活用しています。
タイトルから作業内容が想像できない場合は、同じキーワードで公式ヘルプを検索して補います。

Web制作ツール演習（Wix）
WIXの始め方
1-1「アカウントの取得方法」
1-2「テンプレート」
1-3「セクション」
1-4「カラムの編集」
1-5「新しいページの作り方」
1-6「お問い合わせフィーム」
1-7「プレビューの使い方」
1-8「保存と公開」
エディタ画面の構成
2-1「メニューバー」
2-2「ツールバー」
2-3「パーツ整理のツール」
2-4「文字の調整」
2-5「ルーラー・レイヤー・グリッド線」
2-6「編集履歴」
2-7「各メニュー」
スタイルの設定
3-1「配色とフォントスタイル」
3-2「テキストの編集方法」
3-3「見出し・段落のスタイル」
3-4「ページ背景」
3-5「背景に動画を設定」
3-6「ページトランザクション」
セクションの使い方
4-1「背景とセクションの追加」
4-2「スクロールエフェクト」
4-3「名前をつけて管理」
4-4「クイック編集機能」
4-5「レイアウト調整と複製」
ストリップの使い方
5-1「ストリップの追加と背景」
5-2「グラデーション」
5-3「画像や動画の設定」
5-4「カラムの割り方」
5-5「カラムを使ったテクニック」
5-6「カラムのレイアウト調整」
5-7「詳細設定」
5-8「モバイル版での設定」
Wix「基本機能」復習タイム①
テキストの使い方
6-1「テキストの追加」
6-2「折り畳み可能テキスト」
6-3「細かい設定・見出しの概念」
6-4「テキストの設定」
6-5「フォント」
6-6「フォントの豆知識」
6-7「テキストの装飾」
6-8「SEO・アクセシビリティの設定」
6-9「アニメーション 」
6-10「モバイル版での編集」
画像の使い方
7-1「画像の種類」
7-2「画像の追加と変更」
7-3「フォトスタジオから編集」
7-4「画像のサイズとデザインを編集」
7-5「切り抜き方法・フィルター設定・アニメーション設定」
動画の使い方
8-1「動画の追加」
8-2「動画のアップロード」
8-3「プレビューで確認」
8-4「レイアウトやデザインの設定」
8-5「Wixビデオ」
8-6「動画ボックス」
8-7「動画マスク」
シェイプ・ベクターアートの使い方
9-1「ベクターアートとは」
9-2「シェイプの使用方法」
9-3「ベクターアートの使用方法」
9-4「SVGファイルの使用方法」
ボタンの使い方
10-1「ボタンの追加」
10-2「ボタンの動作編集」
10-3「ボタンのデザイン編集」
10-4「画像ボタン」
10-5「文章ファイル」
Wix「基本機能」復習タイム②
ボックス・リストの使い方
11-1「ボックスの追加」
11-2「コンテンツを入れる方法」
11-3「ボックスのホバー」
11-4「リストの追加と編集」
11-5「リストのホバー」
メニューバーの使い方
12-1「メニューバーの追加と編集」
12-2「メガメニュー」
12-3「縦型メニュー」
12-4「アンカーとセクション」
12-5「モバイルエディタの編集」
ライトボックスの使い方
13-1「ライトボックスを追加」
13-2「ライトボックスの編集」
13-3「設定の編集」
13-4「レイアウトとデザイン」
13-5「デザインアレンジ」
13-6「折り畳みメニューの作成」
13-7「サンクスメッセージの作成」
13-8「モバイル版での編集」
インタラクティブ
14-1「スライドショー」
14-2「ホバーボックスの追加」
14-3「ホバーアクションの作成」
14-4「タブ」
14-5「ホバーリピーター」
ギャラリーの使い方
15-1「ギャラリーの追加とメディアの管理」
15-2「ギャラリーの設定」
15-3「動画とテキストの追加」
15-4「モバイル版での編集」
15-5「その他ギャラリー」
Wix「基本機能」復習タイム③
Googleマップの使い方
16-1「Googleマップの追加と位置情報」
16-2「設定」
16-3「デザイン」
16-4「HTML埋め込み」
HTMLの埋め込みの使い方
17-1「Googleマップ」
17-2「Googleカレンダー」
17-3「表の作成」
17-4「SNSの投稿」
ソーシャルパーツの使い方
18-1「ソーシャルバー」
18-2「Facebook」
18-3「Twitter」
18-4「Pinterestなど」
フォトスタジオの使い方
19-1「編集ツール」
19-2「パーツを編集」
Wixブログ
20-1「本文の書き方」
20-2「メディアの追加」
20-3「パーツを追加」
20-4「ブログの設定」
20-5「カテゴリなど」
20-6「表示形式とレイアウト」
20-7「デザイン」
20-8「記事ページの設定」
20-9「ブログパーツ」
20-10「モバイルエディタの設定」
20-11「ダッシュボード」
Wixフォーム
21-1「フォームのデザイン」
21-2「項目を編集」
21-3「レイアウトと連絡先項目」
21-4「基本項目の追加」
21-5「フォーム設定」
21-6「トリガー」
21-7「アクション」
21-8「メールの種類」
21-9「ステップメール」
21-10「メルマガ登録」
21-11「カスタムフォーム」
Wix「基本機能」復習タイム④
練習問題
Wix練習問題①
Wix練習問題②
習得度確認テスト
Wix習得度確認テスト

コメント