Build Guide for Wix

🛠 Wix作業手順書

見本ページをWixエディタで再現するための手順です。上から順に進めてください。色や文字の数値は「デザインルール表」を横に開きながら作業するとスムーズです。

0作業前にそろえるもの所要: 集めるだけ

  • リンク先URLの一覧 — Zoom入室URL、Kintone各アプリのURL、各種フォーム、教材のダウンロード先、お楽しみ教材フォルダの共有リンク
  • ウォーミングアップ教材の表紙画像 — 8冊分。同じ縦横比でそろえると並べたときにきれいです
  • 「共有アカウント一覧」ページ用の新しいパスワード — 現在の各ツールのID・パスワードを移す先(手順5)
💡既存ページはまだ触りません。新しいページを別に作って完成させてから切り替えるので、作業中も講師の皆さんは今まで通りページを使えます。

1サイトの基本設定(最初に1回だけ)所要: 約30分

ここを最初にやっておくと、以降は色や文字を「登録済みのものから選ぶだけ」になり、ばらつきが起きなくなります。

  1. エディタ左側の サイトデザイン → カラー を開き、デザインルール表の色コード(#FAF4EC、#E07B39、#3F8F63 など)をすべて登録する
  2. サイトデザイン → テキストテーマ で、見出し・本文のサイズをルール表の「文字のルール」どおりに設定する(ページタイトル22px/セクション見出し16.5px/本文13.5px…)
  3. フォントを日本語丸ゴシックに統一する — フォント一覧から 「M PLUS Rounded 1c」 を選択(無料・日本語対応)
💡Wixの画面構成はプランや時期で多少変わります。見つからないときはエディタ内の検索窓に「カラー」「テキストテーマ」と入力すると該当設定に飛べます。

2部品を1セットだけ作る所要: 約1時間

ボタンやラベルは「1個作って使い回す」のが統一のコツです。ゼロから毎回作ると必ずズレます。

部品Wixでの作り方デザイン
メインボタン「ボタン」パーツを追加塗り#E07B39・白文字・角丸16px・太字
大ボタン「ボタン」パーツを追加白地・枠1.5px(置くゾーンの色)・角丸14px・太字
小ボタン「ボタン」パーツを追加白地・枠#EADFD2・角丸を最大(丸型)
ゾーン見出し帯「ストリップ」に絵文字+テキスト背景はゾーンの薄い色(#E7F4EBなど)
学年ラベル小さな「テキスト」に背景色幼児=ピンク/小学生=緑/中学生=青/高校生=茶
  1. 上の5種類を1個ずつ作る
  2. 作ったボタンを右クリック → デザインをコピー
  3. 新しいボタンを置いたら右クリック → デザインを貼り付け で複製していく

3新しいトップページを組み立てる所要: 半日

  1. 新規ページを作成(名前例: teachers-station-new)。ページ設定 → 権限 で今までと同じ「会員限定」にする
  2. 上から順に「ストリップ」を積んでいく:
    • ① あいさつ — テキスト「こんにちは、先生 👋」+日付ひとこと
    • ② クイック4ボタン — 4列レイアウト(🎥Zoom入室=メインボタン、残り3つは白ボタン)
    • ③ お知らせ — 白いカードに3行(日付+タグ+本文)。増えたら古いものから消す
    • ④ 📚授業・教材ゾーン(緑帯)— 大ボタン: ベストゼミナール/MDJ/Smile、小ボタン: 授業ツール7個
    • ⑤ 📋事務手続きゾーン(青帯)— お休み申請・シフト管理は大ボタン、他は小ボタン
    • ⑥ 🌱研修・交流ゾーン(ピンク帯)— ツール説明動画は大ボタン、他は小ボタン
  3. ページ背景を #FAF4EC に、各ゾーンのストリップ背景は白+角丸に設定
  4. すべてのボタンにリンクを設定(手順0で集めたURL一覧を使用)
💡迷ったら見本ページと見比べてください。「トップページ案」を別タブで開いて、上から同じ順番で置いていくだけです。完全一致でなくても、色とボタンのルールが守れていれば十分です。

4教材ページ(ベストゼミナールから)所要: 半日×3ページ

  1. 新規ページ「ベストゼミナール教材」を作成(会員限定に設定)
  2. ①〜⑥の各セクションの先頭に「アンカー」パーツを置く(パーツ追加 → メニューとアンカー)
  3. ページ上部に小ボタン6個(①日本語教材〜⑥主教材)を並べ、リンク設定で リンク先 → ページ内アンカー を選ぶ — これで目次ジャンプが動きます
  4. 各セクションは「緑の見出し帯+白カード」の型で統一。⑥主教材は国語/算数・数学の2枠に分け、学年ラベル+小ボタンで並べる
  5. ⑤お楽しみ教材は「📁フォルダを開く」ボタン1つだけにして、ファイル一覧はページに載せない(共有フォルダのリンクを貼る)
  6. 完成したらページを「複製」して、MDJ教材・Smile教材ページを同じ型で作る
注意: Book Creatorなどの「ログインID・パスワード」はこのページに書き写さないでください。次の手順5のページにだけ記載します。

5共有アカウント一覧ページ(重要)所要: 約1時間

現在ページに直書きされているID・パスワードを、鍵のかかった1ページに集約します。

  1. 新規ページ「共有アカウント一覧」を作成
  2. ページ設定 → 権限「パスワード保持者のみ」 を選び、新しいパスワードを設定する(講師全員が同じWixログインを共有しているため、ページ専用のパスワードで二重ロックにする方式です)
  3. 表の形で記載: ツール名/ログインID/パスワード/用途(Book Creator教材用・授業用、おしゃべりブック、Word Wall、Scratch、Kintone、シーモア、Teacher's Voice、Quizlet など現在掲載中のものすべて)
  4. トップ・教材ページの「🔒共有アカウント一覧」ボタンからこのページへリンク
  5. ページのパスワードは在籍講師にのみ共有し、退職者が出たら変更する運用にする
💡あわせて、チャット等で共有したことのある各ツールのパスワード(Kintone管理者など)は、移行が終わったタイミングで変更しておくと安心です。

6切り替えと公開前チェック所要: 約1時間

  • すべてのボタン・リンクを実際にクリックして確認した(特にZoom・Kintone・フォーム類)
  • エディタの「モバイルビュー」でスマホ表示を確認・調整した(クイックボタンは2列に)
  • 新ページのどこにもID・パスワードが書かれていない
  • サイトメニューのリンク先を新ページに差し替えた
  • 旧ページを非表示(またはメニューから削除)にした
  • 講師の皆さんに周知した(新ページの場所+共有アカウント一覧ページのパスワード)
💡作業中に迷ったら、その画面のスクリーンショットを送ってください。Wixのどのメニュー・どの設定かを具体的にご案内します。