- サイト名
- ウェブスタディサッポロ
- ターゲット
- 20~30代の男女。未経験からWeb業界を目指す求職者・受講希望者。
- コンセプト
- 「学ぶのは今の技術、働くのはこれからの自分」
新しいスキルを学び、未来のキャリアへつなげるための“前向きな学びの場”を、明るく親しみやすいデザインで表現。
- 工夫した点
-
・コーディング
SVG装飾とスクロールアニメーションを組み合わせ、学びの楽しさや動きを感じさせる表現を実装。保守性を意識し、クラス設計はBEM記法で統一。MVでは上下の画像が左右からスライドインする演出を実装。ページ冒頭で動きを出し、閲覧者の興味を引く工夫を施した。
・ディレクションチーム全体の進行管理と構成設計を担当。情報量が多い学校サイトを、ユーザーが迷わず閲覧できる導線に再構築。ターゲット層を意識し、「信頼感×親しみやすさ」を軸にトーンを統一。
- 制作時期
- 令和7年 7月
- 制作時間
- 企画 / 情報設計:30時間
デザイン:30時間
コーディング:15時間
- 使用ツール
- HTML / CSS / Figma / Notion
- 使用フォント
- ・タイトル・英字:Albert Sans
モダンで親しみやすい印象を持ち、若年層にも信頼感と清潔感を与える。
・本文 / 日本語:Noto Sans JP
可読性が高く、学習サイトにふさわしい安定感と読みやすさを実現。
- 使用カラー
-
#41A9A5 / #FAF8F4 / #DEEDEC / #FFE070 / #F67E62
教育の場としての明るさと前向きさを表現するカラー構成。