Build Guide for Wix
見本ページをWixエディタで再現するための手順です。上から順に進めてください。色や文字の数値は「デザインルール表」を横に開きながら作業するとスムーズです。
ここを最初にやっておくと、以降は色や文字を「登録済みのものから選ぶだけ」になり、ばらつきが起きなくなります。
ボタンやラベルは「1個作って使い回す」のが統一のコツです。ゼロから毎回作ると必ずズレます。
| 部品 | Wixでの作り方 | デザイン |
|---|---|---|
| メインボタン | 「ボタン」パーツを追加 | 塗り#E07B39・白文字・角丸16px・太字 |
| 大ボタン | 「ボタン」パーツを追加 | 白地・枠1.5px(置くゾーンの色)・角丸14px・太字 |
| 小ボタン | 「ボタン」パーツを追加 | 白地・枠#EADFD2・角丸を最大(丸型) |
| ゾーン見出し帯 | 「ストリップ」に絵文字+テキスト | 背景はゾーンの薄い色(#E7F4EBなど) |
| 学年ラベル | 小さな「テキスト」に背景色 | 幼児=ピンク/小学生=緑/中学生=青/高校生=茶 |
現在ページに直書きされているID・パスワードを、鍵のかかった1ページに集約します。