業界のイメージバイアスを解消する。あえてセキュリティ“らしくない”要素も取り入れたデザインに

Research

セキュリティのイメージを変える。原点調査で見えた会社の想い

CEOにヒアリングを実施し、過去、現在、未来を深掘りしながら、会社の魅力や強み、打ち出したい点をあらためて整理するところからスタート。原点調査を進める過程ででてきたひとつが、「セキュリティ会社に対する、ユーザーの“とっつきにくい”といったイメージを変えたい」「他のセキュリティ会社とは違ったサービスや魅力を打ち出したい」という声でした。

また、ハチマルヤ合同会社様の強みの一つが、クライアントへの寄り添いや伴走力。単なる外部コンサルティングではなく、社内メンバーの一員として、柔軟かつ包括的なサポートを行っています。そのような会社や事業の強みを訴求するためにも、「セキュリティ分野に知見がない方への不安の解消」や「パートナーとしての安心感」などを軸にコンセプトの方向性を定めました。

Structure

視覚的にもわかりやすい、門戸の広いサイトに

セキュリティへの知見がない方に対してもわかりやすいウェブサイトにするために、特に企業の主軸となる事業内容の魅せ方にこだわっています。

お客様にセキュリティに対して何から手をつけたらいいのか困っている、まだ悩みが明確になっていない、などの状態からでも相談可能なサービス体制を訴求するため、「SERVICE」ページの「ハチマルヤのサービス」では、ユーザーが抱えているであろう具体的なお悩みを複数提示し、そのお悩みに合わせてぴったりのサービスをご提案するかたちに。

「STRENGTH」の「ハチマルヤが選ばれる理由」では、一般的なIT・セキュリティコンサル企業と比較時のハチマルヤの魅力や、依頼時の詳細フローなどを、テキストだけでなく図やイラストを用いることで、視覚情報として分かりやすく展開しています。

Identity

創業の原点とセキュリティの要素の2つを宿した「扉」のロゴ

ロゴにある「扉」は、セキュリティ会社としての「強固な守り」を体現するモチーフとして選んでいます。「とある建物の一角の808号室から事業が始まった」創業ストーリーを、3つ並んだドアに描かれたドアノブで表現し、ポップでインダストリアルなイメージに落とし込みました。

カラーは信頼感を表すクラシックなネイビーと、親しみやすさを表すレッドを使用しています。

Design

ポップさと信頼感を両立させるサイトデザイン

「セキュリティやITにありがちな堅いイメージを感じさせないもの」であると同時に、「セキュリティ・IT分野に精通する」ハチマルヤ合同会社様のプロフェッショナリズムを体現するために、そのバランス感をデザインでも重視しました。

CIを活かしたフラットなデザインをベースに、サイト全体に遊び心のあるテイストや仕掛けを取り入れることで、ポップさを演出。セクションの繋ぎ目にはしごや階段を取り入れるなどして、現代感がない別世界の魅せ方にしています。

その中でも、セキュリティ会社としての信頼感や、守るという強固さは保ちつつ、主にグレー、ネイビー、赤の3色のシンプルなカラーを使用しました。3色をリズミカルに使いながら、単調にならないようにも配慮しています。限られた色の使用は統一感を生み、ユーザーにサイトの中身をしっかり見てもらう、わかりやすく伝えるという点にも寄与しています。

ロゴやサイトと連動させるかたちで制作した名刺は、縦方向に向けてドアが3つ並んでいるかたちに。両面印刷で片面ずつ、赤色とネイビーをベースカラーにしています。1枚の名刺をドアに見立て、ドアノブを穴でくり抜くなど個性感あふれる名刺に仕上げました。

Implement

遊び心あふれるアニメーションとCMS設計

デザインを活かし、サイト全体にさまざまな動きや仕掛けを取り入れることで、ユーザーの遊び心をくすぐるサイトに仕上げています。

トップページのロゴを模したドアのひとつをホバーさせると「SERVICE」の3項目の内容を表示。1項目を選び、右下の矢印をクリックすると、より詳細な事業内容が書かれたページに遷移する仕様になっています。同じくトップページには“はてなボックス”を浮かばせ、クリックするとお悩みに合わせてサービスを提案するページへ。下にスクロールすると、上からはしごや階段が降りてくるような動きを取り入れています。

また、課題であった「社内更新箇所の運用負荷軽減」についても、運用観点でのヒアリングをもとに、既存サイトから踏襲する要素と新規追加する要素を綿密に設計しました。