B2Bサービス企業のコーポレートサイト｜社名を主役にしたタイポグラフィ

法人向けサービス企業のコーポレートサイトです。B2Bサービスは形がなく、社名も覚えてもらいにくい分野です。この事例では、都市の空撮写真に社名の文字を画面いっぱいに重ねたタイポグラフィ主体のファーストビューで記憶に残し、COMPANY・SERVICE・CONCEPT・CASE STUDY・Q&Aの5項目で、「どう考えているか」から「何をしたか」まで順に理解できる構成にしました。

制作の背景

法人向けのサービス企業は、同業他社とサービス内容が似て見えがちで、最終的には「考え方が合うか」「実績があるか」で選ばれます。そのため、サービスの説明と同じ比重で、CONCEPT（考え方）と CASE STUDY（事例）を見せる必要がありました。また、社名を英字で表記していることから、まず名前を覚えてもらうこと自体をファーストビューの役割にしています。

情報設計：考え方→サービス→事例→疑問の順

グローバルナビは「COMPANY／SERVICE／CONCEPT／CASE STUDY／Q&A」の5項目に、電話番号とメールのボタンを並べています。トップページは、ファーストビュー→コンセプトの要約→サービスの一覧→事例の抜粋→Q&A→会社情報の順で、初めて訪れた人が「この会社は何を大事にして、何をして、どんな結果を出しているか」を一巡で理解できる流れにしました。

• CONCEPT：サービスの根底にある考え方と、仕事の進め方の原則。社名に込めた意味もここで説明
• SERVICE：提供するサービスを、対象となる企業の課題別に整理し、進め方と期間の目安を記載
• CASE STUDY：業種・規模・課題・施策・変化を同じ型で掲載。社名は許諾の範囲で
• Q&A：費用・期間・契約形態・進め方など、商談で必ず聞かれる質問に先回りして回答
• COMPANY：会社概要・代表メッセージ・所在地

ファーストビューとデザイン

ファーストビューは、青く処理した東京の空撮写真に、オレンジの太いサンセリフ体で社名を3行に分解して重ねています。社名を構成する2つの単語をそれぞれ強調し、一部の文字だけ色を変えることで、名前の由来を視覚的に示しました。写真の青とタイポグラフィのオレンジは補色の関係で、互いを引き立てます。

タイポグラフィを主役にしたファーストビューは、画面幅によって文字の折り返しが変わるため、スマートフォンでは3行の文字サイズを個別に調整し、どの端末でも社名が欠けずに表示されるようにしています。

導線と問い合わせ設計

法人向けサービスの問い合わせは、「まず話を聞きたい」という段階の相談と、具体的な見積もり依頼に分かれます。ヘッダーには電話番号とメールボタンを並べ、電話を好む経営層にも、メールで整理して送りたい担当者にも対応しました。CASE STUDY の各ページの末尾には「同じ課題で相談する」ボタンを置き、事例を読んだ直後に相談へ進めるようにしています。フォームの必須項目は会社名・氏名・メール・相談内容の4つです。

SEO・運用の考え方

社名検索での第一印象を担うトップページと、「サービス分野＋課題」の検索を受けるサービスページ、「業種＋課題＋事例」の検索を受ける事例ページで役割を分けています。事例は公開後に継続して追加できる投稿形式にし、Q&A も商談で出た質問を追記していく運用です。社名が英字のため、検索結果での表示揺れ（英字・カナ）に備え、会社概要にカナ表記も記載し、Organization の構造化データに alternateName を設定しています。

よくあるご質問

社名を主役にしたファーストビューは、どんな会社に向いていますか？

社名が短く、意味や由来を持っていて、サービスが形のないもの（コンサルティング・支援・代行など）の場合に向いています。製品を持つ会社や、社名より事業内容を先に伝えるべき段階の会社には、事業を表すビジュアルを推奨します。

事例を出せる案件が少ない場合、CASE STUDY は必要ですか？

1〜2件でもあれば置く価値があります。業種・課題・施策・変化の4項目で匿名化して書けば、許諾のない案件も掲載できます。公開後に増やす前提で、投稿形式にしておきます。

B2Bサービス企業のコーポレートサイトの制作期間と費用の目安は？

6〜8ページで2〜3か月が目安です。費用は料金のコーポレートサイト制作、進め方は制作の流れをご覧ください。

この事例から学べること

• 形のないサービスを扱う会社は、「名前を覚えてもらう」こと自体をファーストビューの目的にできる
• CONCEPT と CASE STUDY をサービスと同じ比重で置くと、「考え方が合うか」で選ばれる土台ができる
• 英字社名はカナ表記と alternateName を用意し、検索結果での表示揺れに備える