【Webデザイン】今週の「良きウェブ」(3月10日〜3月16日)
どうもです。朝が起きられない季節になりました。
今週も良きウェブまとめです。
今週は割とギークな表現ばっかりをみていた記憶があります。
なのでちょっと変わったWEBサイトとウェブクリエイション多めでお送りします。
Webサイト編
デザインが「良きウェブ」
MAJOLICA MAJORCA|資生堂
https://www.shiseido.co.jp/mj/
日本の可愛いコスメの代表格ともいうべき存在のマジョマジョのサイト。
黒ベースで可愛いと感じるデザインは珍しいです。
DILLER SCOFIDIO + RENFRO
https://dsrny.com/
メニューが90度回転して現れるフリーグリッドなサイトです。
こういうギミックな動きをするサイトを最近よく見かけます。
TENDER to ART
http://www.tendertoart.com/en/
英文字で縦書きなデザインは珍しいです。
スムーズな全画面スクロールがおしゃれさを後押ししています。
ギミックや発想が「良きウェブ」
ENTER THE WORLD EXPOSITION
http://springsummer.gucci.com/
GUCCIの春の新作プロモーションサイト。この1ページでまるで美術館みたい!
絵画として描かれている商品画像をクリックすると、ちゃんと通販サイトにも遷移する仕組みもしっかり織り込んでます。
Webでできる表現をもりもり入れ込んだサイトです。
Twotwentytwo - Creative studio
http://twotwentytwo.se/
ページリロードするたびに空中浮遊するオブジェクトが異なって出てきます。
カーソル当てて要素を動かすのが楽しくなります。
Blockchain explorer - Symphony
http://symphony.iohk.io/
ブロックチェーンをオーディオビジュアルに落とし込んだ作品。
一つ一つのブロッックをクリックすることもできます。
Murmure
https://murmure.me/en/
マウスホバーのインタラクションが盛りだくさんな独特のデザインなサイト。
書体のチョイスもなかなかセンスがあります。
MA+CREATIVE
https://macreative.com/
マウスの位置に合わせて画像のラインがひっついてきます。
Three.jsを用いて表現している模様です。
Męskie Granie Music Festival – Face the Music
https://en-remiks.meskiegranie.pl/
フェイストラッキングしてみている人の顔の表情に合わせてリミックスがかかるMVです。
ポーランドのアーティストの模様ですが曲も個人的によくて好き。
Fonterra | From Here To Everywhere
https://www.fonterra.com/nz/en/campaign/from-here-to-everywhere.html#/home
ぐるぐる回せる地球儀が迫力あるサイト。
こちらもThree.jsで構成されています。
アニメーションが「良きウェブ」
ACSL | 株式会社自律制御システム研究所
http://www.acsl.co.jp/
ドローンを用いた製品が主力の会社らしく、近未来的な感じが漂っています。
ダイナミックさが感じられるムービーにトーンを合わせたアニメーションの使い方がうまいサイト。
Wed'ze ski goggles collection 2017 - 2018
http://goggles.wedze.com/winter-2017-2018/en
ナビゲーション操作が直感的にわかりやすいサイト。
良いUIのお手本とも言えます。
BYTHREE inc.
http://x3-design.com/
メニューが斜めっていたり、要素がふわふわ浮いてたり、可愛いポップなサイト。
マウスホバーした時の影の動きにこだわってます。
Hey, I'm Phil.
http://heyimphil.com/
いつぞやか紹介したこのサイトを彷彿とさせますが、
こちらはあらかじめ下の方に要素が見えており、ホバーするとスススーっと出てくるタイプです。
しかもこの要素ホバーで動かせるのがまた楽しいです。
真似したくなるようなテクニックがある「良きウェブ」
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クリエイションをよく見かけました。
サイトも「こんなことできるのか!」というものを結構見かけたので
色々試してみるぞーとモチベ上がったのが今週のハイライトでした。
ではまた来週。