ITソリューション企業のコーポレートサイトです。自社製品(PRODUCT)と受託開発・支援(SERVICE)の両方を持つIT企業では、製品を探す人・開発を依頼したい人・採用に応募したい人が同じサイトに来ます。この事例では、NEWS・COMPANY・IDENTITY・PRODUCT・SERVICE・BLOG・RECRUIT・CONTACTの8項目で入口を明確に分け、赤のウェーブとネットワーク図形で「つながりを広げる会社」というビジュアルの軸を作りました。
制作の背景
IT企業のサイトは、技術用語が並ぶだけで「何ができる会社か」が伝わらないか、逆に抽象的なビジョンだけで具体性がないかのどちらかに偏りがちです。製品と受託の両方を扱う場合はなおさらで、「製品を売りたいのか、開発を請け負いたいのか」が曖昧になります。入口を分けて、それぞれのページで具体的に書くことが課題でした。
情報設計:8つの入口を横一列に
グローバルナビは英語表記の8項目を横一列に並べ、RECRUIT と CONTACT だけを塗りのボタンにして、行動につながる2項目を目立たせています。英語表記はブランドの統一感のためで、各ページの見出しは日本語にして内容が分かるようにしました。
- PRODUCT:自社製品ごとに、解決する課題・主な機能・導入の流れ・料金体系を同じ型で掲載し、資料請求へ誘導
- SERVICE:受託開発・運用支援などを、対象となる企業の規模と課題から説明。製品と混同されないよう「オーダーメイド」の位置づけを明記
- IDENTITY:ビジョン・ミッション・行動指針。ファーストビューのコピーの意味をここで説明
- BLOG:技術記事と会社の日常。エンジニア採用と検索流入の両方を担う
- RECRUIT:職種・働き方・選考フロー。エンジニア向けに技術スタックと開発環境を明記
ファーストビューとデザイン
ファーストビューは、赤いウェーブ状の面に白いネットワーク図形(点と線)を重ね、「僕らの1は、『100』にも『1000』にもなる。」というコピーを大きく置いています。写真を使わず、ブランドカラーの赤と幾何学的な図形だけで構成することで、IT企業らしい抽象性と、コピーの「一人の力が広がる」という意味を視覚的に重ねました。
赤は面積が大きいと圧迫感が出るため、ウェーブで画面を斜めに区切り、下部は白地に戻しています。ボタンは黒の塗りで、赤の中でも埋もれないようにしました。
導線と問い合わせ設計
製品は「資料請求・デモ依頼」、受託は「相談・見積もり」、採用は「エントリー」と、閲覧者ごとに行動が違います。CONTACT のフォームは用件を最初に選び、選択に応じて入力項目が変わる形式にしました。製品ページには資料請求ボタン、サービスページには相談ボタン、採用ページにはエントリーボタンをそれぞれ配置し、どのページからも1クリックで該当するフォームに進めます。
SEO・運用の考え方
検索キーワードは、製品については「製品カテゴリ+課題(例:勤怠管理 クラウド 中小企業)」、受託については「システム開発 ○○業界」「○○ 開発会社」のように分野と業界の組み合わせです。製品ページは製品名だけでなくカテゴリ名を見出しに含め、サービスページは対応業界ごとの実績を記載しています。BLOG はエンジニアが技術記事を書くことで、技術用語での検索と採用ブランディングを同時に進める運用にしました。NEWS は投稿形式で、リリース情報を広報担当が更新できます。
よくあるご質問
製品サイトを別に作るべきか、コーポレートサイト内に置くべきか迷っています。
製品が1〜2つで、企業の信頼性が製品の信頼性に直結する段階なら、コーポレートサイト内の PRODUCT セクションで十分です。製品ごとに広告を出す、料金プランが複雑、海外展開するといった段階になったら、製品サイトを分離します。
ナビを英語表記にすると、分かりにくくなりませんか?
項目が一般的な英単語(NEWS・COMPANY・CONTACT など)で、各ページの見出しが日本語なら問題は起きにくいです。ただし IDENTITY のように意味が取りにくい項目は、ページ内の最初の見出しで日本語の説明を補っています。
IT企業のコーポレートサイトの制作期間と費用の目安は?
製品・サービス・採用・ブログを含む構成で3〜4か月が目安です。費用は料金のコーポレートサイト制作、進め方は制作の流れをご覧ください。
この事例から学べること
- 製品と受託の両方を持つIT企業は、ナビの段階で PRODUCT と SERVICE を分け、それぞれの行動(資料請求・相談)も分ける
- 写真がなくても、ブランドカラーと図形でコピーの意味を視覚化できる
- 技術ブログは検索流入とエンジニア採用の両方に効くため、エンジニアが書ける運用を最初に設計する