CJ Column

コラム

コーポレートサイト制作の参考になる、海外の企業サイトデザインまとめ

コーポレートサイト(企業サイト)というと、一昔前は「真面目でお固い印象」を持っていたのですが、近年ではデザインの幅が広がり、個性豊かなデザインが多くなってきました。そんなコーポレートサイトですが、海外ではどんなデザインのサイトがあるのか探してみました。
おしゃれなコーポレートサイトのデザインをお探しの方、Web制作のアイデアをお探しの方の参考になれば幸いです。

 

REDBRICK

https://home.redbrickhealth.com/

アメリカにある医療系システムの開発会社。
コーポレートカラーの赤とポイントカラーのオレンジのグラデーションが随所に取り入れられています。下層ページの写真には同じ色でグラデーションオーバーレイがかかっており、サイト全体に統一感を生んでいます。

 

QVARTZ 

https://qvartz.com/

北欧を拠点とする経営コンサルティング会社。
敷き詰められた大小さまざまなグリッドが特徴的。コーポレートカラーのネイビーと差し色のピンクがそれぞれ淡い背景色、濃い背景色に映えています。カタログやポストカードを見てるような可愛さ・ワクワク感がありますね。

 

Basis AG

https://basis-ag.com/

ドイツの不動産会社。
全体的にベージュ系の色味でまとまっている中、鮮やかな黄色がアクセントになっています。見出しが写真に重なっているデザインも、トレンドを取り入れていていいですね!

Walmart

https://corporate.walmart.com/

アメリカのスーパーマーケットチェーン。
コーポレートカラーの青をベースに、ロゴに使われている黄色がポイントに使われています。ところどころ枠からはみ出したグリッドが目を引きますね!コンテンツが多いためか、文字色やライン以外での装飾は少なめです。

 

WB Good

https://www.wbgood.com/

アメリカの映画製作会社ワーナー・ブラザースのCSRサイト。
TOPページのテキストにマウスオンすると背景の動画が変わるところがかっこいいですね。コンテンツが少なめなので、ページ数の少ないコーポレートサイトの参考になりそうです。

 

intechnic

https://www.intechnic.com/

アメリカのWeb制作会社。
スクロールにあわせて要素が出現したり、パララックス効果が使われていたりと、どんどん下にスクロールしたくなるようなデザインです。ブログを除いた全コンテンツがTOPページに収まっています。

OPENWEAR

https://www.open-wear.com/

スイスのウインタースポーツウェアのブランド。
コーポレートサイトとECサイトが一体になっています。
ファーストビューのスプリットスクリーンレイアウト(コンテンツを縦半分に分割したレイアウト)が印象的です。スクロールに応じて変化する斜めのラインが面白いです!

 

以上、おしゃれな海外コーポレートサイトをピックアップしてみました。さまざまなサイトを探してみて感じたことは、スクロールに付随するエフェクトはもはや常識というくらい、ほとんどのサイトで使われていました。動きがついているとユーザーのスクロールを促せるので、コンテンツの閲覧が増え、企業の魅力がより伝えられるのではないでしょうか。また、各サイトがフォントで個性を出しているという印象も受けました。とは言っても日本語のWebフォントはまだ多くは普及していない印象ですが、英字部分だけフォントを変えても雰囲気が伝わりやすくなりますね。ぜひお気に入りのコーポレートサイトを見つけて、Web制作の参考にしてみてください。

A.U  フロントエンドエンジニア

コラム一覧に戻る

お問合せ

以下のフォームにご入力の上、送信ボタンをクリックしてください。

企業名 企業名を入力してください
お名前 [必須] お名前を入力してください
メールアドレス [必須] メールアドレスを入力してください
電話番号 電話番号を入力してください
お問い合せ内容 [必須] お問い合わせ内容を入力してください

個人情報保護方針

個人情報の取り扱いについて

個人情報の取り扱いについて同意してください

ログインをすると、
会員限定記事を全文お読みいただけます。

パスワードを忘れた方へ

  • ログインIDを入力してください。
  • ログインIDを正しく入力してください。
  • パスワードを入力してください。
  • パスワードを正しく入力してください。
  • ログインID、パスワードが間違っています。


ログイン実行中

ログイン完了!ページを再読込します。