新しいウェブデザインの魅せ方を知ろう!参考にしたいWebサイト40個まとめ 2016年8月度

latestwebdesign2016aug (1)

 

移り変わりのとても速いウェブデザインの世界では、どのようなデザインや実装テクニックが人気トレンドとなっているのか、定期的にチェックしておくことが重要です。今回は、クリエイティブなアイデアの参考にしたい最新ウェブデザインをまとめてご紹介します。

 

 

コンテンツを最大限うまく引き出し、ユーザーの印象に残るデザインを演出する最先端ウェブテクニックを体感してみましょう。各サムネイルをクリックすることで、参考ページを確認することができます。

 

 

 

詳細は以下から。

 

 

 

新しいウェブデザインの魅せ方を提案する、参考にしたいサイトまとめ

 

Pharrell Williams

ファレル・ウィリアムズの世界観を表現した公式ページ。グリッド上に並べられたサムネイルをクリックすると、豊富な情報を多彩なレイアウトでまとめています。

pharrell-williams

 

 

 

Heyblend

美しい配色とシンプルなレイアウト、書体の組み合わせはぜひ参考にしたいミニマルデザイン。

hey_blend.jpg

 

 

 

Waaark

ゼリーのようなぷるんとしたエフェクト効果が楽しく、配色も素敵なポートフォリオサイト。

wrk

 

 

 

Sewage Free Seas

スクリーン画面を2分割したレイアウトにフォントを組み合わせた、今後ますます増えてきそうなトレンドのレイアウトで、もちろんレスポンシブにも対応しています。

sewage_free_seas.jpg

 

 

 

Locus Solus

アナログ時計の文字盤をモチーフにしたローディングで、SVGを利用したユニークなスライダーの切り替えがポイント。

sun-lounger

 

 

 

SF Design Meetup

マウスカーソルに合わせて目がギョロギョロと動くギミックも。

sf_design_meetup.jpg

 

 

 

Seedlip

ノンアルコールのリキュールを販売しているサイトで、ミニマルなパッケージデザインとフォントの組み合わせが参考に。

seedlip

 

 

 

Tio Luchin

tio-luchin

 

 

 

A Little Bit of Rough

イギリスにある貸コテージの紹介ページで、思わず訪れたくなる美しいイメージ写真をつかった魅せ方は、さまざまな業種に利用できそう。

a_little_bit_of_rough.jpg

 

 

 

Loflo Records

各コンテンツ毎にクラリネットやカスタネットなどの音を合わせることで、色々な場所をクリックしたくなる仕掛け。

leflo-records

 

 

 

Step Inside Asia

アジア各国の観光地を中心に、ユニークなイラストとGoogleマップを利用して、インタラクティブに演出したサイト。第3弾として、ついに日本が登場です。

step-inside-asia

 

 

 

Expeditie Wadden

縦に長い単一ページですが、左側にラインを使ったナビメニューを加えることで、視線を下方向へと誘導するデザインアイデアが採用。

de-reede

 

 

 

Epicurrence

従来の一般的なレイアウトにとらわれず、インタラクティブな表現を可能にしたウェブサイト。

epicurrence

 

 

 

Assiko

ネオンカラーで統一されたコンテンツが並び、マウスホバーで面白いアニメーションが豊富に実装されています。ダーク系ウェブサイトの参考にも。

assiko

 

 

 

Zumtobel

ヘッダーに利用された鮮やかなグラデーションが目を惹くデザインで、商品とアルファベットを重ねたレイアウトが新鮮。

zumtobel

 

 

 

Locomotive

次世代のマイクロインタラクションを加えることで、各コンテンツに自然と目が誘導されるレイアウト。

locootive

 

 

 

Discover Skylark

ページスクロールなしで、コンテンツごとにフルスクリーン画面を切り替えます。

concept

 

 

 

Field Notes

レスポンシブ対応で、特集コンテンツを大きく魅せるレイアウト。販売アイテムが多いサイトにも適しています。

field-notes

 

 

 

A Short Journey

マウスドラッグでストーリーを進めていく、ユーザー参加型のインタラクティブなサイト。

ashortjourney

 

 

 

Grosse Lanterne

鮮やかん配色カラーパレットに手書きフォント、スクロールに応じたコンテンツ表示などデザイントレンドを詰めこんだサイト。

grosse-lanterne

 

 

 

Chord Surfer

矢印ボタンでアイテムをゲットし進めていくオンラインゲームで、スピード感を表現するアニメーションが見事。

chord-surfer

 

 

 

Bangui Loubliee

action-faim

 

 

 

Mamoelite

画像がぐねりと曲がる印象的なエフェクトをヒーローイメージに採用したサイトで、ダーク系デザインの参考にも。

beauty-hunter

 

 

 

Black Lives Matter

配色やフォントの使い方、ナビメニューやレイアウトなどランディングページ作成時の参考にしたいサイト。

black-lives-matter

 

 

 

TooPop TV

インクを垂らしたような不思議アニメーションを利用した、スプラッシュページもポイント。

bring-heat

 

 

 

Dis moi Elliot

euioti

 

 

 

Google Play

膨大なコンテンツを扱うサービスにおける配色や、グリッドを使ったレイアウトなどの細かい仕様をまとめたコンセプトページ。

google-play

 

 

 

Navigating Responsibly

スクロールに応じてさまざまなアニメーション付きでコンテンツを表示していきます。ページ読み込みにやや難あり。

navigating-responsibly

 

 

 

Ortiz Leon

スクリーン画面全体にグリッドラインを引くことで、レイアウト全体の統一感を表現しているサイトで、利用している太字フォントも参考に。

ortiz-leon

 

 

 

Square Conference

デザイン・カンファレンスの特設ページだけあり、配色やフォント使いはもちろん、ランダムに置かれている四角形シェイプも、実はうまく計算されて配置されてます。

squares_conference.jpg

 

 

 

Tarzan

映画の世界をそのまま体験できる特集ページで、VR技術を利用しゲーム要素を盛り込んだコンテンツを楽しむことができます。

tarzan

 

 

 

Tele Type

tele-type-website

 

 

 

Badrutt’s Palace

スイスにあるバーケーションホテルの案内ページで、セリフとサンセリフ書体の組み合わせが、エレガントな高級感を演出しています。

trip

 

 

 

VinylCuts

まるでブラウン管テレビに映しだされた映像のような、グリッチエフェクトをイメージ画像に加えることで、うまくレトロ感を演出してます。

vinylcuts

 

 

 

Worlds Apart

worlds-apart

 

 

 

Yatzer

スライダー付きヒーローイメージに最低限のパーツのみを揃えたミニマルさが特長で、フォントの組み合わせ方も参考にしたいサイト。

yatzer

 

 

 

Papazian

luxury-jewerly

 

 

 

Mess Hall

ページをスクロールすると、表示されていたロゴやイラストがあらゆる方向に飛び散るスプラッシュページ付き。

mess_hall.jpg

 

 

参照元リンク : How to Live Like Creative People – Format.com