2015年最新スタイルから学ぶ!確認しておきたいウェブデザイン32個まとめ

latestweb2015mar-top

 

配色やレイアウト、アニメーションなどデザイン制作の参考にしたい、2015年の最新ウェブデザインをまとめてご紹介します。

 

 

フラットスタイルやミニマルスタイルはもちろん、面白いアニメーションなどを加えたり、フルスクリーン動画を採用したりと、2015年のデザイントレンドを意識したサイトを中心にまとめています。

 

 

 

詳細は以下から。

 

 

 

2015年最新スタイルから学ぶ!確認しておきたいウェブデザイン32個まとめ

 

Stupid Studios

斜めにはいったスリットをつかった、印象的なアニメーションエフェクトが素敵なサイト。ヘッダー用スライダーやナビメニューにもエフェクトが採用されています。

stupid-design

 

 

 

Jackroo Caravans

レトロスタイルで統一された、キャンピングカーの紹介、販売サイト。

jackroo

 

 

 

Hochburg

手書きされた無造作なタイポグラフィー、フォントが印象的なシングルページ。

hochburg

 

 

 

Be More Human

フルスクリーンイメージを採用したコンテンツは、切り替わるたびに筆ブラシのような質感がアニメーションで表現されます。

reebok-bemore-human

 

 

 

Coulee Creative

スタッフ全員が登場するループ動画をトップページに採用した、クリエイティブなデザイン事務所の公式サイト。

coulee-creative

 

 

 

Kingsman: The Secret Service

映画プロモーション用サイトで、モバイル端末とシンクロ同期することで、新しいウェブ体験を実現しています。

kingsman-knight

 

 

 

The Molamil Christmas Endorser

アイコンを用いたモノグラムデザインに、ピンク色をアクセントカラーに採用したサイト。

molamila

 

 

 

Teamgeek

ロゴにマウスをホバーすると、まとまった粒子が飛び散っていくダイナミックなエフェクトを採用。

teamgeek

 

 

 

PWC

「BEGIN」ボタンを押し、アイテムを選びスクロールすることで、イラストアニメーションが進んでいきます。

pwc-travel-baggage

 

 

 

Booking.com

時差に応じて世界中のさまざまな都市の情報を、インタラクティブに魅せます。

booking-travel-sydney

 

 

 

The Chedi

フルスクリーン動画を背景にしたテキストは、効果的にメッセージをユーザーに伝えることができそうです。

the-chedi

 

 

 

Nixon.com

モバイル端末でもデスクトップでも快適にページを閲覧でき、読み込み速度を改善する工夫も。

nixon-watch

 

 

 

Hansen

プロダクト家具の歴史や作り方などストーリー性を重視したコンテンツが魅力的。

hansen

 

 

 

Helbak Ceramic

プロダクト商品を並べただけのミニマルサイトで、商品を分かりやすく、シンプルに紹介したショッピング機能も素敵。

helbak

 

 

 

Hatch

デザイン会社のポートフォリオサイトで、モバイル端末では読み込み速度を考慮したコンテンツレイアウトがされています。

hatch

 

 

 

Club des Chefs

レスポンシブに対応しながら、スクリーン幅に応じて美しくレイアウトが変化します。

club-des-chefs

 

 

 

Studio Lovelock

パステル配色のカラーパレットに、アース色の背景がやさしい印象を演出したサイト。

studio-lovelock

 

 

 

VO2 Group

スクロールすると三角や丸型のシェイプがモーフィング変化する、ユニークなテクニックが採用されています。

vo2-shared-amubitons

 

 

 

The Marmalade

コンテンツを1ページにまとめたシンプルなレイアウトで、エレガントな配色がブランドイメージをアップします。

the-marmalade

 

 

 

Justbean

サイトオーナーが好きなコーヒーショップを巡ったり、コーヒーカンファレンスなどに出席し、より美味しいコーヒーを飲むために作成したサイトだそうです。

justbean

 

 

 

Bell Epoque

コンテンツが切り替わるたびに、ロゴがぼんやりと出現するアニメーションがユニーク。

bell-epoque

 

 

 

The Reveal – Issue 4

スクロールすることで、商品の車をより魅力的にプロモーション、説明するストーリー性たっぷりなサイト。

the-reveal-lexus-double-act

 

 

 

Melanie Daveid

SVGアニメーションを採用し、コンテンツ毎にユニークなエフェクトを加え、ユーザーを飽きさせない工夫がされています。

melanie-daveid1

 

 

 

Dream Yourself

スクロールする度に、トップ画面に巨大に配置されたタイポグラフィーの背景がシャッフルされる仕組み。

beadreamer

 

 

 

Mahalo Marcus Mariota

スクロールを続けることで、異なるコンテンツへ自動的に遷移するユニークなテクニック。

marcus-mariota

 

 

 

DNB Boligreisen

マウスをスクロールすることで、ストーリーが始まるまるで映画のようなエフェクトを採用したサイト。

opening-brain

 

 

 

Vladimir Garnele

クリエイティブでオリジナル性あふれるデザインを採用した、フリーランスデザイナーのポートフォリオ。

vladimir

 

 

 

Lounge Lizard

フルスクリーンヘッダーを採用したサイトで、いつでも問い合わせができるフォームが右下の固定ボタンを押すと展開されます。

lounge-lizard

 

 

 

VOLK

ページ読み込みと同時に、見出しデザインがズームアップするシングルページ。

volk

 

 

 

Black Pizza

真っ黒なピザをヒーローヘッダーに使うことで、インパクトのあるビジュアルデザインを表現しています。

black-pizza

 

 

 

Mix Event

スクロールすることでコンテンツが上下左右に、アニメーション付きで集まってくる仕掛けを施したサイト。

mix-event

 

 

サムネイル@ : User Experience Design – Product Design – Digital Telephathy