‘transition’ miyuu yamaguchi portforio

ウェブスタディサッポロ

既存サイトのリニューアル

作品のサムネイル

サイト名
ウェブスタディサッポロ
ターゲット
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
教育の場としての明るさと前向きさを表現するカラー構成。
作品ページへ
こちらをクリック