徒然畑

徒然なるままに。

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

どうもです。雨が降ると引きこもりたくなります。

今週も良きウェブまとめです。 先週に引き続き数が少なめですが、系統的には見た目がスタイリッシュなサイトが見たいなーと思っていたのでそんな感じのテイスト多めです。 それでは以下からどうぞ。

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

B6OCK Inc. ブロック株式会社|WEBデザイン・グラフィックデザイン 大阪・兵庫

http://b6ock.jp/ f:id:mio_U_M:20180617103724j:plain

グリッド調のレイアウトに幕があがるアニメーションの相性が抜群に良いサイト。

#TweenMax #カラフル #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション #テキストアニメーション

Caava Design - Strategic Thinking. Compelling Design.

https://caavadesign.com/ f:id:mio_U_M:20180617104029p:plain

アニメーションはないけれどもレトロでグラフィカルなデザインなサイト。特にメニューのデザインが可愛らしい。

#グリッドレイアウト #グラフィカル #カラフル #レトロ

Laboratorio Lanzani

http://laboratoriolanzani.it/ f:id:mio_U_M:20180617103811j:plain

トップページの画像はアクセスするたびにランダムに変わります。

#テキストアニメーション #TweenMax #スタイリッシュ #モノトーン #固定背景スクロール #スクロールアニメーション #シングルページ

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

ウルトラワイド超短焦点プロジェクタ「ワイード

http://wi-de.jp/ f:id:mio_U_M:20180617104039j:plain

純粋に見ていて楽しいユーモア溢れるサイト。のびーる感じが良い。

#CSS Animation #ポップ #インライン再生動画 #音声あり #シングルページ

Philip Popoff Selected Artworks

https://philip-popoff.net/ f:id:mio_U_M:20180617104103j:plain

ファーストビューのモーションと作品ページのスクロールのモーションがかっこいい。

#puchState #WebGL #スタイリッシュ #スクロールアニメーション

Nike React

https://www.nike-react.com/ f:id:mio_U_M:20180617104126j:plain

斜め文字がかっこいい。好みのスニーカーを選んで走らせることのできるコンテンツサイト

#TweenMax #React #カラフル #スタイリッシュ #ホバーアニメーション #WebGL #3D #音声あり #シングルページ

Mathis Biabiany - Creative Technologist & Artist

http://www.mathis-biabiany.fr/ f:id:mio_U_M:20180617104141j:plain

縦や横にスクロールするのではなく、Z軸方向にスクロールするという体験の心地よさ。

#TweenMax #Three.js #スタイリッシュ #パーティクル #奥行き #3D #水面表現 #pushState

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

MTN DEW x NBA

http://www.mountaindew.com/nba/russell/ f:id:mio_U_M:20180617104155j:plain

モノクロにグリーンが鮮やかに映えるサイト。個人的に構成主義的なデザインがめちゃくちゃ好きなので見ていてテンション上がります。

#TweenMax #Hammer.js #スタイリッシュ #モノトーン #緑 #シームレス遷移 #ホバーアニメーション

The Greatest Showman (2017) - Movie Website

http://www.thegreatestshowmanmovie.com/ f:id:mio_U_M:20180617104229j:plain

サイトの演出が素晴らしいですね。映画もサイトも魅せる力が強い。PC閲覧推奨。

#TweenMax #インライン再生動画 #テキストアニメーション #ホバーアニメーション #マウスモーション #スクロールアニメーション

Sara Marandi

http://www.saramarandi.com/ f:id:mio_U_M:20180617104240j:plain

ホバーした時のグニョンな動きが美しいポートフォリオサイト。

#シームレス遷移 #キレイめ #ホバーアニメーション #水面表現 #ボックススライドイン