オシャレだと思う企業サイト10選！サイトごとの感想や特徴まとめ

企業の広報担当の方やWEB制作の仕事をされている方で「企業サイト（コーポレートサイト）を作りたいけどどんなデザインにしようか迷っている」って方は結構多いと思います。

そこで。。。。

今回はデザイナーのホンネくんが「オシャレだなー」「イケてるなー」と感じた企業サイトを独断と偏見で10個選んでピックアップ。ただ選んでリンクを貼るだけでは面白くないので各サイトごとの感想や特徴も一緒にまとめてみました。

企業サイトを作る際の判断材料としてご活用ください。

ホンネくん

一般の方には分かりにくい単語や表現があるかもしれないけどその時はググってね笑

そもそも企業サイトって何？？

企業サイトとは別名コーポレートサイトと呼ばれ、各企業が自社の事業内容や考え、取り組みなどを社内外へ向けて発信するためのWebサイトのことです。

サイト内の基本的なコンテンツは、会社概要、事業内容（サービス内容）、IR情報、お知らせ、採用情報などが挙げられます。

デザインの傾向としては、信頼感や安心感を意識したシンプルでわかりやすいデザインが好まれ、使用される色はコーポレートカラーを主体として2～3色程度に絞られることが多いです。

では、以上を踏まえて早速どんな企業サイトが世の中にあるのか見ていきましょう。

メインビジュアルに動画を使用。その際前面にロゴマークを透過表示。スマホでもスムーズに表示されている。
インタラクションの表示スピードや抑揚はぜひ参考にしたいところ。
トレンド感のあるアングリッドなレイアウト。
スマホ表示時でも割とアングリッドな感じ
デバイスフォントのアンチエイリアス適用（-webkit-font-smoothing: antialiased; ※Macのみ。最近はどのサイトも適用してるか。。）
ブラウザ標準のスクロールバーを消している。（没入感が増す。画面のガタツキが減る。）
ローディング画面にはhttps://connoratherton.com/loadersのものを流用（？）
写真がコントラストがパキパキ

英字フォントが少し丸みを帯びていてかわいい（’brandon’使用）
全体的に少しポップな印象（高明度の黄色と赤をアクセントカラーにしているからか。メインカラーの青も割と高明度）
インタラクションのタイミングが綺麗（各要素の表示タイミングのずれ方が綺麗）
紙芝居のような推移は見ていて面白い
ローディング時のロゴがボケてるのは少しきになる。
ホバー時の表現がおしゃれ（背景がスライドすると同時に矢印がフェードアウト等）
メインビジュアルの文字が表示される際のインタラクションはよく見かけるから参考にしたい（白帯が表示されてから文字が出てくる表現）
言語切り替えの表現として国旗を使用するのは少し危ないかも。（おそらく日の丸は日本、星条旗はアメリカでそれぞれ日本語と英語を表現しているが英語を使用する国はアメリカ以外にもあるし、そもそもアメリカの国旗と公用語が英語であることを知っていないと伝わらない。直下にENとかJPとか付属させると少しは伝わるかも。。）
全体的なアニメーションのスピードやタイミングはとても参考にしたい。

トランジション（画面推移）の波線をスライドさせる表現はトレンド感ある
画面端のあしらいであるオレンジ色と紺色の斜め線が表示される際の抑揚は真似したいところ（初期に「タメ」がある）
その斜め線はCSSで再現（transform: matrix(1, 0, 0, 1, 0, 0);）
フォントのNoto Sansが綺麗。
アクセント（小さな三角形）の使い方が上手。使う面積のバランスが綺麗。（ちょこんと使ってる感じ）
フッターのホバー効果に一工夫あり。一番左の塊（ホーム、取扱機器等の列）にマウスを乗せると一旦すべての文字が薄くなって、ホバーした文字だけ白抜きになる。右の列も同じくホバー時に白抜きになるタイプの挙動なので整合性を合わせる為だと思われる。
全体的にホバー時の効果が上品。グラデーションを微妙に載せたり、オブジェクトを少しずらす程度の軽微さで表現している。
画像に載せているグラデーションが綺麗。