進化するWebデザイン!参考用トレンド満載のウェブサイト30個まとめ 2015年9月度

latestwebsite2015sep-top

 

ウェブサイトのデザイン制作に悩んだとき、参考にしたい最新Webデザインをまとめました。美しいレイアウトやグラフィックデザインはもちろん、配色や良質なデザインコンセプトを学んでみてはいかがでしょう。

 

 

2015年のWebデザイントレンドを盛り込み、さまざまな仕掛けやアニメーションでユーザーを楽しませてくれ、キラーコンテンツとなるウェブページの作成にどうぞ。

 

 

 

詳細は以下から。

 

 

 

進化するWebデザイン!参考にしたいトレンド満載のウェブサイトまとめ

 

Kikk – Fold / Unfold

ゴールドとピンク色の組み合わせが新鮮で、高級感を演出できるイベント告知ページ。オレンジ色とピン色の淡いグラデーションカラーを背景に、繊細なドロップシャドウとアニメーションを加えています。fold-festival-2015

 

 

 

 

Amy – Official Movie Site

若くして謎の死を遂げた、世界の歌姫Amy Winehouseをテーマにした映画の公式ページ。フルスクリーン画面に動画を使った、インタラクティブなサイトデザイン。※ 音がでます、ご注意ください。

amy-movie

 

 

 

Compliments

グリッドラインを基準に、タイル状に商品コンテンツが展開された、インテリア向けオンラインショップ。ロゴや商品名に使われている太字フォントが、サイトのデザイン性、コンセプトをうまく揃えています。

compliments

 

 

 

B&O Play

インテリア家具のオンラインサイトで、カード状にコンテンツを並べ、余白スペースをたっぷり確保することで、サムネイル画像を引き立てます。使用されている細字フォントも、ミニマルな印象のアクセントに。

beoplay-a6

 

 

 

McWhopper

バーガーキングがマクドナルドに、1日限りのコラボレーションを提案した、縦に長いイラストとアニメーションで表現された特設ページ。残念ながら今回のコラボは実現ならず。

mcwooper

 

 

 

Creative Cruise 2015

画面中央に表示されるボートを、左右にドラッグすることで、イラストで描かれたオランダの街並みを観光できます。

creative-cruise

 

 

 

Get the New eBay App

サイトで販売されている商品を、背景スクリーン全体に散りばめ、スクロールするたびにアニメーションを加えた、ミニマルスタイルの特設ページ。

ebay

 

 

 

Do You Know YouTube from A to Z?

10周年を記念したYouTube特設ページ。ドラッグで操作する、YouTubeにまつわるクイズが出題されます。

10year-youtube

 

 

 

Ghostly Ferns

ニューヨークにあるデザイン事務所で、太めのアウトラインにスタッフのユニークな顔写真などが、ブランディングにも役立っている好例。

ghostly-ferns

 

 

 

Taste Rewind – Spotify

コンテンツの切り替えにユニークなアニメーションを採用、楽しげな配色も参考にしたいサイトデザイン。

taste-rewind

 

 

 

Hi-Res! London

プカプカとシャボン玉が浮かんだ背景に、多彩なアニメーションを仕掛けたコンテンツが美しいサイト。

hires

 

 

 

Mikiya Kobayashi

日本人デザイナー、小林幹也さんのポートフォリオサイト。ページを遷移するたびに、滑らかで気持ちの良いアニメーションが随所に盛り込まれています。

mikiya-kobayashi

 

 

 

Leg Work

ユニークなコラージュアートを利用したウェブサイトで、右端に配置されたアイコンにホバーすると、ナビメニューが表示される仕組みとなっています。

leg-work

 

 

 

The Tuck Effect

マウスを下にドラッグして、シャツをズボンに入れるとコンテンツが開始される、ユニークなイラストを使ったTシャツのプロモーションサイト。

the-tuck-effect

 

 

 

Junko’s Story

広島原爆の体験者、森本さんが語る、その当時の記憶と原爆の恐ろしさを伝えるコンテンツ。ページを捲るように、コンテンツがスムーズに進みます。

junkos-story

 

 

 

Timeshift 165

各コンテンツをスライド式に表示し、右側のボタンをクリックすることで、コンテンツ全体を一気に確認できる機能も。

Timeshift165

 

 

 

Signes du Quotidien

ページ四方に散らばった4つのサークルを、中心の四角形にドラッグすることで、各コンテンツが展開されます。

signes-de-quotidien

 

 

 

Tomorrowland

最新Disney映画の未来を感じる公式ホームページ。ドラッグすることで行き先を自由に決定でき、映画のコンセプトに自然と親しむことができます。Chromeブラウザ推奨。

tomorrowland

 

 

 

Quechua

シーズンごとのルックブックを、インタラクティブな表現で描いた、アウトドアブランドのサイトデザイン。商品の良さをよりうまく伝える、コンテンツのデザインコンセプトにも着目です。

quechua

 

 

 

The DNA Project

複雑なデータをフルスクリーン全画面表示でビジュアル化したサイト。左上メニューボタンに、面白いアニメーションエフェクトも。

The-DNA-Project

 

 

 

The University of Sydney 360° Tour

高画質なビデオ動画を利用して、オーストラリアにある、シドニー大学のキャンパスをまるで歩いているような、バーチャル体験を提供しています。

university-of-sydney

 

 

 

Cameo – Video Edito & Movie Maker for iOS

スクロールすることで、フルスクリーン表示されていた画像が伸縮し、iPhoneディスプレイに吸い込まれるようなエフェクトがユニーク。

vimeo

 

 

 

Christopher Ireland

ほんのわずかに動く、濡れた髪の毛の女性が映り、まるでGIFアニメーションのようなエフェクトが不思議な作品。

christopher-ireland

 

 

 

Habib Fadel

カラフルなアクリル絵の具でペイントれた作品作品の上に、同色で隠すように配置されたブランド名。クリックすると、アニメーション付きでナビメニューが展開します。

habibfadel

 

 

 

Leap Second

ありふれた日常の一コマをみじかい動画で残し、お祝いをするというコンセプトがユニーク。フルスクリーンのタイル状に配置されたサムネイルを、自由にクリックできます。

leap--second

 

 

 

H6 Rapha Edition

商品プロダクトカラーでもあるピンク色で、サイトデザインも統一することで、より分かりやすくコンセプトを伝えることができる、ヘッドフォン・スピーカーのWebデザイン。

Beoplay-H6-Rapha-Edition-by-Spring-Summer

 

 

 

88&90 Lex Ave.

使用されているUIインターフェースやロゴ、イラストレーションなどの配色を統一することで、写真イメージをより魅力的にするだけでなく、コンセプトをシンプルに、そして的確に伝えることができます。

88-and-90

 

 

参照元リンク : Anniversay of the Warsaw Rising