Case
株式会社エービーシーキャピタル様
Webトレンドの変化により、デザインとUIの刷新が急務
数年前にコーポレートサイト刷新を行っていたものの、Web業界のトレンドは変化が激しく、現在のWebトレンドを反映させたUIを適応する事が、今回のリニューアルプロジェクトでは大きな焦点となっていました。また、デザインの最新化もリニューアルにおける重要な要素でした。クライアント様のビジネスモデルに沿ったデザインとする事はもちろん、エンドユーザーが快適に回遊してもらえるようなUI/UXを実現できるよう、デザイン面から工夫を凝らす必要がありました。
シンプルながら短期間で高クオリティのコーポレートサイト制作を実現
本プロジェクトでは制作初期からデザイナーが同席し、緻密なコミュニケーションを行う事によって、クライアント様のサイトがより魅力的なものとなる最適なUI/UXデザインをご提案させていただく事が出来ました。
サイト内部に新たにCMSの導入を行い、コンテンツの更新を容易にしました。また、UI改善の一環として、既存サイトの構成をイチから見直し、サイト内を回遊しやすくなるよう、各ページを再構築いたしました。
構築時には、テンプレート数を抑えることで、短期間での開発を可能にしました。その中で、UI設計などコーポレートサイトにおける重要な要素は拘りを持って設計しており、スケジュールや費用等をお客様の要望に合わせた上で、最大限のアピールが可能なサイトを制作いたしました。
本件はサイトリニューアルご提案時にデザイナーも同席してヒアリングを行いました。そうすることで言葉だけでは伝わらないクライアント様のデザイン的なご要望を肌で感じることが出来たと思っています。
コンセプトはシンプル・モダン・ミニマム。過度な装飾は施さず、たっぷりと余白をとることによってモダンな印象にしています。金融系コーポレートサイトにはシャープで固いデザインも多くみられますが、本件ではクライアント様の『未来の笑顔に投資する』というコーポレートスローガンを体現するべくデザインをスタートしました。
グローバルなCSR活動も活発な企業様なので、メインビジュアルには多国籍で未来ある子供たちの『笑顔』眩しいイメージを採用。また、敢えて柔らかいグラデーションやシャドウを用いて全体が固くなり過ぎないようまとめています。
とはいえ「信頼・安心」というキーワードも重要。コーポレートカラーは「信頼・誠実」という印象を与えるブルーですが、メインカラーとして広範囲で使用すると固さが出てしまいます。そこで全般的なサイト背景色はポジティブイメージとして「信頼」と「穏やか」を併せ持つライトグレーを採用。コーポレートカラーのブルーはアクセントカラーとして随所に用いることにしています。その結果、信頼・安心感を与えつつ、柔らかい印象も併せ持つサイトデザインとなりました。
本件ではスクロールアニメーションやテキストアニメーションを汎用エレメント化することにより、クラスの有無でアニメーション制御を可能としました。
トップページと比べて単調になりがちなセカンド以降の下層ページに動きを取り入れることで、トップページと下層ページの「印象のギャップ」をなるべく低減させています。またスクロールアニメーションの制御は比較的モダンなAPIを採用し、そのパフォーマンス性も向上させています。
インタラクションはデザインと組み合わせて効果的に使用すれば、装飾的な意味だけでなく視線誘導などのUIを向上させます。
サイト上の重要なトピックはトップページだけに集約しているわけではないので、下層ページにおけるUI設計も時間の許す限り検討しました。
| SITE URL | https://www.abc-capital.co.jp/ |
|---|---|
| INDUSTRY | 金融・保険業 |
| MANAGER | 植村 |
| DIRECTOR | 田中 菅原 |
| DESIGNER | 川島 |
| SYSTEM ENGINEER | 中尾 |
| FRONTEND ENGINEER | 川島 |
