サイト制作の勉強になる、参考にしたい最新ウェブデザイン28個まとめ

latestwebdesign2016may-top

 

ウェブサイトをつくるときに、アイデアが湧いてこなくて困ってしまうことがあります。そんなときは、一度パソコンから離れ、散歩に出かけるのも効果的ですが、他のデザイナーが作成した作品をチェックし、デザインの眼を養ってみてはいかがでしょう。今後のデザイン設計のきっかけや、参考になるかもしれません。

 

 

今回は、新しいウェブ技術を駆使した、クリエイティブで体感型の最新サイトデザインをまとめてご紹介します。各サムネイルをクリックすることで、参照サイトを確認することもできます。

 

 

 

詳細は以下から。

 

 

 

サイト制作の勉強になる、参考にしたい最新ウェブデザインまとめ

 

Checkland Kindleysides

高級感のあるセリフ書体に、幻想的な写真イメージを組み合わせたデザインが素敵。各サービスを表す、ユニークなアニメーション付きアイコンにも注目。

checkland-kindleysides

 

 

 

Addidas Climazone

2016年に入りよく見かけるようになった、たっぷり確保した余白スペースに、画像と文字テキストをずらして配置する、新しいレイアウトを提案しています。

addidas-climazone

 

 

 

Al Erykah City

中央に大きく表示されたロゴの背景に合わせ、写真イメージが重なるようにスライドします。

Al-erykah-city

 

 

 

Retro Minder

90年代を中心に活躍した俳優の名前をタイピングする、レトロなオンラインゲーム。難易度高めです。

retro-minder

 

 

 

Mambo Mambo

鮮やかでポップな色使いに、アニメーションを随所にうまく適用することで、心地よいなめらかさを実現しています。

mamobo-mambo

 

 

 

Granny’s Secret

画面いっぱいに映しだされた、美味しそうな食材に加え、手描きの筆記体フォントを利用することで、より個性を強調できるテクニック。

atlantik-food

 

 

 

Boombotix

ぱっと見るとミニマルデザインですが、画面を一度クリックすると、粉々に割れた画面スクリーンから、細かい商品説明ページが登場します。

boombonx

 

 

 

Diadora: Bright Delivery

イタリアからスペインまで走破した様子を、滑らかなビジュアル・アニメーションで表現した未来を感じるサイトのひとつ。ユーザーがデータ操作を自由に行うことができる点もポイント。

bright-delivery

 

 

 

Design Hotels

グリッドレイアウトに合わせて整理されたコンテンツや、写真の魅せ方が今後の参考になりそうなデザイン。

design-hotels

 

 

 

Rum Chata

夏らしい爽やかな配色に、ややかすれたグランジ風エフェクトを追加し、ブランドのオリジナリティーを演出しています。

enjoy-responsibly

 

 

 

Jürgen Hassler

個人フリーランサーのポートフォリオサイトで、必要な要素以外は一切省いた、ミニマルスタイルのお手本サイト。

hasseir

 

 

 

Hess Classic

歴代のクラシックカーをヘッダー部分に並べ、水平方向にスライドさせることで、それぞれの車の詳細をページ下に表示し、ナビゲーションの役割も。

hess-classic

 

 

 

I Fly 50

人物のシルエットに重ねて写真イメージを表示、そして中央部分にロゴを配置するユニークなレイアウト。一度は訪れたい、世界の名所トップ50を紹介しています。

ifly-50

 

 

 

Carnival

カリブ海をのんびり豪華客船で巡るツアーを主催しており、自由に視点を移動できるバーチャル動画が利用した、ユニークなコンテンツの紹介方法。

instant-caribbean-vacation

 

 

 

Jones L.E.S

印象的な写真イメージを、コンテンツの切り替えに応じて、フルスクリーンで表示したポートフォリオ向けデザイン。

jones-tes

 

 

 

Coffee Supreme

グリッドラインを意識した、余白スペースをたっぷり使ったレイアウトは、清潔感のあるブランドイメージにも最適なデザイン。

kitchen-equipment

 

 

 

Maber

maber

 

 

 

man-cub

 

 

 

Pagan Cider

手描きスケッチをサイト全体に利用することで、ハンドメイドな雰囲気を演出できるだけでなく、ブランドイメージにもうまくマッチしています。

pagan-cider

 

 

 

Museum of Science Industry Chicago

museum-of-science-industry-chicago

 

 

 

Valerian

超リアルに描かれた宇宙空間にある惑星に移動したり、調査できる一歩進んだテクノジーを体感できます。

valerian

 

 

 

A Bear’s EyeView of Yellowstone

アメリカにあるイエローストーン国立公園を住処にする熊にカメラを取り付け、行動範囲や習性などをインタラクティブに表現します。

national-geographic

 

 

 

Nerc

ヨーロッパ最大の自然環境の調査船を紹介するサイトで、実際に撮影された映像や写真などを盛り込み、レイアウトでよりユーザーを惹きつけます。

nerc

 

 

 

Nurture Digital

各セクションごとにカラフルに色分けされ、大きく表示したタイポグラフィーに重ねるように、動画や写真イメージがスライドします。フォント組み合わせの参考にも。

nike-sportwear

 

 

 

Plastic BCN

マウスの動きに反応するパララックス・エフェクトや、なめらかにコンテンツを切り替えるアニメーションなど、細かいエフェクトに工夫を凝らした作品。

plastic

 

 

Mine Themes

ミニマルスタイルが特長のWordPressテーマを販売しているサイトで、ヘッダーの大胆なイラストレーションが目を惹きます。

minethemes

 

 

 

Get Ready

まるで映画の主人公になったような感覚でストーリを進めることができる、いんたクラティブなコンテンツ作成に注目です。

societe-generate

 

 

 

Fabbula

独特タッチのイラストレーションに、ほんの少しだけ動きを加えることで、魅力的なヘッダーデザインは、うまくメッセージ性を伝えることができます。

fabbula

 

 

サムネイル@ : I Fly 50