世界の独創的なウェブサイト最前線
～最新技術と優れたデザインの融合2024～

2021年に執筆した「世界の独創的なウェブサイト」は、多くの方に「面白かった！」と反響をいただきました。あれから3年が経ち、国際情勢もウェブトレンドも一変しました。

近年は、「芸術作品」と言っても過言ではないほど独創的で、独自の世界観が溢れる魅力的なウェブサイトが続々と誕生しています。良い意味で飛び抜けている、常識にとらわれていないウェブサイトは、ブランドの見せ方やアイデアを生み出すうえで非常に良いインスピレーションを与えてくれます。

本記事では、最新技術やアイデアがたっぷり詰まったワクワクするような魅力的なウェブサイトをご紹介いたします。

海外サイトであることに加えエフェクト多めなため、ローディングには時間がかかる場合があります。そのあたりは辛抱強くお付き合いください。時間を確保して、イヤホンを繋げて、是非、独自の世界観たっぷりの最新ウェブサイトをじっくり味わってみてくださいね！

 

目次

• Active Theory（制作会社）
• Popin Group （制作会社）
• Hifly（航空業）
• Mana Yerba Mate（飲料・小売）
• REFIRE（製造業）
• TVZ Assali（製造業）
• Resn（制作会社）
• ウェブサイト制作事例
• さいごに

 

Active Theory 　

オランダ・ベルギーを拠点とするデジタルクリエイティブエージェンシー「Active Theory」のウェブサイトは、最新のWeb技術を駆使した没入体験ができる秀逸なウェブサイトです。

まずは、ウェブサイトを開いて、右上をクリック。音楽が流れ始めます。

Active Theory のウェブサイトは、ページをスクロースやクリックすることでオブジェクトが動くインタラクティブな「3Dグラフィック」を採用。ウェブサイト全体に立体感を生み出し、ユーザーを没入されることで視聴者の離脱を防ぎ、サイトへの興味を維持させます。これは、単なる美しさだけを求めるだけではなく、エンゲージメントを向上させる効果があります。

ロード中やセクションの移動時には、スムーズなアニメーションとトランジションによって滑らかで心地よい印象を与えます。さらに、背景と前景を異なる速度で移動させるパララックスエフェクトや、ユーザーのアクションに応じて動くダイナミックなモーションエフェクトによって、ウェブサイトに動的な動きを与え、魅力的なウェブ体験を提供しています。

WorkページとContactページのみで構成された非常にシンプルなサイト構造であるにもかかわらず、最新技術と優れたデザインの融合によって、深い没入感体験ができる創造性の高いウェブサイトと言えるでしょう👏。

Active Theoryのウェブサイトは、国際的なウェブデザインアワード「CSS design Awards」にノミネートされている他、「Awwwards」でも高い評価を受けています。

 

Popin Group  

スペインに拠点を置く「Popin Group」は、広告、デジタル マーケティング、クリエイティブデザイン、コミュニケーション設計や実際のライブイベントという二軸のサービスを備え、健康とウェルネスに特化したクリエイティブ エージェンシーです。

海外の大企業はもちろんのこと、TOYOTAや京セラ、第一三共など日本の有名企業も顧客に抱えています。

ハイライトされた文字やSNSアイコンにカーソルを合わせると効果音が鳴るなど、ポジティブでワクワクするような聴覚的アプローチを採用。ウェブサイト全体を通して、マウスオーバーやクリック、スクロールでエフェクトが変化するなど、遊び心が満載、好奇心を駆り立てられる楽しい仕掛けが豊富に組み込まれています。

スクロール・クリックなどユーザーのアクションでインタラクティブに変化するエフェクトは、ユーザーの関心を惹きつけ、多くを語るより強烈にブランドメッセージを届けます。

<  遊び心満載のウェブサイトは、多くを語るよりブランドメッセージを強烈に届けることに成功しています。>

サイト全体を通してシンプルな構成であるにもかかわらず、多くの情報を伝えることができる動画をうまく活用し、実力や実績を上手く伝えています。Awwwardsの「Site of the day」にも選出されるなど、国際的に高い評価を受けています。

 

Hifly  

世界中で航空機のウェットリース（Wet Lease）を展開する「Hifly」のウェブサイトは、さまざまな要素が統合され、HiFlyのブランド価値を強化する魅力的で記憶に残るウェブ体験を提供しています。

背景と前景の要素が異なる速度で動き、ウェブサイト全体に動的な深みを与えるパララックスエフェクトを効果的に活用。

ページスクロールは、セクションが滑らかに変化するスムーズなスクロールアニメーションや、ナビゲーションメニューが動的に表示されるインタラクティブメニューを採用するなど、さまざまなエフェクトが効果的に組み込まれています。

ヘッダー部分にナビゲーションメニューは設置せず、右上のボタンに集約させることで、シンプルでクリーンなUIを実現しています。

<会社の歴史を計測機で表現。ユーモアあふれる言葉選びと表現方法に脱帽します。>

ウェブサイト全体をシンプルに保つことはユーザーの視点を集約させ、ブランドメッセージを明確に伝える効果があります。

複雑なウェットリースというサービスを説明する「Serviceページ」や、通常は長くなりがちな「Company Historyページ」などは、１スクロールに収めされるほどシンプルな構成とウィットに富んだ言葉や表現で、簡潔明瞭に表現されています。

このウェブサイトで使用されている「言語表現」は、非常に学びの多い言葉選びがなされています。英語をビジネスで活用されている方でも英語学習者であっても、真似したい言語表現や構成がたくさん詰め込まれているように感じます。ぜひ、時間をとってゆっくり眺めてみてください。

Media Center ページでは、動画や画像などを効果的に組み込むことで、信頼が求められる航空業界における実績を的確にユーザーに伝えるなど、美しくシンプルな構成にも関わらず、しっかりと企業の魅力を伝えている秀逸なウェブサイトと言えるのではないでしょうか。

 

Mana Yerba Mate  

「Mana Yerba Mate」 はカナダ・モントリオールを拠点にオーガニックのマテ茶の製造・販売を行っている企業です。

「オーガニック」を売りにする場合、ブランドイメージに「ナチュラル・健康的・安心」といった側面を採用する企業が多いなか、マナのウェブサイトは鮮やかな色使い・大胆なアニメーション・カラフルでダイナミックなグラフィックスタイルなどを全面に押し出しています。

ウェブサイトはさまざまなエフェクトが巧に組み込まれており、エネルギッシュで健康的なイメージを効果的に伝えています。

特に、製品紹介にはページをスクロールすることでオブジェクトが動くインタラクティブな「3Dグラフィック」を採用。自社製品を3Dで表現することで、ユーザーは異なる確度から製品の詳細を見ることができ、質感やデザインを直感的に理解することができるようになります。グラフィックスを使って商品を伝えることで、製品の抽象度を上げ、オンラインショッピング体験の向上に繋げています。

また、ウェブサイト全体にはManaのエコフレンドリーなブランドメッセージが強調されており、持続可能な製品と環境への配慮を示すコンテンツを組み込み、若者世代の価値観にド直球に訴求しています。

自社のターゲットを明確にし、直球勝負で独自の世界観と価値を提案。ブランドの魅力を最大限に引き出すデザイン性の高い優れたウェブサイトと言えるでしょう。

<ゲームもできます>

 

REFIRE（重塑集団）

中国の商用車向けの水素燃料電池技術のグローバルサプライヤーである「REFIRE」は、近年TOYOTAとも共同開発などを行うなど世界中で注目されている企業です。REFIREのウェブサイトはBtoB向けウェブサイトであるにもかかわらず、まるでSaas系のウェブサイトのようなクリーンでプロフェッショナルなデザインが特徴です。

トップページにはダイナミックな動画や製品や技術に関する高品質な画像が使用され、ブランドの先進性を強調し、ユーザーの興味を惹きつけています。また、直感的なナビゲーションと明確に整理されたサイト構造により、ユーザーは必要な情報へストレスなくスムーズにアクセスできる設計になっています。

さらに、サイト全体で持続可能なエネルギーソリューションに対するコミットメントが強調されており、企業の使命とビジョンが明確に伝わるようデザインされています👏

スクロールごとに変化する3Dアニメーションやホバーエフェクトがウェブサイト全体に動的な動きを与え、没入感を高めてユーザーの離脱を防ぎます。また、これらのエフェクトを効果的に組み合わせることで、企業の技術的先進性を強調する効果を生み出しています。

通常では複雑になりがちなBtoB企業のウェブサイトですが、サイト全体を通して製品情報や企業情報が簡潔に整理されていることに加え、FAQセクションやお問い合わせフォーム、入力不要なダウンロード可能なコンテンツなど、ユーザーの疑問を解決できるコンテンツが充実。顧客の課題を解決できるような有益な情報を掲載することで、ウェブサイトを通じて顧客との信頼関係を構築する見事なウェブサイトと言えるでしょう。

 

TVZ Assali  

「TVZ Assali」はトラックやトレーラー、農耕機械といった大型用途に最適な固定ステアリングアクスルや半産業用サスペンションの製造を行っています。企業のパッションと専門知識を伝えるために設計されたウェブサイトは、業界でのブランド認知を高め、リードを生み出すための魅力的なBtoBウェブサイトです。

スクロール時に背景と前景が異なる速度で動くパララックスエフェクトを採用し、フェードイン/アウトアニメーションによりスクロールやページ遷移時の滑らかな動きを実現。また、多くのページで高品質な画像や動画背景によってユーザーに視覚的なインパクトを与え、動的な視覚体験を実現しています。

メニュー構造もシンプルかつ明確で、ナビゲーションメニューは右上に集約。情報量が多く複雑になりがちなBtoBサイトであるにも関わらず、製品情報や企業概要、サービス内容などが簡潔に整理されており、ユーザーが必要とする情報に迅速にアクセスできるサイト設計になっています。

明確なCTAを各所に配置することで、ユーザーのアクションを促す素晴らしいBtoBウェブサイトです。

 

Resn  

前回の記事でも紹介した「Resn」は、ブランドコミュニケーションのスペシャリストであり、高いデザイン力とテクノロジーによって素晴らしいユーザー体験を創造する総合的クリエイティブエージェンシーです。

Resnのウェブサイトは、メ「About・Works・Contact」の3つのメニューだけというシンプルなナビゲーションを採用し、直感的なUIデザインにより、目的の情報に素早くアクセスできる設計になっています。

ユーザーの操作に応じて変化する高度なインタラクティブな3Dグラフィックや洗練されたモーションデザイン、音響効果などを効果的に組み合わせることで、独自の世界観を表現した独創的なウェブサイトです。

近年アップデートされた Works ページでは、単に独自の世界観を押し出すだけでなく、クライアント企業の抱える課題からその解決方法を「フェーズ」に分けて丁寧に解説しています。さらに、高品質の画像や動画を多く含めた事例コンテンツは、多くを語らずともResnの素晴らし実績を証明する強力なコンテンツになっています。

遊び心満載のResnのウェブサイトは、非常に多彩なエフェクトを楽しむことが出来ます。

TOPページではマウスの左側を長押ししてみてください。グラフィックやアニメーションの効果を最大限に活かしたページに遷移し、複雑で不思議な視覚体験を楽しむことができます。さらに、PC画面でご覧になっている方は、横幅・上下の画面サイズを縮小した際のエフェクトも試してみてください。

※心臓の弱い方はご注意ください。また、音量は小さめをおススメします。

Resnの作品は、カンヌライオンズやウェイビー賞などこれまでに350を超える名誉ある賞を受賞しています。さらに、Resnのウェブサイトは、Awwwards の「エージェンシーオブイヤー」を２回、CSSデザインアワードでもエージェンシーオブザイヤーに選出されるなど、国際的な賞を数多く受賞しています。

 

制作事例

事例１：東武タワースカイツリー株式会社様

インバウンド需要が少しずつ戻りはじめたことで、“インバウンド回復に伴うサイト改修（英語、簡体字、繁体字、韓国語）”を依頼できる制作会社を探していた「東武タワースカイツリー」様。当社の親会社であるデジタル・アドバタイジング・コンソーシアム株式会社への相談をきっかけとして、「東京スカイツリー」公式ホームページの多言語サイト改修のパートナーとして選んでいただきました。

「東武タワースカイツリー」様の課題を海外ユーザー視点で積極的に模索し、依頼内容を検証したうえで、その解決策をご提案していき、お客様に満足いただけるソリューションの提供を実現。また、プロジェクト進行においては、優先順位を明確にご提案することで、短納期でのウェブサイト公開を実現。制作したサイトがお客様や社内で高い評価を得ることとなり、現在も多言語サイトに関する相談ができる“パートナー”としての関係を継続いただいています。

東武タワースカイツリー株式会社様の事例記事はこちらからご覧いただけます。

 

事例２：株式会社髙島屋様

インバウンド対策を強化するため“海外ユーザー/ネイティブ目線”での多言語サイト（英語、繁体字、簡体字、韓国語）を構築することができるウェブ制作会社を探していた「株式会社髙島屋」様から、直接お声がけしていただいた。その後、コンペを経てインフォキュービック・ジャパンをパートナーとして選んでいただき、発注に至りました。

グローバルトレンドを取り入れたウェブデザインを採用、海外ユーザーのアクセシビリティを高めるなど、訪日観光客が旅マエ・旅ナカ・旅アトに知りたい情報を調査・整理してページ構成、コンテンツに反映することで、UI/UXを向上を実現しました。

株式会社髙島屋様の事例記事はこちらからご覧いただけます。

 

さいごに

コンバージョン数を増やし、ビジネス上の成果を出すために、多言語ウェブサイトの設計やデザインは重要な役割を果たします。「独自のデザイン性」にこだわった最先端のグローバルサイトを見れば、きっと何かの想像力を掻き立て、インスピレーションを生み出してくれるのではないでしょうか？

ここまで先鋭的・奇抜でなくても、海外ユーザーの心に響く多言語サイトの制作をご検討中でしたら、是非とも私たちインフォキュービック・ジャパンお気軽にご相談ください。