徒然畑

徒然なるままに。

【Webデザイン】今週の「良きウェブ」(3月10日〜3月16日)

どうもです。朝が起きられない季節になりました。

今週も良きウェブまとめです。
今週は割とギークな表現ばっかりをみていた記憶があります。
なのでちょっと変わったWEBサイトとウェブクリエイション多めでお送りします。

Webサイト編

デザインが「良きウェブ」

MAJOLICA MAJORCA資生堂

f:id:mio_U_M:20180315232637p:plain
https://www.shiseido.co.jp/mj/
日本の可愛いコスメの代表格ともいうべき存在のマジョマジョのサイト。
黒ベースで可愛いと感じるデザインは珍しいです。

DILLER SCOFIDIO + RENFRO

f:id:mio_U_M:20180315223940p:plain
https://dsrny.com/
メニューが90度回転して現れるフリーグリッドなサイトです。
こういうギミックな動きをするサイトを最近よく見かけます。

TENDER to ART

f:id:mio_U_M:20180315223608p:plain
http://www.tendertoart.com/en/
英文字で縦書きなデザインは珍しいです。
スムーズな全画面スクロールがおしゃれさを後押ししています。

ギミックや発想が「良きウェブ」

ENTER THE WORLD EXPOSITION

f:id:mio_U_M:20180311000542p:plain
http://springsummer.gucci.com/
GUCCIの春の新作プロモーションサイト。この1ページでまるで美術館みたい!
絵画として描かれている商品画像をクリックすると、ちゃんと通販サイトにも遷移する仕組みもしっかり織り込んでます。
Webでできる表現をもりもり入れ込んだサイトです。

Twotwentytwo - Creative studio

f:id:mio_U_M:20180311000334p:plain
http://twotwentytwo.se/
ページリロードするたびに空中浮遊するオブジェクトが異なって出てきます。
カーソル当てて要素を動かすのが楽しくなります。

Blockchain explorer - Symphony

f:id:mio_U_M:20180316082109p:plain
http://symphony.iohk.io/
ブロックチェーンをオーディオビジュアルに落とし込んだ作品。
一つ一つのブロッックをクリックすることもできます。

Murmure

https://murmure.me/en/
f:id:mio_U_M:20180315220336p:plain
マウスホバーのインタラクションが盛りだくさんな独特のデザインなサイト。
書体のチョイスもなかなかセンスがあります。

MA+CREATIVE

f:id:mio_U_M:20180315214745p:plain
https://macreative.com/
マウスの位置に合わせて画像のラインがひっついてきます。
Three.jsを用いて表現している模様です。

Męskie Granie Music Festival – Face the Music

f:id:mio_U_M:20180316081410p:plain
https://en-remiks.meskiegranie.pl/
フェイストラッキングしてみている人の顔の表情に合わせてリミックスがかかるMVです。
ポーランドのアーティストの模様ですが曲も個人的によくて好き。

Fonterra | From Here To Everywhere

f:id:mio_U_M:20180316081744p:plain
https://www.fonterra.com/nz/en/campaign/from-here-to-everywhere.html#/home
ぐるぐる回せる地球儀が迫力あるサイト。
こちらもThree.jsで構成されています。

アニメーションが「良きウェブ」

ACSL | 株式会社自律制御システム研究所

f:id:mio_U_M:20180311001813p:plain
http://www.acsl.co.jp/
ドローンを用いた製品が主力の会社らしく、近未来的な感じが漂っています。
ダイナミックさが感じられるムービーにトーンを合わせたアニメーションの使い方がうまいサイト。

Wed'ze ski goggles collection 2017 - 2018

f:id:mio_U_M:20180315223738p:plain
http://goggles.wedze.com/winter-2017-2018/en
ナビゲーション操作が直感的にわかりやすいサイト。
良いUIのお手本とも言えます。

BYTHREE inc.

f:id:mio_U_M:20180315223653p:plain
http://x3-design.com/
メニューが斜めっていたり、要素がふわふわ浮いてたり、可愛いポップなサイト。
マウスホバーした時の影の動きにこだわってます。

Hey, I'm Phil.

f:id:mio_U_M:20180315223720p:plain
http://heyimphil.com/
いつぞやか紹介したこのサイトを彷彿とさせますが、
こちらはあらかじめ下の方に要素が見えており、ホバーするとスススーっと出てくるタイプです。
しかもこの要素ホバーで動かせるのがまた楽しいです。

真似したくなるようなテクニックがある「良きウェブ」

アルペングループ | AlpenGroup

f:id:mio_U_M:20180316081917p:plain
https://www.alpen-group.jp/



Webクリエイション編

Surface

codepen.io
canvasで滑らかに動いている床面が素敵です。
基本的にjavascript側の指定で作っています。
javascriptでのclassの使い方などもお手本にしたい作品。

Animated 404 Pages

codepen.io
CSSアニメーションだけで動く楽しい404ページ。
こんな404なら許せそう。

Wavy Square Comb Thing.

codepen.io
canvasで書かれたキューブが波打ちまくるサイト。
上記で紹介したブロックチェーンのサイトを彷彿とさせます。

WWDC 2015 CSS

codepen.io
CSSアニメーションだけで動く華やかなビジュアルです。
これ一つで宣伝媒体としてうまく機能しているのがミソ。

Cloudy Spiral CSS animation

codepen.io
こちらもCSSで書かれた雲のスパイラル。
周りに星とかを飛ばしたら幻想的な雰囲気に変わるかも。

FT


こちらはjsdoitで見かけたサイバーチックな作品。
CSS animationでメイン構築している模様です。

紫の森


幻想的なウェブ作品です。
glMatrixというライブラリを用いて描画している模様。


いかがでしたでしょうか。
canvasを使った表現を今まであまりしてきたことがなかったので現在個人的に試行錯誤中なのですが
そんな私にとっては参考になるWebクリエイションをよく見かけました。
サイトも「こんなことできるのか!」というものを結構見かけたので
色々試してみるぞーとモチベ上がったのが今週のハイライトでした。

ではまた来週。