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

hula-hoop

 

さまざまな想いやメッセージを伝えるウェブサイトは、クリエイティブなアイデアの宝庫です。まるで思いつかないようなユニークなアイデアが使われていたり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイトなど、参考したいポイントがたくさんあります。

 

この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。

 

ブックマークしておきたい海外/国内Webデザインギャラリーまとめ30選【2017年改訂版】

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

 

 

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

 

Freelance TV

世界各地で活躍するフリーランスたちに、普段のライフスタイルや仕事術などをインタビューしながら紹介する新しいメディアの取り組み。コンテンツも定期的にアップされており、今後がますます楽しみなサイトのひとつ。

freelance-tv

 

 

 

Porsche Panamera

69年に及ぶポルシェの長い歴史を、過去の車と一緒に振り返ることができる公式サイト。

porsche-panamera

 

 

 

Jassica & Brennan

二人の知り合ったきっかけからプロポーズ、結婚式のスケジュール、RSVPなどをまとめた幸せ満点なサイト。美しい花柄デザインが雰囲気ともバッチリ合っています。

jess-and-brennan

 

 

 

はじめかた研究所

暮らしの中のさまざまなことの “はじめかた” だけを研究する「はじめかた研究所」。最初の一歩が踏み出せないあなたへ。 はじめかた研究所はそっとあなたの背中を押して、あたらしい暮らしの一歩を作り出します。

hajimekata

 

 

 

Lighthouse Film

lighthouse-films-website-design

 

 

 

Radioactive Film

ウクライナにあるフィルムプロダクションのサイトは、得意の動画を全面に押し出したデザインで、スクロールすることで自動的にコンテンツが切り替わるなどの仕掛けも。

radioactive-film

 

 

 

Raoul Gaillard

マウスカーソルに合わせて立体的に動くレイアウトに、アニメーションを駆使したインタラクティブなポートフォリオサイト。

raoul-gaillard
 

 

 

Love More

たくさんのコンテンツを単一ページにまとめ、目立つ赤色で配色を統一することで、メッセージやコンセプトを的確に伝えることができます。

love-more

 

 

 

Projections

projections

 

 

 

I Buongiorno

スクラップブックのような風合いをウェブサイトで表現しており、左右にスライド式で切り替わるコンテンツも思わずクリックしたくなるものばかり。

i-buongiorno

 

 

 

Vermont

マテリアルデザインを意識したコンテンツの重なりを、立体的なドロップシャドウで表現したUIデザインなど参考にしたい点もたくさん。

vermont

 

 

 

八木山ベニーランド50周年記念特別ホームページ

宮城県にある創業50年を迎える遊園地の特設ページで、パララックスやアニメーション付ナビメニュー、カード型レイアウトなどさまざまなトレンドを盛り込んでいます。

50th-benyland

 

 

 

100 Years of National Park Services

100年間のアメリカ国立公園の歴史をプレゼンテーション形式でまとめているサイト。スクロールしていくと時系列ごとに各公園の特色を確認することができます。

100-years-of-national-park

 

 

 

A World with No Heroes

実際にドローンの配置や撮影方法を決めながら、課題となるミッションをクリアしながら進める、ゲーム要素が強い、触れて楽しむ新しいウェブデザイン。

a-world-with-no-heroes

 

 

 

Big Mamma

サイトにアクセスするたびに店内の様子を撮影した動画がランダムで流れ、鮮やかな色使いともマッチしたフランスにあるユニークなイタリアンレストラン。

big-mamma

 

 

 

Brooke Promnitz

今年の代表的なトレンドのひとつ、グラデーションをうまく利用したポップで、個性の光るポートフォリオサイト。

brooke-promnitz

 

 

 

Carbon Beauty

アニメーションを使いながら表示するコンテンツは、スクロール速度に応じてさまざまなギミックを盛り込んだインタラクティブ系サイト。

carbon-beauty

 

 

 

Carbone

鮮やかな配色が目を引くヘッダーイメージに、さまざまなコンテンツにユーザーを誘導しやすいカード型レイアウトを採用しています。

carbone

 

 

 

Co Motion

余白スペースの使い方にこだわりを魅せる、ミニマルで余計な要素を一切省いたデザインが美しいウェブサイト。

co-motion

 

 

 

Desires Tram

スクロールに合わせてコンテンツが縦横無尽に入れ替わる、触れて楽しむサイトの代表例。引っぱったり、ドラッグしたりすることで、隠されたコンテンツが表示される仕掛けも。サイトを開くと音が出るので、ご注意ください。

desires-tram

 

 

 

土肥農園

美味しそうなスイカをつくる秘密をコンテンツとして紹介するなど、セルフブランディングに力を入れたウェブサイトの一例として。

dosuika

 

 

 

はみ文字プロジェクト

入力フォームに文字を入力すると、人文字(はみ文字)へ変換してくれます。学生がターゲット層ということもあり、ちょっとおばかなアニメーションが多数用意されています。

hami-moji

 

 

 

Hidden Dangers

昔から川辺に住むタイの民族の生活に欠かせない、水にまつわる危険をインタラクティブな動画と共に紹介するサイト。

hidden-dangers
 

 

 

Johnson Banks

カーソルをスクロールすると、グリッド状に並べられたサムネイル付コンテンツが、左右方向に滑らかに移動します。各種ページにはAjaxローディングを利用しています。

johnson-banks

 

 

 

Line A Light

はじめてサイトを訪れたひとでも迷うことなくコンテンツにたどり着くことを想定した、シンプルで効果的なレイアウトは参考にしたいところ。

linea-light

 

 

 

Qantas Dreamliner

カンタス空港による旅行の快適さを、まるで実際に飛行機に乗っている感覚でストーリーが進めながら伝える新しいサイト。

qntas-dreamliner

 

 

 

Riverdale Comic Creator

riverdale-comic-creator

 

 

 

株式会社スバル

安心感を与える色の組み合わせをつかい、ユーザーが特に気なるコンテンツをわかりやすくパネル状に並べるレイアウト。

subaru

 

 

 
The Ringo

東京、西麻布にあるスペイン料理レストランの公式サイトで、グリッドを崩して並べたレイアウトが印象的で、落ち着いた高級感のある配色も素敵。

the-ringo

 

 

 

Tiara Inc.

左固定ナビメニューにフルスクリーンで表示されるヘッダーが魅力的なアパレル向けウェブサイトで、ふわりと表示される心地よいアニメーションにも注目です。

tiara-inc

 

 

 

PQ Ron Arad

オンラインでもサングラスの形状や掛け心地などを、動画を利用することでよりわかりやすく伝える工夫がつまったサイト。

pq-ron-arad

 

 

 

F37 Foundry

フォントの作成、販売を行なっているサイトで、手軽にフォントを試して、購入することを目的としたシンプルデザイン。

f37

 

 

 

FELISSIMO 500色の色えんぴつ

季節とともに変化する木々、刻々と表情を変える空や海。この世界に存在するすべてのしあわせを、繊細かつ壮大に表現した500色の色えんぴつが、東京の町工場の職人の手により、世界に向けて生まれ変わりました。

felissimo-500-1

 

 

 

Jeweller Wireless Technology

モノクロのみでデザインされたシンプルな配色ですが、アニメーションやマイクロインタラクションを見事に利用したデザインは、気持ちの良い使い心地もポイント。

jeweller-wireless-technology

 

 

 

10x Banking

グリッドを崩し、写真と文字テキストを重ねるスタイリッシュなレイアウトに、カラフルなパターン模様をランダムに追加することで、個性をうまく表現できる一例。

10xbanking

 

 

 

AiMEN

もしも神のお告げを聞くのに人工知能、AIを利用したらどうなるかというユニークな企画で、話題となっているIBMの人工知能 Watson を利用しています。

aimen

 

 

 

Basic Agency

アメリカのサンディエゴにあるデザイン事務所で、シンプルでミニマルなデザインながら、面白いアニメーションエフェクトを駆使しています。

basic

 

 

 

Dilo TV

画面中央に並べられたナビメニューにマウスカーソルを合わせると、カラフルなグラデーションと一緒にフルスクリーン写真が切り替わります。

dilo

 

 

 

Spot the Dot

淡いパステルカラーのグラデーションのサークルを3つ並べ、各コンテンツにユーザーを誘導しやすいうえ、デザイン性も素晴らしいサイト。

dot

 

 

 

Héloïse Thibodeau Architecte

heloi%cc%88se-thibodeau-architecte

 

 

 

Kvell Home

自社のインテリア商品をスライダーで見せながら、ページ遷移を感じさせないシームレスなウェブ体験を実現することで、より商品の興味も持ってもらう工夫が。

kvellhome_com

 

 

当サイトでは最新ウェブデザインを定期的にまとめ、紹介しています。前回、2月分まとめも参考にいかがでしょう。

Webデザイン勉強の参考にしたい、魅力的なサイト35選 2017年2月度

 

サムネイル@ : Agence de communication Lyon – Paris I Hula Hoop