Qlip Connect

制作概要: プログラミングスクールのポータルサイト
ターゲット: 20～50代・現役の職業訓練生と修了生
コンセプト: 職業訓練校の“学びから就職まで” を支えるデジタルプラットフォーム。
学習支援だけでなく、就職活動までをサポートできる設計とし、忙しい中でも直観的に操作できるシンプルなUIを目指した。
隙間時間を活用した学習コンテンツやキャリア形成を支援する体系的な情報を掲載。
本サイトは訓練生がチームで制作したが、今後は訓練校の管理のもと、実際の運用に活用される予定。
デザイン: QLIPプログラミングスクールのチーム制作課題（12名での共同制作）です。
自分はフロントエンド班のリーダーとして、キービジュアル画像作成（5枚）、ワイヤーフレーム作成、デザインカンプ作成、HTML・CSS・JSによるコーディングを担当しました。

キービジュアルはスクールの世界観を伝えるメインビジュアルに続き、スクールの代表的な訓練4コースの特徴を表現したサブビジュアルをスライドショー形式で展開。
メインビジュアルでは、明るい未来に向かって走るキャラクターを配置し、学びの広がりやワクワク感を表現しました。
レスポンシブ設計のため、画面サイズが変わってもキャッチコピー等が見切れないよう、テキストを画面中央に配置しています。

親しみやすさとIT業界らしさを両立するために、全体を通してアイソメトリックイラストを使用しました。
配色では、スクールのテーマカラーであるダークブルーを使用したほか、類似色のライトブルーと白を基調とし、明るさや清潔感を演出。単調な印象にならないようアクセントカラーにはブルーの補色であるイエロー、ピンクを採用しました。
使用ツール: Photoshop / Illustrator / Figma / Visual Studio Code / WordPress