はじめに
企業の顔となるコーポレートサイト。そのコーポレートサイトのデザインでお悩みのweb担当の方も多いのではないでしょうか。
今回はそんなコーポレートサイトのデザインについて解説します。デザインで注意するべきポイントや実例を挙げながらの解説も行いますので、コーポレートサイトを制作する際の参考にしてみて下さい。
目次
そもそもコーポレートサイトとは
そもそもコーポレートサイトとは、多種多様なユーザーに企業の紹介を行う目的で制作されたサイトです。
会社の概要に加え、商品やサービス・IRに採用情報などを掲載し、取引先や投資家、採用希望者など幅広いユーザーを対象に作られることが多いサイトです。
ただ近年は事業規模の拡大により、商品やサービス・採用情報に特化したサイトを別に制作する企業も増えてきていおり、コーポレートサイトも多様化してきています。
コーポレートサイトについてはこちらの記事で詳しく説明しています。
コーポレートサイトのデザインでこだわりたいポイント
ここからは、コーポレートサイトのデザインを考える際にこだわっておきたいポイントについて解説します。
企業イメージを落とし込んだデザインにする
先述の通りコーポレートサイトは、商品やサービスを使用するユーザーだけでなく、取引先や投資家・採用希望者など様々な人が訪れるサイトです。そのため特定のユーザーを思い浮かべてデザインを考えるというより、様々なユーザーに対しどのような「企業イメージ」を持ってもらいたいかを考えデザインに落とし込むことが重要となってきます。
そのためには、まず「ユーザーに与えたい企業イメージ」を社内でよく考えることが重要です。
このユーザーに与えたい企業イメージがしっかり固まると、「サイト全体のカラーを明るくするか暗くするか」や「フォントの種類やサイズ」など、具体的なデザインを考える際に明確な判断基準が生まれ、スムーズにデザインの方向性が決まります。
そして結果的に企業イメージを落とし込んだデザインを生み出すことが出来るでしょう。
ファーストビューにこだわる
ファーストビューとは、サイトに訪問したユーザーが最初に目に入る部分の事を言います。
その際キャッチコピーなど印象的な一文をシンプルに記述し、イメージを膨らませるような画像を組み合わせることで、より印象的なファーストビューとなります。
また、コーポレートサイトは流入したユーザーが目的のページにストレスなくたどり着けるようすることも重要です。先述の通りコーポレートサイトはその特性上目的の異なる多種多様な人が情報を求めて流入してきます。その際に目的のページにスムーズにたどり着けないと離脱の原因となり、リピーターとして再訪してくれる可能性が低くなります。
そのためには、ファーストビューも含めたページ上部に、分かりやすい導線を構築していくことも重要です。
同業他社との違いを意識する
コーポレートサイトを制作する際、競合他社と差別化を図ることも重要です。
コーポレートサイトは、その特性上掲載する情報が似てくるため、扱う商品やサービスが類似する競合他社とサイトのデザインも似てくる可能性があります。
そんな競合サイトとの差別化を図るためには、まず競合のコーポレートサイトを分析することです。
そのうえで、自社と競合の商品サービスの違いは何か、先述した企業イメージや伝えたいことは何かを深く考えデザインに落とし込んでいくことで、競合との差別化を図ることが出来るようになります。
デザインがシンプルなコーポレートサイト事例3選
ここからは、弊社シフトでこれまで構築したコーポレートサイトをご紹介します。
まずは、シンプルなデザインが特徴的なコーポレートサイトの事例です。
日東商会様
特徴とデザイン
紙パルプなど工業用資材を中心に扱う専門商社数のコーポレートサイトです。
さわやかなグリーンが印象的なトップページは、シンプルな構成で、各コンテンツへの導線が非常に分かりやすいのが特徴です。コンテンツ数がそれ程多くない場合は、こういったシンプルで分かりやすい構成にするのも一つの案と言えます。
友愛ビルサービス様
特徴とデザイン
建物の維持や管理、警備や清掃など総合的に行う会社のコーポレートサイトです。
職場の快適性を陰ながら支えるサービスでありながら「創造」をメインコピーとしている所が印象的です。また、主要コンテンツへの導線は印象的な画像を使用し、流入ユーザーがより直感的に情報へアクセスできるような構成になっています。
丸の内キャピタル様
特徴とデザイン
投資事業の管理・運営や助言業務を行っている会社のコーポレートサイトです。
投資といったビジネスの中心と言える事業を行う中で、さわやかなブルーが誠実さや冷静さを印象付けます。こちらのサイトもコンテンツ数はそれほど多くないため、トップページの構成はシンプルなものとなっており、各コンテンツへのアクセスは容易に行えるようになっています。
ファーストビューにメッセージ性を持たせたコーポレートサイトデザインの事例3選
続いては、ファーストビューにメッセージ性を持たせたコーポレートサイトデザインの事例です。先述したユーザーに与えたい企業イメージを、ファーストビューでダイレクトに伝えているサイトと言えます。
タカラスタンダード様
特徴とデザイン
キッチンや浴室など水回りの製品を扱う会社のコーポレートサイトです。
ファーストビューの中心に見えるメッセージが、画像がスライドするたびに変わっていくのが印象的です。また、ロゴの一部として常時表示されている「水まわりって、大切だから」も企業として意識しているメッセージと思われます。
株式会社ダイキンアプライドシステムズ様
特徴とデザイン
空調機器を扱う会社のコーポレートサイトです。
空気を扱う会社としての自負を感じるメッセージ性と、クリーンな空気を連想させる背景画像が印象的です。
また、ファーストビューに自社の強みに関する導線を設置しているのも特徴的で、同業他社との差別化と自社の製品やサービスに対する自信のようなものを感じます。
エイブル山内株式会社様
特徴とデザイン
防護服や感染防止衣、防火服を扱う会社のコーポレートサイト。
ファーストビューには強い意志を感じるメッセージが大きく表示され、そのメッセージに付随した画像のセレクトが行われています。
やや特殊な製品を扱うことから、ファーストビュー直下にすぐ製品情報へのリンクに繋がる導線を設置し、流入ユーザーのアクセシビリティを高めています。
イメージカラーを重視したコーポレートサイトのデザイン3選
続いては、イメージカラーを重視したコーポレートサイトデザインの事例を紹介します。
エーモン工業株式会社様
特徴とデザイン
自動車に関するメンテナンス用品やカスタマイズパーツの製造・企画・販売を行う会社のコーポレートサイトです。
サイト全体で赤色を印象的に使っています。また、製品情報やDIY情報には青と黄色を使い、この会社が大切にしている「楽しい」を演出しています。
クレディセゾン労働組合様
特徴とデザイン
企業の労働組合のコーポレートサイトです。
福祉に関連したサービスを行うため、サイト全体で「平和」や「信頼」をイメージさせるブルーを使用しているのが印象的です。
三菱地所パークス様
特徴とデザイン
施設型駐車場の管理サービスやコンサルティングを行う会社のコーポレートサイトです。
三菱マークの色である「赤」を多用せず、部分的に使うことで逆に赤を印象付けるサイトデザインとなっています。また、メインコピーのキーワードである「美しい流れ」をイメージさせるファーストビューのアニメーションが印象的です。
サイドメニューが特徴的なコーポレートサイトのデザイン事例2選
続いては、サイドメニューが特徴的なコーポレートサイトデザインの事例を紹介します。
サイドメニューは、メインコンテンツの幅が狭くなる半面、コンテンツ数が多い場合に有効であり、デザイン的に競合他社との差別化にもなります。ただ、スマホ時は画面幅の関係で一般的なメニューボタンに格納する形となるため、PCをメインにしたBtoBサイトに向いていると言えます。
ケーブルテレビ徳島様
特徴とデザイン
ケーブルテレビであるテレビ徳島のコーポレートサイトです。
イメージキャラクターである「みえ太」を所々に配した全体的に親しみやすいサイトになっています。特徴的なサイドバナーはスクロール後も追従し、ユーザーのアクセシビリティを向上させています。
日本エンコン株式会社様
特徴とデザイン
有害物質事故に備える緊急用シャワーや洗眼器を扱う会社のコーポレートサイトです。
サイト全体としては清潔感を感じる白で統一しつつ、所々にやや薄い青色を配し「安心」や「冷静さ」を印象付けています。メインバナーの直下には、主要な商材である4つの製品情報へ直結するリンクを配しています。
動きのあるコーポレートサイトのデザイン事例2選
続いては、トップページの動きが特徴的なコーポレートサイトデザインの事例を紹介します。
流入したユーザーのUX(ユーザー体験)を意識したサイトに有効と言えます。
STUDIO55様
特徴とデザイン
CGやVR、BIMの制作サービスを行う会社のコーポレートサイトです。
高度なデジタル技術を扱う会社として、三次元的な動きが魅力的なファーストビューを採用。トップページの他の要素にも、ホバーアクションで動きが発生するなど、「動」と「静」をうまく使い分けたサイトとなっています。
アットホームラボ株式会社様
特徴とデザイン
AI(人工知能)に関する研究開発を、不動産市場の調査などに活かす会社のコーポレートサイトです。
点と点を線で結んだ動きのあるファーストビューは、AIやビッグデータといった最先端技術を扱う会社として、日々進化するデジタル技術や市場の変化を思わせるものとなっています。
また、スクロールを進めるたびに発生する動きや、重なり合う要素は、最先端領域を扱う会社として型にはまらないことを印象付けています。
情報量が多い場合のコーポレートサイトデザイン事例2選
最後は、トップページの要素がやや多いコーポレートサイトデザインの事例を紹介します。
コンテンツ数の多い会社が参考にすべきサイトとなっています。
株式会社帝国書院様
特徴とデザイン
社会科の教科書・地図帳を扱う出版社のコーポレートサイトです。
小・中学校から高校・一般までと扱う世代が広いことに加え、教科書だけでなく地図帳や資料集を扱うことでコンテンツのカテゴリー数が非常に多いサイトです。
要素が多い中で流入ユーザーが目的のページにたどり着きやすくするために、アイコンや色味を使い似たような要素を視覚的に分けるデザインになっています。
日本電産コパル電子株式会社様
特徴とデザイン
製品数の多いBtoB向けのコーポレートサイトです。
膨大な製品を扱う中でユーザーが目的の製品にすぐたどり着けるよう、グローバルメニューの上に、検索窓へのリンクをヘッダーに大きく配置。また、会員ページと多言語展開にも対応したサイトのため、それらのアクセスもヘッダーの分かりやすい位置に設置しています。
SITEMANAGEのその他の制作事例はこちらをご覧ください。
株式会社シフトでは、全てオリジナルデザインでサイトを構築
株式会社シフトでは、これまで多くのコーポレートサイトを構築してきました。その多くはパッケージCMS「SITEMANAGE」によるものです。
テンプレートなし！貴社だけのオリジナルデザイン
通常のCMSパッケージは用意されたテンプレートの中からデザインを選択するものが多い中で、「SITEMANAGE」はすべてオリジナルデザイン。競合他社と差別化を図れる自由なデザインが可能となっています。
また、Webデザイナーだけでなく、UI/UXを専門に設計するスタッフもいるため、見た目の美しさだけでなく、ユーザの快適な閲覧や体験を意識したサイトデザインを行い、コンバージョンや満足度の向上に繋げます。
シフトでは、そんなデザインをフルスクラッチで1から設計しています。
詳しく知りたい方はこちらをご覧ください。
ご相談お待ちしております お気軽にお問い合わせください
03-5847-1281 03-5847-1281
株式会社シフト システム事業部
平日 9:30～18:00
まとめ
今回は、コーポレートサイトのデザインについてお伝えしてきました。コーポレートサイトのデザインでこだわるべきポイントや実際のデザイン事例を紹介しましたが、参考になりましたでしょうか。
コーポレートサイトは企業の印象を大きく左右する重要なサイトです。こちらの記事がコーポレートサイトのデザインを考えるうえで何かのお役に立てれば幸いです。
