COOSY BLOG
  • HOMEホーム

  • SERVICEサービス

    • サービスTOP
    • Web制作
    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
  • WORK制作実績

    • 制作実績TOP
    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーション
    • サービスサイト・SaaS
    • システム開発
  • ABOUTクーシーについて

    • クーシーについて
    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ岩手
    • ロンドン支社
    • ミャンマー支店
  • BLOGブログ

  • RECRUITリクルート

  • Contactお問い合わせ

BLOG MENU

  • BLOGトップ
  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

イギリス在住デザイナーが選んだ話題の海外Webサイト8選!

  • 特集
  • Web最新トレンド
イギリス在住デザイナーが選んだ話題の海外Webサイト8選!

「インパクトのあるWebデザインアイデアが欲しい」
あなたがそうお考えなら、海外のWebサイトを参考にしてはいかがでしょう。

この記事では今注目のWebデザインが見られる海外のWebサイトを8つご紹介します。

先にお伝えしておくと、Webデザインの進歩は、あなたが知っているWebサイトとは違いすぎて驚くレベルで進んでいます。そして、その情報の多くは海外からやってくるものです。最新情報を知りたいのであれば、海外の情報を押さえるべきなのです。

しかし、海外サイトをどうやって探せばいいのか、どれが評価されているサイトなのか、判断が難しいかと思います。

本記事はそんな人のために書きました。解説付きでご紹介しているので、ぜひ最後までお読みください。

今回選んだデザインの基準

ご紹介するWebサイトは、3つのカテゴリーに分けて選出しました。

  • 「Visual」思わず目を惹くサイト
  • 「Experience」体験型のサイト
  • 「Text」テキスト情報で魅せるサイト

カテゴリ別でそれぞれ見ていきましょう!

今回は「Awwwards」で表彰を受けたWebサイトをいくつか取り上げました。Awwwardsは、世界的に権威のあるWebデザインの評価・表彰機関です。審査員の採点により高得点を取ったサイトは表彰を受けます。Awwwardsでの表彰が目標とされるほど、世界的に認知された賞です。「CSS Design Awards」「FWA」と合わせて3大アワードと呼ばれています。

「Visual」思わず目を惹くサイト

このカテゴリーはとくにデザイン性が高く、ユーザーの目を惹くようなワクワクするウェブサイトを選びました。洗練されたイメージやイラストを大きく使い、大胆なのが印象的です。

Hyer

Hyer キービジュアル

https://www.flyhyer.com/

プライベートジェットチャーター会社のHyerは入り口ページを大きく使い、シンプルかつボールドな字体とイメージが印象的で、ビジュアルを魅力的にしています。

キービジュアルの飛行機は静止画ではなく、画面の中を飛行しています(ぜひサイトを見てください)。スクロールすると飛行機は画面中央から右方向に飛び去ろうとするという凝った作りです。

Hyer 余白を持たせたデザイン例

情報を多く提示しないことによって、逆にユーザーの興味を沸かせる素敵なデザインです。たっぷりと取った余白により高級感も感じられます。フォントはジャンプ率が大きく、メリハリがしっかりとついているため、情報がとても探しやすいです。こちらのサイトは、過去CSS Design Awardsにて月間ウェブサイトにも選ばれています。

Superlist

Superlist キービジュアル

https://www.superlist.com/

Superlistはユーザーの作業効率を上げるタスク管理アプリを提供するサービスです。
SuperlistのWebサイトはとても直感的かつ、ブランドアイデンティティがしっかりと表現されています。画面のカーソルを動かすことにより、ナイトモードとデイモードを体験できる仕組みになっています。

Superlist サービスを追体験できるデザイン例

下にスクロールしていくと、アプリ使用場面の動画が流れており、サービスを追体験しながら学ぶことができるようになっています。視覚情報をうまく使って、ユーザーを疲れさせず楽しく誘導できるのはSuperlistのWebサイトの大きな特徴です。

見せるべき情報がダイナミックに組み込まれているデザインは、Awwwardsにて2021年4月のSite of the Monthに選ばれました。今現在も優れたウェブサイトの一つとして評価され続けています。

Bike Bear

Bike Bear キービジュアル

https://www.bikebear.com.my/

Bike Bearはクリエイティブデジタルエージェンシーです。Webデザインからブランディング、ビデオコンテンツの制作まで行っています。

こちらのサイトはひとことで言えば、「遊び心がいっぱいのWebサイト」です。宇宙を漂っているかのような奥行きとスピード感のあるスクロールアクション。そこを流れていくマスコットのクマのイカしたポーズと「Dare to do. Bigger, Bolder, Better」の文字。「やってやれ。でっかく、ガッツリ、すごいこと」という感じの意味でしょうか。勢いのあるクリエイティブデジタルエージェンシーであることを感じさせる、楽しくてフランクなデザインになっています。

Bike Bear フランクなデザイン例

ホバーやスクロールにつけたアクション、黄色と黒の対比、フォントサイズとウェイトなどによって緩急がしっかりついており、離脱することなく最後まで見られます。はじめて訪れた人でも、どんな会社なんだろうと興味を持たずにいられない、強く人を惹きつけるデザインです。

「Experience」体験型のサイト

このカテゴリーでは、体験型のウェブデザインを提供しているサイトを3つ選びました。ユーザーが自らカーソルを動かし参加することによって完成するインタラクティブデザインは、近年増えてきています。今後も目にする機会が多くなっていくでしょう。

Sprite Zero Limits

Sprite Zero Limits キービジュアル

https://www.sprite.com/zerolimits

「THE HALL OF ZERO LIMITS」は、コカコーラ社の炭酸飲料「スプライトゼロ」と2022年の人気映画「ブラックパンサー/ワカンダ・フォーエバー」がコラボしたWebサイトです。このサイトは3Dで世界が展開。ファーストビューの巨大な門で「ENTER」ボタンをクリックすると門が開き、中へ入れます。Webサイトですが、文字通り「中に」入るのです。

Sprite Zero Limits 門が開いた画面

コンテンツは部屋の壁にかかっており、これを歩いて見て回るような体験ができます。このダイナミックな体験型のサイトは、Awwwardsにて2023年度最初のSite of the Monthを受賞しました。幻想的で、ユーザーが楽しめる今年要チェックなウェブサイトデザインです。

Unseen Studio

Unseen Studio キービジュアル

https://unseen.co/

ブランディング、デジタルクリエイション、モーションなどを手がけるUnseen StudioのWebサイトです。もともとは「GC」というブランド名だったのを、10年の節目の年に変更し「Unseen Studio 」となりました。Awwwardsで2023年2月のSite of the Monthを受賞した際のコメントによると、ブランド名変更の背景には名前とブランドの個性の間に感じていた隔絶があったようです。

そうして作られたのが、こちらのサイト。ブランドの”家”と呼べるような非現実的なデジタル世界の構築を目指しています。

Unseen Studio 空間を移動しているかのようにデザイン例

サイトではユーザーがバーチャルな家の中にいるというコンセプトを実現しており、ページ間の遷移はすべて物理的な空間を移動しているかのようにデザインされています。部屋から部屋への移動だけでなく、音の効果を使って水中世界も巧みに演出されています。ぜひイヤホンで音声を聴きながら楽しんでください。没入感がすごいです。

Curious & Company

Curious & Company キービジュアル

https://curious.co/

Curious & CompanyはLAに本社を置くデザイン&エクスペリエンス・エージェンシー。彼らのWebサイトは、アメリカ合衆国の1ドル札にも描かれている「プロビデンスの目」をモチーフとした独特の世界観と、高度なインタラクティブ性を兼ね備えています。

サイトの内容は一般的な代理店と変わりませんが、スタッフ紹介がタロットカードだったり、実績紹介が水晶玉占いだったりと、とにかくサービス精神が旺盛です。メニューは画面左上のヒモを引っ張ると緞帳(どんちょう)が降りて出てくる仕掛けになっています。まるで見世物小屋にいるかのような凝った演出です。

Curious & Company 見世物小屋にいるかのような凝った演出の例

高度なクリエイティブと細かい作り込みにも関わらず、サイトの操作性は失われていません。演出ゆえの癖みたいなものはありますが、とても軽快に見ることができます。高い技術と創造性でユーザーの興味を引くWebサイトデザインです。

「Text」テキスト情報で魅せるサイト

このカテゴリーでは主にテキストを使ってシンプルに魅せるウェブサイトを2選ご紹介します。テキストが増えると情報量も増えユーザーに抵抗感を与えてしまいがちですが、以下の2サイトはそうならないように工夫が凝らされています。

HUMAIN

HUMAIN キービジュアル

https://www.humain.ai/

AI技術を駆使しつつ、クライアントのビジネス戦術を効率化、最適化することを事業内容とするHUMAINのサイトです。このサイトはほとんど文字だけですが、ユーザーに読む努力をさせません。

トップページのファーストビューを初め、主要な短いメッセージは「Love」という細くてエレガントな印象のフォントを使用し、大胆に大きく表示しています。これに対して詳細な内容はSans-Serif系のフォントで示され、こちらは余白の取り方が大胆です。圧迫感を与えない程度の塊となるように配慮が伺えます。

HUMAIN カーソルエフェクトが特徴的なデザイン例

またカーソルエフェクトが特徴的です。カーソルを矢印や指のような具体的なオブジェクトとせず、一帯をぼんやりと目立たせるデザインとなっています。カーソルで照らさないと出てこない文字やイラストもあるので、ユーザーは「何かあるかも」と考えてカーソルを動かします。ユーザーを自発的に探索させる工夫が施されています。

Vaayu Tech

Vaayu Tech キービジュアル

https://www.vaayu.tech/

Vaayuは、小売業者が自社の二酸化炭素排出量をリアルタイムで測定、監視、削減できる世界初の自動化ソフトウェアです。こちらのサイトは、テキストと二酸化炭素を思わせる丸いオブジェクトで主に構成されています。カラーもグレーとライトグリーンの2色が主でシンプルです。

Vaayu Tech グレーとライトグリーンのシンプルなデザイン例

こんなにシンプルなのに飽きずに見ていられるのは、テキストとオブジェクトの役割が決まっているのが一因でしょう。テキストが静なら、オブジェクトは動。オブジェクトがリズムよく動くことで、あまり動かないテキストが逆に際立ち自然とそこに注意が向けられます。

縦横に動くスクロールアニメーションのおもしろさもありますが、テキストとオブジェクトのコラボレーションの妙が、このサイトのデザインのいいところだと思います。

まとめ

以上、今注目の海外Webサイトを8つご紹介しました。「こんなことまでできるのか!」と驚かれたサイトもあったのではないでしょうか。

今後も新しいWebデザインのアイデアは生み出されていきます。ChatGPTやThreadsを見ても分かるとおり、Web関連の情報は海外で生まれ、日本に伝わってくることがほとんどです。新しい情報を早く手に入れるなら、海外の動向は常にチェックしておくべきでしょう。

クーシーブログでは海外トピックも取り上げていますので、ご注目いただけると幸いです。

クーシーブログ編集部

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

2023/07/24

テキスト:佐藤有那 加藤久佳 デザイン:村上

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
お問い合わせはこちら

Web最新トレンドの関連記事はこちら

  • 【2月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    2025年Webデザインの最新トレンドを海外からいち早くピックアップ!Photoshopのライブ共同編集機能、新作デザインツールTOP3、AI動画生成の最前線など、気になる情報をギュッとまとめました。Web制作者、デザイナー、マーケター必見の内容です。

    • Web最新トレンド
  • 【Webデザイン最新アイデア】プロも絶賛! 超参考になる「ギャラリー・まとめサイト」32選

    今回は、最新のWebデザインアイデアをチェックできるおすすめのWebギャラリーサイトを、デザインに強みを持つWeb制作会社クーシーが厳選してご紹介します。ぜひ活用して、デザインのヒントを見つけてみてください。

    • WebデザインTips
    • Web最新トレンド
  • 【Web担当者必見】2025年春、今押さえるべきWeb業界ニュースまとめ

    2025年の春(3〜4月)に話題となった最新のWeb業界ニュースを厳選してまとめました。Webマーケティング、SEO、トレンド、テクノロジーまで、Web担当者なら必ずチェックしておきたい情報が満載です。

    • Web最新トレンド
  • 【2025年4月最新】Webデザインニュース!海外の最旬情報をご紹介!

    Webデザイン最新情報の第2弾。ChatGPTを使った画像生成プロンプトの最新活用法と、Photoshop、Illustrator、Figmaの新機能を、未来のデザイン業界を切り拓く鍵と共にご紹介します。

    • Web最新トレンド
  • 【4月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    デザイン業界は今月も話題が盛りだくさん。AIの進化やツールのアップデート、インスピレーションを刺激する海外サイトまで、日々変化するトレンドをキャッチアップすることがますます重要になっています。 今回は、デザイン力に強みを持つWeb制作会社クーシーが、注目のAIモデル「o3」「o4-mini」か

    • Web最新トレンド
  • 【5月版】今知るべき2025年Webデザインニュース!海外から最新情報をご紹介!

    最新Webデザインニュースをお届けします。今月は、UI/UXワークフローの効率化に役立つAIツールや、Microsoftが導入した新機能を紹介。さらに、インパクトある海外サイトのファーストビュー3選をピックアップし、実務で活用できるアイデアをお伝えします。

    • Web最新トレンド
  • 【6月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    2025年6月のWebデザイン最新ニュースをまとめました。Googleのロゴ刷新、Figmaの大型アップデート、Androidの新デザインなど、注目トピックを海外情報からわかりやすく紹介します。

    • WebデザインTips
    • Web最新トレンド
  • 【2025年Webデザイントレンド最新版】Web制作のプロが大注目する10選まとめ

    デザイン戦略に長けたWeb制作会社が推す「2025年のWebデザイン最新トレンド」。余白、3D、ヒーロー画像だけじゃない、斬新な表現技術もご紹介!

    • WebデザインTips
    • Web最新トレンド

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

Web制作の課題はクーシーが解決します

  • グローバル展開

  • Web制作

    コーポレートサイト、採用サイト、ECサイトまで。最新AI技術を掛け合わせ、各サイトの特性に合わせたUIUX設計を実現します。

  • デジタルマーケティング

    SEO・AIO対策や広告運用、LP改善で集客と売上向上へ。データを基にサイトを「成果を生む資産」に育てます。

CATEGORY LIST

  • すべての記事一覧

  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット
  • WORKS

    Webサイト・アプリなどの
    様々な実例・制作実績のご紹介

    WORKS
  • CONTACT CONTACT

    Webサイトのご相談、お見積もりはこちらから

    Webサイトのご相談、お見積もりなど
    お気軽にお問い合わせください

ホーム

  • TOP
  • COOSY BLOG
  • イギリス在住デザイナーが選んだ話題の海外Webサイト8選!
ページトップへ
  • TOP
  • SERVICE

    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
    • Web制作
  • WORKS

    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーションサイト
    • サービスサイト
    • システム開発
  • ABOUT

    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ 岩手
    • ロンドン支社
    • ミャンマー支店
  • RECRUIT

    • ディレクション部
    • デザイン部
    • システム開発部
    • アカウント・プランニング部
    • Webマーケティング事業部
    • 人事・総務部
    • オフショア
    • グローバル事業部
  • BLOG

    • 目的別
    • Web制作ハウツー
    • システム開発
    • Webサイト運用のコツ
    • Webマーケティング
    • 特集

COOSY SNS

  • facebook
  • X
  • お問い合わせ
  • Privacy policy
  • Site Policy
  • Security Policy
© COOSY All Rights Reserved.