概要
スクールの最終課題として、3人1チームで美容専門学校のWebサイトを制作しました。私はサイト全体のデザインおよび下層ページのコーディングをメインで担当し、トップページのコーディング補助や提案資料の構成・デザインも行いました。
情報量が多い学校サイトという特性を踏まえ、ユーザーが迷わず目的の情報へアクセスできるように、アコーディオンメニューやページ内リンクを活用。情報設計の段階から、ユーザーの導線設計と利便性を重視して構成を工夫しました。
制作範囲
企画設計デザインコーディング提案資料の作成
使用ツール
FigmaPhotoshopVisual Studio Code
制作期間
企画・設計・WF
1週間
デザイン・提案資料
2週間
コーディング
2週間
課題
- 創立8年目と比較的新しい学校のため認知度が不足している
- SNSでの情報発信のみで情報を集約する公式サイトがない
- 問い合わせ対応や事務処理のデジタル化が進んでいない
目的
- 入学希望者の募集・案内強化
- 学校のブランドイメージ確立
- 既存学生や保護者への情報発信
- 学校運営のデジタル化推進
ターゲット
- 高校生・新卒者(17~18歳)
- 大学生・短大生の転学希望者(19~22歳)
- 社会人・キャリアチェンジ希望者(20代後半~30代)

クライアントの要望
- 特定のカラーはなく、ある程度はお任せ。
- 学生集客がメイン。落ち着いた雰囲気もありつつ、ワクワクするような印象に。
- 過度にダーク・重厚感のある配色、蛍光色の過剰使用や極端なレインボーカラーは控えてほしい。
コンセプト
「学ぶのは技術だけじゃない。創造力だ。」
クリエイト専門学校の強みである専門性(プロフェッショナリズム)と学校の価値として据えている創造性(クリエイティビティ)を強調
カラー
キービジュアルとの統一感を意識し、白・黒・ベビーピンクを基調としたカラー設計を行いました。ターゲット層は10代後半〜30代と比較的若年層のため、アクセントにはフレッシュで力強い濃いピンクを使用し、視覚的なリズムとともに印象に残る配色にしました。
デザイン
ピンクを基調としたグラデーションを使い、華やかで視線を惹きつけるデザインに仕上げました。グラデーションのパターンはセクションごとに変化をつけており、各コンテンツに視線が導かれるよう設計しています。これにより、ユーザーが各セクションにしっかりと注目しながら閲覧できるようにしました。
フォントは線に強弱のある大人っぽい印象のものを採用。やわらかさの中にも芯のある雰囲気を表現し、美容専門学校らしい上品な雰囲気を演出しました。
提案内容
期待できる効果は「統一されたブランドイメージの確立」「安心できる学校選び」「タイムリーな情報共有による信頼度向上」「事務業務の効率化」の4点です。これらが相互に作用することで、学校運営全体の質を高め、持続的な発展を支える基盤になります。期待できる未来像としては、ブランド力と発信力の強化により全国から学生を集められるようになること。さらに、正確でスムーズな情報公開によって在校生や保護者の安心感が高まり、次世代への確かなつながりが生まれます。
また、教育の魅力を継続的に発信し、卒業生の情報を蓄積していくことで、「選ばれる美容専門学校」としての地位確立にもつながると考えられます。

