Webの進化が止まらない!参考にしたい最新ウェブデザイン36個まとめ

konoradiogayabai

 

従来のありがちなウェブサイトではなく、アイデアや工夫を凝らした、デザイン制作の参考にしたい最新ウェブデザイン36個をまとめています。

 

ストーリーテリング手法やなめらかなアニメーション、美しい配色やセリフ書体を中心としたフォント選びなど、2019年に注目されているデザイントレンドを盛り込んだサイトを中心に揃えています。

 

サムネイルをクリックすることで参照元で移動できるので、ぜひ一度ウェブサイトを開いて、クリエティブな面白最新ウェブデザインを体験してみましょう。

 

 

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

 

Rally

制作実績を一覧にしたポートフォリオサイトで、アクセントになっている立体的なリボンエフェクトが展開しながら、視線をうまく誘導しながら次のコンテンツへ進みます。

rally-1

 

 

 

Oranje Bitter Festival 2019

オランダで今月開催されるフェスのランディングページで、ページスクロール似合わせて万華鏡のようなエフェクトを実現しています。

oranjebitter-festival

 

 

 

Ultranoir

マウス長押しでページが開始され、画面全体が歪んだようなスライダーエフェクトを実装したポートフォリオサイト。

ultranoir

 

 

 

5s

ユニークな配色とアニメーション効果が参考になるポートフォリオサイトで、各コンテンツに表示されているGIFや動画が目を引くデザイン。

5s

 

 

 

TAGV

タイポグラフィーを中心としたスッキリとレイアウトに、文字と写真を重ねたレイアウトやアニメーションなどをふんだんに盛り込んだウェブサイト。

tagv

 

 

 

Where is Poland?

ポーランドの歴史をストーリーテリング仕立てで進めながら学ぶインタラクティブサイト。

where-is-poland
 
 

 

 

Maxim Shkret

WebGLを使った画面全体が歪んだようなエフェクトが素敵で、マウスで表示されるオブジェクトを360度自由に回転させ、JPEG画像として有料ダウンロードできる仕組み。

max-shkret-artist-portfolio

 

 

 

Momotaro

アートディレクションやウェブデザインを手がける日本人デザイナーのポートフォリオサイトで、カスタムマウスカーソルとアニメーションを利用することで、うまく過去実績に遷移していきます。

momotaro

 

 

 

エス・グルーヴ

レイアウトと配色が印象的な新卒採用エントリーページには、実際に働いているショップスタッフやストアマネージャーの先輩によるインタビューを公開しています。

s-groove

 

 

 

村山人形店

お雛様や五月人形など節句人形を作成している会社で、わかりやすい動画とイメージに合った書体選びがトレンディーな作品。

murayama-doll

 

 

 

共栄フード株式会社

パン粉ができるまでをわかりやすい動画で伝え、ページをスクロールすることでパン粉が宙を舞うユニークなエフェクトも。

kyoei-foods

 

 

 

うきはフィルムコミッション

映画のロケ誘致や撮影のサポート、エキストラ募集などを行う、福岡県うきは市の面白い取り組み。

ukiha-film-collection

 

 

 

Obachan

カスタムマウスカーソルや画像ホバーエフェクトなどを加えることで、シンプルながらオリジナル性の高いショッピングサイトに仕上げています。

obachan

 

 

 

Nomadic Tribe

英語ナレーション付きで進んでいく、ステーリーテリングの手法を取り入れた、触れて楽しむインタラクティブなウェブサイト。マウスドラッグすることで、きれいな花を野原に咲かせることができます。

nomadic-tribe

 

 

 

Olouen

淡いパステルカラーの配色と、高級感のあるセリフ書体、美しいイメージ画像などどれもブランディングにマッチしたエレガントなつくり。

olivier-ouendeno

 

 

 

Questions in the Sky

十字キーで飛行機を操作しながら、「パイロットはなぜ二人必要?」など、空に関する素朴な疑問や質問に答えていきます。

questions-in-the-sky

 

 

 

Sabcomeed

ページ全体に配置された植物のイラストをマウスカーソルで探りながら進める、ストーリーテリング手法のランディングページ。

sabcomeed

 

 

Stanley Kubrick

「2001年宇宙の旅」などでも知られるスタンリー・キューブリック監督の90歳をお祝いして、これまでの実績をタイムライン別にまとめたランディングページ。

stanley-kubrick

 

 

 

Sterling

各コンテンツに移動することで、立体的に並んだ球型グラデーションボールの配置が移動したり、ポリゴンスタイルを多用した商品ページなど、SF感満載なウェブサイト。

strerling

 

 

 

Superrb

ストーリーテリングを得意としたデザイン会社で、このページもスクロールに合わせて、さまざまなアニメーションやイラストを効果的に活用しています。

superrb

 

 

 

Tilt

ダイナミックな動きを演出しながら、制作実績を紹介するポートフォリオサイトで、スクロールに応じたアニメーションや余白スペースのとり方など、オーディエンスの注目をうまく集める工夫が。

tilt

 

 

 

Mogney

マウススクロールと連携してイラストがアニメーション付きでモーフィング変化していくなど、最後までページをスクロールしたくなる仕掛けも。

mogney-1

 

 

 

Miu Miu Twist

Spaceキーでジャンプしながら、表示される香水を重ねて月を目指す新感覚のゲーム。香水をきれいに重ねると、高得点につながります。

twist-the-game

 

 

 

Temporary Measures

こちらもページスクロールに合わせて、画像ファイルや文字テキストなどに細かいアニメーションを追加した、マイクロインタラクションが素敵なサイト。

temporary-measures

 

 

 

Basic Moves

アメリカのサンディエゴにあるデザイン会社で新社屋をスタイリッシュに紹介したサイト。マウス長押しでスタートです。

basic-moves

 

 

 

Bruege Once in Lifetime

古い絵画から飛び出した登場人物たちがに動きを加えたユニークなヒーローイメージ。

bruegel-once-in-lifetime

 

 

 

Cisternerne

ページスクロールに連動して、ぼんやりと文章テキストや画像が表示されるダーク系ウェブサイトの好例として。

cisternerne

 

 

 

Watson

グリッドを無視した縦横無尽で余白たっぷりなレイアウトに、なめらかな動きのアニメーションを加えることで、よりエレガントな雰囲気に。

watson-2

 

 

 

Decentraland

マウスカーソルに合わせて動く、没入感満点なファーストインプレッションが、ページを最後までスクロールしたくなります。

decentraland

 

 

 

Cominic Berzins

マウスの動きに合わせて背景色が変化するユニークな仕掛けで、タイポグラフィーのみのシンプルなレイアウトを魅力的に仕上げます。

dominic-berzins-1

 

 

 

Do What You Can’t

「できないことをしよう。」というコンセプトのうえ、映像を中心としたストーリー仕立てで進んでいくインタラクティブなウェブサイト。

dowhatyoucant-1

 

 

 

Florian Monfrini

ページをスクロールしていくと、画像が重なったり、サイズを変更しながら表示されるなど、アニメーションを効果的に利用した参考例。

florian-monfrni-1

 

 

 

Hinderer Wolff

さまざまなワインを販売しているウェブサイトで、ボトル全体を配置し、まるで手に取るように細かく説明を加えています。

hinderer-and-wolff

 

 

 

A Gauche De La Lune

ページスクロールに応じて左側のタイポグラフィーが連動して動くユニークな仕掛けで、はっきりとした太字フォントが印象的なデザイン。

a-gauche-de-la-lune

 

 

All Your Days

マウススクロールすると画像ファイルが重なったようなエフェクトが適用されており、シンプルながら注目を集める手法は参考になりそう。

allyourdays-1

 

 

デザイントレンドをおさらいしよう。

 

特に注目を集めているウェブデザインで話題のトレンドや動向を知っておけば、これから行うデザイン制作でもテクニックを活用できます。2018年から続くトレンドも多いので、一度確認しておくと良いでしょう。

 

これでばっちり!知っておきたいWebとUIデザインの人気トレンド17個まとめ【2019年版】

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

 

 

便利ツールでウェブ制作を爆速に!

 

デザインしたいウェブサイトのコンセプトやアイデアが決まったら、用途にあったウェブツールを利用してみましょう。制作時間の短縮につながるのはもちろん、面倒な作業もスムーズに行うことができます。

 

ウェブデザイン制作が爆速に!便利な最新オンラインツール47個まとめ

 

サムネイル@ : #このラジオがヤバい | NHK・民放連共同ラジオキャンペーン