今年の最新トレンド採用!参考にしたい美しいWebデザイン40選まとめ

latestweb2015january-top

 

2016年のウェブデザイントレンドの参考にしたい、美しい最新Webサイトをまとめています。今後のデザイン制作のインスピレーションにいかがでしょう。

 

 

動画やフルスクリーンスライダー、ゲーム形式のコンテンツなどを駆使した、新しいウェブサイトの魅せ方を提案したサイトが多く目立ちます。どのような素敵なデザインが、今年も登場するのかこれから楽しみです。

 

 

 

詳細は以下から。

 

 

 

【最新版】2016年のトレンドを押さえた、参考にしたいWebデザイン40選

 

Molamil

ページを開いた瞬間、滑らかなアニメーションに合わせて、ステーショナリーグッズがスライドインします。

molamil

 

 

 

Year in Music

美しいグラデーションカラーを利用したデザインに、フルスクリーンで切り替わるスライダーが素敵です。

year-in-music

 

 

 

Keep Portland Weird

ユニークなイラストを利用して、オレゴン州ポートランドの問題を、アルファベット順に紹介しています。

keep-porland-weird

 

 

 

Le Mugs

サイトをスクロールすることで、美味しそうな料理がレイアウトされた、目で楽しむことができるデザイン。

envie-del-sushi

 

 

 

Kekselias

グリッドを意識したシンプルなレイアウトに、スクロールすることでコンテンツがふわりと出現するエフェクトも。

kekselias

 

 

 

Pop Corn Garage

映しだされるガレージから、全部で66個の映画に関するモノを見つけ、映画タイトルを入力して進めるゲーム。あなたはいくつ分かりますか。

popcorn-garage

 

 

 

Bacon Club House

mcdolands-fresh-bacon

 

 

 

How I Fight

全面水彩ペイントで統一した、今年のデザイントレンドのひとつを採用し、マウス操作で自由にカンバスを移動することができます。

fight-cancer

 

 

 

Recollection

ページに表示されたボタンをクリックすると、ロゴがアニメーション付きで出現します。この他にもインタラクティブすぎるコンテンツが満載。

recollection

 

 

 

Ginventory

ビンテージなイラストに、アクセントカラーの黄色で統一したシンプルなデザイン。

ginventory

 

 

 

Kurokawa Wonderland

熊本県にある黒川温泉を舞台に、マウス操作によるインタラクティブなWeb体験を実現しています。

kurokawa-wonderland

 

 

 

The Forecaster

新聞のようなレイアウトに、ピンク色の背景が印象的なデザイン。文字量の多いコンテンツの魅せ方に。

the-forecaster

 

 

 

Found Them First

2色の鮮やかな配色が印象的な作品で、煙がでるような切り替えエフェクトも素敵です。

found-them-first2

 

 

 

Uncharted Waters

マウスホバーでビデオ動画が開始する、インタラクティブな仕掛けに、ミニマルなUIデザインを採用しています。

uncharted-waters

 

 

 

Christmas Express

季節を終わってしまいましたが、アイデアが素敵だったのでメモ。書いた手紙をサンタクロースに届けてくれます。

christmas-express

 

 

 

Quechua

アウトドアメーカーらしく、5つのロケーションをバックに、商品紹介を行うインタラクティブなデザイン。

quechua

 

 

 

Son of Gallipoli

まるで映画のようなドキュメンタリー仕立てのコンテンツは、思わずじっくり見たくなる、ゴージャスなインターフェースも素敵。

the-great-war

 

 

 

I Am Sacha

ビデオ動画シリーズの新しい魅せ方で、思わず色々なコンテンツを見たくなるインタラクティブな体験を。

i-am-sacha

 

 

 

Si Le Soleli

レイアウトを真ん中で分割し、スクロールすることで反対方向にスライドする、素敵なアニメーションを実装しています。

les-dauphins

 

 

 

Hoover Mason

工場での歴史を音声と動画で魅せるコンテンツは、グリッドレイアウトを採用しています。

hoover-mason-trestle

 

 

 

Anotherpony

wild-beasts

 

 

 

This Also

Googleの新ロゴ作成プロジェクトにも参加したデザインオフィスで、ビデオ動画をフルスクリーンで活用しています。

this-also-google

 

 

 

Acme

自社の強みをダイナミックなアニメーションとタイポグラフィーで魅せる、コーポレートサイト。

we-pioneer-the-future

 

 

 

GilleInterimManagement

 

 

 

the-big-short

 

 

 

How Much is Your Spare Time Worth

7問のイラストを使った質問に答えると、自分の1時間あたりの価格を調べてくれるゲーム。

spare-time-worthing

 

 

 

34.GE

対象年齢34歳以上という、なんとも渋いサイトですが、シンプルで統一感のあるイラストが美しいデザイン。

west-glory-farmer

 

 

 

PopUpFolio

配色を統一したかわいいイラストに、ブランド名だけを記載した、シンプルで効果的な組み合わせ。

popupfolio

 

 

 

Sweet Punk

今年のデザイントレンドにも挙げられている、ビデオ動画をフルスクリーン背景に利用しています。

sweat-punk

 

 

 

Crudo

野菜や果物と一緒に、文字テキストをブレンドしたエフェクトがインパクトのある、イメージスライダーを実装しています。

crudo-web

 

 

 

Talk PR

GIFアニメーションを利用したブランドロゴが魅力的な、タイポグラフィーを基本としたミニマルスタイル。

talk-pr-web

 

 

 

Bold

写真に文字テキストを加えることができるモバイルアプリで、ブランドカラーを反映したフラットスタイル。

bold-app

 

 

Sonho de Valsa

think-love

 

 

 

Hack Academy

hack-academy

 

 

 

Ariel Beninca

ナビメニューや3Dエフェクト、アニメーションなどさまざまな仕掛けを盛り込んだ、体験型ウェブデザイン。

ariel-creative

 

 

 

Greenwood Campbell

2015年に話題となった、ポリゴンスタイルと多重露光エフェクトを組み合わせたクリエイティブな作品。

greenwood-campbell

 

 

 

Dona Veu 1325

コンテンツがカーテン式に切り替わることで、フルスクリーンを最大限に活かした作品。

donaveu

 

 

 

IMJ バーチャル弓はじめ

鎌倉時代の旧正月から行われている、一年の安泰を願う行事「弓はじめ」を、入力した住所でバーチャル体験することができます。

imj

 

 

先日公開した2016年のWebデザイントレンドにも目を向けながら、新しいアイデアを形にしてみてはいかがでしょう。

trend2016-top

 

 

 

サムネイル@ : Mambo Mambo | Branding, web, imprime