徒然畑

徒然なるままに。

【Webデザイン】今週の「良きウェブ」(7月14日〜7月27日)

どうもです。急に涼しくなってびっくりしております。

今週も良きウェブまとめです。 この週の一押しはVIRTUAL FLAGSHIP STOREですね。驚きの擬似体験です。。。 それでは以下からどうぞ。

Yard Agency

f:id:mio_U_M:20180818182943j:plain

https://yard.agency/en

水面の雰囲気のエフェクトがいい感じです。かっこいい。

#Pixi.js #スタイリッシュ #水面モーション #インライン再生動画 #縦書き横文字

Second City Works

f:id:mio_U_M:20180818182951j:plain

https://www.secondcityworks.com/

幾何学模様のモーションが滑らかで心地よき。svgアニメーションと相性がいいですね。

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

株式会社エルテスセキュリティインテリジェンス

f:id:mio_U_M:20180818183013j:plain

https://eltes-si.co.jp/

ボックススライドの要領で文字のスライドインもできそうですね。

#スクロールアニメーション #スタイリッシュ #ホバーアニメーション #ボックススライドイン #上下開きスライド #テキストアニメーション

Арена Мечты

f:id:mio_U_M:20180818183204j:plain

https://dreamarena2018.ru/

2Dながらも立体感あるスタジアム。webgl使ってるかな。

#TweenMax #スタイリッシュ #3D

Rina Food photographer

f:id:mio_U_M:20180818183047j:plain

https://rina-foodphoto.com/

ローディングアニメーションとテキストアニメーションがかわいい。。。!というか全体的にかわいい。

#テキストアニメーション #かわいい系 #ローデイングアニメーション #ボックススライドイン #左右開きスライド

東京のブランディングカンパニー|株式会社クオーターバック(quarter back Inc.)

f:id:mio_U_M:20180818183213j:plain

https://q-b.co.jp/

ファーストビジュアルの華やかさとグリーンが相性がいいサイト。

#テキストアニメーション #スタイリッシュ系 #TweenMax #ボックススライドイン #ホバーアニメーション

ぐでたま5周年スペシャルサイト

f:id:mio_U_M:20180818183225j:plain

https://www.sanrio.co.jp/special/gudetama/5th/

下から上へ行くスクロールが斬新。。。!宇宙に行くというコンセプトとあってますね。

#slick #animate.css #スクロールアニメーション #かわいい系

株式会社SCREENホールディングス 新卒採用サイト

f:id:mio_U_M:20180818183253j:plain

https://www.screen.co.jp/recruit/fresh/

スライダーがページの入り口の代わりになっている珍しいタイプのサイト。

#スタイリッシュ系 #SVGアニメーション #css animation

JVEB Studio, la fabrique à stopmotion

f:id:mio_U_M:20180818183259j:plain

https://www.jvebstudio.com/

全体的にテキストアニメーションや雰囲気が可愛らしい。PCでみると動画の再生はホバーで制御できます。

#スタイリッシュ系 #SVGアニメーション #css animation

Dot Lung - Mother of social media dragons

f:id:mio_U_M:20180818183315j:plain

http://www.dotlung.com/

イカラーと円形アニメーションが目を引くサイト

#スタイリッシュ系 #TweenMax #SVGアニメーション #円形アニメーション

夏列車 いっしょに見る夏 帰る夏 2018 Summer Campaign JR西日本

f:id:mio_U_M:20180818183320j:plain

https://jr-natsuressha.jp/

イラストの涼やかさを存分に生かしたサイト。水彩とグラデーションの相性がいいですね。

#かわいい系 #イラスト #css animation #ホバーアニメーション

VIRTUAL FLAGSHIP STORE

f:id:mio_U_M:20180818183345j:plain

https://www.liberty-japan.co.jp/specialcontent/

まるでウェブ上で擬似来店しているかのような体験。圧巻です。

#ゴージャス系 #Three.js #TweenMax #ホバーアニメーション "シームレス遷移

乃木坂46 CMスペシャルサイト|BTOパソコンのマウスコンピューター【公式】

f:id:mio_U_M:20180818183519j:plain

https://www.mouse-jp.co.jp/campaign/nogizaka46/

アニメーションがあざとかわいい。キービジュアルのcanvasアニメーションは見ものです。

#かわいい系 #TweenMax #Canvasアニメーション #ホバーアニメーション "スクロールアニメーション #シングルページ

「東京プリズン」 〜この廃都の頂点を掴め〜 大規模喧嘩タクティクス

f:id:mio_U_M:20180818183359j:plain

https://tokyo-prison.kayac.com/

これ自社のゲームのサイトなんで宣伝なんじゃないかと言われかねないんですが、そのことを抜きにしてでもめちゃかっこいいサイト。 個人的にメニューの遷移モーションが好きです

#かっこいい系 #TweenMax #Three.js #テキストアニメーション "スクロールアニメーション #シングルページ #ジャイロ

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

どうもです。早く秋になって欲しいです。

今週も良きウェブまとめです。 今週の一押しは演出的にはモンスト特設サイトですが、コンテンツとして見て欲しいのはALLd.のサイトです。モーショングラフィックがめちゃくちゃかっこいい。。。 では以下からどうぞ。

Van Holtz Co

https://vanholtz.co/

f:id:mio_U_M:20180812175911p:plain

文字リンクはちゃんとpタグでフォント指定してます。パース効かせるだけでも雰囲気が出るんだなあとなるほどとなるサイト

#CSSanimation #青 #スタイリッシュ #スクロールアニメーション #ホバーアニメーション #テキストアニメーション #斜め文字

【公式】獣神化ルシファー特設サイト|モンスターストライク(モンスト)

https://www.monster-strike.com/promotion/extra2018/

f:id:mio_U_M:20180812175652p:plain

最近のソシャゲはキャラ一体のためにこんな豪華なサイトを作るんだ。。。としみじみとなったサイト。 エフェクトの使い方や技術をうまく組み合わせてるサイト。

#CSSanimation #Three.js #スクロールアニメーション #Pixi.js #テキストアニメーション

Locman Tremila

https://www.locman.it/landing/tremila/

f:id:mio_U_M:20180812175852p:plain

マウス操作で動く腕時計や本当にネジを巻いているみたいな演出だったり、1ページに様々な演出が詰め込まれているサイト。

#CSSanimation #TweenMax #スタイリッシュ #スクロールアニメーション #ホバーアニメーション #シングルページ

ALLd.

http://alld.jp/

f:id:mio_U_M:20180812175726p:plain

作品の質がめちゃくちゃ高いのを邪魔せず引き立てているサイト。 サイトもいいけどモーション作品もぜひ見て欲しいです。

#Three.js #スタイリッシュ #ホバーアニメーション

SALONIA サロニア

https://salonia.jp/

f:id:mio_U_M:20180812175900p:plain

最初なんのサイトかわかりませんでしたが、製品の良さを引き立たせるデザイン。 ヘアサロン関係のサイトで最近よくスタイリッシュなのを見かけます。

#Pixi.js #TweenMax #スタイリッシュ #スクロールアニメーション #斜めスライドイン #背景固定スクロール #シームレス遷移 #ホバーアニメーション

Dinner for Five.

http://dff.mitsugutakahashi.com/

f:id:mio_U_M:20180812175835p:plain

筆記体を使ったアニメーションだと手書きするようなテキストアニメーションが思い浮かびますが、そうしなくてもふわっと表示させるだけでも結構雰囲気あります。

#TweenMax #スタイリッシュ #スクロールアニメーション #シームレス遷移 #背景固定スクロール #縦書き横文字

80周年記念サイト | 振興電気株式会社

http://www.shinko-el.com/80th/

f:id:mio_U_M:20180812175659p:plain

背景のアニメーションがいい感じですね。歴史年表の動きがスムーズで良き。

#CSSanimation #TweenMax #スタイリッシュ #スクロールアニメーション #Pixi.js #背景アニメーション

採用サイト | 益正グループ - 今までの飲食業界を壊せ、覆せ。

http://www.masumasa.jp/recruit/

f:id:mio_U_M:20180812175918p:plain

サンセリフの書体の文字ドン!は相性がいいですね。メニューの見せ方も独特です。斜めのデザインがかっこいい。

#Lightbox #Slick #斜めスライドイン #スタイリッシュ #スクロールアニメーション #ホバーアニメーション #シングルページ #インライン再生動画

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

どうもです。まじでお久しぶりです。二週間くらいぶりです。。。

もう季節はすっかり8月になっちゃったわけですが、今週の良きウェブまとめ6月末からの分です。 まとめておかないと自分が辛くなるので。。。 それでは今週も以下からどうぞ。

デザインが良きウェブ

KYOTOGRAPHIE international photography festival

https://www.kyotographie.jp/ f:id:mio_U_M:20180731083721j:plain

パキッとした赤とボックスベースにしたデザインがめちゃくちゃかっこいい。

#赤 #スタイリッシュ #外枠あり

Paradiso

https://www.paradiso.nl/en/ f:id:mio_U_M:20180731083831j:plain

モーダルを開いたときに領域外をタップしたら閉じる、というのは良くある実装ですが、このサイトは領域外に出るとちゃんとマウスカーソルの変化で閉じれることを示してくれてる。さりげないユーザビリティへの配慮。

#グリッドレイアウト #ホバーアニメーション #シームレス遷移 #スタイリッシュ #ダイナミック #無限スクロール

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

一般社団法人クオリティ・ワン

http://q-one.jp/ f:id:mio_U_M:20180731083715j:plain

日本のサイトでアメコミ調なイラストを使うのは珍しい。ボックススライドインがとても良きイージング。

#CSS animation #パワフル #スタイリッシュ #スクロールアニメーション #ボックススライドイン

What is Data Science? | Thinkful

https://www.thinkful.com/blog/what-is-data-science/ f:id:mio_U_M:20180731083728j:plain

パララックスで動く幾何学模様たちがおしゃれ

#CSS animation #スタイリッシュ #パララックス #シングルページ

ハーゲンダッツアカデミー since1961

https://www.haagen-dazs.co.jp/brand/academy/ f:id:mio_U_M:20180731083745j:plain

アカデミックな雰囲気の女子が本当にトコトコ歩きながら登場しているみたいだ。。。!複数の種類のアニメーションをうまく使って構成しているところも良い。

#TweenMax #SVGアニメーション #CSSアニメーション #かわいい系

焼きたて抹茶チーズタルト | ベイク チーズタルト | BAKE CHEESE TART

https://cheesetart.com/lp/matcha2018/ f:id:mio_U_M:20180731083819j:plain

本家のサイトと雰囲気を合わせていますね。

#スクロールアニメーション #SVGアニメーション #ボックススライドイン #テキストアニメーション #縦書き #シングルページ

Barsi Marmi - Estrazione, Lavorazione e Commercio Marmo di Carrara

https://www.barsimarmi.com/ f:id:mio_U_M:20180731083751j:plain

デザインにあったスタイリッシュな動きを取り入れているいいお手本。スクロールせずにページコンテンツが見れるようになってる親切さ。

#Hammer.js #TweenMax #固定ページスクロール #テキストアニメーション #シームレス遷移 #ボックススライドイン #斜めスライドイン

TAKAAKI ISHIKAWA | design studio drop.

http://www.ds-drop.com/ f:id:mio_U_M:20180731083812j:plain

この週で一番好きなサイトの演出があしらわれたサイトです。 一覧の画像の見せ方が、単純にノイズが動いているテクスチャgifを上に載せているだけですが、だいぶん雰囲気が変わるのが良い

#スクロールアニメーション # グリニッチ #ホバーアニメーション #スタイリッシュ #黒

網頁設計

https://www.wddgroup.com/ f:id:mio_U_M:20180731083826j:plain

ページ遷移の仕方がダイナミックで一番の見どころ。 メニューのデザインもただのハンバーガーメニューじゃないものを出そうという気概がうかがえる。

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

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

どうもです。梅雨が明けたのはいいんですが夏の暑さが好きじゃないので引きこもりたいです。

今週も良きウェブまとめです。 今週の一押しはFFのサイトなんですけど、改めてFFってゲームというよりもう一つの人間せ世界をガチで作ってるのでは。。。と感じました。 そんな感じで今週も以下からどうぞ。

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

GYRE

f:id:mio_U_M:20180707232640j:plain https://gyre-omotesando.com/

実際にここに行ったことがありますが、その場の雰囲気や空気感を崩さずサイトに表現している感じです。

#シームレス遷移 #pushstate #スタイリッシュ #ホバーアニメーション #斜めスライドイン

comocomo.cafe 〜架空のカフェでごゆっくり〜

f:id:mio_U_M:20180707232646j:plain http://petitringo.net

前から知っていたこのサイト。細やかにコピーライターさんの世界観をぎっしり詰め込んでるのが素敵。

#可愛い系 #手作り感 #スクロールアニメーション

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

CRAFTSMANSHIP|IS JAPAN COOL?|Culture Guide

f:id:mio_U_M:20180707232700j:plain https://www.ana-cooljapan.com/contents/craftsmanship/

日本の職人にフォーカスを当てたサイト。侍アバターも作れます。

#TweenMax #音声あり #スタイリッシュ #グリッドレイアウト #Vue #ホバーアニメーション #Three.js #フェードイン

MusicalZOO

f:id:mio_U_M:20180708010555j:plain https://www.musicalzoo.it/

ページをドラッグすると画面遷移できます。全体的にユニークな動きをしているサイト。

#TweenMax #テキストアニメーション #緑 #スタイリッシュ #CSSGrid #スクロールアニメーション #pixi.js #シームレス遷移 #ドラッグ操作 #ズームイン

Going Home

f:id:mio_U_M:20180708010603j:plain http://goinghome.302chanwoo.com/

ウェブ上の絵本のような作品。とりあえずのぞいてみてください。

#TweenMax #Three.js #ドラッグ操作

スタイルポート | STYLE PORT

f:id:mio_U_M:20180707235719j:plain https://styleport.co.jp/

トップのモーショングラフィックがめちゃくちゃかっこいい。随所にグラデーションカラーをあしらってるのもよき。

#TweenMax #Three.js #カラフル #スタイリッシュ #ブロークングリッドレイアウト #スクロールアニメーション #ホバーアニメーション #シームレス遷移 #インライン再生動画 #ドラッグ操作

RONIN Amsterdam

f:id:mio_U_M:20180708010619j:plain https://www.roninamsterdam.com/

文字でマスクした画像のレイアウトがかっこいい。スクロールすると少し読み込みが走るのでそこだけ注意。

#TweenMax #Hammer.js #canvas #スタイリッシュ #パララックス #ホバーアニメーション #横スクロール #シングルページ

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

ファイナルファンタジーXV ロイヤルギャラリー | SQUARE ENIX

f:id:mio_U_M:20180707232624j:plain http://www.jp.square-enix.com/ff15/royal/gallery2018/

ゲームの世界観を具現化したデザインとモーション。ファンならきっとグッとくる場面やクスッとくる場面を集めてます。

#TweenMax #Three.js #ドラマチック #音声あり #スクロールアニメーション #シングルページ #マウスムーブスクロール

14islands

f:id:mio_U_M:20180707235753j:plain https://14islands.com/

ヒーロービューのロゴのモーションが心地よき。

#TweenMax #カラフル #スタイリッシュ #シームレス遷移

KIRIN naturals(キリン ナチュラルズ)|オフィスで味わう自然体験

f:id:mio_U_M:20180708010634j:plain http://k-naturals.jp/

ついつい背景に目がいってしまう。細かな野菜の動きやスクロールでの変化が楽しい。

#Velocity.js #カラフル #スクロールアニメーション #ホバーアニメーション

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

どうもです。梅雨が終わって嬉しいですが夏があまり好きじゃないので困ってます。

今週も良きウェブまとめです。 今週も色々良いサイトを見かけましたが、個人的には一番最初に取り上げている美容院のサイトが素敵なのでおすすめです。 それでは今週も以下からどうぞ

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

美容室MILLOR(ミラー) | 神奈川県武蔵小杉駅のヘアサロン・美容院

f:id:mio_U_M:20180701115450j:plain http://www.millor.jp/

普通の美容院のサイトとはちょっと違って、ファーストビューが人物ではないのが新鮮です。ローディングからのファーストビューの展開の仕方がとても調和が取れていて美しい

#TweenMax #Three.js #白 #スタイリッシュ #フリーグリッドレイアウト #パララックス #ホバーアニメーション #斜めスライドイン #縦書き #イラスト

東京のフリーモデル 山内もえ

f:id:mio_U_M:20180701115515j:plain https://free-model.jp/

ファーストビューの動画がいい感じのナチュラル感を出しています。

#TweenMax #白 #スタイリッシュ #スライドオープン #全画面スクロール #ホバーアニメーション #ボックススライドイン #インライン再生動画 #スライドアップ

Ogilvy

f:id:mio_U_M:20180701121709j:plain https://www.ogilvy.com/

ホバーするとスライドの流れが止まります。ギャラリーの見え方を変えることもできます。

#TweenMax #カラフル #スタイリッシュ #グリッドレイアウト

Skylab Architecture

f:id:mio_U_M:20180701130349j:plain http://www.skylabarchitecture.com/

最初からハンバーガーメニューが開いている状態という斬新なデザイン。

#黒 #スタイリッシュ #フリーグリッドレイアウト #パララックス #Hammer.js

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

The History of Connection

f:id:mio_U_M:20180701122920j:plain http://archiviostoricoexperience.gruppotim.it/en/the-beginnings/

ネットワークの歴史をリッチな世界観で表現しているサイト。圧巻です。。。

#WebGL #青 #パララックス #音声あり

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

Eason Design ltd.

f:id:mio_U_M:20180701123410j:plain https://easondesign.co/

ホバーするとグリニッチエフェクトが走る感じがかっこいい。

#黒 #スタイリッシュ #フリーグリッドレイアウト #グリニッチエフェクト #ホバーアニメーション #ジャイロセンサ #シームレス遷移

デザインあ

f:id:mio_U_M:20180701124456j:plain http://www.design-ah-exhibition.jp/

「あ」の動きが可愛い。モバイルからもみた方が楽しいですよ。

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

Stake your claim - TruStory

f:id:mio_U_M:20180701124704j:plain https://www.trustory.io/

スクロールアニメーションが心地よいシングルページ。

#TweenMax #カラフル #スタイリッシュ #スクロールアニメーション #シングルページ

【公式サイト】ファイトリーグ

f:id:mio_U_M:20180701130039j:plain https://fight-league.com/

キャラクターがわきゃわきゃ動くのが楽しい。

#カラフル #スタイリッシ #スクロールアニメーション #フェードイン

【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 #青 #スタイリッシュ #奥行き感 #スクロールアニメーション #ホバーアニメーション #テキストアニメーション #シームレス遷移#パーティクル

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アニメーション #テキストアニメーション

【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

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

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