Purpose & feeling
楽しそう、だけで終わらず、保護者が安心して選べる順番をつくる
教室サイトでは、子ども本人が感じる楽しさと、申し込む保護者が求める具体性の両方が必要です。作品写真だけを並べても、年齢、曜日、先生、持ち物、教室の考えが分からなければ体験へ進めません。
第一画面では制作中の手元と「つくる前より、すこし自由に。」という考えを伝え、そのすぐ下に年齢別コースと体験への入口を置きました。自由な創作を大切にしながら、通う判断に必要な条件を曖昧にしないことへ注意しています。
- 想定する教室
- 地域で少人数制の造形教室を運営する事業者
- 主な目的
- 教室の考えを伝え、体験申込へつなぐ
- 主要な人
- 教室を探す保護者と参加する子ども
- 第一画面
- 楽しさ、対象年齢、体験への入口を短時間で判断
- 制作上の思い
- 子どもの自由さと保護者の安心を同じ重さで扱う
Information architecture
比較したい条件を先にそろえ、納得の材料を後から深める
コース一覧では対象年齢、時間、内容を同じ順番で並べ、詳細では一日の流れと制作例まで確認できます。講師紹介、日程、アクセス、よくある質問は、体験申込の直前に生まれる不安をそれぞれ解消する役割です。
お知らせは休講や開催情報、コラムは家庭でも試せる創作のヒントとして分けました。更新情報と教室の知識が混ざらず、読みたい目的から選べる構成です。
- 全14ページ
- トップ、教室、コース一覧・詳細、講師、日程、作品ほか
- コース比較
- 年齢、時間、学び方を同じ項目で比較
- お知らせ
- 季節講座や運営情報の一覧・詳細
- コラム
- 教室の知識を伝える情報提供の場
- 体験導線
- 説明を読んだ複数の位置から申込へ接続
Visual direction
子ども向けの明るさを、保護者にも読みやすい紙面へ整える
絵の具のような橙、青緑、紫を使い、切った色紙を重ねるような形を画面のリズムにしました。ただし、本文の背景は白と薄い生成りに抑え、長い説明や日程表を読みやすくしています。
写真は手元の制作、教室空間、講師、画材の役割を分けました。丸い写真や傾いた形は第一印象と作品一覧で使い、比較表や申込画面では装飾を減らしています。楽しさと判断のしやすさを画面ごとに配分しました。
- 配色
- 橙、青緑、紫、紙の白
- 形
- 切り紙を思わせる角丸、円、ずらした面
- 写真
- 制作の手元、教室、講師、画材の4系統
- スマートフォン
- 比較項目と申込ボタンを一列で読みやすく表示
- 差別化
- 作品ギャラリーと比較型の申込導線を両立
Interaction & implementation
体験を申し込む前の確認と、入力後の状態まで実装する
体験申込ではコース、希望日、参加者情報を入力し、不足があればその場で知らせます。確認画面で内容を見直し、完了画面まで進めますが、自主制作サンプルのため入力内容を外部へ送りません。
スマートフォンではナビゲーションを開閉式へ変え、日程やコースの表は横スクロールに頼らず縦に組み替えます。キーボードのフォーカス、画像の説明、開閉状態の読み上げも確認しました。
- 体験申込
- 入力、エラー、確認、完了を画面内で再現
- 送信
- 自主制作のため外部送信・保存なし
- 操作
- PC、スマートフォン、キーボードに対応
- 更新想定
- 日程、お知らせ、コラム、作品例を追加可能
- 技術
- HTML、CSS、Vanilla JavaScript
Actual screens
学びの内容から体験予約まで、役割の異なる画面を確認する
教室の楽しさを伝えるトップページ、比較して選べる講座一覧、申込み前の不安を減らす体験ページを実画面で紹介します。
全14ページの構成
トップ ／ 教室について ／ 講座一覧 ／ はじめての色づくり講座 ／ 講師紹介 ／ 開講日程 ／ 体験申込み ／ ギャラリー ／ お知らせ一覧 ／ 夏のアトリエ開催案内 ／ コラム ／ アクセス ／ よくある質問 ／ プライバシー
Continue exploring
ほかのWebサイト作品も見る
同じページ数をそろえるのではなく、来訪目的に合う構成を作品ごとに設計しています。