Webが進化中!参考にしたい話題の最新ウェブデザイン30個まとめ

latestweb2019feb

 

デザイン制作のインスピレーションや参考にしたい、2019年に入って注目を集めている、最新ウェブサイトデザイン30個をまとめています。

 

落ち着いた配色や、美しいセリフ書体、繊細なアニメーション、マイクロインタラクションなどを利用したサイトが増えています。クリエイティブでユニークな最新ウェブデザインを体験してみてはいかがでしょう。

 

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

2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】

 

 

Webが進化中!参考にしたい注目の最新ウェブデザインまとめ

 

Tao Tajima

スクロールの強弱に応じて、3Dモーフィングアニメーション付きでスライダーがヌルヌルと動く、WebGPLの技術を見事に利用したポートフォリオサイト。ページ遷移の滑らかさが、世界でも話題となっています

tao-tajima

 

 

 

Kitamura Makura

まくらのキタムラが、90年以上の歴史を英語で紹介したページ。目を引くテキストエフェクトや、スクロールに応じたアニメーション、インタラクティブなレイアウトなど、トレンドも意識したデザイン。

kitamura-makura

 

 

 

Gyre

文字テキストの表示や背景デザイン、ページ遷移など、マイクロインタラクションをさまざまなパーツに採用することで、視線をうまく誘導できるテクニック。

gyre

 

 

 

66 Nord

北極圏から約61km南にある、北緯66度をテーマにした旅行を提供しているユニークなウェブサイト。背景の山と雲、文字テキストをつかった、ページ後半のパララックスエフェクトが素敵。

5c46d48c92ab6

 

 

 

Demisol

ルーマニアのあるコーワーキングスペースの公式サイト。モダンレトロなカラフルな配色に、太字サンセリフと余白たっぷりなレイアウトが印象的。神経衰弱などのゲームを通じて、利用ルールをうまく表現しています。

13_demisol

 

 

 

Okalpha

南アフリカ共和国、ケープタウンを拠点としたデザイン集団で、カラフルでシンプルなデザインが好印象で、随所にスクロールエフェクトが散りばめられています。

okalpha

 

 

 

Talia Collins

海に捨てられたフィッシング用の網やプラスチックボトルでできた生地を使用するなど、海洋問題とファッションを融合させたコンセプト で、女性向けスイムウエアを販売しているサイト。

06_taliacollins

 

 

 

お茶のはまだ

水面がゆらゆらと揺れるようなアニメーションエフェクトが、背景やサムネイル画像などに採用した、鹿児島県南九州市の銘茶「知覧茶」の販売を行うウェブサイト。

ocha-hamada

 

 

 

Editions

各サムネイルをクリックすると、スルスルと上下にページがアニメーションしながら遷移させるなど、エレガントさが販売している作品ともマッチしたサイト。使用しているセリフフォントも◎。

editions

 

 

 

Epicurrence

アメリカ、コロラド州にてスキーやスノーボードを楽しみながら、2日間のグループディスカッションなどを行うカンファレンス用ランディングページ。

epicurrence

 

 

 

Radical Everything

スクロールに応じたパララックスエフェクトやカスタムされたマウスカーソルが特徴的で、シンプルなレイアウトとアウトライン文字が目を引きます。

radicaleverything

 

 

 

Microsoft | By the Numbers

Microsoft で開発が行われている技術などについて、「数字」でまとめたランディングページ。「世界でもっとも静かな場所」のギネス記録(-20.6 db)も保持しているそう。

microsoft-numbers

 

 

 

Synerghetic

むらさき色をベースにしたカラフルな配色で、サンセリフとセリフ書体を見事に組み合わせた参考サンプル例として。

synerghetic

 

 

 

Rezo Zero

複数行で表示されるサンセリフ書体に、グリッドを無視したクリエイティブなレイアウト、美しいアニメーションなどミニマルスタイルを組み合わせた作品。

rezo-zero

 

 

 

Unproductive Social Year

1年間に制作した作品をユニークな方法で魅せるポートフォリオで、水が流れるようなページ遷移や、アニメーションエフェクトが美しい作品。Aboutページの背景にも注目。

unproductive-social-year

 

 

 

Atelier Richelieu

atelierrichelieu

 

 

 

Abashiri Hokkaido What-to-do Where-to-go

北海道網走の良さを伝えるガイドのJunkoさんが、外国人向けに英語でサービスを展開するウェブサイト。

ahww

 

 

 

よかよか市場 熊モットー

九州産、主に熊本産のお野菜を販売しているサイトで、親しみやすくわかりやすいデザインが特長。

yokayoka-kumamotto

 

 

 

In Focus

あっと驚くような多様なデジタル表現を得意とした、日本のデザイン制作会社で、なめらかで引き込まれるようなページ遷移には注目です。

in-focus-1

 

 

 

Snoop Dogg | Dogstudio

Spaceキーで懐中電灯を照らし、犬を探すオンラインゲーム。

snoop-dogg

 

 

 

Victor Works

閲覧しているパソコンに合わせて、NormalとHigh Performanceを選択させるなど、デジタルテクノロジーを最大限に魅せています。ページの読み込みに多少時間がかかります。

victor-works

 

 

 

Addidas Yung

まるで90年代、インターネット初期の頃のような奇抜なデザインが特長で、あくまでもノスタルジックなレトロ感で統一されています。

addidas-yung

 

 

 

Adrien Laurent

マウス長押しでページを読み込み、見事なスクロールアニメーションで、コンテンツに注目を集めるテクニックが素敵なポートフォリオ。

adrien-laurent-portfolio

 

 

 

Quiz Randstad

5c387dd943bdd

 

 

 

Cure

美しい画像の重なりを見事に表現したパララックスエフェクトに、2019年に注目されているセリフ書体と手書き文字の組み合わせなど、エレガントで高級感のあるデザイン。

cure

 

 

 

Everest

マウスを押しながら上下にスクロールすることで、各コンテンツを選択できる、インタラクティブなレイアウト。スムーズなページ遷移エフェクトも素敵です。

everest

 

 

 

Gold Kant Interior

画面を縦半分に分割したレイアウトで、スクロールすると画像のみパララックスエフェクトを採用したポートフォリオサイト。

goldkant-interior

 

 

 

Next Level Fairs

next-level-fairs

 

 

 

Kalfire

暖炉の販売を行うサイトで、薪が燃えている様子を、背景全体に動画を使うことで、効果的に表現したデザイン。

04_kalfire

 

 

 

Twenty One Pilots

ミュージックビデオを見ながら、マウスで視点をグリグリと変えながら、5つのシンボルマークを見つけてクリックしていく、体験型ウェブサイト。

twenty-one-pilots

 

セリフ書体で決める!商用可能なフリーフォント素材60個まとめ

2019年のフォントはこれで決まり!トレンド対応の無料フリーフォント厳選60個まとめ

 

サムネイル@ : お茶のはまだ