Sasukeコーポレートサイトのリニューアルに込めた想い
こんにちは、デザイナーの市橋です。
この度Sasukeのコーポレートサイトをリニューアルしたので、デザインプロセスやこだわったポイントについてご紹介させて頂きたいと思います。
Sasukeのコーポレートサイトは元々Vueで作られていたのですが、内容を更新する度にエンジニアさんの手を借りる必要があるのが課題でした。
そこでWordpressへの移行が持ち上がり、いっそこの機会にフルリニューアルしてしまおう、ということでブランディングの強化も兼ねた施策としてスタートしました。
❶ 事前準備
まずはエンドユーザーの方、クライアント企業の方、採用応募者の方、投資家の方をターゲットとして、それぞれにどのようなメッセージを発信するのか、どのような印象を持って頂くのかを定めていくためのフレームを準備しました。
メッセージについては現行サイトを整理し直す形でコンテンツリストとワイヤーフレームのベースを作り、印象面についてはデザインチーム内でキーワードをアイディエーションし、マトリクスの軸として設定しました。
❷ 調査・インタビュー
Sasukeにはベンチャー・IT・保険の3つの側面があるため、これらの観点で他社のコーポレートサイトの事例を収集し、事前準備の中で策定した「先進/安定」「活発/誠実」「優しさ/厳格さ」の3つの軸でプロットしました。
これを元にして社長を始めとした各事業責任者の方へのインタビューを行い、印象のポジショニングを決定すると共に、訴求したいコンテンツの内容についても策定していきました。
❸ デザイン
これまで収集した情報からトンマナを定め、各ページのデザインに落とし込んでいきました。
全体としては装飾を少なくしてモダンな印象を持たせながらも、ザラッとした背景のテクスチャや少し抜け感のあるフォントでアナログの温かみが感じられるよう心がけました。
トップ
FVにはSasukeのビジョンを表現したキービジュアルを動画で配置しました。
メインコンテンツとなる「コのほけん！」と「InsurTech事業」は特に強調するよう左右に振り分けて空間の余裕を持たせ、配下ページのFVと紐づく扉絵で印象を強めています。
コのほけん！
FVでは他ページと同じトーンで統一しつつ、スクロールに応じてコのほけん！の青色を全面にオーバーレイすることでプロダクトのブランドイメージを強く押し出すようにしました。
またデバイスのモックを固定し、画面内を動的に変化させることでプロダクトの機能がわかりやすく印象に残るように工夫しました。
InsurTech事業
提供するソリューションを4つに整理し、抽象的な提供内容を具象としてイメージしやすいようにモチーフやモックをCGで作成しました。
FVの4つのモチーフは各ソリューションに対応するように背景としても配置しています。
❹ CG
トップページのFVに配置したCG動画はSasukeのビジョン「自分に合った保険を、自分で選べる世界を。」に対応しています。
もやもやとした曖昧な想いの中からだんだんと自分の具体的な意向が見えて行き、個々の商品をしっかり見極めた上で選んだ自分にピッタリな保険と人生を歩んで行く、という過程を表現しました。
おわりに
最後まで読んで頂きありがとうございました。
今回コーポレートサイトをリニューアルするに当たり、社内や協力会社の方を含めて沢山の方にご協力を頂きました。
多くの方に意見を頂きながら内容をブラッシュアップしたからこそ、伝えたいメッセージが強く込もったサイトになったと思います。
改めましてありがとうございました。
Sasuke Financial Lab 公式サイト : https://sasukefinlab.com/