企業向けセキュリティソフトの開発をはじめ、ITセキュリティソリューションを提供するサイバーセキュリティカンパニー、株式会社フーバーブレイン。レイロでは、コーポレートサイトのリニューアルを担当しました。
- Background背景
・上場企業として個人投資家向けの情報設計や再構築が必要だった
・製品群の情報整理
- Approach実施内容
・フーバーブレインの未来を体現するコンセプト設計
・投資家視点に立った情報、IR情報の整理
Flow解決の流れ
Structure
様々なステークホルダーに向けた、信頼を築くサイト設計
サイト全体を通して情報設計に則った上で、運用視点も加味しながらフーバーブレインにとって最適な形で設計しています。
企業の「顔」であり、信頼性を決定づけるトップページには、企業のフィロソフィーでもあるコンセプトを打ち出しました。
また、パートナー企業ロゴを並べることで、投資家への分かりやすさと信頼性を担保。企業の上場年数や売上高などの数字は、インフォグラフィックにまとめることで、IRページを開く前に必要な情報が一目で分かり、その後のIRページへの遷移もしやすい設計にしています。
IRページについては、多岐にわたる情報をナビゲーションで整理し、決算速報動画などの情報鮮度が高くわかり易いコンテンツも入れました。製品ページも同様に、使用目的に合わせてカテゴリーを分けて、各製品ページも制作しました。
Concept
企業の思想を整理し、未来へつなぐコンセプトデザイン
ブランドの方向性を定めるにあたり、代表者様にまずフーバーブレインの企業としての原点や、これまで大切にしてきた価値観、そして今後描こうとしている未来を丁寧に整理しました。
そしてフーバーブレインのブランドコンセプトを「変化と挑戦」と定めました。これは時代変化に強く自ら変わり続け、挑戦を重ねていく企業姿勢を明確に打ち出しています。その過程で浮かび上がったのは、セキュリティ企業という領域にありながら、技術や仕組みにとどまらず、変化に柔軟に対応し、挑戦を続けてきた企業文化の存在でした。そして何より、一人ひとりの人材の力が組織を支えているという本質的な強みが明らかになりました。
サイト全体では、このコンセプトや強みを視覚的にも直感的にも伝えるため、トーン&マナーや世界観を再構築。フーバーブレインの勢いと、未来へ躍進する力強さが感じられる表現へと落とし込みました。
Design
モチーフに込めた、多様性とチーム力の象徴。投資家が“感じる”情報設計とIRページ刷新の工夫
ファーストビューでは、ブランドカラーであるブルーの色味を基調に、セキュリティ企業らしさに寄りすぎない、フーバーブレインならではの独自性を表現しています。
もともとフーバーブレイン様が使用していた立体的なルービックキューブのモチーフを用いて、動画を作成しました。複数のピースが組み合わさることで一つの形を成すことから、変化や挑戦を重ねながら成長する「チーム」や「組織としての力」を表現しています。これはモチーフの完成形だけでなく、そこに至る過程をも表現しています。動画が長くなりすぎないよう、キューブの並びやマスの数を細かく調整し、最終的にはフーバーブレインの「F」の文字が現れ、そこからルービックキューブが完成する流れを構築。ブランドモチーフへと自然に収束する、印象的なファーストビューに仕上げています。
ファーストビュー下、ニュース以降の青くゆらゆらと揺れる背景は、ブランドコンセプトである「変化と挑戦」を視覚的に表現したものです。
そしてサイト全体のアルファベット部分には、未来感を想起させるフォントを採用しました。このフォントは、サイト全体で繰り返し使用できるようにしています。そしてセキュリティ会社としての信頼性や堅実さとも親和性を持たせながらも文字としての視認性が高く、先進性と安心感を両立させています。
インフォグラフィックは、投資家の方が情報収集の際に最初に着地するエリアであることを前提に設計しました。重要な情報が瞬時に目に留まるよう、数値部分に適度な動きを加えています。数字は大胆に大きく配置することで、直感的にインパクトを与え、企業の実績や強みが一目で伝わる構成としました。
Implement
管理負荷を減らし価値を高める、開発面の工夫
開発面では、サイト全体の運用性と拡張性を高める設計にしています。フーバーブレイン様が自社で情報の更新がしやすいよう、COMPANYメニューをはじめ複数箇所で共通して使用されるセクションはコンポーネント化し、あらかじめ共通パーツとして設計しました。これにより、更新や追加が容易となり、長期的な運用効率向上を実現しています。
IRコンテンツでは、経営成績エリアを外部データベースから自動取得し反映できる仕組みを構築しました。IRデータベースと連携することで、情報の鮮度と信頼性を担保しつつ、管理工数を大幅に削減できる点が特徴です。
プロダクト詳細ページでは、商品説明をクライアント側で柔軟に編集できるよう、専用エディター環境とブロックコンポーネントを導入しました。見出しやテキストをブログのように組み合わせながら自由にレイアウトできる設計とすることで、コンテンツ更新のスピードと自由度を高めています。
Gallery
Team
- Director
- Ai Hirohata
- Art Director
- Yuka Nakai
- Designer
- Haruna Fukui
- Developer
- Hayato Yoneda
- Videographer
- Ryoji Kume
-
Ai Hirohata
-
Yuka Nakai
-
Haruna Fukui
-
Hayato Yoneda
-
Ryoji Kume