コーポレートサイトとは？デザイン事例/役割/メリットと作り方までプロが解説
コーポレートサイト制作の参考になるデザイン事例20選【制作会社が厳選】
「コーポレートサイトを制作するのに、他社サイトのデザインを参考にしたい！」
本記事では、このように考えている方のために下記内容をまとめました。
- コーポレートサイトとは何か
- 参考になるコーポレートサイト事例
- デザインの参考になるギャラリーサイト
- コーポレートサイトのデザインのポイント
参考になるコーポレートサイト事例では、WordPressで制作されたもの、シンプルなもの、おしゃれなものとそれぞれ紹介していきます。
この記事でコーポレートサイト制作の参考事例とポイントがわかります。
この記事の監修者
安井 省人
Masato Yasui
株式会社スカイベイビーズ 代表取締役/クリエイティブディレクター
クリエイティブや編集の力でさまざまな課題解決と組織のコミュニケーションを支援。「自然体で生きられる世の中をつくる」をミッションに、生き方や住まい、働き方の多様性を探求している。スカイベイビーズでは、コーポレートサイト、採用サイト、オウンドメディアなどジャンルを問わず様々なWebサイトの制作・運用の支援まで幅広く手掛ける。
コーポレートサイトとは？
コーポレートサイトとは、Web上における企業の顔となるサイトです。
コーポレートサイトを見に来るのは、企業にかかわるあらゆるステークホルダー。
たとえば、下記のような人たちがほしい情報を求めて訪問してくるWebサイトです。
- 取引先
- 求職者
- 株主
- 顧客
これらのステークホルダーが求める情報はそれぞれ異なるため、掲載される情報は下記のように多岐にわたります。
- 商品・サービス情報
- 導入事例
- 会社概要
- IR情報
- 採用情報
コーポレートサイトは、これらの情報を網羅的に紹介し、訪問してきたステークホルダーに企業のことを正しく知ってもらう役割を持っています。
さらに会社のブランディングに寄与したり、会社の全体像を伝えるのに役立ったりと、コーポレートサイトを持つ目的はさまざまです。
なお、コーポレートサイトと他のホームページとの違いについては下記記事で詳しく解説していますので、ご興味のある方はこちらもあわせてご覧ください。
※関連記事：コーポレートサイトとホームページの違い
https://www.skybabies.jp/media/difference-between-corporate-site-and-homepage/
続いてコーポレートサイトの事例を見ていきます。
WordPressで作られているコーポレートサイト事例5選
まずはWordPressで作られているコーポレートサイトで、特に参考になるサイトを紹介します。
WordPressとは、世界で最も使われているブログ制作ツールです。
世界中のWebサイトのうち43％がWordPressで制作されているほど、全世界的に普及しています。
その人気の理由は通常必要になるHTMLやCSSといったコードによる編集をほとんどしなくても、編集・管理しやすいところにあります。
そのためコーポレートサイトをWordPressで制作する企業も増えています。
ここでは5社を紹介していきます。
- クックパッド
- カカクコム
- ZOZO
- コシナ
- 楽天
では1社ずつ見ていきましょう。
クックパッド
| URL | https://info.cookpad.com/ |
|---|---|
| 特徴 | ・情報を提供するのを目的としたコーポレートサイト ・ブランディングなどの要素はなし |
クックパッドは日本最大級のレシピ投稿サービスを運営するIT企業です。
クックパッドのコーポレートサイトは、ブランディングなどの要素は省いたシンプルな構成になっています。
ただし企業情報、サービス紹介、IR情報や採用情報といったコーポレートサイトに必要なコンテンツは網羅。
クックパッドのコーポレートサイトは、頻繁に更新がされており、常に新しいお知らせやIR情報が掲載されています。
監修者コメント
無駄なものは削ぎ落としたスタイルで、ブランディングとかの要素はほぼなく、情報更新に特化したスタイルで制作されています。
消費者でなく株主やパートナーなどに対するあくまで情報提供サイトですね。
カカクコム
| URL | https://corporate.kakaku.com/ |
|---|---|
| 特徴 | ・テキスト中心で情報鮮度を中心に置いたコーポレートサイト ・目的の情報にたどり着きやすい構成 |
カカクコムは、「価格.com」や「食べログ」といったサイトやアプリの運営を行うIT企業です。
そんなカカクコムのコーポレートサイトは、テキストが中心。
企業情報、IR情報、プレスルーム、採用情報と分かれたコンテンツに加え、サイト下部には運営サービスのロゴがあり遷移できる設計になっています。
訪問してくるステークホルダーが、目的とする情報にたどり着きやすい構成が特徴です。
監修者コメント
テキスト中心の情報鮮度に重きを置いたサイトですね。見せ方などの工夫をするよりもテキスト情報にしっかりたどりつけるスタイルで、BtoC企業のサービスサイトがある企業ならではといえます。
ZOZO
| URL | https://corp.zozo.com/ |
|---|---|
| 特徴 | ・アニメーションを駆使したコーポレートサイト ・コーポレートサイト必要な情報は網羅 |
ZOZOは、ファッションECの「ZOZOTOWN」やファッションコーディネートアプリ「WEAR」などの運営をしているIT企業です。
そんなZOZOのコーポレートサイトにはアニメーションが至る所にちりばめられています。
ただし、アニメーションを活用していても見づらさはなく、必要な情報にアクセスしやすい導線になっています。
コンテンツとしても社員紹介やサステナビリティなどもあり、情報としても充実しているコーポレートサイトです。
監修者コメント
軽快なアニメーション・動きを散りばめているのが特徴ですね。それでもうるさくなりすぎず、コーポレートサイトならではの数多くの情報を無駄なく整理してコンテンツ化したサイトといえます。
コシナ【当社の制作事例】
| URL | https://www.cosina.co.jp/ |
|---|---|
| 特徴 | ・膨大な製品情報を更新しやすいように設計されたコーポレートサイト ・製品ビジュアルが一覧化されている |
コシナは、長野県に本社を持ち、カメラのレンズなどを手がける光学機器メーカーです。
コシナのコーポレートサイトの特徴は、会社概要や採用情報に加えて、レンズ検索ができるところにあります。
膨大な商品情報をコーポレートサイトに掲載し、さらに製品の検索までできることでユーザーが求める商品の情報にアクセスしやすい導線を意識して制作しました。
監修者コメント
レンズメーカーの膨大な製品情報を手間なく無駄なく更新できるよう情報設計がされているコーポレートサイトです。豊富なビジュアル情報も含めて更新管理ができるような設計にしています。
楽天
| URL | https://corp.rakuten.co.jp/ |
|---|---|
| 特徴 | ・たくさんの情報量を集約しているコーポレートサイト ・工夫した情報・システム設計がされている |
楽天市場や楽天モバイルといった消費者がよく目にするような事業を多数手がけている楽天グループ。
楽天のコーポレートサイトは企業情報からサステナビリティまで多くの情報量を含んでいます。
情報量が多い中でもステークホルダーがアクセスしやすいデザインや導線で作られているコーポレートサイトです。
監修者コメント
ナビゲーションからわかるようにかなりの情報量を集約したサイトになっています。WordPressの活用としてもかなり工夫した情報設計・システム設計がされていると感じます。
シンプルなデザインが参考になるコーポレートサイト事例5選
続いてシンプルなデザインが参考になるコーポレートサイトの事例を5つ紹介します。
- 博報堂
- 伊藤園
- ジャストシステム
- LIXIL Advanced Showroom
- メルカリ
一社ずつ紹介していきます。
博報堂
| URL | https://www.hakuhodo.co.jp/ |
|---|---|
| 特徴 | ・白と黒を基調に洗練されたコーポレートサイト ・余白の使い方が上手 |
博報堂は日本を代表する広告代理店の1つ。
そんな博報堂のコーポレートサイトは、白と黒を貴重に作られたシンプルなデザインです。
コンテンツとしてデータ＆ナレッジやWebマガジンを含んでいることも特徴的です。
シンプルながらも余白がうまく使われており、見やすいデザインになっています。
監修者コメント
>白と黒を基調に洗練されたイメージを醸し出す広告代理店らしいサイトですね。余白を上手に使い、上品かつ繊細な印象を与えます。
伊藤園
| URL | https://www.itoen.co.jp/ |
|---|---|
| 特徴 | ・UI重視で作られたコーポレートサイト ・各情報のパーツが大きくスマホファーストになっている |
お茶や清涼飲料水を販売するメーカーである伊藤園。
ファーストビューに茶畑の動画が埋め込まれており、開いた瞬間にお茶を取り扱う企業であることが伝わります。
コーポレートサイトの各コンテンツは大きめに配置されていて、スマートフォンでも見やすいようなデザインになっています。
監修者コメント
昨今多いスタイルのUI重視で作られているコーポレートサイトですね。各情報のパーツを大きく配置し、スマホファーストでWeb設計されていると感じます。
ジャストシステム
| URL | https://www.justsystems.com/jp/ |
|---|---|
| 特徴 | ・余白を活用したコーポレートサイト ・ブランディングも意識されている |
ジャストシステムは子ども向けタブレット通信教材「スマイルゼミ」や日本語入力システム「ATOK」などを運営するIT企業です。
コーポレートサイトは余白を上手く活用してシンプルな印象を与えつつも、大きなビジュアル使いで見やすいデザインになっています。
また会社のロゴの赤を各所に取り入れた統一感のあるデザインが特徴です。
監修者コメント
余白を活かしつつも大きなビジュアル、統一されたマナーでデザインされているコーポレートサイトですね。ブランディングも意識されていていて秀逸。見やすく無駄のない設計が好印象です。
LIXIL Advanced Showroom【当社の制作事例】
| URL | https://www.lixil-as.jp/ |
|---|---|
| 特徴 | ・自社のオウンドメディアを有効活用したコーポレートサイト ・あえてコンテンツを絞っているのが特徴 |
全国のLIXILショールームの運営管理を行うLIXIL Advanced Showroom。
そのコーポレートサイトは、自社のオウンドメディアを活用し、ページ数を減らしたシンプルな作りになっています。
会社概要や採用情報といった基本的なコンテンツ以外は、あえて作り込まずオウンドメディアへ誘導する形をとっているのが特徴です。
掲載する情報を絞り込むことにより目移りしない情報設計を心がけて制作しました。
» LIXIL Advanced Showroomのコーポレートサイトはこちら
監修者コメント
ページ数は多くはありませんが、自社オウンドメディアを上手に使い、自社の魅力発信に一役買うサイトになっています。メディア以外のコンテンツを絞ることで目移りのしない情報設計となっているのも特徴です。
メルカリ
| URL | https://about.mercari.com/ |
|---|---|
| 特徴 | ・テキストが多いが見やすいデザインのコーポレートサイト ・サステナビリティや安全性のコンテンツまで網羅 |
フリマアプリを運営するメルカリ。
コーポレートサイトは会社情報やIR情報といった基本的なコンテンツに加えて、サステナビリティや安全性にも訴求しており、情報量は多めです。
そのためテキストとしても他のコーポレートサイトに比べると多くなっていますが、ビジュアルを上手く活用しており、シンプルな印象を抱かせるデザインです。
監修者コメント
オウンドメディア草創期から取り組んできた自社メディアを上手に昇華したコーポレートサイトです。文字量のわりに見やすく読みやすいコンテンツ発信はさすがですね。
おしゃれなデザインが参考になるコーポレートサイト事例5選
次は、おしゃれなデザインが参考になるコーポレートサイトを5社紹介します。
- 虎屋
- ハーゲンダッツ ジャパン
- バルミューダ
- 日本パーソナルカラー協会
- BAKE
1つずつチェックしていきましょう。
虎屋
| URL | https://www.toraya-group.co.jp/ |
|---|---|
| 特徴 | ・ブランディングがサイトデザインに落とし込まれている ・歴史の長さを感じる設計 |
虎屋は創業500年を誇る和菓子店の1つです。
会社概要だけでなく、商品情報や店舗情報から和菓子の知識まで網羅しているコーポレートサイトです。
和菓子が移り変わるファーストビューや季節に合った商品画像の配置が、シンプルながらもおしゃれさを感じさせます。
また菓子資料室では和菓子の資料を紹介しており、歴史の長さを感じさせるコンテンツがあるのも特徴的です。
監修者コメント
菓子・店舗のブランディングをきちんとサイトデザインに落とし込み、ブレないコミュニケーションを実現していますね。同社の歴史の長さを感じさせる情報設計も良いです。
ハーゲンダッツ ジャパン
| URL | https://www.haagen-dazs.co.jp/ |
|---|---|
| 特徴 | ・商品を上手に使って語りすぎていないコーポレートサイト ・優しく温かい色合いのデザイン |
世界各国で愛されるハーゲンダッツを販売するハーゲンダッツジャパン。
トップページには新商品、アレンジレシピ、CMギャラリーとビジュアルを活用したおしゃれなコーポレートサイトです。
会社概要やCSRはコーポレートにまとめ、ブランドや商品、キャンペーンなどの項目が先に目に留まるような情報の配置が特徴的です。
サイト全体の色味もハーゲンダッツのロゴにあわせて、優しくも温かさを感じるデザインになっています。
監修者コメント
商品を上手に使ったムダなく言葉で語り過ぎないコミュニケーションがいいですね。優しくも温かい色合いで親近感を感じさせるデザインになっています。
バルミューダ
| URL | https://www.balmuda.com/jp/ |
|---|---|
| 特徴 | ・ブランドサイトの要素も含んだようなコーポレートサイト ・製品の魅力をアピールしたデザイン |
バルミューダは洗練されたデザインで人気を集めるプロダクトメーカーです。
そんなバルミューダのコーポレートサイトは、製品の魅力をビジュアルを使って表現しています。
コーポレートサイトでありながら、ブランドサイトのような要素を兼ね備えているのも特徴です。
監修者コメント
ブランドサイトの要素も持ったコーポレートサイトですね。同社の磨き抜かれた製品群の魅力を余すところなく動画や写真を中心に表現しています。
日本パーソナルカラー協会【当社の制作事例】
| URL | https://www.p-color.jp/ |
|---|---|
| 特徴 | ・パーソナルカラーの普及に対して真摯な姿勢のコーポレートサイト ・バランスのとれたコミュニケーションを実現 |
近年話題のパーソナルカラー。
技能検定や教育研修を行っている日本パーソナルカラー協会のコーポレートサイトは、派手すぎず、硬すぎることもないバランスのとれたデザインを意識して制作しています。
パーソナルカラーの説明や検定試験のコンテンツがあるのも、認定資格を発行している協会ならではです。
細やかな情報配置からも真摯な姿勢が見て取れるかと思います。
監修者コメント
パーソナルカラーの普及に対する真摯な姿勢を表現しているコーポレートサイトです。派手にならず、硬すぎない、バランスのとれたコミュニケーションを実現しています。
BAKE
| URL | https://bake-jp.com/ |
|---|---|
| 特徴 | ・表現が豊かなコーポレートサイト ・先進的なデザインが特徴 |
BAKE CHEESE TARTをはじめとした各種スイーツを販売するBAKE。
BAKEのコーポレートサイトは動きが豊かで、創造性や革新性を表しているようなデザインです。
スイーツブランドならではで、各ブランドの紹介はもちろん、食の安全性への取り組みページを用意しており、コンテンツとしても充実しています。
監修者コメント
動きのおもしろさ、表現の豊かさが自社の革新性や創造性を表現しています。閲覧環境によって見にくさもあるかもしれないが、先を行く姿勢も感じられますね。
コーポレートサイトのデザインの参考になるギャラリーサイト5選
次にコーポレートサイトのデザインの参考になるギャラリーサイトを5つ紹介します。
- MUUUUU.ORG
- 81-web.com
- bookma!
- SANKOU!
- Web Design Clip
ギャラリーサイトにはたくさんのWebデザインが集約されているため、コーポレートサイトの参考になること間違いなしです。
早速1つずつ見ていきましょう。
MUUUUU.ORG
MUUUUU.ORGは縦に長いレイアウトでかつ、クオリティの高いWebWEBデザインのリンクを集めたサイトです。
WebWEBサイトの種別、カラー、業種、デザインタイプから検索ができます。
2,000以上のコーポレートサイトが集約されており、参考になるデザインを見つけやすいギャラリーサイトです。
81-web.com
81-web.comは、日本の優れたWebデザインのリンク集です。
検索は、業種や色味、フォントに加えて、サイト独自のタグから検索ができます。
なりたい理想の雰囲気や使いたいフォントから検索するのに便利なギャラリーサイトです。
bookma!
bookma!は、パソコンとスマートフォンのWebデザインを同時に見ることができるギャラリーサイトです。
近年スマートフォンから閲覧するユーザーが増えているため、対応したデザインも必要になります。
スマートフォン表示のWebサイトを探すのにおすすめのギャラリーサイトです。
SANKOU!
SANKOU！は、日本のWebサイト･LPを集めたリンク集です。
サイト種別、配色、イメージなどから検索ができます。
コーポレートサイトで絞り込むことで、参考になるデザインを見つけられるギャラリーサイトです。
Web Design Clip
Web Design Clipは、日本国内や世界中から参考になるWebサイトを集めたリンク集です。
業種、カラー、レイアウトやキーワードで検索ができます。
WordPressで作られたWebサイトも検索可能。
そのため、コーポレートサイトをWordPressで作りたいと思っている方におすすめのギャラリーサイトです。
コーポレートサイトを魅力的なデザインにするためのポイント3つ
最後にコーポレートサイトを魅力的なデザインにするためのポイントを3つ紹介します。
- できるだけ人を出す
- 先導して製作する人を決める
- まずコンセプトやキャッチコピーを決める
1つずつ詳しく解説していきます。
できるだけ人を出すようにする
1つ目のポイントは、所属する社員の「顔」が見えるようなデザインにすることです。
現在見えないことへの不安が強くある世の中となっており、それは会社に対しても同様です。
社員の顔が見えるようなコーポレートサイトにすることで、ステークホルダーに安心感を与えることができます。
顔が見えることで「この人なら大丈夫」「この会社とつながりたい」という感情を与えられるでしょう。
世の中としても共感性が高くなっているため、積極的に社員の顔が見えるようなデザインにしていきましょう。
誰が先導して制作を進めるのかを決める
2つ目のポイントは、制作を先導する担当者を決めることです。
コーポレートサイト制作は会社内を横断し、さまざまな部署や人が関わるプロジェクトになります。
そんな中で全員の思いを統一したり、意見を聞いたりしていたら制作は進みづらいです。
そのため、どの部署・どの役職の人でもかまわないので、先導する担当者を制作前に決めるのがおすすめです。
そして先導する担当者は全員の意見を聞きすぎず、進めていくようにしましょう。
サイト制作のプロが入る場合でも、先導する担当者を決めることは大事にしていることの1つです。
先導する担当者は魅力的なデザインに見えるかの視点で進めるといいでしょう。
コンセプトやキャッチコピーを先に決める
3つ目のポイントはコンセプトやキャッチコピーを最初に決めることです。
会社として何を一番伝えたいのかのコンセプトやキャッチコピーを決めてから制作するようにしましょう。
コンセプトやキャッチコピーは企業理念でも、なりたいイメージから逆算したフレーズでもかまいません。
会社としてコーポレートサイトで伝えたいコンセプトやキャッチコピーが決まったら、そこからぶらさず、そのコピーを体現できるようなデザインにしましょう。
【まとめ】魅力的なコーポレートサイトを作るには？
この記事ではコーポレートサイトの参考になる事例やギャラリーサイトを紹介してきました。
コーポレートサイトは企業のイメージを作る重要な要素の1つです。
「シンプルだけどおしゃれなサイトにしたい」「WordPressで更新性の高いものにしたい」などいろいろな要望があるかと思います。
そんな理想を実現することに加えて、コーポレートサイトの場合には、さまざまなステークホルダーが訪れたときにほしい情報にアクセスしやすい導線設計も必要になります。
しかしこれらの要素を備えたコーポレートサイトを自社で作るのはかなりハードルが高いものです。
そこでまずは、コーポレートサイト制作のプロに、デザイン面・運用面、料金まで相談してみることをおすすめします。
当社・スカイベイビーズでは、数多くのコーポレートサイト制作を行ってきました（制作事例はこちら）。
無料でご相談いただけますので、「どの会社に制作をお願いしよう？」と迷ったら、まずは当社にお気軽にお声がけください。
