おしゃれな コーポレートサイト デザインの特徴とは?|企業のサイトとギャラリーサイトも紹介 | 千代田区のデザイン・WEB制作会社 | 株式会社CLANE(クライン)

おしゃれな コーポレートサイト デザインの特徴とは?|企業のサイトとギャラリーサイトも紹介

  • 自作したコーポレートサイトがなんだかダサく感じ、おしゃれなデザインに作り直したい
  • 集客につながるようなデザインのコーポレートを制作したい

と悩んでいる方はいませんか。

 

おしゃれという言葉は曖昧で、人それぞれおしゃれと感じるデザインは違います。例えばかっこいいデザインをおしゃれと感じる人もいれば、可愛いデザインをおしゃれと感じる人もいます。そのため自社のイメージにあったデザインのコーポレートサイトを参考にするのが一番の近道といえます。

 

今回は、デザイン性のあるコーポレートサイトを集めた参考サイトと参考になる企業サイトを紹介します。またすぐにデザイン性のあるコーポレートサイトにするコツも紹介します。

 

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

企業のコーポレートサイトとは?

自社コーポレートサイトのデザインを制作する前に、もう一度コーポレートサイトについて確認しましょう。コーポレートサイトの役割やメリット、費用な項目が曖昧なまま、制作を進めても、企業にとって効果的なコーポレートサイトデザインを制作できません。

 

コーポレートサイトは、会社概要、商品・サービス紹介、求人情報、など会社についてのあらゆる情報を掲載しており、会社の名刺のようなサイトといえます。

 

会社を紹介する目的でコーポレートサイトは制作されるため、自社の魅力を伝えやすいデザインにする必要があります。

 

コーポレートサイトの役割とは?

コーポレートサイトは、会社の情報をあらゆるユーザーにネット上で営業や広報担当者に代わって説明する、いわばネット上の広報担当の役割を担います。

 

例えば顧客の対しては、コーポレートサイトの商品紹介ページで自社商品やサービスの紹介や、お問合せボタンを設置して営業を行います。他には求職者に対して、求人情報ページで自社事業の紹介や、企業の魅力を伝えられます。

 

コーポレーサイトを企業が持つメリット

ここではコーポレートサイトを企業が持つメリットについて紹介します。自社サイトを持つメリットを知らずにコーポレートサイト制作を行っての誰にも、響かないサイトになってしまいます。

 

企業がコーポレートサイトを持つメリットは以下の通りです。

  • コストのかからないWEB広告になる
  • 採用活動に有効
  • 企業ブランディングができる

それぞれ紹介します。

 

コストのかからないWEB広告になる

コーポレートサイトはコストをかけずに営業してくれる

コーポレートサイトを活用すれば、広告コストをかけずに、企業の宣伝ができます。コーポレートサイトで集客を行えれば、低コストで、広告効果を得られます。

 

例えば新規顧客であれば、自社がどんな会社なのか、どんな商品やサービスを扱っているのかを説明できます。また既存顧客であれば、企業のブランディングを行い、会社への信頼を与え、リピーターになる可能性もあります。

 

企業の伝えたいイメージを想起できるデザインや、会社の事業についての詳細情報を掲載しているコーポレートサイトは、ネット上の営業担当の役割を担い、集客を行います。

 

自社にマッチした人材確保がしやすくなる

日本では後継者不足や、労働力の減少に伴い、企業側は優秀な人材の確保が重要になってきています。求職者は、企業のコーポレートサイトで会社事業や、雰囲気、社風などを確認してから、その会社にエントリーするかを決めます。

 

そのため求職者が魅力的だと感じるデザインのコーポレートサイトを制作すれば、自社の雰囲気を気に入り、経営理念に共感する人材を確保しやすくなります。

企業ブランディングができる

コーポレートサイトを見て、ユーザーは企業のイメージを決定づけることが多いです。そのためユーザーに抱いてほしい自社のイメージに沿ったデザインにしたり、コンテンツを掲載すれば、企業ブランディングに役立ちます。

 

例えば食品を扱う企業のコーポレートサイトであれば、食品が美味しそうに映る写真を掲載したり、装飾の少ないデザインで清潔感や上品さ、コンテンツに意識を集中できる演出をしたりでき、ユーザーに効果的に企業のイメージを持ってもらえます。

 

コーポレートサイトに必要な項目

ここではコーポレートサイトに掲載すべき項目を紹介します。

 

会社の顔であるコーポレートサイトに必要な情報は、企業についてのあらゆる情報です。あらゆるユーザーが訪れ、それぞれに必要な情報は違います。

 

そこで、多くのコーポレートサイトで共通する項目を取り上げます。

  • 会社概要
  • 商品やサービス紹介
  • 採用情報
  • 最新のニュース/お知らせ
  • お問い合わせ
  • 個人情報保護方針
  • サイトマップ

それぞれどんな役割を担うか解説します。

 

会社概要

コーポレートサイトは、会社の名刺のようなものだと紹介しました。あらゆるユーザーの目に入り、信用される必要があります。会社概要は、企業の信用に関する情報なため、必ず掲載しましょう。

 

具体的に掲載する内容としては以下の通りです。

  • 会社名
  • 代表者名
  • 資本金
  • 所在地
  • 電話番号
  • 設立年月日
  • 主要取引先

これらの情報入れれば、企業としての信用が出ます。その他にも組織図や支店情報など企業に合わせて、必要な情報を正確に掲載しましょう。

 

商品やサービス紹介

コーポレートサイトは、営業担当の役割を担うと紹介しました。企業の商品やサービス紹介を掲載すれば、あらゆるユーザーに営業をし、お問い合せボタンから制約までを行えます。新たな集客経路として、コーポレートサイトを制作する際は、必要になります。

 

また自社事業を紹介し、企業としての透明性を確保し、ユーザーからの信頼を獲得できます。

 

採用情報

コーポレートサイトにはあらゆるユーザーが訪問します。顧客から投資家、取引先など多岐にわたるユーザーが訪れます。

 

求職者も例外ではありません。その企業で働きたいと思えば、コーポレートサイトに訪れるケースがあります。そのため、新卒・中途の関する情報を掲載すれば、効果的にユーザーにアプローチできるサイトになります。

 

最新のニュース/お知らせ

コーポレートサイトはすでに自社を知っており、たびたび、サイトに訪問するユーザーもいます。その人たちに向けて、今企業に起きている最新のニュースやトピックをリアルタイムで配信する必要があります。更新していないサイトは信用に欠けてしまいます。

 

企業らしさを全面に押し出した文章や写真を掲載すれば、企業ブランディングにも寄与します。

 

お問い合わせ

サイトによって呼び方は、さまざまです。「相談フォーム」や「見積もり依頼」など。コーポレートサイトに訪問したユーザーの出口として設置します。

 

お問い合わせページくるユーザーは、商品やサービスを購入してくれたり、エントリーしてくれたりする可能性が高いです。最後まで丁寧なコミュニケーションを心がける必要があります。

 

個人情報保護方針

お問い合わせを設置する場合、コーポレートサイト上にユーザーの氏名やメールアドレスなどの個人情報を企業は受け取ります。そのため、個人情報保護方針を合わせて掲載する必要があります。

 

サイトマップ

企業のコーポレートサイトは、あらゆるユーザーが訪問するため、多岐にわたる情報を掲載する必要があります。そのため、ページ数が増えユーザーのほしい情報に行きにくい不便なサイトになってしまいます。

 

ユーザーの利便性を考えたサイトデザインをする必要があり、サイトマップは多くの情報を掲載するコーポレートサイトを俯瞰できるため、どこにどんな情報が掲載されているかを確認しやすくなります。

 

自社コーポレートサイト制作の参考になるギャラリーサイト5選

多くの企業コーポレートサイトを見てみたい、同じ業種のサイトがどんなデザインなのかみたいと思っている方のために、ここでは多種多様なコーポレートサイトを集めたギャラリーサイトを紹介します。

 

おしゃれなデザインのコーポレートサイトは数多く存在し、そのおしゃれな要素を自社サイトのデザインやコンテンツの配置の参考にしたいですよね。ここで紹介する企業のコーポレートサイトを集めているギャラリーサイトを活用して、自社イメージにあうコーポレートサイトを制作しましょう。

 

今回紹介するサイトは

  • WP-Search
  • WebDesignClip
  • MUUUUU.ORG
  • URAGAWA
  • CSDW

 

それぞれのサイトについて紹介します。

 

WP-Search

おしゃれなWordPressコーポレートサイトを検索できるWP-searchを示す図

https://wps.manuon.com/

WP-SearchはWordPressの人気テーマ、プラグイン、サーバーからサイトを探せます。WordPressテーマごとにカテゴライズされており、自社のWordPressテーマと同じテーマのサイトを探せるのが特徴です。

 

おしゃれなWordPressのコーポレートサイトを検索するWP-searchでplugin検索できるのを示す図

例えば自社がWordPressテーマのLightningでコーポレートサイト制作をしたとします。しかしなんだかダサいデザインのサイトができてしまったと感じます。お洒落なデザインにしたいがどこを直せばいいかわからないと思ったら、WP-SearchでLightningのコーポレートサイトを探します。自社サイトと何が違い、どこがおしゃれなのかを分析して、自社サイト制作に役立てられます。他にもプラグインでのサイト検索が可能なため、自社がプラグインをサイト内で活用できていない場合にも役立ちます。

 

WordPressテーマで自社コーポレートサイトを制作している場合、WP-Searchで同じWorPressテーマのサイトを探してサイト制作の参考にできます。

 

WebDesignClip

おしゃれなコーポレートサイトを検索できるWebDesignClipを示す図

https://webdesignclip.com/category/company/

WebDesignClipは日本と海外のサイトを紹介しています。またランディングページやスマホ版のサイトデザインも紹介しており、スマホを利用率が高いユーザー層をターゲットにするサイトを制作したり、ランディングページを制作する際の参考にもなります。

 

おしゃれなコーポレートサイトを検索できるWedDesignClipは細かい検索機能があるのを示す図

WebDesignClipはキーワード、カテゴリー、タグ、サイトレイアウトなどから絞り込まるため、自社のイメージするサイトを探しやすいです。

 

例えば、自社サイトのレイアウトとメインカラーが青と決まっているとします。WebDesignClipでメインカラーを青で検索すれば、該当するサイトが表示されます。またレイアウトで検索すれば、他サイトのコンテンツの大きさや、配置を参考にできます。

 

自社コーポレートサイトのイメージが固まっている場合、それぞれの要素ごとに検索して、イメージにあうサイトを参考にサイト制作が可能です。

 

MUUUUU.ORG

おしゃれなコーポレートサイトを検索できるMUUUUU-ORGを示す図

https://muuuuu.org/

MUUUUU.ORGは主に縦長なサイトを集めっています。デザインやタイプごとにカテゴライズされており、イメージに近いサイトを見つけやすいです。

 

例えば自社コーポレートサイトでユーザーを教育したいとします。そうするとトップページが縦長のサイトが好ましいです。下にスクロールするだけで、商品やサービスについての知識を深めながらユーザーの課題解決を示唆するようなサイトにすれば、購入されやすくなります。そういったサイトを制作したい場合はおすすめです。

 

2000以上コーポレートサイトが掲載されており、自社のイメージするサイトに近いものを見つけやすいです。自社コーポレートサイトを縦長なデザインにする際に参考になります。

 

URAGAWA

おしゃれなコーポレートサイトを検索できるURAGAWAを示す図

https://uragawa.work/about/

URAGAWAはコーポレートサイト以外にもWeb制作会社を探せます。ワンクリックでPC表示からスマホ表示にサイトのデザインを切り替える機能があり、スマホでどう見えるかを確認しやすいのが特徴のサイトです。

 

また業界ごとに細かくカテゴライズしてサイトを掲載しており、26種類ほどの業界に分類されています。同業他社がどんなサイトを制作しているかを確認しやすいです。

 

同ジャンルのおしゃれなコーポレートサイトを探しやすいURAGAWAを示す図

自社がイメージするデザインのサイトを見つけた際、クリックして下にスクロールすると、そのコーポレートサイトの「同一業界」と「同一サイトタイプ」が掲載されており、似たサイトを探しやすいです。

 

CSWD

おしゃれなコーポレートサイトを検索できるCSWDを示す図

https://c-s-w-d.com/

CSWDはコーポレートサイトのみを探せます。製造業、建設・不動産、物流、IT、医療、人材のコーポレートサイトを掲載しています。またコーポレートサイトで使われているカラーコードも記載されており、自社のイメージする色だと感じた時にカラーコードをコピーしてサイト制作に使えます。

 

CSWDで人材業のコーポレートサイトを検索する図

例えば人材業のコーポレートサイトを制作したい場合、CSWDで人材業のコーポレートサイトのみを検索します。他の人材業の会社がどんなデザインなのかを参考にして、自社コーポレートサイト制作に役立ちます。

 

業種選択が細かく、同業他社のコーポレートサイトがどんなデザインなのかを参考にしたい場合におすすめのサイトです

 

【業種別】おしゃれなコーポレートサイトデザインの参考事例12選紹介

自社のブランドイメージと合うようなコーポレートサイトを制作したいが、何かが足りない、どこを意識して制作すればいいかわからない方のために、ここでは企業のコーポレートサイト事例を参考に、自社サイト制作にはどんな要素が必要かを具体的に紹介します。

 

今回紹介する事例を参考に、自社イメージにあうようなおしゃれでかっこいいデザインのコーポレートサイトを制作しましょう。

 

1.【清掃業】有限会社厚生協会

おしゃれなデザインの企業コーポレートサイト事例|有限会社厚生協会のHP

https://cosei-kyokai.jp/

  • アニメーションを入れた遊び心にあるサイト
  • フラットデザインでシンプルで見やすいサイトに
  • シンプルさからくる清潔さを感じさせるデザイン

 

有限会社厚生協会のコーポレートサイトです。し尿・雑排水の汲み取り、排水管掃除などが事業内容です。おしゃれなデザインのコーポレートサイトをイメージできない事業内容ですが、同社のサイトは企業のブランディングに寄与するサイトデザインになっていると感じます。

 

おしゃれなデザインの企業コーポレートサイト事例|有限会社厚生協会のコンテンツ

同社のサイトデザインは、イラストをベースに制作されており、柔らかさや丸みを演出しています。イラストは、シンプルで平面的なフラットデザインが採用されています。そのため、サイト全体から、シンプルさから来る清潔感を感じます。またファーストビューで、イラストとカラーで会社の事業内容を推察できます。

 

なおこのサイトの印象的な淡い水色のカラーコードは「#C1D9F4」です。気になる方は、自社のサイトカラーに使用してみてください。

 

2.有限会社渡辺建設

おしゃれなデザインの企業コーポレートサイト事例|有限会社渡辺建設のHP

https://watanabe-construction.co.jp/

  • 余白を入れたスタイリッシュなデザインに
  • 迫力のあるメインビジュアルで印象的なサイトに
  • 無駄な装飾がないシンプルでかっこいいサイト

 

有限会社渡辺建設のコーポレートサイトです。ビルやマンションなどの建設、一般貨物の運送などが事業内容です。画面いっぱいに表示されるメインビジュアルは、迫力があり、ユーザーの印象に残りやすいです。1カラムレイアウトで構成されており、かつコンテンツは大きく、テキストは小さいため、余白を強調したデザインになっています。

 

おしゃれなデザインの企業コーポレートサイト事例|有限会社渡辺建設の余白の多さ

細かなデザインのこだわりして、テキストのカラーを黒ではなく、コーポレートカラーにしている点です。サイト内で使用するカラーでサイトの印象は大きく変わります。

 

なおこのサイトで使用しているテキストのカラーコードは「#1C2D65」です。

 

3.株式会社NISSHA

おしゃれなデザインの企業コーポレートサイト事例|株式会社NISSHAのHP

https://www.nissha.com/index.html

  • グリッド状にコンテンツを掲載し、整理された上品さを演出
  • 掲載する写真の大きさを揃えて、見やすさを担保
  • 検索機能を搭載し、利便性のあるサイトに

 

株式会社NISSHAのコーポレートサイトです。加飾フィルムなどの産業資材事業・タッチセンサーなどのディバイス事業・医療機器などのメディカルテクノロジー事業の3つが事業内容です。

 

同社のサイトは、事業内容が多岐に渡り、掲載する情報も多いです。情報を整理し、グリッド状にコンテンツを掲載し、ユーザーの利便性に優れたデザインのコーポレートサイトになっています。

 

おしゃれなデザインの企業コーポレートサイト事例|株式会社NISSHAのグリッド状のコンテンツ

また同社のサイトの掲載されている写真やコンテンツは全て大きさを揃えて、グリッド状に配置しており、見やすさを担保したデザインになっている。多くの情報を掲載するサイトを制作する場合は、同社のコーポレートサイトを参考に、コンテンツや情報を配置すると、ユーザーの利便性を確保したサイトデザインを制作できます。

 

4.株式会社GIG

おしゃれなデザインの企業コーポレートサイト事例|株式会社GIGのHP

https://giginc.co.jp

  • サイト全体が斜めデザインで制作されており、統一感がある
  • アクセントカラーで視線の誘導を効果的に行うデザイン
  • コントラストのはっきりした、スタイリッシュなデザインのサイト

 

株式会社GIGのコーポレートサイトです。WEB制作・ホームページ制作・システム開発が事業内容です。サイト全体に渡って、ロゴマークのデザインに合わせた斜めデザインが印象的です。写真やコンテンツも斜めにトリミング加工されており、統一感を感じさせます。

 

おしゃれなデザインの企業コーポレートサイト事例|株式会社GIGのコンテンツ

同社サイトは、ベースカラー・白、メインカラー・黒を使用しコントラストがはっきりしており、スタイリッシュな印象を受けます。色味をはっきりさせる加工をした、クオリティの高い写真は、それだけでもユーザーにおしゃれさを感じさせます。

 

黄色のアクセントカラーが、ユーザーの視線を誘導する効果を持っており、企業の知ってほしい情報を伝えやすくなっています。なおサイト内のアクセントカラーのカラーコードは「#F6DE79」です。

 

5.株式会安田金属興業

おしゃれなデザインの企業コーポレートサイト事例|株式会社安田金属興業のHP

https://www.yasukin.co.jp/

  • 訴求力の高い加工をした写真を使用したサイトデザイン
  • インフォグラフィックでユーザーにとってわかりやすいデザインに
  • コンテンツの配置を揃えて、見やすいデザインに

 

株式会社安田金属興業のコーポレートサイトです。金属スクラップ・産業廃棄物の処理・自動車や船のリサイクル・特定フロンの回収などが事業内容です。ファーストビューでは、作業風景を画面いっぱいに表示して、ユーザーにインパクトを与えています。

 

同社サイトは、仕事の流れや再資源化の流れをインフォグラフィックを使い、視覚的に理解しやすいデザインになっています。

 

おしゃれなデザインの企業コーポレートサイト事例|株式会社安田金属興業の採用情報ページ

採用情報ページは同社の魅力を効果的に伝え、求職者に訴求力のあるデザインになっている。クオリティが高く、自然な写真を使用しており、現場の空気を感じられるサイトデザインにしています。

 

6.株式会社レアウェリナ

おしゃれなデザインの企業コーポレートサイト事例|株式会社レアウェリナのHP

https://lea-w.jp/

  • 遊び心のあるアニメーションのサイトデザイン
  • ファーストビューでインパクトを与えるデザインに
  • 取引の流れをわかりやすくインフォグラフィックでデザイン

 

株式会社レアウェリナのコーポレートサイトです。インベント企画・演出/進行が事業内容です。そのためメインビジュアルは、ステージを彷彿とさせるデザインになっています。またファーストビューで「緑」というテキストがインパクトを与え、印象に残るサイトだと感じました。

 

同社サイトは、アニメーションを駆使したサイトデザインになっています。例えばトップページから下にスクロールすると事業に合わせたアニメーションとビビッドなカラーを楽しめます。

 

おしゃれなデザインの企業コーポレートサイト事例|株式会社レアウェリナのインフォグラフィック

またピクトグラムを使用したインフォグラフィックでスクロールとともにわかりやすく仕事の流れを解説しており、ユーザーの利便性に優れたデザインんといえます。

 

なおベースカラーの灰色のカラーコードは「#EBEAE7」、アクセントカラーの黄色のカラーコードは「#FDCE10」です。

 

7.株式会社スタジオディテイルズ

おしゃれなデザインの企業コーポレートサイト事例|株式会社スタジオ ディテイルズのHP

https://www.details.co.jp

  • コンテンツやテキストに動きを持たせたデザイン
  • テキストの間隔を開いて、見やすさを確保したデザインに
  • 黒をベースカラーに、ひつの高い写真で高級感のあるサイトに

 

株式会社スタジオディテイルズのコーポレートサイトです。デザイン制作・システム開発などが事業内容です。ベースカラーは黒で、明度を下げた加工の写真を使用しており、まとまりがあり、高級感を感じさせるデザインになっています。

 

同社サイトは、下にスクロールしたり、ページ遷移したりする際にアニメーションを挟んだりとあそび心があります。異なるスピードで各要素を動すことで、立体感のあるデザインになっています。

 

おしゃれなデザインの企業コーポレートサイト事例|株式会社スタジオ ディテイルズのテキスト

またこのサイトでこだわりを感じるのは、テキストです。通常のテキストの間隔から少し離して、配置されているため、窮屈さを感じず、読みやすい余裕をk感じるデザインになります。他にはタイトルと本文のフォントを変えて、読みやすさを確保しています。

 

8.株式会社マーケティング研究協会

おしゃれなデザインの企業コーポレートサイト事例|株式会社マーケティング研究協会のHP

https://ssl.marken.co.jp/

  • 業務の流れをわかりやすい図解で掲載しているデザイン
  • ベージュのベースカラーで温かみのあるサイトに
  • 余白を確保した余裕のあるデザイン

 

株式会社マーケティング研究協会のコーポレートサイトです。マーケティングセミナー・企業内研修が事業内容です。メインビジュアルは、横にスクロールしており、それぞれのコンテンツにテキストを加えて、同社の事業をアピールしています。

 

おしゃれなデザインの企業コーポレートサイト事例|株式会社マーケティング研究協会のコンテンツを図解にしているデザイン

各コンテンツ、テキストの間隔が広く取られていたり、余白が多いことで、清潔感や上品さを感じるサイトデザインに仕上がっています。またインフォグラフィックを使い、同社の企業価値、企業の課題を視覚的に理解できるデザインになっています。

 

なおベースカラーの肌色のコードカラーは「#EDEDE2」、アクセントカラーの緑色のコードカラーは「#2D9887」です。

 

9.株式会社黒木テック工業

おしゃれなデザインの企業コーポレートサイト事例|株式会社黒木テックのHP

http://www.kurokitec.com/

  • 多数のサイトカラーで賑やかさを演出
  • 斜めデザインのストライプを施した背景
  • コンテンツをグリッド状に配置し、整理されたデザイン

 

株式会社黒木テック工業のコーポレートサイトです。観覧車ゴンドラなどの遊園施設乗物制作・遊園施設委託営業が事業内容です。遊園地の賑やかで、楽しいイメージを連想させるため、社員の笑顔の写真を掲載したり、サイトカラーを多用したデザインを行っています。

 

おしゃれなデザインの企業コーポレートサイト事例|株式会社黒木テックの整理されたコンテンツ

同社サイトは、質の高い写真を使用しており、装飾の多いサイトデザインです。装飾や情報が増えると、サイト全体がごちゃごちゃした印象になりがちですが、グリッド状に整理して配置することで、整った上品な印象を与えています。また単調な背景にならないように、斜めストライプの背景を使用しており、一層遊園地感を演出しています。

 

グローバルナビゲーションにマウスを移動させると、黄色のアクセントカラーが使用されたメニューが表示され、目を惹きます。なおアクセントカラーの黄色のカラーコードは「#FFD50F」です。

 

10.株式会社梓設計

おしゃれなデザインの企業コーポレートサイト事例|株式会社梓設計のHP

https://www.azusasekkei.co.jp/

  • 画面いっぱいの写真を背景にしたデザイン
  • 画質が良く、色味の加工をしたクオリティの高い写真を掲載する
  • テキストにあった写真を掲載し、企業ブランディングに寄与

 

株式会社梓設計のコーポレートサイトです。建築物の設計が事業内容です。そのためサイトには、迫力のある写真が数多く掲載されています。トップページには「建築に、温度を。」というテキストが表示されており、企業の建築への実直さがわかるサイトになっており、企業ブランディングにつながります。

 

おしゃれなデザインの企業コーポレートサイト事例|株式会社梓設計のコンテンツの大きさがわかる写真

同社のサイトは、コンテンツが大きいのが特徴的です。ユーザーに迫力と興味を与えるデザインのサイトになります。具体的には実績紹介ページの施設名をクリックすると、サイト全体に建物の写真が表示されます。

 

また一つ一つの写真のクオリティが高く、見惚れてしまうほど。この企業に自宅の設計依頼を出してみたいと思わせるサイトだと感じます。

 

11.株式会社ユニバーサル・ビジネス・ソリューションズ

おしゃれなデザインの企業コーポレートサイト事例|株式会社ユニバーサル・ビジネス・ソリューションズのHP

https://www.ubsc.co.jp/

  • 図解を挿入して、ユーザーにわかりやすいデザインに
  • メインビジュアルには斜めデザインを
  • 装飾を減らし、余白を作り、シンプルで誠実さの感じるデザインに

 

株式会社ユニバーサル・ビジネス・ソリューションズのコーポレートサイトです。健康保険システムの提供やシステム開発が事業内容です。メインビジュアルはタイトルの見やすさ、デザイン性を意識して斜めデザインを採用しています。

 

おしゃれなデザインの企業コーポレートサイト事例|株式会社ユニバーサル・ビジネス・ソリューションズのわかりやすい図解

同社サイトは、サポート体制をピクトグラムを用いたインフォグラフィックで表現し、ユーザーにわかりやすく情報を提供してます。無形なものを扱うサイトをデザインする場合、クライアントにどんなものか、どんな流れかを理解してもらえことが重要になります。

 

また、なるべく装飾を減らしたデザインのサイトになっています。シンプルで、ユーザーが見やすく、誠実さを感じるデザインといえます。

 

12.株式会社グラスト

おしゃれなデザインの企業コーポレートサイト事例|株式会社グラストのHP

https://www.grust.co.jp/

  • 写真をテキストの形にトリミング加工
  • メインビジュアルに社内の雰囲気の伝わる映像
  • テキストの大きさを使い分ける

 

株式会社グラストのコーポレートサイトです。ジムなどを対象としたオフィスサポート・看護師などを対象にしたメディケアサポート・建築などを対象にしたエージェント事業の3つが事業内容です。メインビジュアルに動画を使い、ファーストビューで訪問者がサイトに興味を持ちやすいデザインになっていると感じました。

 

おしゃれなデザインの企業コーポレートサイト事例|株式会社グラストの写真のトリミング加工

同社サイトのメインビジュアルは、社内の雰囲気や仕事風景を動画で流しています。複数の視点からの動画を編集し、魅力的な映像になっていますこの結果、企業のイメージをユーザーに伝えやすくなります。自社のイメージを伝えるデザインを制作したい場合、動画を使用してみるのも手段一つです。

 

また写真をテキストの形にトリミング加工するなどの遊び心のあるサイトです。

 

おしゃれなコーポレートサイトデザインにするには?

おしゃれなコーポレートサイトを制作するコツは?

コーポレートサイトは、会社の情報を発信するだけではなく、企業のブランドやイメージを伝える手段でもあるため、デザインにもこだわる必要があります。

 

コーポレートサイトは会社の情報を発信するだけのサイトだからと、担当者の好みのデザインにするのではなく、顧客や求職者、取引先などのステークホルダーに向けてサイトデザインを制作しましょう。

 

ところが、いざデザインを考えて制作してみようと思っても、なかなかアイデアは出てきません。そこで、デザイン制作に悩む方のために、コーポレートサイトのデザインをどこに意識して制作するべきかを紹介します。

 

コーポレートサイトをデザインする際に意識することは以下の通りです。

  • サイトに使うカラーは3色・配色の比率を意識する
  • サイトに掲載するコンテンツの色味や大きさを揃える
  • サイトデザインにマッチするフォントを選ぶ

 

それぞれ解説します

 

サイトのカラーは3色・配色の比率を意識する

おしゃれなコーポレートサイトのためのカラーを示す図

使用するカラーは3色までに絞ってサイト制作をしましょう。使用するカラーを制限すれば統一感のあるサイトになりやすいです。またユーザーにも見やすいサイトを制作できます。

 

配色の比率はベースカラー(70%)メインカラー(25%)アクセントカラー(5%)が黄金比といわれており、サイト全体にまとまりを持たせ、上品なサイトになります。最初にメインカラーを決めます。テキストなどに使うメインカラーは読みやすい灰色や白などの明度の低い色を選ぶと良いです。また自社のイメージカラーを使用する場合もあります。

 

次にベースカラーを決めます。背景などサイト全体に占める割合が高いベースカラーは白や黒などの明度が高い色や淡い色を選ぶと良いです。サイト内のコンテンツとのコントラスが強すぎるとユーザーの目の負担になるため、ベースカラーを決める際はコンテンツとの相性も考える必要があります。

 

最後にアクセントカラーを決めます。メインカラーとベースカラーの単調なサイトに色付けをするアクセントカラーは、赤やオレンジなどの目立つ色やサイトのターゲットにマッチした色が良いでしょう。ユーザーの目を引きたい情報やコンテンツの近くにアクセントカラーを使えば、視線を誘導できます。

 

また賑やかさや楽しいイメージをコーポレートサイトから伝えたい場合はカラーを多用するケースもあります。

 

自社コーポレートサイトの配色に意識したサイト制作を心がければ、まとまりのあるおしゃれなデザインのサイトにできます。

 

サイトに掲載するコンテンツの色味や大きさを揃える

サイトに掲載するコンテンツの色味を加工し、大きさを揃えましょう。色味を加工すれば、ユーザーに抱いてほしいイメージを固めやすくなります。また大きさを揃えれば、ユーザーがサイト全体を見たときにまとまりを感じるサイトになります。

 

例えば自社がカフェを経営しており、イメージカラーがブラウンだとします。この企業のサイトのそのままコンテンツんを掲載するのではなく、色味をブラウンや、暖色にしてカフェの温かい雰囲気を伝えたり、コンテンツの大きさを整えて、整理されたサイトを制作すれば、サイトに訪問したユーザーはおしゃれなサイトだと感じるでしょう。

 

サイトに掲載するコンテンツを自社の伝えたいイメージにあう色味に加工したり、大きさを揃えればまとまりのあるサイトを制作可能です。

 

サイトデザインにマッチするフォントを選ぶ

サイトデザインにマッチしたフォントを選びましょう。フォントが異なるだけでも見た目の印象は大きく変わるため、フォントにも意識を向けたサイト制作を行う必要があります。

 

例えばかわいいデザインのサイトに太い明朝体を使えば違和感があるのはわかりますよね。また「UNIQLO」などの細長く、とめやはねのないフォントは洗練された印象を受けやすいです。

 

googlefontsの検索画面

参照:Google Fonts

サイト制作におすすめのフォントはgoogleが無料で提供しているgoogle fontsです。サイトに訪問するユーザーが見たときに読み間違いや窮屈さを感じさせない上品さがあります。見やすくスタイリッシュさを表現できます。

 

サイトデザインとフォントがマッチするか、サイトに窮屈さを感じないかを意識して制作しましょう。

 

なおサイトに使用されるフォントは2種類に分けられます。

  • デバイスフォント
  • WEBフォント

それぞれ説明します。

 

デバイスフォント

デバイスフォントはユーザーの閲覧環境(デバイス)によってフォントの表示が切り替わります。

 

例えば自社が「明朝体1」のフォントを使いサイト制作を行なったとします。そのサイトを閲覧するユーザーのデバイスの中に「明朝体1」のフォントが入っていない場合「明朝体2」が大体フォントとして表示されます。

 

せっかくデザインにマッチするフォントを選んでも他のデバイスでの表示が異なれば意味がありません。もしデバイスフォントを使用する際は画像として配置すると他のデバイスでも同じように見えます。

 

WEBフォント

WEBフォントはあらかじめサーバー上に置かれていたり、ネット上で配布されていたりするフォントを読み込んで表示します。そのためデバイスが異なっても同じように表記されます。

 

ただし使用する種類が増えれば、読み込む量も増えるため表示されるのに時間がかかったり、ライセンスの確認をする必要があります。

 

まとめ

いかがだったでしょうか。今回はおしゃれなデザインのコーポレート・企業サイトについて紹介しました。参考サイトや参考になる事例を見ながら自社コーポレートサイト制作に役立ててください。

 

またおしゃれなデザインにするための基本的な考え方も紹介しました。基本ではありますが、今回のことを意識するだけでもまとまりのあるサイトを制作できます。ぜひ参考にしてください。

この記事を書いた人

釣見 駿

株式会社CLANE 取締役 / 学生時にマイナビニュースでメディア運営を行う。その後広告代理店で働きながら、2018年にCLANEの創業時にジョイン。WEBデザインや広告をもっと知りたい方に、役立つ情報をお届けします。

CONTACT

お問い合わせ

コーポレート制作
検討している企業様はこちら

コーポレート制作の事例

             View all
coming soon...