徒然畑

徒然なるままに。

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

どうもです。秋の匂いがして嬉しいですが毎日雨なのはいただけないです。

今週も良きウェブまとめです。

この週の一押しは宮崎あおいさんのサイトとMarie Morelleさんのポートフォリオサイトです。

ところで最近解析して見たらこれCSS Filter使ってるじゃん〜というサイトをちょこちょこと見かけます。

それでは以下からどうぞ。

AOI MIYAZAKI official website - 宮﨑あおい

f:id:mio_U_M:20180923194051j:plain http://www.aoimiyazaki.jp/#!/home/

美しきスライダーページ遷移。コンテンツの移り変わりも丁寧な見せ方をしています。

#TweenMax #スタイリッシュ #全画面スクロール #縦向きスライダー #インライン再生動画 #エンドレススクロール #PushState #シームレス遷移

Squarespace Circle

f:id:mio_U_M:20180923194113j:plain https://circle.squarespace.com/

社員紹介の円形スライダーが素敵。たまにこのタイプのスライダーを見ますが、インライン再生動画と合わせるとより雰囲気が出ますね。

#全画面スクロール #スタイリッシュ #サークル型スライダー #シームレス遷移 #テキストアニメーション #インライン再生動画 #ホバーアニメーション

株式会社フォトシンス Photosynth Inc.

f:id:mio_U_M:20180923194143j:plain https://photosynth.co.jp/

全体的に斜めの動きを基調としているサイト。滑らかです。

#Three.js #CSSAnimation #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション #CSS Filter #インライン再生動画 #斜めスライドイン #シームレス遷移

FUWA - 岐阜県不破郡から生まれたカトラリーブランド

f:id:mio_U_M:20180923194100j:plain https://www.fuwa.jp/

ファーストビューのロゴの見せ方が素晴らしい。

#CSS Animation #スタイリッシュ #animate.css #スクロールアニメーション #slick #CSS Filter

ラクリ株式会社 | 今までにないカラクリで世の中を豊かに

f:id:mio_U_M:20180923194127j:plain https://www.karakuri.ai/

テキストアニメーションとスプライトアニメーションの参考例

#Canvasアニメーション#カラフル #スタイリッシュ #テキストアニメーション #スクロールアニメーション #ホバーアニメーション #インライン再生動画 #CSS Animation #スプライトアニメーション

Marie Morelle - Illustratrice

f:id:mio_U_M:20180923194106j:plain https://www.marie-morelle.com/

スライダーがまるで本のページをめくるみたいな仕掛けでとてもこだわってる。。。! 全体的に演出が素敵なので、フロントエンド的にも解析してみると面白いかも。

#Barba.js #イラスト #スタイリッシュ #シームレス遷移 #スクロールアニメーション #TweenMax #Canvasアニメーション

Web Design Dubai - Web Development Company Dubai - Planet Green UAE

f:id:mio_U_M:20180923194120j:plain https://www.pgsuae.com/

こんな動きをするサイトも珍しい。常に枠に寄り添うメニューとポインター検知で動く枠。

#TweenMax #カラフル #スタイリッシュ #Hammer.js #FancyBox #ホバーアニメーション #変形デザインフォーム #フリップアニメーション

キッズコレッチオ 〜子どもの想い出を、宝物として残すサービス。〜

f:id:mio_U_M:20180923194133j:plain https://kids.colleccio.jp/

デザインの可愛らしさとサイトの動きの可愛らしさが調和したサイト。可愛い。

#animate.css #カラフル #slick #Lightbox #イラスト #可愛い系 #ホバーアニメーション #gifアニメーション

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

どうもです。秋らしい涼しさがきて嬉しいです。 今週も良きウェブまとめです。 今週の一押しは擬似デスクトップとwebglが美しいサイトです。

それでは以下からどうぞ。

岡山の樹上完熟ぶどう 小幸農園

f:id:mio_U_M:20180909152418j:plain https://koyuki-farm.jp/

ちゃんと写真がバラバラと動いてる風なスライドショー。動きも可愛らしい。

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

えがく未来。つなぐ価値。 | 株式会社ネオキャリア新卒採用

f:id:mio_U_M:20180909152414j:plain http://www.neo-career.co.jp/newgrad/

SVGでもにょ〜と変化するキービのタイトルに目が惹かれます。全ページ共通して存在するラインもポイント

#TweenMax #インライン再生動画 #スタイリッシュ #スクロールアニメーション #SVGアニメーション

株式会社ジュニ | Junni Co., Ltd.

f:id:mio_U_M:20180909152423j:plain https://junni.co.jp/

ところ度ごろに現れるバクがかわいい。背景ホバーで箱がホップします。

#Three.js #カラフル #背景アニメーション #スクロールアニメーション #ホバーアニメーション #テキストアニメーション #ロゴアニメーション

Ginco - 安心・安全の仮想通貨ウォレット

f:id:mio_U_M:20180909152309j:plain https://ginco.io/

animate.cssフラットデザインの動きとして相性がいい感じですね。ちなみにHugoも使ってる模様。

#animate.css #カラフル #スタイリッシュ #slick #スクロールアニメーション #フラットデザイン #シングルページ

+graph Cloud & Agent | プラスグラフ クラウド&エージェント

f:id:mio_U_M:20180909152314j:plain https://plusgraph-ca.jp/

シンプルなデザインですがそれを感じさせない動きのつけ方がいい感じ。

#シンプル #スタイリッシュ #縦書きメニュー #スクロールアニメーション #テキストアニメーション

Humbert & Poyet

f:id:mio_U_M:20180909152322j:plain https://www.humbertpoyet.com/

テキストのゆらめきとスクロールの速度との相性がいい感じ。上下スクロールするスライダー。

#コンポーネント設計 #スタイリッシュ #テキストアニメーション #スクロールアニメーション #ホバーアニメーション #シームレス遷移 #上下スクロールスライダー

Implement Consulting Group

https://implementconsultinggroup.com/ f:id:mio_U_M:20180909152335j:plain

四角形をベースにして組まれているデザイン。

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

Olaian - Maillots été 2018

f:id:mio_U_M:20180909152358j:plain http://lookbook-olaian.fr/#

webglで作られた表現水面のモーションがとても綺麗。。。

#TweenMax #スタイリッシュ #curtains.js #スクロールアニメーション #ホバーアニメーション #下層スクロール遷移 #水面モーション

Newhattan | ニューハッタン日本公式サイト

https://newhattan.jp/ f:id:mio_U_M:20180909152341j:plain

ローディング中は背景カラーが変化し続ける作り。トランジションもいい感じ。

#TweenMax #自動再生スライダー #スタイリッシュ #スプレッドスクリーンレイアウト #スクロールアニメーション #ホバーアニメーション #インライン再生動画

The Preposterous Official Website of Erik Bernacchi

f:id:mio_U_M:20180909152405j:plain http://eeerik.com/

ブラウザの中にもう一つのデスクトップが現れたみたいだ。。。ちょっと変形タイプのポートフォリオ。ダブルクリックしないとコンテンツが開きません。

#カラフル #擬似デスクトップ

Oeuflab - ウフラボ | 宮崎のグラフィックデザイン事務所

f:id:mio_U_M:20180909152354j:plain https://oeuflab.com/

slickをうまく使ってアニメーションを使ってるのは参考になります。デザインがかわいい。。。!

#slick #カラフル #かわいい系 #グリッドレイアウト #自動再生スライダー

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

どうもです。仕事の山を恐らく超えた感あります。

今週も良きウェブまとめです。 このときは割とデザインがいいな!と思うサイトが多かった感じがします。 それでは以下からどうぞ

KOMINKAN - コーミンカン | みらい長崎ココウォーク5F ライフスタイルストア・ギャラリー

http://ko-minkan.jp/ f:id:mio_U_M:20180908161956j:plain

デザインがシンプルで素敵。まるでリーフレットをウェブサイトに落とし込んだようなオシャレ感です。

#Slick #縦書き横文字 #シンプル #シングルページ

大阪城ホール

https://www.osaka-johall.com/ f:id:mio_U_M:20180908161939j:plain

ファーストビューのインパクトが印象的。

#Gifアニメーション #カラフル #イラスト #グリッドレイアウト

Kizuki.Japan | 日本の技・心に気づき 知る・楽しむ・つなぐ

https://kizukijapan.jp/ f:id:mio_U_M:20180908161935j:plain

ロゴアニメーションをじっくり魅せてる! 上ではなく横にグローバルナビがあるのはたまに見かけますが、縦書き文字なのは珍しい。

#ロゴアニメーション #スタイリッシュ #グリッドレイアウト #ホバーズーム画像 #縦書き #固定背景スクロール #スプリッドレイアウト

株式会社まちづくり長野

http://www.machidukuri-nagano.jp/ f:id:mio_U_M:20180908161928j:plain

参道を基準として配置しているのが良き。

#縦書き #イラスト #かわいい系

SUPER SUPER inc.

http://supersuper.jp/ f:id:mio_U_M:20180908161920j:plain

オープニングアニメーションがインパクトあって良き。細かいトランジションにも注目すると面白い。

#テキストアニメーション #Gifアニメーション #縦向き横文字 #スクロールアニメーション #ホバーアニメーション #インライン再生動画

Bellevoye, le 1er Whisky Triple Malt 100% français

http://bellevoye.fr/en/ f:id:mio_U_M:20180908161914j:plain

ボトルのの表示アニメーションがかっこいくて特徴的。

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

INCUBIC INC. |The Innovation Company of Digital Branding

https://incubic.co.jp/ f:id:mio_U_M:20180908161908j:plain

ボックススライドインが優雅に動く好例。

#かっこいい系 #スタイリッシュ #CSSアニメーション #インライン再生動画 #スクロールアニメーション #ホバーアニメーション #ボックススライドイン #シームレス遷移 #グリッドレイアウト #自動切り替わりスライダー

株式会社揚羽(AGEHA Inc.)

https://www.ageha.tv/ f:id:mio_U_M:20180908161903j:plain

途中でスクロールがスライド切り替わり用に変わります。

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

RINN Inc.

https://rinn.co.jp/ f:id:mio_U_M:20180908161858j:plain インテリアショップのブランドサイトみたいなこのオシャレ感のあるサイト、猫グッズのサイトなんです。 猫大事にされてる感が半端なく伝わってくるサイト。

#TweenMax #CSSアニメーション #スタイリッシュ #スクロールアニメーション #ホバーアニメーション #斜めスライドイン

20 years of Hip-hop culture with B-boy Lilou

http://bboylilou.redbull.com/en/ f:id:mio_U_M:20180908161841j:plain

スクロールすると写真の残像が見られます。手の込んだ作りしてる。

#スタイリッシュ #スクロールアニメーション #シングルページ #背景画像ズーム #斜めスライドイン

webmanab.html/ウェブまなぶ

https://webmanab-html.com/ f:id:mio_U_M:20180908161833p:plain

一見普通のブログに見えますが、モーションがとても良いんです。おすすめ。

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

Sobieski

http://sobieskivodka.com/en-en/ f:id:mio_U_M:20180908161820j:plain

すごくリアルな3D空間。コンテンツとしてはよくわからないんですが、web上でここまで物理的感触も再現できるんだなーという驚きで取り上げました。

#TweenMax #赤 #スタイリッシュ #WebGL

【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 #カラフル #スクロールアニメーション #ホバーアニメーション