IE6-8 is Not Supported

【2015年1月】今月リリースされたクオリティの高い海外サイトまとめ

今年から毎月クオリティ (クリエイティビリティ) の高い海外サイトをまとめることにしました。
Inspiration カテゴリを1年以上放置していましたが宜しくお願いします。
(だいぶ好きなサイトが偏っているので自分用のまとめということで…!)

1. The First 50 years of Bose

By MediaMonks (Netherlands)

dreamandreach.bose.com

  • Movie
  • Full Screen

Bose の 50周年記念特設サイト。制作は MediaMonks さん。トップにある動くアイコン、SVG か Canvas かと思ったけど、PNG のぱらぱらでした。こういう使い方もいいですね。

2. Flakes

By B-Reel (U.S.A.)

flakes.b-reel.com

  • Canvas
  • WebGL
  • three.js

キーボード入力すると自分だけの結晶が 3D で作れるサイト。どこからこの発想がきたかわからないけど、とりあえず凄い。楽しい。

3. OVER

By OVER (Serbia)

overclothing.com

  • Simple
  • Grid
  • Clean

今回まとめたサイトでたぶん一番動かないけど、かっこいい。必要最低限のアニメーションに整ったデザインは日本でもうけそうです。

4. La Région des musées

By Wokine (France)

www.laregiondesmusees.fr

  • Geometry

幾何学図形好きには参考になる部分の多いサイト。ロード時のアニメーションもいい感じです。

5. Return to Antikythera

By details.ch (Switzerland)

www.hublot.com

  • Movie
  • One Page Scroll

順を追って何かを紹介するサイトはこういう1ページスクロールが合う気がします。色合いも新海っぽくて素敵。

6. Creative Nights

By Creative Nights (Republika Hrvatska)

creative-nights.com

  • Portfolio
  • Scroll
  • Graphic Design

去年 Creative Knight などをリリースしていたデザイナーのチームとしてのポートフォリオ。個人的には Creative Knight のほうが好みですがこっちも特徴あって好きです。

7. BeoPlay H2

By Magic People Voodoo People (Denmark)

www.beoplay.com

  • Parallax

見たまんまヘッドホンのサイトですが、少し余韻の残るスクロールとパララックス、綺麗な写真が相まって魅力的に見えます。欲しい。

8. Galvan Mobili

By AQuest (Italy)

www.galvanmobili.it

  • Responsive

CSSDA 2014 WOTY でおなじみの AQuest さん。年末に自サイトもリニューアルしています。デザインを見ただけで AQuest ってのがわかるのが凄いサイトです。

9. De Haus

By ReedBe (Belgium)

www.dehaus.be

  • Movie

タイムライン風のナビと毎回違う切り替えエフェクトがかっこいいです。何かに応用できそう。

10. Trippeo

By Benjamin Guedj (France) / jean-christophe suzanne

www.trippeo.com

  • SVG
  • One Page Scroll

フランスのアートディレクター Benjamin Guedj 氏の作品。コードを書いているのは同じくフランスで有名な JCS 氏。 この集団の作る作品は本当にかっこいい。個人的にどれもアニメーションが参考になります。ちなみに Benjamin Guedj 氏 は Awwwards of the Year のアートディレクター部門ノミネート者で優勝候補の一人です。

11. Mélanie F

By Lionel Durimel (France) / Julien Renau

melanie-f.com

  • Gradient
  • Parallax

こちらもフランスのアートディレクター Lionel Durimel 氏の作品。個人的にずっと前から好きなデザイナーさんです。 同じく Awwwards of the Year のアートディレクター部門ノミネート者。 サイトのほうは余韻の残るスクロールとスプライトした画像のアニメーションがかっこよくて何度もスクロールしてしまいます。

12. Vito Salvatore

By Vito Salvatore (United Kingdom)

vitosalvatore.com

  • Portfolio
  • Full Screen

Vito Salvatore 氏のポートフォリオ。作品を見て「この人が作ったのか〜」ってのがいくつかありました。遷移の動き、昔同じの考えてたけどいい画像がなくて諦めたんだった。作品あるとやっぱりかっこいいな〜。

13. Airbnb

By Tool (U.S.A.)

www.airbnb.jp

  • WebGL

WebGL とユーザー参加型のサイトってだけでかなり手間がかかっているはずなのに、ドメインまで .jp に切り替わってすごい力入れてるなー、と。コードは見てません。わかりません。

14. This Was My Best

By Piotr Swierkowski (Poland)

thiswasmybest.com

  • Portfolio
  • Responsive
  • Full Screen

Piotr Swierkowski 氏の 2014年振り返りのポートフォリオ。メインのポートフォリオは去年リリースしていて、Awwwards, CSSDA, CSSWinner の3冠を獲っています。個人で実績を出す人が出てくると嬉しく思います。

15. Yara’n’Yared

By Ultranoir (France)

www.yaranyared.com

  • WebGL
  • three.js
  • Sound

Yara’n’Yared というアーティストの紹介だと思ったのですが、音と共に3D空間を駆け巡るやばいサイトでした。 エフェクトを 変える UI は謎ですがこのサイトには合っているのかも。とにかくかっこいい。 制作はクリエイティブな製作会社が最も多いフランスの中でもトップクラスの Ultranoir さん。 これを全部自社でやっているらしいです。最新のテクニックなんかもブログに書いていたりと今年も注目。

あとがき

サイトの傾向が偏っているどころか、9割が知らない (興味ない) であろう Award ネタを説明に入れる不親切極まりないまとめになりました。(MediaMonks, B-Reel, Tool, AQuest, Ultranoir が同月に出てるって本当に凄いんですよ…!)

サイトの傾向としてはやはり WebGL や WebAudio, Video といったコンテンツをサイトに組み込むのが増えてきた感じでしょうか。 どんどん進化する Web をどうやってデザインに取り入れるか悩ましい今日この頃。

ads by google