1111人材バンク MBTI診断

#Figma #Webデザイン
HANDLE

担当範囲

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

プロジェクト背景

【オリジナルビジュアルによるブランド独自性の強化】

SNSトレンドに合わせ、利用率向上を目的に「1111」独自のビジュアルを構築。

親しみやすさと創造性を両立させるため、カラーブロックにラインを添えて輪郭を際立たせるスタイルを採用し、独自のブランド表現を確立しました。

現代のユーザーの多くがスマホを使用しているのを踏まえ、モバイルファースト戦略を採用し、インタラクション体験を最適化しました。

PC版では淡いリピートパターンを背景に配す拡張プランを導入し、コンテンツを妨げずに大画面の余白を補完。全デバイスで一貫したスタイルと世界観を維持しました。

Visual

ビジュアルプランニング

学生や新卒者との距離を縮めるため、インターフェースのコンセプトを「手帳・ノート」と定義しました。

方眼紙テクスチャを背景に、UIを文房具モチーフへ変換。付箋風の見出し、マスキングテープ調のセクション区切り、切り取り線などの要素を配し、日常に馴染むアナログ感を演出しました。

温かみのある手書き風のビジュアルにより、製品に独自のアイデンティティを与え、ターゲット層の利用意欲を大幅に向上させました。

Text

テキスト設定

躍動感のある「文鼎俏黑體(タイトル)」と温和な「文鼎花栗體(見出し)」を使い分け、英字には「Chekharda」を採用。異なる言語間でも統一感のあるビジュアルアイデンティティを確立しました。

本文については、アセスメント中の情報吸収スピードを考慮し、合理的な「Noto Sans」を採用。

装飾的なフォントによる「感性的なナラティブ」と、ゴシック体による「理性的な可読性」を共存させることで、イラストの世界観に没入しながらもストレスのない閲覧体験を保証しました。

Color Palette

カラー設定

メインカラーには、新卒者が職場に踏み出す際の、芽吹いたばかりの苗のような生命力を象徴するグリーンを選定。

画面に安定感を与えるため、隣接色であるブルーやパープルをサブカラーとして採用し、静謐でプロフェッショナルな調和を演出しました。

アクセントに明快なイエローを使い、活気あるビジュアルを演出。全体を低彩度なトーンで統一することで認知負荷を抑え、長時間見ても疲れにくい、快適で持続可能なデザインを実現しました。

Illustration

イラストデザイン

イラストにはモジュール化設計を取り入れました。商用素材ライブラリをベースに、ブランドのトーンに合わせたスタイルへと再構築。

チームを主導し、11人のオリジナルキャラクターと9組のコアシーンを制作したほか、オープニングとエンディングのアニメーションも単独で担当しました。

コンポーネント化された開発フローにより、ビジュアルの一貫性を維持しながら、限られた納期内で多様性とボリュームを両立させました。

関連作品

プロジェクト
背景