学校課題
なんばパソコン教室
企画 / デザイン / コーディング / ロゴ作成
概要
訓練校の課題として制作した、地域密着型パソコン教室「みんなのパソコン教室 なんば校」のWebサイト（架空）です。
実際のサイトを見る →※本作品はトップページのデザイン・コーディングに特化して制作したものです。PC版だけでなく、タブレット・スマホ版のレスポンシブ対応まで一貫して行いました。
目的
「求人票のPCスキル必須という文字を見て不安を感じている人」へ、教室の安心感と実用性を伝え、無料体験レッスンへの申し込みを促すこと。
課題
今さら聞けない」という心理的ハードルを下げつつ、信頼感と、転職に直結するスキルが身につく実利的なメリットを両立させて提示すること。
制作範囲
企画 / デザイン / コーディング / ロゴ作成
ツール
Figma , Illustrator , Photoshop , HTML , CSS , JavaScript , jQuery
こだわったポイント
ターゲットA（30〜40代・転職志望）が、どのデバイスからアクセスしてもストレスなく情報を取得できるよう、レスポンシブデザインに注力しました。
特にレスポンシブ対応では、小さな画面でも「少人数制」や「やさしい指導」といった強みが直感的に伝わるよう、レイアウトを最適化。各デバイスごとのブレイクポイント設定や快適な閲覧体験（UX）を意識してコーディングしました。
デザインのポイント
デザインコンセプト
「優しそうで、落ち着いた雰囲気」を重視。親しみやすさを出すため図形には丸みを多く取り入れ、フォントは可読性の高いウェイトを採用しました。
配色（文字の茶色を軸とした4色展開）
#ac9c9a
#f9cbc6
#f9f4ad
#80b99f
UI/UXのこだわり
- 情報の優先順位を整理した「2段ナビゲーション」の実装
- メインビジュアルにおけるフォントの視認性確保
