「シンプルでかっこいいコーポレートサイトのデザイン事例を知りたい」
「かっこいいコーポレートサイトを作るためのコツを知りたい」
と考えている、Web担当者・デザイナーの方もいらっしゃるのではないでしょうか？
一口に「かっこいい」といっても人によってかっこいいと感じる基準はそれぞれ違い、無駄のないシンプルなデザインをかっこいいと思う人もいれば、アニメーションが豊富な動きのあるデザインをかっこいいと思う人もいるでしょう。いずれの場合も、大事なのは「何をかっこいいとするのか」「何を目指すのか」を明確にしてからデザインを決めていくということです。本記事では、
- 写真の魅せ方がオシャレでかっこいいコーポレートサイト4選
- アニメーションがかっこいいコーポレートサイト4選
- 配色・フォントがかっこいいコーポレートサイト4選
を紹介していきます。記事後半では、かっこいいコーポレートサイトを作るための注意点・外注する場合に気を付けることも徹底解説していきます。ぜひ最後までご覧ください。
目次
写真の魅せ方がオシャレでかっこいいコーポレートサイト4選
ここからは「かっこいい」を表現している箇所別に、事例となるコーポレートサイトを紹介します。
まずは、写真の魅せ方がオシャレでかっこいいコーポレートサイト4選です。特に、中小企業に多いブランディング要素を含んだコーポレートサイトを制作する際に参考になると思います。
①：株式会社エコラ
出典：株式会社エコラ
株式会社エコラは、宮城県を中心として、福島や岩手などの東北地域で建設事業を行っている企業です。
オシャレでかっこいいポイント
- メインビューの画像は、鮮やかすぎない少し落ち着きのある明るさに調節することで、オシャレなかっこよさを引き出している
- 「PICK UP 最近の取り組み」という項目では、写真の位置と補足説明文をあえてかぶせることによって、オシャレな印象を与えている
- 事業紹介や販売物件の項目にある写真はマウスでホバーすると、写真が浮き出てくるようなアニメーションが設定されており、シンプルでありながらカッコよさを表現している
②：株式会社アリシア
出典：株式会社アリシア
株式会社アリシアは、南大阪にある看板屋さんです。
オシャレでかっこいいポイント
- メインビューや各見出しで使われている写真を、被写体・背景・文字を含めて「茶・白・オレンジ」に統一させることでバラツキのない洗練されたカッコよさを感じる
- メインビューや見出しごとに設置された写真と、作品紹介の写真とでは、写真の明るさや彩度、色合いが異なるため、写真が散乱しているイメージを抱かせない
- 作品の写真のサイズをあえてばらつかせることで、独創的なカッコよさを与えている
③：福岡正信自然農園
出典：福岡正信自然農園
福岡正信自然農園は、アース・カウンシル賞の初の受賞者に選ばれた福岡正信さんという方が作った農園です。
オシャレでかっこいいポイント
- メインビューに、手前に焦点が当たっていて奥がぼやけている写真を使うことにより、伝えたいこと（文章）と伝えたい商品のバランスが取れて、洗練された印象を与える
- このコーポレートサイトでは、全体的にセピア調にすることで、昔から続く伝統を表現しつつ、モノクロのような冷たさを感じさせない、伝統とデザイン性を両立させたかっこよさがある
- 「取り組み」の項目では、正方形の写真を並べることで、まとまった印象を与える
④：コンデナスト･ジャパン
合同会社コンデナスト･ジャパンは、有名雑誌の「VOGUE JAPAN」などの出版やWebマガジンを配信している会社です。
オシャレでかっこいいポイント
- このコーポレートサイトは全体的にモノトーンで構成されており、それに合わせる形でメインビューも明度を低くして、黒に近づけている
→都会的で洗練されたイメージを与えている - 「Our Brads」では、写真を整列させない異質なデザインにすることで、独自性のあるかっこよさが表現できる
→写真1つ1つを認識しやすいのでクリック率に繋がる可能性もある - 「New Businesses」では、写真をグレーがかったモノトーン加工することで、控えめではあるが上品なカッコよさを演出している
アニメーションがかっこいいコーポレートサイト4選
次に、アニメーションでカッコよさを表現しているコーポレートサイトを4つ紹介していきます。
①：カバー株式会社
出典：カバー株式会社
カバー株式会社は、バーチャルプラットフォームや、VTuberのプロダクション事業を行っています。
アニメーションがかっこいいポイント
- 「service」や「company」のページを開くと、トップにカバー株式会社のロゴが回転してそれぞれのタイトルに合うロゴに変化するという3Dアニメーションが設定されており、シンプルなデザインの中に異質なものがあるかっこよさを表現している
- グローバルナビをマウスでホバーすると左から枠が登場するアニメーションが施されていることで、スピード感のあるかっこよさを感じられる
- アニメーションが多いため、本来持っている独自性も感じ取れるが、全体的にアニメーションの登場速度が速めに設定されているため、真面目かつ洗練されている印象を与えることができる
②：株式会社ツクルバ
出典：株式会社ツクルバ
株式会社ツクルバは、中古・リノベーション 住宅の流通プラットフォーム「cowcamo（カウカモ ）」企画・開発・運営などを行っています。
アニメーションがかっこいいポイント
- ファーストビューや「COMPANY」「BUSINESS」などの項目を開くごとに毎回、青と赤でデザインされた背景のアニメーションを数秒表示させることで、1つの作品集を見ているようなまとまりのあるかっこよさを感じる
- トップページの見出しには数秒だけ現れる赤と青のアニメーションを設定することで、黒いシンプルな文字色を保ちつつも、変化があるので、独創性のあるかっこよさを与えている
③：三菱商事プラスチック株式会社
合成樹脂原料・製品ならびに関連商品の国内取引などを行っている、三菱商事のグループ会社です。
アニメーションがかっこいいポイント
- メインビューの画像の図形にアニメーションを入れて動きをつけることで革新的な社風を表現し、動きをの速度を一定にしないことでインスピレーションを刺激するカッコよさを感じる
- ページが変わるごとに、左から右に流れるようなアニメーションが施されていることで、爽やかでかっこいいイメージを与える
- 「KEY OF FUTURE」内の項目では、メインビューで表示されていた図形が3Dで立体的に表示されていることで、近未来的なかっこよさが感じられる
④：養老ミート株式会社
出典：養老ミート株式会社
養老ミート株式会社は、岐阜県にある牛の肥育から牛肉の販売・加工までを行う会社です。
アニメーションがかっこいいポイント
- メインビューは、角度が違う牛の写真を残像が残るようなアニメーションをつけて表示していくことで、実際に牛が動き出しそうなかっこよさを感じさせる
→さらに、煙のようなアニメーションを追加することで立体感をや迫力を増長させている - 「企業情報」や「私たちのこだわり」の各項目を開くと、下方に現在開いているページ以外の項目欄が出てくる。その項目にマウスオーバーすると、画像が揺れながらうっすら現れるアニメーションが施されている
→透過した写真をアニメーションで表示させることで、見出しを邪魔しないけれど存在感を感じさせるような、洗練されたかっこよさを表現している
配色・フォントがかっこいいコーポレートサイト4選
ここからは、配色やフォントにかっこよさを感じるコーポレートサイトを4つ紹介します。
①：株式会社インターメスティック
株式会社インターメスティックは、あの有名な眼鏡販売店のZoffを運営している会社です。
配色・フォントがかっこいいポイント
- 基本はモノトーンだが、ところどころアクセントにコーポレートカラーのブルーを散りばめることで、シンプルの中に洗練されたかっこよさがある
- 「Zoff Focus」の項目に数字をつけており、そのフォントを白抜きのポップなデザインにすることで、真面目なフォントの中に異質な存在が突如として現れるかっこよさを感じる
- 見出しよりもキャッチコピーの文字サイズを大きくしたり太字にすることによって、メリハリがあってかっこいいと感じる
②：株式会社NOVENINE
出典：株式会社NOVENINE
株式会社NOVENINEは、健康管理システム、オーラルヘルスケア商品の企画、開発及び販売などを行っている会社です。
配色・フォントがかっこいいポイント
- ファーストビューでのメッセージに太字のゴシック体を使用することで、力強い独立的なかっこよさが溢れている
- 一部を除いたほとんどの写真をモノトーンで統一することで、都会的で洗練されたかっこよさを演出している
- 白を基調としたモノトーンにすることで、オーラルヘルスケア商品にぴったりな爽やかさを表現している
③：株式会社東北新社
出典：株式会社東北新社
株式会社東北新社は、東京にある総合映像プロダクションです。
配色・フォントがかっこいいポイント
- 右上にあるボタンから背景を変えることができるが、どの背景もグラデーションカラーになっていて、最先端なイメージからかっこよさを連想させる
- 文字色は白に設定することで、どの背景色にしてもマッチするようになっている
- フォントは細いゴシック体にすることで、モダンでかっこいい印象を与えている
④：listude
出典：listude
listudeは、スピーカーの製造・販売を行っている会社です。
配色・フォントがかっこいいポイント
- 配色は白が多めのモノトーンにすることで、無駄のないかっこよさを感じさせている
- フォントは太くない明朝体を使用することで、ゆとりを感じさせ、現実世界から解放してくれるようなかっこよさを与えている
- ときどきグレーの背景を混ぜることで、はっきりしすぎず、穏やかな雰囲気を醸し出している
シンプルでかっこいいコーポレートサイト4選
最後に、最近のWebデザインの流行でもある「シンプルなデザイン」で構成することにより、コーポレートサイト全体のかっこよさを表現している事例を4つ紹介します。
ちなみに、無駄を省いて構成要素をできるだけ少なくしたシンプルなWebサイトのことを、「ミニマルデザイン」といいます。
①：株式会社ウダツ
出典：株式会社 ウダツ
株式会社ウダツは、東京にあるリノベーション事業を主に行っている会社です。
「シンプルでかっこいい」デザインポイント
- 1見出しごとの文字量は均等に調節されていて、さらに同じ位置で改行されているため、枠で囲っているわけではないのにまとまりが感じられる
→洗練されたかっこよさを演出している - コーポレートサイト内の配色はモノトーンカラーに設定されており、写真の色のトーンも少し暗めに統一されているので、全体的にシックでかっこいい印象を抱かせる
- 「買う/借りる」内の写真は、構図がほとんど同じ写真が並んでいるので統一感がある
②：株式会社Waris
出典：株式会社Waris
株式会社Warisは、人材サービスを行っている会社です。
「シンプルでかっこいい」デザインポイント
- 見出しと見出しの間や、文字と文字の間などの余白が多めに設定されているため、無駄のないかっこよさと情報の見やすさを同時に届けることができる
- 通常時の文字色を黒に近いグレーに設定することで、より温かみのあるシンプルな印象を与える
- 見出しタイトルよりも、伝えたいメッセージの文字サイズを上げることで、メッセージ性のあるかっこいいコーポレートサイトになっている
③：株式会社I-ne
出典：株式会社I-ne
株式会社I-neは、あの有名なシャンプーのBOTANISTや美容家電のSALONIAなどの製品を企画・開発している会社です。
「シンプルでかっこいい」デザインポイント
- 「ブランディング」や「スピードと品質」などの3層目の下層ページでは、そのほとんどのトップ画像が、右側の余白をなくしている
→本文は左右の余白が均等になっているが、そこと合わせないことにより、単調なデザインという印象を壊し、洗練されたイメージを与える - 各ページの先頭の見出しの末尾に句点「。」を入れることが統一されている
→見出しの色を変えずともどこが大見出しなのかがすぐにわかるので、シンプルでかっこいいデザイン性を保ちながらユーザビリティも追及している - サイト内で説明のために使われているイラストは、すべての色合いや形を統一させることで、スタイリッシュなかっこよさを感じる
④：株式会社ルミネ
出典：株式会社ルミネ
皆さんご存知かと思いますが、株式会社ルミネはショッピングセンターの管理及び運営を行っている会社です。
「シンプルでかっこいい」デザインポイント
- すべてのページの先頭の写真にキャッチコピーを入れていて、その形式（サイズ・色）もすべて統一されているので、1つの写真集を見ているようなかっこよさがある
- アクセントカラーにはグレーを使うことで、激しい主張はないけれど都会的で上品なかっこよさがプラスされている
- グローバルナビなどのメニューにマウスを合わせると、黒い下線がアニメーション式に表示される
→構成要素を最小限にとどめたことにより与えてしまう「つまらない」というイメージを解消している
かっこいいコーポレートサイトを作るための3つの準備
準備①：コーポレートサイトを作る目的を明確にする
コーポレートサイトはもともと、会社概要や事業内容を社外に発信することで、企業の認知を広めることを目的としたWebサイトです。しかし、企業ごとにコーポレートサイトを作る目的が少々異なります。
目的が違えば当然、表現するべき「かっこよさ」も変わってくるため、「どんな目的でコーポレートサイトを作るのか」を明確にする必要があるのです。
コンバージョン獲得を優先課題としてコーポレートサイトを制作する場合は、商品の写真をかっこよく加工したり、商品のイメージを定着させるような色合いなど、サイト全体的に独自性を表現してかっこいいイメージを抱かせることが多いです。
資金調達などを目的とした場合には、シンプルなデザインを保つことで真面目な印象を与えながら、余白や文字のフォントを調整することで「シンプルだけどかっこいい」デザインを表現する事例が数多くあります。
準備②：制作会社に依頼する
- 制作会社に依頼する
- HTMLやCSSを使って自社で制作する
- CMSを使って自社で制作する
コーポレートサイトを作る方法としては上記の3つがありますが、優良WEB編集部では、プロの制作会社に依頼することをおすすめします。
自社に合った「かっこいいコーポレートサイト」を作るには、「かっこよさ」を表現するアニメーションのつけ方やサイトデザインの配色、配置などの知識が必要だからです。そういった知識・ノウハウは、経験を積んできたプロだからこそ得られるものです。
本当にこだわったデザインのコーポレートサイトにするには、ホームページ制作ツールなどではなく、少々お金がかかるかもしれませんがプロに頼むことをおすすめします。
準備③：事例からかっこいい要素を学ぶ
先ほども言及したように、一口にかっこいいサイトといっても、構成が整っているのでかっこいいという印象を抱いたり、配色がシンプルなのでカッコよさを感じたり、自社で表現したいかっこよさは具体的に何なのか、できる限り明確にする必要があります。
そこで「SANKOU！」「イケサイ」「MUUUUU.ORG」などの参考サイトを見たり、この後紹介するような事例紹介から、自社が求めている「かっこいい」は何なのかを考えていきましょう。
かっこいいコーポレートサイトを作る際の注意点
「かっこいいコーポレートサイトを作りたい」という漠然としたイメージの段階で制作してしまうと、理想とかけ離れたサイトになってしまうことがあります。
ただぼんやりと「かっこいいコーポレートサイトを作る」のではなく、「自社の求めるかっこいいとは、何を指しているのか」を明確にした上で制作するようにしましょう。
例えば「かっこいい＝シンプル」ということが明確になっていた場合、シンプルなイメージを表現するための構成や色合いに設定します。
一方「かっこいい＝革新的」というイメージを持っていた場合、革新的なイメージを表現するために、近未来的な3Dアニメーションを設定したり目を引くフォントを使うということになり、同じ「かっこいい」でも、それぞれを明確にすると出来上がるサイトデザインも違ってくるのです。
そのため、できるだけ「かっこいい」を明確にしてから制作することを、心がけるようにしましょう。
かっこいいサイトを外注する場合に気をつけること
「かっこいいコーポレートサイト」を外注する場合、多めの予算が必要です。
かっこいいを表現するためのデザインとして、大きく分けて「独創的」か「シンプル」かという選択ができますが、独創的な世界観をサイト全体に演出するには、アニメーションや細かい仕掛けが必要となります。
オリジナルデザインでの対応や、テンプレートでも企業ごとに配色やフォントなど細かいデザインを扱ってくれる制作会社に依頼しなくてはいけません。
シンプルなデザインなら「お金をかけずに簡単なテンプレート方式で制作できるのでは？」と思う方もいらっしゃるかと思いますが、実はシンプルなデザインこそ細かい仕掛けが施されていて、プロの知識と技量がなければ、ただの簡素なサイトというマイナスなイメージを抱かれてしまい、かっこいいとはかけ離れてしまいます。
そのため、ある程度の予算感の制作会社に依頼しなければ、かっこいい要素を取り入れてもらうことができないことが多いのです。
参考事例を集めるなどして、できるだけ制作会社の人に詳細にかっこいい要素が伝わるようにしましょう。
かっこいいコーポレートサイトを作るには、できるだけイメージを深堀しましょう！
今回は、かっこいいサイトの作り方や事例、注意点などを紹介しました。
ある程度の予算感の制作会社に依頼した場合、しっかりとヒアリングをしてその形を明確にしてくれることが多いですが、自社内でもあらかじめ具体案を決めておくことで、スムーズに理想のコーポレートサイトを作ることができます。
まずは、どのような目的でコーポレートサイトを作りたいのかを明らかにしましょう。その上で、「目的を達成するために有効なかっこいいデザイン」がどのようなものなのか、明確にしていくことが大切です。
ぜひこの記事を参考にして、競合サイトに負けない、かっこいいコーポレートサイトを作っていきましょう！
Share
