Advertisement

best-of-webdesign-2018-pt1

 

当サイトでは、定期的に魅力的な最新ウェブサイトのデザインをまとめて紹介していますが、2018年は革新的なエフェクトやインタラクティブな仕掛けをつかったサイトが、たくさん登場しました。

 

サイトに動きを加えるマイクロインタラクションやホバーエフェクト、一般的なグリッドレイアウトを無視したり、マウスカーソルのカスタマイズ、画面が乱れた歪み(英: Distortion)エフェクトなど数多くのテクニックが公開された年でもありました。

 

今回は、2018年に集めた世界中のウェブサイトデザインの中から、特に印象的だった51個をまとめてご紹介します。いくつかのサイトは、これまでのまとめで見たことがあるかもしれません。

 

 

【総まとめ】2018年特に印象的だった世界のベストWebデザイン厳選51個

 

Narcos Mexico

番組のストーリーでもある、コカインの密輸ルートを作成、共有できる体験サイト。

narcos-mexico

 

 

 

Timeless Buses

さまざまな型のクラシック、ビンテージなバスを図解でまとめた図鑑のようなサイト。

timeless-buses

 

 

 

Analytics Projects

ブラウン管のテレビがざらついたようなエフェクトを、ページ全体に施し、 ユニークなアニメーションが随所に光るサイト。

analytica-projects

 

 

 

antoni

これまでに作成した魅力的な動画を、インタラクティブなアニメーション付きスライダーで披露したポートフォリオ。

antoni

 

 

 

Red Bull Racing Citrix

redbull-racing

 

 

 

Orano

超立体的なアニメーションエフェクトをページ全体に利用した、インタラクティブでSF映画のようなサイト。

orano

 

 

 

Asaro

ページの各コンテンツへと誘導するように、アニメーションをうまく利用した具体的な参考サンプルとして。ストーリーテリングを使ったサイト制作にいかがでしょう。

asaro

 

 

 

Barkli Gallery

barkli-gallery

 

 

 

Oollee

水を扱う会社らしく、水の流れを感じることができるアニメーションエフェクトが目を引くサイトデザイン。

oollee

 

 

 

Basic

アメリカはサンディエゴにあるデザインオフィスで、シンプルなレイアウト、配色のなかに、旗が立体的に揺れるようなエフェクトを実装した、スタイリッシュなサイト。

basic

 

 

 

Make Reign

アニメーション付きで変化するシンプルな文字テキストに、こちらもカスタムマウスカーソルを利用した作品。

makereign

 

 

 

Bornfight

bornfight

 

 

 

Ben Mingo

カスタムマウスカーソルで、イメージ画像を歪ませたDistortionエフェクトが実装されたポートフォリオサイト。

benmingo

 

 

 

Beyond Beauty

スライダーが動くたびに、画面全体をゆらゆらと漂うバブルが変化していくなど、触って楽しむ体験型サイト。

beyond-beauty-interior-1

 

 

 

Squarespace Circle

ページスクロールでコンテンツが切り替わるたびに、ユニークでスタイリッシュな動きを加えたミニマルなデザイン。

squarespace-circle

 

 

 

Digital Thinker Conference

オリジナルのイラストアニメーションを使った、シンプルで効果的なデザインで、パララックスエフェクトやグリッドを無視したレイアウトなど、2018年のデザイントレンドを見事に採用しています。

conference-awwwards

 

 

 

Mailchimp

最近ブランドイメージを一新し、賛否両論となっているサイト。独特のアート感で表現されたイラストは、好みが分かれそうなところですが、定評のあるサービスに変わりはありません。

mailchimp

 

 

 

Corn Studio

見やすいシンプルなレイアウトのポートフォリオサイトですが、随所にアニメーションが光る秀悦サイト。

corn-studio

 

 

 

Couro Azul

ページをスクロールするたびに、ぼんやりと文字や画像が浮き上がってくる、新しいアニメーションエフェクトが採用されたサイト。

couro-azul-website

 

 

 

Design Canada

2019年にかけて要注目の、ひらひらとした立体的で滑らかなアニメーションが素敵なサイト。

design-canada-website-design

 

 

 

Fazeta Producciones

画面をクリック、ページ遷移するたびに、派手なアニメーションエフェクトが最高で、まるでビデオゲームをしているような感覚に。

fazetaproducciones

 

 

 

Foosball Worldcup 18

foosball-interior

 

 

 

The History of Connection

赤い光る場所をドラッグしながらストーリーが進んでいく体験型ウェブサイト。

tim-the-history-of-connection

 

 

 

Hope Deco

スクロールに合わせてアルファベット文字がずれて表示されたり、、吸い込まれるようなアニメーションスライダーは必見。

hop-deco

 

 

 

Index Studio

ページ遷移のたびに、洗練されたアニメーションを加えることで、見事にブランドイメージと統一されているサイトデザイン。

index-studio

 

 

 

Endless Stories

まるでドキュメンタリー映画のようなつくりが印象的で、モハメド・アリの伝説の試合をたくさんの写真や動画で振り返ります。

endless-stories

 

 

 

World Champion Amsterdam

コンテンツごとにページ全体がアニメーション付きで切り替わる、ユニークで思わずスクロールしたくなる仕掛けが満載。

world-champion-amsterdam

 

 

 

Tao Tajima

コンテンツを切り替えるたびに、波のような滑らかなアニメーション付きで表示され、思わず他のコンテンツにも手が伸びます。

tao-tajima

 

 

 

Kenta Toshikura

今年を代表する歪みを使ったDistortionエフェクト付スライダーや、カスタムマウスカーソルなどを採用した、シンプルで魅力的なポートフォリオサイト。

kentatoshikura

 

 

 

Mitsugu Takahashi

美しく高級感たっぷりの文字テキストと、スムーズで滑らかなくアニメーションの組み合わせがスタイリッシュ。

mitsugu-takahashi

 

 

 

Julie Bonnemoy

オランダ、アムステルダムを拠点とするフリーランスデザイナーのポートフォリオ。滑らかなアニメーションを随所に散りばめた、触れて楽しむインタラクティブなサイトデザイン。

julie-bonnemoy

 

 

 

Maradji

maradji

 

 

 

Mutt Agency

下から上に変化するスライダーには、ほんのすこしだけのマイクロインタラクションを加えたことで、よりエレガントで洗練された雰囲気に。

muttagency

 

 

 

Nike React

シャボン玉や羽、バスケットボールなどのパーツを組み合わせて、自分だけのランナーをデザイン、カスタマイズできるNikeのサイト。

nikereact-interior

 

 

 

Not Pot

愉しくなるカラフルな配色カラーパレットを使い、ゆらゆらと波のような境界線も、ブランドイメージにピッタリです。

notpot

 

 

 

Olymp

olymp-post-image-inside

 

 

 

Odyssey Japan

山形、鳥取、佐賀、宮崎など日本の美しい田園風景が残る場所に、外国人の観光客に楽しんでもらおうというサービス。オリンピックに向けて、このようなサービスが増えるといいですね。

odysseyjapan-1

 

 

 

Play-Doh

粘土でつくったモンスターを作品として展示したギャラリーを、まるで歩き回っているような、不思議な感覚にさせてくれます。

playdoh-lagaleriedesespeces-1

 

 

 

Happier Village Toshiba

イラストを全面に利用したサイトデザインで、スクロールしながら隠されているコンテンツを表示する体験を中心としています。

happier-living-toshibaf

 

 

 

RTE Le Voyage Electrique

オリジナルのアニメーション付き地図をドラッグし、数字をクリックしていくことで、どのようなことが行われているのか体感的に学ぶことができる体験型ウェブサイト。

rte-le-voyage-electrique

 

 

 

World Draw

カンバスに描いたシェイプを元に色やサイズをカスタマイズし、他のユーザーが作成したデザインと一緒に「世界」を作っていく体験型ウェブサイト。

word-draw

 

 

 

Robin Mastromarino

画面が乱れているような歪みエフェクトを、フルスクリーンスライダーとして活用したポートフォリオサイト。

robin-mastromarino-interior

 

 

 

The Greatest Showman

煙の中に消えていくようなページ遷移エフェクトが印象的で、映画ストーリーのあらすじもスライダー形式でまとめられています。

the-greatest-showman

 

 

 

PopCorn TV

ページの読み込みに、古いテレビ番組をザッピングしているような砂嵐エフェクトを使用したユニークなサイト。

pocorn-tv

 

 

 

Roche Musique

roche-musique

 

 

 

Kikk Festival

ベルギーで行われた音楽フェスの公式サイトは、サイト全体にアニメーションを利用した、体験型のインタラクティブサイト。

kikk

 

 

 

Two Twenty Two

マウスに合わせて動かすことができるトップページ以外にも、ページをスクロールすると文字やコンテンツが滑るようなアニメーションエフェクトもポイント。

twotwentytwo

 

 

 

BryBry

クリック&ホールドでウェブサイトのストーリーを進めていく、体験型のクリエイティブなアイデア。

brybry

 

 

 

Sei Yamazaki

モノクロでまとめたシンプルなミニマルサイトは、絶妙な余白スペースのとり方やアニメーションの使用方法など、参考にしたい点がたっぷり。

sei-yamazaki

 

 

 

The School of Sustainability

物語を支えたるようにストーリーが進んでいく、まさに体験型のウェブサイト。地図上に表示されたポイントをクリックすると、それぞれのストーリーが動画や音声などを交えて開始されます。

school-fo-sustainability

 

 

 

The Shift

イメージスライダーと文字テキストが立体的に重なりながら、変化していくユニークでミニマルなサイト。

theshift

 

epicurrence
メッセージを伝えたり、商品を販売したり、ポートフォリオや企業サイト、ブログやランディングページなど、ウェブページには制作したデザイナーのアイデアがつまっています。ま
corona-sunset-festival
これからウェブサイト制作を行うひとが確認したい、創造力を高める最新ウェブデザインをまとめてご紹介します。さまざまな優れた実例サンプルを見ることで、デザイン案件のアイ
hypergiant
ウェブサイト制作におけるアイデア出しに困ったときに確認したい、最新ウェブデザインをまとめてご紹介します。 レイアウトや配色、書体などの見た目はもちろん
latestwebdesign2018april
さまざまな想いやメッセージ、コンセプトを伝えるウェブサイトは、クリエイティブなアイデアを表現するのに最適です。2018年のデザイントレンドを採用したり、最先端のウェ
heros
ウェブサイトのアイデア出しに困ったり、これからサイトを作成しようというときに参考にしたい、最新の良質ウェブデザインをまとめてご紹介します。 配色やレイ