「合同会社ヘキサゴンブリッジ」は、新規事業の立ち上げに伴走するコンサルティングを紹介するコーポレートサイトです。横浜市神奈川区に拠点を置く同社の姿勢を、落ち着いたネイビーを基調にした画面設計で表現しています。ここではWebデザインを探している方に向けて、このサイトの配色や情報設計、UIの工夫を具体的に読み解いていきます。
全体を通して感じられるのは、B2Bサービスらしい信頼感と読みやすさの両立です。実写の写真とイラスト、図解をバランス良く使い分けながら、新規事業の担当者が抱える悩みから支援の流れまでを、上から順に無理なく理解できるように組み立てています。単なる事業紹介にとどまらず、閲覧者の理解の流れそのものを設計している点が印象的です。
ファーストビューで印象づけるネイビーのトーン＆マナー
最初に目に入るファーストビューは、このサイトの世界観を決定づける重要なパートです。ヘキサゴンブリッジでは、写真とオーバーレイ、余白の取り方によって、B2Bサービスにふさわしい落ち着いた第一印象をつくり出しています。まずは配色と、見出しやボタンの見せ方に分けて確認していきます。
実写写真に重ねた半透明オーバーレイ
ヒーロー部分には、ノートパソコンや資料、グラフを囲むビジネスパーソンの実写写真が敷かれています。その上にネイビーの半透明オーバーレイを重ねることで、写真の情報量を程よく抑えつつ、白い文字をくっきりと際立たせています。写真がもつ具体性とネイビーの安定感が同居し、現場の実務に寄り添う姿勢が視覚的に伝わってきます。
コントラストを効かせた見出しとボタン
濃い背景の上に置かれた白い大きな見出しは、「やらなきゃいけない」と「何から始めるか」という二つの言葉を『』で対比させ、読み手の視線を自然に引き込みます。その下には細めのサブコピーと、白い枠で縁取られた資料請求・お問い合わせ用のボタンが続き、読み進めた先ですぐに行動へ移れる導線を用意しています。装飾を増やしすぎず、色のコントラストだけで主役を際立たせている点は参考になります。
セクションを整理する情報設計とレイアウト
ヘキサゴンブリッジのトップページは、複数のテーマを一枚に積み重ねた縦長の構成です。情報量が多くても閲覧者を迷わせないために、ラベルの付け方と背景色の切り替えという二つの仕掛けで、セクションの区切りを明確に示しています。ここではその工夫を順に見ていきます。
英字ラベルと日本語見出しの二段構え
各セクションの冒頭には、Issues・Background・Our Approach・Service・Process・Companyといった英字ラベルが小さく添えられ、その下に日本語の大きな見出しが続きます。英字ラベルが装飾と目次の役割を担い、日本語見出しが内容を明快に伝えるため、拾い読みをしても今どのテーマを見ているのかがすぐに分かります。視認性と一覧性を両立させた、扱いやすい見出し設計です。
背景色の切り替えでリズムをつくる
白、淡いブルー、濃いネイビーという三系統の背景を交互に配置し、セクションごとの切れ目を視覚的に表しています。とくに伴走の流れやお問い合わせの手前では濃い背景へ切り替え、画面全体に強弱のリズムを生み出しています。長い縦スクロールでも単調になりにくく、最後まで読み進めやすいレイアウトに仕上がっています。
悩みから解決へ導く図解と視線誘導
このサイトの中心にあるのは、新規事業の担当者が抱える悩みを可視化し、その解決像へと橋渡しする流れです。文章だけに頼らず、チェックリストや図解、イラストを組み合わせることで、読み手が感覚的に内容をつかめるように工夫されています。悩みの提示から支援の考え方まで、視線が自然に下へ流れていく設計です。
チェックマークと吹き出しで悩みを可視化
Issuesの「こんなお悩みありませんか？」という見出しの下には、青いチェックマークを添えた項目が横並びで整理されています。続くセクションでは、担当者の頭に浮かぶ迷いを雲形の吹き出しやアイコン付きの円で表現し、下向きの矢印で一点へ収束させる図解を配置しています。抽象的になりがちな課題を、視覚的なメタファーで直感的に伝えています。
「かかりつけ医」という比喩の視覚化
Our Approachでは、同社の支援姿勢を『かかりつけ医』という言葉で表し、白衣をまとった人物の写真や、医療を思わせるアイコンで比喩を裏づけています。伴走型の支援サービス「新規事業おじさん®」というネーミングとも呼応し、継続的に寄り添う印象を一枚の絵として伝えています。専門用語を並べるのではなく、身近な比喩に置き換えることで、支援の距離感を分かりやすく示しています。
社名を体現する六角形モチーフとブランドづくり
「Hexagon Bridge」という社名は、デザインの細部にまで一貫して落とし込まれています。六角形（ヘキサゴン）のロゴマークを軸に、アイコンや背景パターンへとモチーフを展開し、ブランドとして記憶に残る手がかりをつくり出しています。ここではロゴの意味づけと、事業内容の見せ方を確認します。
ヘッダー左上のロゴは、六角形の中にHをかたどったシンプルな図案です。Companyのセクションでは、六つの橋を象徴として人と人、企業と企業、現在と未来をつなぐという理念が語られ、ロゴの意味とデザインがしっかり結びついています。サービス紹介の背景にも六角形を敷き詰めたパターンが用いられ、社名・理念・装飾が一つの世界観としてまとまっています。
フッターやCompanyの事業内容欄には、伴走支援の中核である「新規事業おじさん®」に加えて、「シニア機会クリエイター®」やペロブスカイト太陽電池アドバイザーといった取り組みが並びます。ペロブスカイト太陽電池の事業化をコンサルに相談したい方にとっても、対応している領域の広がりをつかみやすい構成です。複数の事業を扱いながらも、六角形モチーフが全体を束ね、散らかった印象を与えていません。
迷わせない導線設計とUI
閲覧者を問い合わせまで自然に導くために、ナビゲーションやボタン、ステップ表現が丁寧に設計されています。どの位置からでも次の行動へ移れるよう、導線が繰り返し用意されている点が特徴です。ここではナビ、伴走の流れ、フッターの三つに注目します。
グローバルナビと問い合わせボタン
画面上部には、経営理念・コンセプト、事業内容、サービス内容、支援実績、業務フロー、会社概要といった項目を並べた横並びのグローバルナビが配置されています。いくつかの項目にはドロップダウンが用意され、下の階層へも迷わず進めます。右上には差し色となる青いお問い合わせボタンが常に見え、閲覧のどの段階からでも連絡の入口へたどり着けます。
番号付きステップで示す伴走の流れ
Processの伴走の流れでは、01から04までの番号を振ったカードで支援の進み方を示しています。ご相談・ヒアリングから、目標と現在地の認識、進め方の設計と実行支援、そして継続的な伴走支援まで、各ステップにアイコンを添えて順序を分かりやすく表現しています。初めて相談する方でも、依頼したあとの流れを具体的に思い描ける構成です。
ページ下部で情報を束ねるフッター
フッターでは、事業内容・メニュー・SNS・インタビュー記事や動画といった情報を列で整理しています。社名と住所を改めて明記し、noteなどでの発信やインタビューのサムネイルも並べることで、運営者の実像が伝わる作りです。同社を運営する森 慶一郎様は、大手電機メーカーと総合商社グループでの経歴を持つと紹介されており、こうした情報の掲示がサイト全体の信頼感を支えています。
まとめ：新規事業に寄り添う姿勢が伝わるデザイン
合同会社ヘキサゴンブリッジのサイトは、ネイビーを基調とした配色、六角形モチーフの一貫した展開、英字ラベルと日本語見出しによる明快な情報設計によって、B2Bサービスの信頼感を丁寧に形にしています。実写とイラスト、図解を使い分けながら、悩みの可視化から支援の流れまでを一続きで理解させる構成は、コーポレートサイトを検討している方にとって参考になります。
新規事業の第一歩をどう踏み出すか迷っている方はもちろん、新規事業の稟議が通らないと悩む方も、実際の画面の質感や導線の工夫をご自身の目で確かめてみてください。デザインの意図を体感することで、自社サイトづくりのヒントが見つかるはずです。
