徒然畑

徒然なるままに。

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

どうもです。先週すき焼きが恋しいと行ったらすき焼きが食べれる機会がすぐに巡ってきたので口にするって大事だなと思いました。
アニメーション表現がうまくなりたい季節です。

さて今週も良きウェブまとめです。
今週はページ切り替えアニメーションが特徴的なサイトと
ユーザを巻き込むインタラクティブなサイトをよく見た気がします。

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

第2の勝負下着 Have a nice day with girdles! | ワコール

f:id:mio_U_M:20180217005056p:plain
http://www.wacoal.jp/2ndgirdle/#insta_pc
正直にいうと寺澤さんのイラストが好きなので選びました(←)
イラストがよく映えるレイアウトです。個人的にはこれはスマホで見るとより可愛いです。

Viennese Modernism 2018

f:id:mio_U_M:20180217095457p:plain
https://viennesemodernism2018.info/en/
レイアウト組が美しいサイト。
Three.jsで部分的に3Dを取り入れている模様です。

Blackbox

f:id:mio_U_M:20180217004929p:plain
https://www.blackbox.cool/
Gifをファーストビューに持ってきてますが、単純にインパクトがすごい。
数字のスロットアニメーションも良いです。

WORDSBERG | Translation / Copywriting services(翻訳・コピーライティング)

f:id:mio_U_M:20180217095437p:plain
http://wordsberg.com/sp/index.html
大胆なまでに言葉が主役なデザイン。
余計なギミックなどを入れてない分会社の方向性が明確化されています。

Build in Amsterdam - Strategy, branding & e-commerce

f:id:mio_U_M:20180217095627p:plain
http://www.buildinamsterdam.com/cases/
横スクロ+縦スクロ混在型サイト。
全体的に滑らかなアニメーションを大事にしている。

Serverlessconf NYC '17

f:id:mio_U_M:20180217100813p:plain
https://nyc.serverlessconf.io/
面白いなと思ったのが、カリグラフィという手書き文字と
グラデーションかかった立体的なイラストという異なるテイストのコンポーネントを使っていながらも近未来感を感じられるサイトであること。
うまく2つを引き合わせているポイントはサイトの配色だと感じてます。

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

2018 - makemepulse

f:id:mio_U_M:20180211215951p:plain
http://2018.makemepulse.com/
絶対にこれはPCで見るべきサイト。
WebGLで作成されたらしいのですが、遊びココロもエンタメ性も満載なお年賀サイトです。

Takumi Hasegawa

f:id:mio_U_M:20180217003239p:plain
https://tkmh.me/
ロゴが様々な形に変形する様子が見ていて楽しいサイト。
個人ポートフォリオサイトでWebGLを取り入れるサイトはだいぶん増えてきた印象です。

Air Jordan Collection

f:id:mio_U_M:20180217003324p:plain
https://www.jordan.com/collection/
めちゃくちゃスムーズにスライドするバッシュたち。
アドレス見るとスクロールするたびにディレクトリが変わってます。

Eaze inc. | アキバのUI制作会社エアゼ

f:id:mio_U_M:20180217003334p:plain
http://eaze.jp/
立体的な見せ方でポートフォリオが展開されています。
一覧画面から詳細へのアニメーションもとても滑らかなのが乙。

FAFSWAG

f:id:mio_U_M:20180217005603p:plain
https://fafswagvogue.com/
読み込みに結構時間かかるかもしれません。。。が、その分体験できる世界は超リッチです。
このブログでまとめを始めた中で今の所一番没入感がすごいサイト。

EVS wishes you an innovative 2018!

f:id:mio_U_M:20180217004838p:plain
http://xmas.evs.com/2018/
キラキラスパークル
スクロールするたびに別の形状が構成されていく様子は見ものです。

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

Contemple - Digital studio

f:id:mio_U_M:20180211005353p:plain
http://ccccontemple.com/
社内のチームメンバーが共有していたサイトです。
鮮やかなグラデーションと流れるようなページ切り替えアニメーションに目が惹かれます。
海外のサイトだとサイト内のマウスカーソルがユニークなものに変形するものが多い気がします。

ヒトリエ OFFICIAL WEBSITE

f:id:mio_U_M:20180211005354p:plain
http://www.hitorie.jp/
最初に現れるhitorieの不規則な動きは、クリックまたはホバーで収束するようになっています。
こちらがアクションを起こさない限り読み進めることができないサイト。
あえてその構成をとったところに個人的にエモさを感じます。

Panoply

f:id:mio_U_M:20180211215701p:plain
http://panoply.co.uk/#!/works
一見すると普通の全画面レイアウトのサイトですが、実はインタラクションが楽しいサイトです。
特にハンバーガーメニューは何度もクリックしたくなります。
ページスクロールの仕方も躍動感あるサイトです。

Fanny Myard - Stylist

f:id:mio_U_M:20180217094932p:plain
http://fannymyard-design.com/
Webデザインの一つの定型となりつつあるスプレッドスクリーンレイアウト。
写真の見せ方や切り替え方、斜めページスライドがスタイリッシュです。

Haruki Murakami

f:id:mio_U_M:20180217101804p:plain
http://www.harukimurakami.com/
村上春樹の海外海外向けサイト。
個人的に調べた限りでは日本人の作家でサイトをしっかり作り込んでる方はあまり見ないのですが
このサイトは海外向けということもあってか世界観を構築しています。
崩れ落ちるように切り替わっていくスライドアニメーションは魅力的です。

TAO TAJIMA | Filmmaker

f:id:mio_U_M:20180217100541p:plain
http://taotajima.jp/
映像作家さんのサイトなのでインライン再生動画をうまく使っています。
個人的に今週一番のお気に入りスライドアニメーションのサイトがこれ。
ページの切り替わりが余韻を残すように感じられるのがうまいです。

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

Digital Area

f:id:mio_U_M:20180211215604p:plain
http://www.digitalarea.com/
ホバーするとcssのfilter効果でぼやっとする写真が特徴的です。
まるでマガジンラックを見ているかのようなサイト。

Crioco | Kommunikationsdesign

f:id:mio_U_M:20180217101221p:plain
https://crioco.com/
左右で違う方向にスクロールが楽しいです。
今のデザインらしさが色々と詰まってるサイト。

佐久間徹設計事務所武蔵野市吉祥寺にある建築設計事務所

f:id:mio_U_M:20180217094717p:plain
https://sakumastudio.com/
縦書きを基調としたシンプルなサイト。
上品さを心得たアニメーションやレイアウト構成が綺麗です。



いかがでしたでしょうか。
先週思いのほかブログ記事が人様に見られていたようで正直予想外でした。
もともと自分の表現アウトプットの引き出しを増やすためにまずインプットを増やそうと思って始めたことなので
割と種類が似通ってるものが多いかもしれませんが
(かと言って似たようなことしかできなくなるのも嫌なのでバランス測ろうとしてますが)
誰かの何かの参考にちょっとでもなるのなら思ってもない幸いです。

来週もマイペースでゆるゆる更新していきます。