Design Rules

🎨 Teacher's Station デザインルール表

Wixで作り直す際の指針です。このルールだけ守れば、どの担当者が更新しても統一感が保たれます。色コードはWixのカラーパレットにそのまま登録できます。

1カラーパレット

基本色(全ページ共通)

ページ背景#FAF4EC
カード背景#FFFFFF
文字#46403A
補助文字#857C72
罫線・枠#EADFD2

メインカラー(1ページに1〜2か所だけ)

オレンジ(主ボタン)#E07B39
濃オレンジ(リンク)#C9631F

ゾーンカラー(見出し・大ボタンの枠に使用)

📚 授業・教材#3F8F63
└ 見出し背景#E7F4EB
📋 事務手続き#4F74B8
└ 見出し背景#EAF0FA
🌱 研修・交流#C26286
└ 見出し背景#FBEDF2

アクセント(トップの5色ノートの色 — ストライプや表紙タイルに)

ノート橙#E8834A
ノート緑#7FB069
ノート生成#F0E6D3
ノート青#5B7FC7
ノート茶#8A6552

注意・重要のお知らせ用

注意赤#C04F4F
└ 背景#FBECEC

2学年ラベル(全ページ共通の固定ルール)

幼児 小学生 中学生 高校生

蛍光マーカーや色文字の代わりに、このラベルで学年を区別します。ベストゼミナール・MDJ・Smileのどのページでも同じ色を使うことで、ぱっと見で学年がわかります。

3文字のルール

用途サイズ太さ・色備考
ページタイトル22px太字・文字色絵文字1つを先頭に(📗など)
セクション見出し16.5px太字・ゾーン色色付き帯の上に置く
グループ見出し12px太字・補助文字色字間を広めに(目次的な小見出し)
本文・ボタン文字13.5〜15px標準・文字色リンクの下線は付けない
補足・日付11〜12px標準・補助文字色

フォントは丸ゴシック系で統一します(Wixなら「M PLUS Rounded 1c」がおすすめ。日本語対応で無料です)。1ページ内でフォントは1種類だけ使います。

4ボタンは3種類だけ

① メインボタン — 1ページに1つだけ(いちばん使うもの)

🎥 Zoom入室(講師用)

② 大ボタン — よく使うもの(枠の色は置くゾーンの色)

ベストゼミナール教材 先生のお休み申請 ツール説明動画

③ 小ボタン — ときどき使うもの(丸型・グレー枠)

🃏 Quizlet アルファひらがな表 ⬇ 📝 議事録管理

「⬇」はダウンロードできるもの、絵文字付きは外部ツール・サイトに移動するもの、という目印です。この3種類以外のボタンは作りません。

5絵文字アイコンの対応表

📚授業・教材ゾーン
📋事務手続きゾーン
🌱研修・交流ゾーン
🎥Zoom関連
✏️授業報告・記入する
📅カレンダー・予定
☎️電話・連絡
📣お知らせ
🔒アカウント・パスワード
📁フォルダを開く
📤 📥引継ぎメール(出す/見る)
🔍検索

同じ用途にはいつも同じ絵文字を使います。1つのボタンに絵文字は1つまで。飾りとしては使いません。

6更新するときの5つの約束

  1. 新しいリンクは3ゾーンのどれかに入れる「授業・教材」「事務手続き」「研修・交流」— 迷ったら「先生がいつ使うか」で決める
  2. ボタンは「大」か「小」の2択新しい色・形のボタンは作らない(メインボタンは既にあるので増やさない)
  3. ID・パスワードはページに書かない共有アカウント一覧(閲覧制限付き)にだけ記載する
  4. ファイルの一覧はページに載せないフォルダに入れて「フォルダを開く」ボタンだけ置く(お楽しみ教材方式)
  5. マーカー・色文字などの装飾は足さない目立たせたいときは「学年ラベル」か「お知らせタグ」を使う
💡 Wixで設定するときのメモ