徒然畑

徒然なるままに。

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

どうもです。本当に早く梅雨が終わって欲しいです。

今週も良きWebまとめです。 今週はデザインやら演出やら凝ってるーかわいいーかっこいいーと思うものが多かったような感じです。 では今週も以下からどうぞ。

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

THE PARFAIT STAND | ザ・パフェスタンド

f:id:mio_U_M:20180623211247j:plain https://theparfaitstand.com/

ポップで可愛らしさが炸裂しているサイト。写真のビジュアルもデザインも素敵。

#TweenMax #カラフル #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション #インライン再生動画 #斜めスライドイン

JEANASIS MEDIA

f:id:mio_U_M:20180623211338j:plain http://www.dot-st.com/cp/jeanasis/jeanasis_media

ブランドの世界観や雰囲気をうまくWebサイトに落とし込んだ例。スタイリッシュな動きのアニメーションもよい。

#TweenMax #モノトーン #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション #テキストアニメーション #パララックスアニメーション #斜めスライドアニメーション #縦書き横文字

雨のパレード オフィシャルサイト

f:id:mio_U_M:20180623211807j:plain http://amenoparade.com/index.html

余分な装飾はない代わりに、トップの動画の再生の仕方がエモい。演出の仕方が印象的なサイトです。

#インライン再生動画 #スタイリッシュ #グリッドレイアウト

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

株式会社KSKアナリティクス

f:id:mio_U_M:20180623211128j:plain https://www.ksk-anl.com/

スクロールすると奥行きを感じさせるデザイン。まるで宇宙にいるような体験と、それを邪魔させないような演出が良い。

#TweenMax #青 #スタイリッシュ #奥行き感 #スクロールアニメーション #ホバーアニメーション #テキストアニメーション #シームレス遷移#パーティクル

REVELÉ | Trends for brands and people

f:id:mio_U_M:20180623211535j:plain https://studiorevele.com/

あえて円がコンテンツを邪魔するように配置されてるかと思いきやポコポコ動かせるのが楽しい。

#TweenMax #CSSアニメーション #スタイリッシュ #グリッドレイアウト #ドラッグインタラクション

amana recruit 2019

f:id:mio_U_M:20180623211922j:plain http://recruit.amana.jp/

最初のアニメーション演出がストーリー感があって良い。

#カラフル #スタイリッシュ #グリッドレイアウト #ブラー効果 #ローディングアニメーション

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

イベントスタジオ

f:id:mio_U_M:20180623210922j:plain https://www.eventstudio.jp/

画像はgif動画で楽しく動いてるサイト。ホバーすると図柄が飛び足したりと、デザインも素敵だけど惚れぼれする動きをしています。

#TweenMax #カラフル #CSSアニメーション #かわいい系 #シームレス遷移 #スクロールアニメーション #ホバーアニメーション #テキストアニメーション

ジャパンインベスターパートナーズ

f:id:mio_U_M:20180623211439j:plain https://www.ji-partners.co.jp/

トランプのカードをめくる動きで統一感出してるサイト。

#斜めスライドイン #スタイリッシュ #インライン再生動画 #ボックススライドイン #シームレス遷移 #ホバーアニメーション #イラスト #CSSアニメーション

Cesetti Designer | Shoes

f:id:mio_U_M:20180623212128j:plain http://cesettidesigner.it/

固定位置のメガネの背景スクロールやメニューのタイリングが素敵なサイト。

#全画面背景スクロール #黒 #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション ##CSSアニメーション

VN Star || Development Group

f:id:mio_U_M:20180623212217j:plain http://vnstar.com.ua/en/

スクロールして図が展開していく様子がロジカルでわかりやすい。

#TweenMax #パララックス #スタイリッシュ #スクロールアニメーション #ボーダーアニメーション #ホバーアニメーション #ボックススライドイン

The Spice Hunter | Your Spice Journey Begins Here

f:id:mio_U_M:20180623212529j:plain https://www.spicehunter.com/

SVGの動きをうまくサイトの世界観に生かしたサイト。伸びていく矢印が旅らしさを助長させている。

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

Concrete LCDA

f:id:mio_U_M:20180623212747j:plain http://www.concrete-beton.com/

正方形の枠が囲んでいく動きがとても存在感がある構成です。メニューのアニメーションが何よりも印象的。

#TweenMax #スタイリッシュ #グリッドレイアウト #シームレス遷移 #ホバーアニメーション #ボーダーアニメーション

CRISP SALAD WORKS│クリスプ・サラダワークス

f:id:mio_U_M:20180623212907j:plain https://www.crisp.co.jp/

スクロールするごとに今現在のセクションを表示させたりホバーアニメーションさせたりスタイリッシュなデザインと動きのサイト。

#インライン再生動画 #スタイリッシュ #黄色 #シームレス遷移 #ホバーアニメーション #スクロールアニメーション #テキストアニメーション #ボックススライドイン #イラスト

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

LDKWARE

f:id:mio_U_M:20180623211718j:plain http://www.ldkware.com/2018/

スクロールでの背景画像の見せ方に一工夫があるサイト。

#インライン再生動画 #スタイリッシュ #固定背景スクロール

Andrea Brugi

f:id:mio_U_M:20180623212333j:plain https://andreabrugi.com/

余白を贅沢に使ったショッピングサイト。画像や文字が互い違いに動くだけでも印象的になりますね。

#シームレス遷移 #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #CSSアニメーション #テキストアニメーション