CyberAgent

CIの踏襲を強く意識し、サイトデザインの全てに具現化させたリニューアルプロジェクト。

既存のCIが持つ世界観を深く読み解き、ビジュアル面だけでなく、マイクロインタラクションの細部に至るまでサイトデザインとして具現化。
サイバーエージェントらしさの追求を道しるべに、イメージボードを用い、PC・タブレット・スマホのUI開発と、インタラクションも含めたサイトデザインレギュレーション策定を行った長期プロジェクトに、メインデザイナーとして担当させていただきました。
CLIENT
株式会社サイバーエージェント
Production
株式会社アンティー・ファクトリー
DATE
Oct, 2017
ROLE
Art Direction, Design, PhotoDirection, Illust

クリエイティブの力で 「21 世紀を代表する会社を創る」というビジョンの元、 これからのスタンダードとなるデザインを目指した。

「サイバーエージェントらしさとは?」の問いにもとづき、サイバーエージェント様と共に多様なリファレンスを通じ相対的な視点でキーワードを抽出。「HIPHOP」「柔軟性」「機能美」など、顕在化したキーワードを元にビジュアライズし、ブランドのコアとなるイメージボード開発を行った。とにかくシンプルであること、タイポグラフィやインタラクションなど最小限の要素でらしさを表現すること、華美ではなく機能性を重視することが求められた。
ワークショップを通じ共に探索していくプロセスを経たことで、これからデザインで目指していく方向性についてもプロジェクトメンバー間でイメージや理解のブレが生じにくい進行でスムーズなデザイン提案ができました。
cyber_pc1
cyber_pc2
cyber_pc3
cyber_sp

モジュール化

5~6年先も使い続けられる耐久性のあるサイトを実現するため、似て非なるモジュールは全て統合し徹底的にシンプルな設計を目指しました。

十二単ナビゲーション

階層の深いサイト構造において、ユーザーがストレスなく取得したい情報に辿り着くためのナビゲーション設計は重要である。今回、自分がどの階層を閲覧しているかが直感的に理解できるよう、階層ごとに違う背景色を設定し変化をつけた。また、アクセシビリティ基準を満たす文字色と背景色を使用し色コントラストにも配慮し、現在地が分かるカレント機能の実装、俯瞰してサイト構造が理解できるよう一画面内の情報量を担保、耐久性のある設計を目指しました。
cyber_navi_sp

オウンドメディア

イメージボードを構成する要素からコーポーレートと共通したマテリアルを用い、 デザイン表現は全く異なりながらも親和性を保つトンマナで設計しました。
cyber_pc4

Experience the website in motion