Advertisement

website

 

サイトのコンセプトは決まっているが、デザインアイデアがなかなか湧いてこない。そんなときは、世界中から選りすぐった最新ウェブサイトを確認し、今後のデザイン制作に活かしてみましょう。

 

 

オリジナル性あふれるサイトを中心に、今年のデザイントレンドを代表するアニメーションエフェクトやユニークなレイアウト、鮮やかな配色カラーリング、フォントの組み合わせなど、具体的な実例サンプルとして参考にしてみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

最新Webデザインから学ぶ!参考にしたいサイトアイデアまとめ

 

Regumed

美しいグラデーションの多重露光エフェクトが素敵なデザインで、表示されているラジオボックスにカーソルを合わせると、浮遊するサークル円が近寄ってきます。

56ab1f3d952d3

 

 

 

Spring Summer

コンテンツが切り替わるたびに、左側のナビメニューが変化していく、ほんのわずかなアニメーションがミニマルさを強調しています。

56d418bc74f16

 

 

 

Rezo Zero

思わずスクロールしたくなる、豊富なアニメーションを実装したサイトで、左端に固定されたナビメニューは、スライド表示されます。

56ced3139b4c2

 

 

 

Fakemusic

表示するイメージ画像のレイアウトを統一することで、シンプルなデザインの中で、スライダーが気持ちよく切り替わるエフェクトを実現しています。

56b9d606ec594

 

 

 

Ruben Sanchez

水平方向のコンテンツ移動にはじまり、各制作実績ページでは、フルスクリーン画面にぼかしエフェクトを利用した、ダイナミックなレイアウトが参考に。

56c3478b8d0f6

 

 

 

SHIFTBRAIN Inc.

随所に散りばめられたアニメーションに、統一感のある太字フォントが素敵な、日本を代表するWeb制作会社のひとつ。

56c5713e8e833

 

 

 

Collapse: The End of Society Simulator

現在地を入力しストーリーを進めることで、どのように病気が人に感染していくのか、ビジュアルをつかってリアルタイムで表示していきます。

56cf27bb477b4

 

 

 

European Knights

歴代のベスト・サッカープレイヤーを、二者択一のユーザー投票で決めていきます。直感的で分かりやすいインターフェース。

56d5d66d04d2a

 

 

 

Jetlag

世界中で撮影された美しい写真を、時系列でスライド表示していくギャラリーサイト。

56b077bd563a6

 

 

 

The Spice Hunter

スクロールすることで、一本のラインがするすると画面中を動き出し、見事にユーザーの視線をコンテンツに誘導します。

56b51b41bc929

 

 

 

Swallow and Damsons

一目見ただけで何をしているのか分かる、ポートフォリオサイトの参考サイト。作品や制作実績などを掲載したいときのアイデアに。

007-1

 

 

 

Andrea Brugi

ページをスクロールすることで、フルスクリーン上にランダムに表示されるプロダクト商品は、まるで流れるようなスムーズなアニメーションエフェクトが実装されています。

56bd854313e3e

 

 

 

Google Cultural Institute

オーケストラなど、パフォーマンス舞台にいるような感覚で、360度バーチャルツアーを行うことができる、Googleの新しい試み。

5671a965b8290

 

 

 

Casetti Designer

くっきりと見やすい太字フォントと、手書きのような筆記体の組み合わせがスタイリッシュで、スクロールしたくなるアニメーションが◎。

56c33d84a91df

 

 

 

Elespacio

画面いっぱいに表示されるコンテンツ目次は、まるで雑誌を見ているようなレイアウトを実現し、各メニューにカーソルを合わせることで、背景イメージも切り替わります。

awwwards-sotd-Elespacio-

 

 

 

Spotify Valentines

好きな音楽ジャンルを決め、伝えたいメッセージを入力すると、アルファベット一文字毎にマッチした楽曲を表示する、インタラクティブなバレンタイン企画。

56d4c38d5ac55

 

 

 

Addidas

ナビメニューにカーソルを合わせるだけで展開し、コンテンツの進捗状況をページローディングで表示するなど、ユーザビリティーにこだわった作品。

56c47d6308cb0

 

 

 

Animal Made

ナビメニューがポタポタと垂れていたり、コミカルなキャラクターがユラユラと動く、オリジナル性の高いポートフォリオサイト。ロゴにマウスホバーを合わせると、、。

animal-wild-shit

 

 

 

Tolia

フルスクリーンで切り替わるスライダーに、シネマグラフを使ったコンテンツがユニーク。

56a62b55175cf

 

 

 

Blackmeal

ヘッダー部分の見出しタイトル文字にパララックスエフェクトを適用し、カード式レイアウトがコンテンツを分かりやすく、見やすく表示します。

002-2

 

 

 

Deadwater

スクロールすることで4分割されたグリッドをベースに、コンテンツがアニメーション付きでランダム表示され、黄色が良いデザインアクセントに。

56a9ea0c7968e

 

 

 

Oxford House

美しい映像をフル画面でダイナミックに魅せる、映像プロダクション会社の公式サイト。無駄をなくしたシンプルなデザインに、細かいアニメーションが映えています。

awwwards-sotd-Oxford-House-1

 

 

 

Concrete LCDA

スクロールするとページ右側がスライド式に切り替わる、今年注目したいレイアウトのひとつ。

awwwards-sotd-Concrete-LCDA

 

 

 

Sweet Magnolia Gelato

カスタムイラストレーションに、動きを加えることでより魅力的なサイトデザインに仕上げている参考サンプルとして。

56d5aa7f9f52f

 

 

 

Phive

画面を左右に二分割したレイアウトを採用し、スクロールに合わせて表示位置を切り替えることで、ユーザーの注目を自由に集めることに成功しています。

56d5ec5943a68

 

 

 

Active Theory

画面上でマウスを動かすことで、背景に表示された動画の一部が、ポリゴン状崩れるエフェクトがユニークなポートフォリオサイト。

56a8173ccbf88

 

 

DDNG

制作実績などのコンテンツを、ランダムなグリッド表示で展開する、ダーク系デザインの参考サンプル。

awwwards-sotd-Dac-Davy-Nguyen-1

 

 

 

HAUS

これまでの制作ケーススタディの面白いレイアウトを参考にしたい、太字フォントや絶妙に利用されたアニメーションが素敵なサイト。

awwwards-sotd-Haus-1

 

 

 

Camper

camper

 

 

 

Henrik & Sofia

2016年を代表する、鮮やかな青とピンク色の組み合わせに、太字フォント利用したミニマルなスタイル。

henrik-sofia

 

 

 

America’s Most Admired Lawbreaker

コンテンツを読み進めるのに合わせて、目次となるタイムラインを一緒に表示することで、ページをスクロールしたくなる工夫も。

Highline

 

 

 

The Grey Tales

4匹の象にまつわるストーリーを、体験型のインタラクティブな操作で進めていきます。特集コンテンツなどの魅せ方の参考にいかがでしょう。

the-gray-talens

 

 

 

もっとデザインアイデアが欲しいときは、ウェブデザインギャラリーを覗いてみると良いでしょう。RSS リーダーに登録しておくことで、定期的に新しいデザインを確認できますし、Muzli 2 もデザインアイデア収集にはオススメです。

 

awwwards (1)

 

参考 ブックマークしておきたい海外/国内Webデザインギャラリーサイトまとめ

参考 あまり知られていない要チェックなWebデザインギャラリーサイト10個まとめ

 

 

参照元リンク : Zoya Handmade