デザインを参考にしたいコーポレートサイト8選！デザインのポイントも解説します

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

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

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

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

デザインが参考になるコーポレートサイト事例

ここでは、デザインの参考にしたいコーポレートサイトの事例を紹介します。それぞれ注目すべきポイントも解説しますので、参考にしてください。

株式会社伊藤園

「おーい、お茶」でお馴染み、伊藤園のコーポレートサイトです。Topページのお茶畑の動画にしばし見入ってしまいます。「伊藤園といえば、お茶」のイメージどおりで、なぜここにこの動画があるのか、もはや説明はいりません。

全体的にフォントサイズは大きめ、文字数少なめで、視認性は良好です。これならどの年代の方でも、楽に見てもらえるでしょう。

オーソドックスなサイト構造で、奇をてらわずシンプルなレイアウトで構成されています。企業サイトの教科書的なWebサイトです。

株式会社ASNOVA

仮設機材のレンタル・販売を行っている株式会社ASNOVAのコーポレートサイトです。ホバーやスクロールなどのユーザーのアクションに反応して、画像や文字、オブジェクトが動きます。ユーザーにサイトを見てもらうための仕掛けとして、アニメーションがうまく使われているサイトです。見てほしい箇所にどうやってユーザーの視線を誘導するか、考える際の参考になります。

株式会社アソビズム

ゲームの企画・開発・販売などを行う株式会社アソビズムのコーポレートサイトです。ゲームキャラクターが流れてくるファーストビューが、同社の事業内容を直感的に伝えます。

動きは少ないですが、ゲームっぽさを感じさせるあしらいが随所に見られ、ロールプレイングゲームをする感覚で見られるWebサイトです。

ゲームを作る会社だけにデジタルな面ばかりかと思いきや、農業や登山などのアクティビティも紹介されており、そのギャップが会社への興味を掻き立てます。遊び心が感じられるコーポレートサイトです。

FREEDOM株式会社

住宅領域におけるSaaS型の製品およびライセンス販売などを手がけるFREEDOM株式会社のコーポレートサイトです。色の使い方がシンプルかつ大胆。ファーストビューの黒から始まり、スクロールするごとにコーポレートカラーの深いグリーン、薄いグレーへとサイト全体のカラーがパッパッと変わっていきます。

またホバー、クリック、スクロール、すべてのアクションに対する動きが軽く、気持ちよさが秀逸です。バックグラウンドで波打つように動いている曲線のアニメーションの効果もあり、穏やかな海面を漂うような心地よさがあります。ユーザー体験として心地よいのは大事なことです。

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

コーポレートサイトをデザインする際のポイントを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となっています。文字情報は比較的多いですが、情報の強弱や写真をつけるなどして、見ていて疲れない設計です。

まとめ

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

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

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