現役デザイナーも注目!最近話題のウェブデザイン50個まとめ 2017年7月度

latestwebsite2017july-feature-image

 

ウェブサイトの制作に追われるうちに、アイデアが枯れてしまったという経験はないでしょうか。目まぐるしく変化を続けるウェブデザインの世界では、新しいアイデアやトレンドをうまくサイトに盛り込むことも重要です。

 

ユーザーに新しいウェブ体験を提供することで、コンテンツをより魅力的に仕上げるだけでなく、伝えたいメッセージやコンセプトをうまく表現できるようになります。

 

今回は、最近話題になった新作ウェブデザイン50個をまとめて紹介します。配色えらびやデザインが苦手な人でも参考にできる、最先端で実践的なテクニックを得意としたサイトを集めているので、今後のデザイン制作にも活躍してくれるでしょう。

 

クオリティーが凄い!最近話題になったウェブデザイン40個まとめ 2017年5月度

これでもう悩まない!2017年のデザイントレンド完全ガイド

 

 

現役デザイナーも注目!最近話題になったウェブデザイン50個まとめ

 

Spotify Me

2017年要注目のデザイントレンド、デュオトーンカラー・エフェクトを利用した写真イメージが魅力的で、CTAボタンが目立つ工夫がされたシンプルなサイト。

spotify-me

 

 

 

7Up Lemon Lemon

長いブランドの歴史を振り返り商品ライナップを紹介したサイトで、シュワシュワとした泡などアニメーションの美しさにも脱帽。

7up

 

 

 

Havaianas

新作コレクションまとめたルックブック的ランディングページで、ブラジルらしい鮮やかでカラフルな配色に特に注目です。

havianas

 

 

 

茶ッカソン

スクロールに応じて画像や文字テキストなどのコンテンツがふわりと表示される、心地の良いアニメーションがポイント。

chackathon

 

 

 

タカガール

テーマカラーのピンク色をサイト全面に使用することで、統一感のあるコンテンツの魅せ方を可能にした、ランディングページ作成の好例として。rma

taka-girl

 

 

 

Until We All Belong

グリッドレイアウトで整理されたコンテンツは、カーソルを合わせることで拡大ズームアップで表示される仕掛けも。

airbnb-until-we-all-belong

 

 

 

Google Show Up

Googleマップを駆使したストーリングテリングの新しい魅せ方を提案してくれるでしょう。

show-up

 

 

 

Tesla Autopilot

自動車の自動運転を近い将来に実現しようとしている Tesla のテクノロジーを分かりやすいイラスト付きで解説しています。

tesla

 

 

 

軽井沢ブレストンコート

hoshino-resort-blestoncourt

 

 

 

薫玉堂

400年以上続く老舗の技を大きな写真イメージで表現し、明朝体を使用することで由緒正しいお店の雰囲気にも見事にマッチしています。

kungyokudo

 

 

 

The Sliders

質感たっぷりなダーク系テクスチャを背景にすることで、美味しそうなフードメニューが引き立っています。

slider-copenhagen

 

 

 

Flowers Burger

画面を縦方向に2分割するスプリットレイアウトに、遊びココロのある筆記体が、takeお店の雰囲気を見事に伝えています。

flowersburger

 

 

 

Bang Ideas

bang-logo

 

 

 

株式会社クリーチャーズ

下方向へのスクロールでコンテンツが切り替わるヘッダー用スライダーが魅力的で、全体の配色を統一することですっきりとした見た目に。

creatures

 

 

 

Perfect Noise

ブランドカラーの鮮やかな黄色が特長的で、伝えたいことのみ簡潔にまとめたサイトデザイン。

perfect_noise

 

 

 

Ana Cargo

企業向けウェブサイトの作成で参考にしたい、レイアウトやコンテンツのまとめ方、見せ方など工夫がぎっしり詰まったサイト。

anacargo

 

 

 

アソビュー

写真と文字テキストの重ね方や、グリッドを崩したレイアウト、心地よいアニメーションなどウェブデザインのトレンドを意識したつくり。

asoview

 

 

 

パーソナルキャリア株式会社

文字テキストとイメージ写真の重ね方や配置など、企業サイト作成時の参考にしたいサイト。

persol-career

 

 

 

ミームマグ

コンテンツごと分かりやすく整理された、ブログメディアサイトのデザイン作成の参考に。

mememag

 

 

 

東京都交通局

ユーザーが知りたい情報を重要度に応じてまとめ、整理しています。ソーシャルメディアの活用方法やバナー広告の魅せ方など、実践的な企業サイトの作成にも。

tokyoto-kotsukyoku

 

 

 

Wyss Harvard

極太フォントが印象的で、ダーク系ウェブサイトのサンプル例が欲しいときにも。

wyss

 

 

 

Details Tokyo

ウネウネと動く極細ラインのアニメーションが目を見張るサイト。

hello-tokyo

 

 

 

Nick Jones

黄金比を用いたレイアウトは、スクロールを開始するとクルクルと回転しながら目的のコンテンツまで遷移する仕組み。

nike-jones-design-and-code

 

 

 

All Boats Rise

マウスを当てると動き出すロゴに、ふわりと文字テキストを表示するマイクロインタラクションに注目。

allboatsrise

 

 

 

Ueno

2017年の人気トレンド、カスタムイラストが特長的で、カーソル移動に応じたアニメーションに力を入れたサイト。

ueno

 

 

 

Hello Frankishere

hellofrankishere

 

 

 

Daoust Le Stage

daoust-lestage

 

 

 

ぽると総本舗

長崎の港町、佐世保で愛さて続ける銘菓を商品ラインアップごとに分かりやすいレイアウトで表現します。

hakuju-ji
 

 

 

Drummonds UK

余白スペースをたっぷりのグリッドを崩したレイアウトに、セリフとサンセリフ書体の高級感のあるフォントの組み合わせも◎。

drummonds-uk

 

 

 

You Matter

you-matter

 

 

 

Departures International

アニメーションを駆使しながらも早い反応速度にすることで、ユーザーが待ち時間のストレスなくコンテンツを楽しむことができます。

departures-international

 

 

 

Transformers The Last Knight

マウスカーソルの動きに合わせて、巨大アップの顔が追従するように動くアニメーションが素敵。

transformers-the-last-knight-movie

 

 

 

King of Soul

ソウル・ミュージックの歴史をグリッドレイアウトを崩して並べ、まるで雑誌を読んでいるような感覚にさせてくれます。

king-of-soul

 

 

 

Legs of Steel

文字テキストと写真イメージのみのシンプルなサイトですが、スクロールに応じたアニメーションを追加することで、オリジナル性をうまく演出しています。

legs-of-steel

 

 

 

筑北村公式ホームページ

あらゆる年齢層にも分かりやすいサイトで、レイアウトや配色を変更することでコンテンツの重要度をうまく伝えることができます。

筑北村公式ホームページ

 

 

 

おーいお茶

商品の良さを伝えながらラインアップなども詳しく紹介したサイトで、各コンテンツも余白スペースで分かりやすくまとまっています。

oiocha

 

 

 

R Magainze

女性向けウェブマガジンを想定したサイトで、水平方向へのスライダーを活用することで多くのコンテンツがユーザーの目に触れる工夫も。

rmagazine

 

 

 

Morgan Stanley

はじめて訪れたユーザーにもインパクを与えるヒーローイメージに、コンテンツをすっきり分かりやすく整理するグリッドレイアウトの参考例として。

morganstanley

 

 

 

Flambette

flambette

 

 

 

Evert 45

動画を使ったストーリーテリングによるコンテンツの見せ方を提案しており、ユーザーの操作性にもこだわりを持っています。

evert-45-blogs-from-the-past

 

 

 

Made in Space

文字テキストと画像を重ねたり、グリッドを崩したレイアウト、落ち着きのある配色などデザイントレンドが満載。

madeinspace

 

 

 

Fotonaut Event

マウスカーソルに合わせて立体的に動くパララックスデザイン要素が魅力的なサイトで、配色の参考にしたい素敵な色使いも特長。

fotonaut-events

 

 

 

Playkot

ゲーム制作会社らしく遊びココロたっぷりのサイト作成を実現しています。

playkot

 

 

 

Ronin Amsterdam

ronin-amsterdam

 

 

 

Impero

背景デザインにビデオ動画を採用することで、文字テキストのみのシンプルなコンテンツを補強するテクニック。

impero-website

 

 

 

Eve Tech

サイトを開くと画面が乱れたようなグリッチエフェクトが採用されており、社風をうまく表現した新しいカタチ。

eve-tech

 

 

 

Matter of Mind

マウスカーソルに反応して立体的に動く背景イメージが印象的で、未来を感じるインタラクティブなサイト。

matter-of-mind

 

 

 

Random Studio

ramdom-studio

 

 

 

G-uld

動画とヒーローイメージを組み合わせたインタラクティブなヘッダーデザインで、スクロールに応じたスムーズでなめらかな動きが素敵。

g-uld

 

 

参照元リンク : Where to Go in Okinawa : A Fresh Travel Guide