●挑戦： 開発チームとの連携を強化するため、UIルールとデザインシステムを先行導入し、制作効率と品質を最適化。
●ビジュアル戦略： 不規則な幾何学モチーフとイラストで学生の「可能性」を表現。「ブルーグリーン・パープル・ブルー」の3色で、学園生活から職場への成長プロセスを定義しました。
●レイアウト： タイポグラフィの階層整理と余白設計により、情報過多だった既存画面の可読性を大幅に改善。
●成果：若年層の感性に響く現代的なビジュアルを確立し、ブランドの親和性を向上。ターゲット層における利用頻度の増加に貢献しました。
●ナビゲーション： 没入感のあるポータルページを新設。サイト内検索を統合し、ユーザーの認知負荷を軽減。
●スタイル： バナーを全面イラスト化し、ブランドの独自性と親しみやすさを強調。
●雑誌風レイアウト： 高校生向けのページにマガジン風の構成を導入。
●統一性調整：大学生と研究生向けのページにはカード型デザインにより、複雑な学校データや記事情報を明快に整理しました。
サイト名を「XCHOOL」に変更。既成概念を打ち破り、未来を切り拓く「デジタルナビゲーター」へとブランドを再定義。
●リブランディング：XCHOOLを、ユーザーが未来を探索するための「デジタル・ナビゲーター」として再構築。学問に関する情報の的確な取得をサポートし、キャリアパスへのスムーズな接続を実現する存在へと昇華させました。
●成長の色彩言語： ブルーを基調とし、高校生（水色）→大学生（青緑）→社会人（青紫）へと微細な色相変化を持たせることで、ライフステージの質変をメタファーとして表現。
●ミニマリズム： 硬い境界線を柔らかなグラデーションへと置き換え、モダンで流動的なインターフェースへと進化させました。
リニューアルv3.0では、視覚的な躍動感を高めるためにダブルメインカラーを採用しました。3つのユーザー属性において、ブルーを基調とすることでブランドの一貫性を担保しています。
アクセントカラーはユーザーの成長プロセスに合わせて変化させました。初期段階では暖色系を用いて「日光」と「青春」の息吹を表現。大学進学から社会人へと進むにつれ、アクセントカラーを寒色系へとシフトさせることで、色温度の低下に伴う「成熟」と「プロフェッショナリズム」への変遷を視覚的に再現しています。
トップページでは、イラストを主軸としたビジュアル戦略を展開し、豊富なアイコンを補助的に配置することで、ユーザーの認知負荷を最小限に抑え、各テーマを直感的に伝達することを目的としています。
スタイルには「ダブルトーン」を採用し、インターフェースの活気と緻密なグラフィックを両立させ、美観と機能性のバランスを実現しました。
サイト全体のボタンに丸みを帯びたカプセル型を採用し、親しみやすく柔らかな第一印象を与えています。特に重要なCTAボタンには「吹き出し」の造形を導入。「コミュニケーション」と「情報探索」という視覚的なヒントをユーザーに暗示しています。
ヘッダーには成長段階を示す視ナビゲーションとして導入しました。高校生は「若葉」で潜在能力の芽吹きを、大学生は「角帽」で学問のステップを、そして社会人は「コイン」でキャリアの対価を直感的に表現しています。
本バージョンでは、意思決定の結果として『TUN大学ネット』の旧称を継承。既存のブランド力を深掘りし、学生層に特化する方針を採択しました。あえて「新社会人セクション」を削ぎ落とすことで、コアサービスの価値を最大化させることに注力しました。
●コンポーネント化： シニアデザイナーの協力のもと、全サイトのコンポーネントを標準化しました。文字のみ・文字と画像や日程の組合せなど、すべてのカードを統一し、視覚的な協調性や開発効率を向上に貢献しました。
●技術実装： UI制作に加え、WordPress（ACF / Bricks Builder）を用いたフロントエンド構築を担当。AIを活用して複雑なデータフィルタリング用のJavaScript/PHPを記述し、デザインと技術のシームレスな統合を実現しました。
視認性向上のためダブルカラーを廃止し、高コントラストな配色へ刷新。高校生は「青さ」のグリーン、大学生は「情熱」のレッド、セクション等にはイエローを配しました。
ガイドラインの再構築に伴い、ボタンコンポーネントに明確な階層を設定しました。アイコンを併用する際の余白やサイズ基準も厳格に定義しています。また、ナビゲーションバーの属性切り替えボタンの配色を統一し、サイト全体のまとまりを強化しました。
ビジュアル戦略としては、アイコンの使用頻度を最適化し、代わりに実際の記事写真を活用することで、情報のリアリティと画面の豊かさを向上させています。
シニアデザイナーとの協働を通じて、それまで分散していたインターフェース要素を徹底的に規格化を行いました。サーチバーボタンおいて、枠線なしのは「ポップアップの」、枠線ありのは「ドロップダウン」といった視覚的なルールを確立。
また、画像とボタンを含むカード配置において、固定比率、余白、ボタンのウェイトに関する統一基準を策定しました。
