1111人材バンク 校長連盟

#Figma #Webデザイン
HANDLE

担当範囲

#Html/CSS #UI/UX #アニメーション
PROJECT OVERVIEW

プロジェクト背景

毎年恒例の「企業が選ぶ大学ランキング」において、高いインタラクティブ性を備えた特設サイトの制作を主導しました。

WordPressとBricksを活用した柔軟な実装により、緻密なマイクロインタラクションを追加し、ユーザーエンゲージメントを向上させています。また、モジュール化設計によるページテンプレートの標準化を行い、ブランドの世界観を維持しながら、極めて高い制作効率と高品質なアウトプットを実現しました。

Visual

ビジュアルプランニング

「不確実性の探索」をビジュアル戦略の核に据えました。抽象的な幾何学モチーフで学生たちの無限の可能性を象徴し、親しみやすい人物イラストを配置することで情緒的な繋がりを創出しています。

メインビジュアルのタイポグラフィは、幾度ものカラーとレイアウトの検証を経て、立体的なスタイルで「2026」という年号を強調。月桂冠のモチーフを組み合わせることで、ランキングにふさわしい「栄譽」と「格式」を表現しました。情報設計においては、装飾文字にアウトラインフォントを使用して抜け感を出しつつ、サブタイトルにはモダンな「薄いイエロー背景に黒文字」のデザインを採用し、視覚的なアクセントとしています。

Color Palette

カラー設定

当初は鮮やかなオレンジを検討していましたが、フィードバックをいただき、最終的にメインカラーをブルーグリーン系に設定しました。

イエローやブラックを巧みに組み合わせることで、信頼感と、学生層に好まれる活気ある温かみの最適なバランスを追求しました。

Component

コンポーネント設定

シンプルさと躍動感を両立させるため、統一されたデザインシステムを構築しました。情報カードには親しみやすさを感じさせる角丸とドロップシャドウを採用し、サイト全体のユーザー体験に一貫性を持たせています。

各カードの特性に合わせ、引用符を用いたデザインでメッセージ性を強調。象徴的なコンテンツである「カバーモデル」や「ランキング」のセクションには、リボンモチーフの装飾を施し、祝祭のような華やかさを演出しました。特にランキングカードにはメタリックな質感のボーダーを添えることで、受賞時のようなプレミアム感を表現しています。

関連作品

プロジェクト
背景