エックスサーバーグループ コーポレートサイトデザイン

Background

制作背景・目的

コーポレートサイトは、サービスサイトのような「お申し込み」というひとつのゴールがありません。顧客は会社の信頼性を確かめに、求職者は事業や雰囲気を知りに、取引先や報道関係者は最新のニュースや会社情報を探しに訪れます。

そこで本案件では、事業・ニュース・企業情報・採用といった複数の入口をわかりやすく整理して提示すること、そして長年インターネットのインフラを支えてきたグループとしての安心感と、これからも成長を続ける企業としての前向きさを両立させることを目的としました。

Challenge

設計上の課題

• 来訪者の目的が複数あり、特定の誰かだけに最適化すると、他の来訪者が目的の情報を見つけにくくなる。
• ニュース・サービス・会社情報・採用など情報の種類が多く、並べるだけでは優先順位が伝わらず、単調になる。
• グループ理念や認証・調査データの注記など、信頼性に関わる情報を載せつつ、ページ全体が堅くなりすぎないバランスが必要だった。
• 下層ページが多く、ページごとに見た目や構造がばらつくと、グループとしての一貫性が失われる。

Process

進め方・体制

• 情報設計：他部署と連携し、掲載する情報と、それぞれのページの役割を整理しました。デザイナー単独で決めず、情報を持つ部署と目的をそろえたうえで構成を固めています。
• デザイン：トップページを起点にトーン＆マナーを決め、下層ページへ展開しました。
• 実装：コーダーが担当。実装を前提に、デザイン時点でカードやボタンなどの部品の型を揃え、ページが増えても同じ部品を使い回せる状態に整えました。

Information Architecture

情報設計

トップページを入口とし、来訪者の目的ごとに下層ページへ誘導する構成にしました。各ページの役割は次のとおりです。

Approach

デザイン方針

ブランドカラーの青を軸に、「白＋淡い青の面」と「青のグラデーション面」を交互に配置し、セクションの切り替わりと情報の区切りを色面だけで伝わるようにしました。写真は人物・オフィス・都市など、グループの「人」と「社会とのつながり」が見えるものを選び、技術的な企業でありながら温度感のある印象に整えています。

サービスサイトとの一貫性を保ちつつ、コーポレートサイトとして落ち着いた余白と大きな写真を活かし、「信頼できる」と「先を見ている」の両方が伝わるトーンを目指しました。

Highlights

デザイン上の工夫（トップページ）

• ファーストビュー：大きな写真とキャッチコピー「クラウドで未来を創る」で、グループの姿勢を最初の1画面で提示。ナビゲーションは半透明の角丸バーにして写真の上でも読みやすくし、右端には「グループ採用情報」を独立したボタンとして置いて、求職者の入口を明確にしました。
• ニュース：カテゴリ（サービスニュース／イベント・セミナー／お知らせ）を左に、記事リストを右に配置。日付とカテゴリタグを揃え、更新情報を探す来訪者が、一覧しやすく目的の記事を見つけられるようにしました。
• サービス紹介：青のグラデーション面とカード型のカルーセルで、事業の柱をひとまとめに紹介。画面キャプチャ、サービスの概要、「詳しく見る」を同じ型に揃え、サービスが増えても追加しやすい構造にしています。
• グループについて：会社概要・グループ会社一覧・トップメッセージ・沿革の4項目を、写真を使った2×2のカードに。写真に暗めのオーバーレイを重ね、白文字の見出しが読めるようにしつつ、各ページの内容を連想できる写真を選びました。
• 社会貢献・採用：写真と白いカードを重ね、左右交互に配置するジグザグのレイアウトで、縦に長いページにリズムを付けました。短いコピーと1つのボタンに絞り、読み飛ばされない密度にしています。
• スマートフォン表示：2カラムの要素は縦1列に組み替え、「グループについて」の4項目は、写真付きの横長カードを縦に並べました。カルーセルは矢印とドットを残し、指で操作しやすい大きさにしています。ボタンは幅いっぱいの形に揃え、親指で押しやすくしました。
• 信頼性の見せ方：ページ下部にバナー（教育支援・パートナー向け）をまとめ、フッターにISMS・プライバシーマークの認証表記を配置。注記は小さな文字で整理し、情報の正確さを担保しつつ、本文の読みやすさを損なわない位置づけにしました。

Design

デザインカンプ