【2024年最新版】参考になるコーポレートサイトデザイン事例16選！制作会社が着目するポイントもご紹介します。

「かっこいいコーポレートサイトにしたい」
「おしゃれなコーポレートサイトを作りたい」
この記事を読んでいるあなたはそうお考えかもしれません。

コーポレートサイトのデザインは重要です。企業イメージが左右されるからです。自社のコーポレートサイトがわかりにくい・読みにくいものだったら、企業の信頼性まで下がってしまうかもしれません。

古いデザインのコーポレートサイトでは、企業の革新性や新しさを伝えることはできないでしょう。

このように、コーポレートサイトのデザインは、企業イメージが決まる重要なポイントです。そこで本記事では、コーポレートサイトをデザインする際のポイントを5つ紹介します。

コーポレートサイトとは？

コーポレートサイトは、企業に関する情報をまとめたWebサイトのことです。主に、会社の概要やビジョン、製品やサービスの情報、ニュースリリース、採用情報などを掲載しています。企業の「顔」ともいえるもので、潜在的な顧客や取引先、求職者が最初にアクセスする場所でもあります。したがって、コーポレートサイトのデザインは、企業の印象やブランドイメージを大きく左右します。

コーポレートサイトとは？意味やメリット、制作のポイントまで解説

制作会社が参考デザインでコーポレートサイトを見る時のポイント

制作会社がデザインを考える際、企業の価値や独自性などその企業「らしさ」が表現できているかを重視します。らしさを表現する手段は目立つビジュアルに思われがちですが、必ずしもそうではありません。シンプルなデザインは企業の誠実さやわかりやすさを伝えますし、使いやすいUIは、企業の親切な姿勢を伝えることができます。ここでは、以下のような視点で企業のらしさを伝えている事例をご紹介します。

企業のオリジナル要素で「らしさ」を表現

企業が持っているロゴやコーポレートカラー、キャラクター、タレントなどをデザインで使用しているサイトは端的に企業のらしさを伝えることができます。要素によっては既に認知度が高いものもあります。それらをサイトデザインに使用することで、すぐにその企業のコーポレートサイトであることが伝わります。

ユーザビリティで「らしさ」を表現

コーポレートサイトでは、多くの情報を提供する必要があります。情報が乱雑だと閲覧者が欲しい情報を見つけにくくなり、サイトから離れてしまいます。ページの構成やナビゲーション、各セクションの内容が整理されているかが重要です。またスマートフォンで見やすいか、リンクボタンのルールは統一化されているか、ラベルの文言はわかりやすいかなどユーザーエクスペリエンスを向上させ、企業の印象を良くします。

独自性で「らしさ」を表現

コーポレートサイトでは、企業のビジョンや価値観を伝えるブランディングまで考えられているものも多いです。そのために独自性を表現し、他社との差別化を図る方法もあります。インパクトのあるビジュアル、他にないレイアウトや動き、印象に残る配色などを使い、一味違う個性でターゲットにアプローチします。

雰囲気で「らしさ」を表現

「無添加」の商品を販売しているコーポレートサイトは、シンプルなサイトが多いです。あまり飾らず、そのままであることをサイトデザインでも表現しています。色や形、フォント、スペースなどを駆使し、サイト全体の雰囲気でらしさを表現することも可能です。

企業のオリジナル要素で「らしさ」を表現

Apple

コーポレートサイトをブランディングに活用している筆頭といえばやはりApple。Appleの先進性やプロダクトデザインに対するこだわりが、コーポレートサイトでも上手に表現されています。製品が主役になるよう配色をモノトーンにし、レイアウトをセンター寄せにしています。Appleサイトはリリースしてから長いですが、ベースデザインはほとんど変わっていません。Appleが閲覧者に伝えたい世界観にブレがないことの象徴かもしれません。

株式会社カオナビ

CI（コーポレート・アイデンティティ）にある丸と三角をモチーフにキービジュアルのグラフィックや見出しのアイキャッチ、背景模様、写真のトリミングなどが構成されてます。サイズや色を複数パターン用意することで2つのモチーフでも淡白な印象にならないようにしています。CIを見たら「あのサイトだ」とユーザーの記憶に紐付きやすいサイトデザインではないでしょうか。

インターグ株式会社

CIにある2色をサイトのキーカラーに設定し、キービジュアルの演出や背景色、ボタン、見出しなどに使用して統一感を演出しています。写真やインフォグラフィックにも使用している点も特徴になっています。キーカラーが1色ですと他社と被ってしまうこともありますが、2色の組み合わせだと被りが抑えられ、色だけでオリジナリティを演出しやすくなります。

ユーザビリティで「らしさ」を表現

岩手銀行

弊社制作の岩手銀行のサイトです。コーポレートとサービス紹介を兼用したサイトです。このサイトでは全てのページに表示するナビゲーションのデザインにこだわりました。背景を緑にすることで、どのページでもすぐ見つけられるようにしました。サブメニューとページ遷移を伝えるアイコンの使い分けや、シームレスに表示するサブメニューでページの親子関係を認識しやすくしました。

神戸電子専門学校

弊社制作の神戸電子専門学校サイト。文字サイズを大きくした見出しとスペース、背景色の切り替え、ボックスなどを駆使し、コンテンツのまとまりを分かりやすく表現しました。特にスマートフォン画面の収まりは、解像度シェア率も参考に最適なサイズを探り設計しました。

オムロンヘルスケア株式会社

こちらのナビゲーションも使い勝手の良いデザインです。商品・サービスに表示するサブメニューにはサムネイルも表示し、視覚的にわかりやすいです。トップページ内に表示するサムネイルデザインとも連動していて、遷移先に共通の情報が掲載されていることが直感的にわかります。コンテンツ内にあるリンクボタンは統一された形状とホバーアクションになっており、外部リンクにも共通したアイコンが付けられています。

株式会社WORDS

Webの縦に長いレイアウトを上手く画面設計しています。サイト上部から下部に向かって問題提起 → ソリューション → サービス紹介 → 利用者の声 → 資料ダウンロード・お問い合わせ という起承転結の流れを作り、聞き慣れない「顧問編集者」の説明と必要性が感じられる内容になっています。モノトーンの配色は淡白な印象になりがちですが、エリアごとに見せ方に変化をつけ、ユーザーがサイト下部まで読み進めるテンションを作っています。

SAKUSEN TOKYO

コーポレートサイトは複数ページで構成されることがほとんどですが、こちらのサイトは1ページに集約しています。1ページのサイトはスマホの際見やすいというメリットがあります。しかし「詳細はこちら」のようにページ遷移ができないため、ページ内の情報ボリュームが多くなりがちですが、図を活用し限られたスペースでもわかりやすく事業を説明しています。ナビゲーションをタイポグラフィのようにデザインすることで、文字の多いサイトでも洗練された印象を作っています。

独自性で「らしさ」を表現

バンダイナムコセブンズ

弊社制作の遊技機開発・販売や映像基盤開発・製造・販売を行っている株式会社バンダイナムコセブンズのコーポレートサイト。リニューアルの目的は従来のイメージを脱却して、自社と自社製品のおもしろさを伝えること。見た瞬間からおもしろさが伝わるよう写真やグラフィックを背景全面に敷き、視覚的なインパクトを作りました。メニューの配置やスクロール時の動きにも個性を持たせ、おもしろさを演出しました。

株式会社CRISP

ファーストビューの「日本の外食を、ひっくり返せ。」のコピーがドーンとインパクトのあるデザイン。強いメッセージに負けない見せ方は、言いたいことがストレートに伝わるデザインです。下に続くリード文と陰影強めの写真もストーリー感があり、企業の想いが強く感じられます。このサイトの良いところはスマホ表示でもファーストビューのコピーが大きく表示することです。PCに比べると画角の小さいスマホでもしっかりインパクトを作っています。

雰囲気で「らしさ」を表現

ポーラ

コスメブランドはやはりどう見えるかの意識が高く、コーポレートサイトも上手くブランディングに活用しているところが多い印象です。ポーラのコーポレートサイトはシンプルで全体的に清潔感があります。その中に華やかな写真やグラフィックをインパクトあるサイズで入れることで、企業としての個性そしてポーラ製品を使用するユーザーの個性が伝わる印象があります。

アンダーワークス株式会社

弊社がリニューアルを担当したデジタルマーケティング会社のコーポレートサイト。リニューアル前は黒色とテキストボリュームが多いことから近寄りがたい印象になっていました。そこで、社内スタッフの写真を使用しフレンドリーな社風が伝わるようにしました。写真は色味やボケ味を調整し、洗練されたサービスを提供する企業であることを演出しました。

サイトデザインをまとめている参考サイト

コーポレートサイトのデザインを制作する際は、以下のWebサイトまとめポータルを参考に、現状の動向や競合のトーンなどを確認しています。

SANKOU!

国内のデザインを集めたWebデザインのギャラリーサイトです。「サイトの種類」「サイトの特徴」「配色」など詳細なカテゴリーに分けられており、まさに参考を探す時に重宝するサイトです。

Web Design Clip

国内外のデザインを幅広く掲載しているサイトです。「スマートフォン」のデザインがまとめられているのが特徴です。コーポレートサイトを作る時はスマホのデザインも大切ですので、トップのデザインが一覧で確認できるのは助かりますね。

I/O 3000

「Webデザインに関わる人のための Webデザインギャラリーサイト」というコンセプトで、ほぼ毎日更新されている更新頻度の高いサイトです。シャッフル表示の機能があるので、デザインに行き詰まった時に見に行くとアイデアがひらめくかもしれません。

bookma!

PCとスマホのデザインが見比べられるギャラリーサイトです。PCの要素をどうやってスマホの小さい画面に収めるか悩ましい時はおすすめです。PCにはあるけどスマホでは省略している要素があったり、情報の順番を変えている箇所に注目してみるのがポイントです。

コーポレートサイトのデザインのポイントは？

コーポレートサイトをデザインする際のポイントを5つ紹介します。

1. 配色
2. 写真やイラストなどの素材
3. フォント
4. レスポンシブデザイン
5. UI/UX

ひとつずつ見ていきましょう。

配色

コーポレートサイトに限らず、Webサイトは「3色」が基本です。

• ベースカラー：Webサイトの背景や余白に使用される色
• メインカラー：コーポレートサイトのイメージとなる色
• アクセントカラー：目立たせたり、サイトにメリハリをつける色

ベースカラー70%、メインカラー25%、アクセントカラー5％の割合で配色することが、美しいWebサイトの一つの条件とされています。コーポレートサイトの場合、コーポレートカラーがメインカラーになることが多いです。

3色が基本である理由は、4色以上使うとごちゃごちゃとして情報がわかりにくくなるからです。カラフルなサイトにするなら、色のバランスを考慮する必要があります。

また、色が人に与えるイメージの違いも知っておくのがおすすめです。とくにメインカラーを決める際に役立ちます。

• 赤・・・・・情熱・活気・危険・注意
• 黒・・・・・高級感・重厚感・暗い
• 青・・・・・信頼感・清潔感・海・空
• オレンジ・・健康・あたたかさ・太陽

海外向けにコーポレートサイトを制作する場合には、対象国の人が持つ色のイメージについてあらかじめリサーチしておくと安心です。

事例：Chatwork株式会社

ビジネスチャットツールの開発・運営を手がける「Chatwork株式会社」のコーポレートサイトです。サイト全体にChatworkらしさが演出されたデザインになっています。

キャッチコピーの「働くをもっと楽しく、創造的に」は、ウキウキするような明るいカラーリングと軽快なアニメーションでサイト全体に表現されています。チャットワークのロゴの一部のシェイプが、随所に出てくるのも印象的です。

多くの色を使いつつも、その中でメインカラーのレッドがChatwork社を強く印象付け、統一感の感じられる色使いとなっています。

写真やイラストなどの素材

写真やイラストなどの素材は、コーポレートサイト全体のイメージに合ったものを用意しましょう。

写真なら明るさや彩度を調整して、印象を合わせます。たとえば、下町でものづくりをする職人気質の企業なら、工場内で仕事に打ち込む職人たちのやや暗めの写真がマッチするかもしれません。

イラストはテイストを揃えて作成します。デザイナーに依頼すれば、同じテイストでイラストやアイコンを展開してくれるでしょう。

全体のデザインとマッチしない素材は、サイトのまとまりを損ないます。素材は全体のデザインに合わせて作ることがポイントです。

事例：渡辺ブルドーザ工事株式会社

渡辺ブルドーザ工事株式会社のコーポレートサイト。大胆な写真使いとシンプルなカラー設計から会社の力強さを感じさせるデザインになっています。

キャッチコピーにもある通り、「足元から生活をつくる」がビジュアルにも上手く反映されています。土の状態が良くわかる構図の写真や、仕事風景など、現場の状況が肌感覚でビシビシ伝わります。

見出しやコンテンツの区切りに太いラインを使って、足場感を演出しているのはアイデアですね。また、ライティングの「まっすぐな人を募集しています」とサイトに使用されている「まっすぐな線」がかかってて良いなと個人的に思いました。

フォント

フォントは、「書体」「ウェイト」「サイズ」で使い分けます。

書体は和文なら明朝とゴシック、欧文ならセリフとサンセリフに分類できます。明朝とセリフはフォーマル、エレガントな印象を与えますが、長文で使用すると読みにくいです。ゴシックとサンセリフは、カジュアルな書体で可読性に優れています。

ウェイトは文字の太さです。太いと力強く、重厚で男性的な印象です。逆に細いのは、繊細で高級感があり、女性的なイメージを感じさせます。

フォントサイズは可読性に関わるので、ターゲットユーザーを考えて検討しましょう。20代と60代ではラクに読めるフォントサイズが違います。おしゃれさやかっこよさより、ユーザーにとって心地よいサイトであることが重要です。

事例：バックパッカーズジャパン

ホテル・ホステルの企画・運営などを行っている「バックパッカーズジャパン」のコーポレートサイトです。バックパッカーズジャパンの事業へのこだわりや美意識が伝わってくるデザインになっています。

こだわり抜かれた写真とアナログな背景、はんなり明朝体がサイト全体にクラシックな質感を演出。効果的な余白やワンポイントで使用されているアニメーションも相まって、自然体でゆったりとした時間の流れが伝わってきます。

レスポンシブデザイン

PC・スマートフォン・タブレットなど、サイズの違う端末で同じように見やすくサイト表示させるようにします。

近年はとくにスマートフォンからサイトを見る人が増えているため、スマートフォンからでもレイアウトが崩れないようにデザインする必要があるのです。

サイトの見やすさは企業の信用に重ねられることもあります。ユーザーに不安を抱かせないように、レスポンシブ対応はしっかりと行いましょう。

UI/UX

UI/UX は、ユーザーがWebサイトを通して触れる情報や体験のことです。フォントや配色、レイアウトなどは、ユーザーと情報を繋ぐ役割を持っています。

フォントや配色にまとまりがなく、情報が伝わりにくいデザインのコーポレートサイトは、UI/UXが優れているとは言えません。ユーザーにとって快適な体験ができるサイトであれば、結果として問い合わせや資料請求の数が増加するなど、企業側の目的を達成しやすくなります。

従来のコーポレートサイトは情報を発信するだけの一方通行なものでした。しかし近年は、コーポレートサイト上でユーザーが検索やシミュレーションするなど、インタラクティブなコンテンツも提供できるようになっています。これもユーザー体験の向上に役立つデザイン要素です。

事例：株式会社富士交易

各種産業用設備・電気機械器具の販売を行っている「株式会社富士交易」のコーポレートサイト。「交易を通じてものづくりの未来に繋がっていく」様がアイコニックなビジュアルとアニメーションで表現されています。

こちらのWebサイトは多くの情報を掲載しながらも、上手に情報設計されたデザインが特徴です。どのページにもサイドバーに目次が表示されており、現在地がわかりやすいUIとなっています。文字情報は比較的多いですが、情報の強弱や写真をつけるなどして、見ていて疲れない設計です。

コーポレートサイト実績多数！制作はクーシーにご相談ください

以上、デザインを参考にしたいコーポレートサイトを、デザインのポイントと合わせて解説しました。

デザインを具体的なイメージにするのは大変なことです。ゼロから自分で作るより、すでにあるサイトから近いイメージのものをピックアップして、要素を抜き出して組み合わせる方が作業を進めやすいです。

本記事でご紹介したサイトだけでなく、たくさんのサイトを見てみてください。その上で琴線に触れたものを集めてみると、作りたいデザインの傾向が見えてきます。何から手をつければいいかわからない方は、まずこれをやるのがおすすめです。