生活サービス企業のコーポレートサイト｜ブランドカラーで覚えてもらう

生活者向けサービスを展開する企業のコーポレートサイトです。サービス業では事業内容を文章で説明しても、競合との違いが伝わりにくいことがあります。この事例では、黄色と緑のブランドカラーを画面の面で使った大胆なファーストビューと、英文のビジョンコピーで、事業の説明より先に「この会社らしさ」を印象づける設計にしました。情報はハンバーガーメニューに集約し、トップページは印象に集中させています。

制作の背景

生活者と直接接するサービスでは、選ばれる理由が機能や価格だけでなく「好きかどうか」に左右されます。企業のサイトも同じで、事業紹介を読む前の数秒で「感じのいい会社」と思ってもらえるかが、その後の読み進めに影響します。すでにロゴとブランドカラーが決まっていたため、それを最大限に生かすことが制作の前提になりました。

情報設計：第一印象を最優先にした構成

グローバルナビは常時表示せず、右上のメニューボタンに「私たちについて／サービス／お知らせ／会社情報／採用情報／お問い合わせ」を収めています。トップページはファーストビューの下に、ビジョン→サービス→お知らせ→会社情報の順で短いセクションを並べ、各セクションから詳細ページへ進む構成です。

• 私たちについて：ビジョンコピーの意味を日本語で丁寧に説明し、価値観と行動の例を記載
• サービス：サービスごとに対象・内容・利用の流れ・料金の目安を同じ型で掲載
• お知らせ：新店・新サービス・イベントの告知。投稿形式で担当者が更新
• 会社情報・採用情報：信頼性の確認と、採用の入口

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

ファーストビューは、左を黄色、右を緑の面で分割し、緑の面にロゴの頭文字を大きく淡く敷いています。その上に「WE TOUCH A PERSON’S HEART, MOVE PEOPLE, AND CHANGE THE FUTURE.」という英文を、単語の頭文字だけ別の色にして配置し、下に「『未来』にユニークな『毎日』を」という日本語の一文をボタン状に置きました。写真を使わず色とタイポグラフィだけで構成しているため、どの端末でも同じ印象を保てます。

黄色と緑は明度が近く、文字の可読性が落ちやすい組み合わせです。本文エリアでは白地に濃いグレーの文字を使い、ブランドカラーは見出し・ボタン・区切りに限定することで、印象と読みやすさを両立させています。

導線と問い合わせ設計

生活者向けサービスの問い合わせは、電話・フォーム・SNSのメッセージと経路が分かれます。メニュー内のお問い合わせからフォームに進む経路に加え、各サービスページの末尾に「このサービスについて問い合わせる」ボタンを置き、用件をあらかじめ選択した状態でフォームが開くようにしています。採用はエントリー専用の項目を設け、取引・提携の相談と分けました。

SEO・運用の考え方

ブランド重視のトップページは、検索の受け皿にはなりにくいページです。そのため、検索はサービスページとお知らせに担わせ、各サービスページの見出しにはサービス分野と対象（例：家族向け、法人向け）を含めています。トップページは社名検索での第一印象を担当し、Organization の構造化データで社名・ロゴ・所在地を明示しました。お知らせは短い記事でも継続して公開できる投稿形式にし、更新のたびにトップページの一覧が変わるようにしています。

よくあるご質問

写真を使わないファーストビューで、事業内容は伝わりますか？

ファーストビューだけで事業内容を伝えようとせず、直下のセクションで補うのが前提です。トップページの役割を「印象」と「事業の要約」に分け、スクロールしてすぐにサービスの一覧が見える構成にすれば、写真がなくても離脱は増えません。

ブランドカラーが明るい場合、読みやすさはどう確保しますか？

ブランドカラーは面と見出し・ボタンに限定し、本文は白地に濃い文字で統一します。文字と背景のコントラスト比は WCAG の基準（4.5:1 以上）を満たすように確認しています。

この規模のコーポレートサイトの制作期間と費用の目安は？

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

この事例から学べること

• ブランドカラーが決まっているなら、写真より色とタイポグラフィで第一印象を作る選択肢がある
• トップページの役割を「印象」に絞り、検索の受け皿はサービスページとお知らせに任せる
• 明るい配色ほど、本文の読みやすさを別に設計する必要がある