はじめに

こんにちは！101DESIGNです。
全3回でお届けしているコーポレートサイトリニューアルの裏側。前回の「背景編」では、プロジェクトが立ち上がった理由や目的についてお話ししました。

第2回となる今回は、「デザイン編」です🎨
101らしさをどのようにWebサイトへ落とし込んでいったのか。制作を担当したデザイナーの視点からこだわりのポイントをご紹介します！
ぜひ、リリースしたコーポレートサイトとあわせてご覧いただけると嬉しいです。

リニューアルのデザインコンセプト

今回のデザインにおいて、私たちの目的は大きく3つあります。

1. 101らしさの共通認識の形成（ブランディング）
2. 101 DESIGNの価値観・姿勢の可視化と、ビジョンに見合ったサイトの具現化
3. 未認知層に向けた第一印象の最適化

刷新したVIを主軸に、「今の101らしさ」を感じられるデザイン方針を固めました。
VI刷新に関する記事はnoteから。

101らしさを体現する3つのデザインポイント

具体的にどのような意図を持ってデザインを構築していったのか、3つのポイントに分けて解説します。

1. 新しい101らしさを構成する、ブルーとイエロー

これまでのコーポレートサイトのメインとなっていた白と黒をベースに、新ブランドカラーのブルーやイエローをボタンや見出しのあしらいに使用、カラーもこだわって調整しています。

白文字でコントラスト比（4.5:1）をクリアするためには、かなり色味を調整する必要があり、今回は黒文字を採用しています。

イエローは、採用情報（ENTRY）へのボタンに使用しています。 この色は101メンバーの温かい雰囲気や協調性などをイメージして選定されたカラーなので、採用ページで活用しました🌻

2.【あしらい】ロゴから着想を得たメリハリのある造形

ロゴマークの形状から着想を得た「丸」のあしらいを取り入れた部分と、コンテンツの枠組みなどは直角で統一。これは101ロゴの「1」の直線的なシルエットに合わせつつ、ポイントで配置した丸をより際立たせるための工夫です📐

3. 【アニメーション】ユーザー主導の心地よさと遊び心

ファーストビューのメインコピーには、101のミッションである「共創サイクルをつくる」を掲げました。 ビジュアル面でも101らしさを印象づけたいと考え、ロゴマークの「丸」を引用して丸いオブジェクトがTOPページ内で循環しているようなアニメーションを取り入れています。

アニメーション全体の方針として、ユーザーの操作感を奪ってしまうスクロールジャックは行っていません。あくまでユーザー主導のスムーズな操作感を最優先にしています。

他にもちょっとした「遊び心」を感じてもらえるような動きを仕込んでいますので、ぜひ実際のサイトで触ってみてください！

ここまで「デザイン編」をご覧いただきありがとうございました🙌
こちらの記事の詳細は、noteで紹介しています👇

🔗VI刷新からはじまる、コーポレートサイトリニューアルの裏側｜デザイン編

さて、次回はいよいよ最終回。
このデザインをどのように実装し、スピーディーな運用体制を構築したのか。「実装編」としてお届けする予定です。
ぜひ楽しみにお待ちください！

こういう方とお話ししたいです

・仕組みづくりにも関わりたい
・AI×デザインに興味がある
・裁量を持って挑戦したい

そんな方がいれば、ぜひ一度カジュアルにお話ししましょう🕊️