Advertisement

latestwebdesign2015may-top

 

変化を続けるウェブデザインは、すこし前まで人気だったフラットスタイルから少しずつ、新しいスタイルへと移ってきているようです。コンテンツレイアウトなどのデザイン面だけでなく、アニメーションを利用し、インタラクティブな動きを取り入れた新スタイル採用のウェブサイトを、今回はまとめて確認してみましょう。

 

 

 

詳細は以下から。

 

 

 

ワンランク上の仕上がりを目指そう!参考にしたい新作ウェブデザインまとめ

 

ThinkBlink

オランダにあるデザイン事務所のポートフォリオサイトで、見た目だけでなく読みやすさにもこだわった、ユニークな個性がキラリと光る仕掛けがたくさん。

latest-webdesign-2015may-5

 

 

 

Made by Few

斜めに切り込みを入れたコンテンツを繊細なアニメーション付きで表示することで、サイト全体を魅力的に仕上げてくれます。

latest-webdesign-2015may-19

 

 

 

BBQ Cultures

世界中のどこかで行われているバーベキューをテーマに、選ぶ項目によってストーリーが変わってくる映画のようなエフェクトが楽しい、インタラクティブなウェブサイト。

latest-webdesign-2015may-7

 

 

 

V76

イメージスライダーとコンテンツを並べたレイアウトは、商品紹介ページから購入までをスムーズに行うことが可能。

latest-webdesign-2015may-20

 

 

 

Brdr Kruger

木のぬくもりを感じるプロダクト家具を紹介、販売しているウェブサイト。余白スペースをたっぷり利用したレイアウトは、フラットスタイルを意識したミニマルな印象。

latest-webdesign-2015may-10

 

 

 

Cartelle

ページを表示することで、立体的なブランドロゴを採用したスプラッシュページが用意された、アニメーションをたっぷり利用したサイト。

latest-webdesign-2015may-11

 

 

 

In Pieces

30種類の動物や昆虫をポリゴンスタイルで表現し、モーフィング・アニメーションで展開するコンテンツが面白い作品。

latest-webdesign-2015may-3

 

 

 

Lavagraphics

ヘッダーに配置したかわいいフラットスタイルのイラストは、トグルを使って変化させるユニークな仕掛けが素敵なサイト。

latest-webdesign-2015may-24

 

 

 

Green Man Festival

音楽イベント用ランディングページで、ユニークな動きをつけたヘッダーデザインに、コンセプトを統一した配色、フォントの使い方など参考に。

latest-webdesign-2015may-21

 

 

 

For Better Coffee

画面中央に置かれたコーヒー豆が、スクロールしていくことで美味しそうなコーヒーへと変化していく様子を、アニメーションたっぷりに表現しています。

latest-webdesign-2015may-15

 

 

 

Truth Labs

並べられた文字リンクにカーソルを合わせることで、無数のサークルが暴れるようにユニークなアニメーションで表現されます。

latest-webdesign-2015may-8

 

 

 

PORCHEvolution

スクロールすることで時代によってすこしずつ変わってきた、車体モデルを確認できるエフェクトが素敵。

latest-webdesign-2015may-2

 

 

 

Nua Bikes

商品の特長を1つずつプレゼンテーション形式で並べることで、自然とスクロールを促すカスタム自転車販売用のランディングページ。

latest-webdesign-2015may-1

 

 

 

Lily

空中に放り投げることで、操作不要で自動的に飛行を開始する、新しいタイプのドローン。スクロールすることでドローン本体がアニメーション付きで変化していきます。

latest-webdesign-2015may-14

 

 

 

Studio Smacznego

色あせたマットな質感が特長で、ページを移動するときの滑らかなトランジションが素敵なサイト。

latest-webdesign-2015may-23

 

 

 

BosseTools

より使いやすいスコップを開発し、Kickstarterで出資を募っているアイテム。ブランドイメージに合った、アース色の配色が美しいウェブサイト。

latest-webdesign-2015may-25

 

 

 

ThemPunch

作業風景を撮影した動画をヘッダーに採用し、太字テキストとポップな配色が素敵なフラットスタイルのウェブサイト。

latest-webdesign-2015may-16

 

 

 

Level

スクロールを開始するとページが真ん中半分で切り替わる、ユニークなスライダーや動きに魅了される、ゴージャスな雰囲気を演出しています。

latest-webdesign-2015may-17

 

 

 

Weltrade

フルスクリーン画面に並べられた人物モデルにカーソルを合わせることで、シネマグラフのような効果を楽しむことができ、高級感のある雰囲気を演出しています。

latest-webdesign-2015may-4

 

 

 

J. Horing

コーヒーの栽培から販売まで行う会社のイメージを損なわない、迫力のあるイメージ写真やタイポグラフィ、配色など参考になります。

latest-webdesign-2015may-9

 

 

 

Tens Sunglasses

並べられた商品カーソルを動かすことで、ふわりとした気持ちのよいアニメーションが実装されたショッピングサイト。

latest-webdesign-2015may-6

 

 

 

Futuramo Icons

アイコンを利用した縦型の固定ナビメニューを採用した、フラットスタイルのウェブデザイン。ピクセル状に並べられたコンテンツが、スクロールすることでアニメーション付きで展開していきます。

latest-webdesign-2015may-22

 

 

 

30u

アニメーションエフェクトを駆使した、動きにこだわりを魅せたギャラリー向けポートフォリオサイト。

latest-webdesign-2015may-13

 

 

 

Ghost Ship

ブランドイメージとぴったりなイラストに、フルスクリーンの中央揃えでデザイン要素を並べたシンプルで、読みやすいランディングページを表現しています。

latest-webdesign-2015may-12

 

 

サムネイル@ : nclud – A Provocative Creative Agency

参照元リンク : Flat Websites Design – 26 New Examples | Web Design | Graphic Design Junction