徒然畑

徒然なるままに。

【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

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

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

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

どうもです。なんとなく梅雨っぽい感じがしてきてしまいましたね。

今週も良きWebまとめです。 申し訳ないことにこの週は確か引越しやらでドタバタしていた週でしたのでサイト少なめです。。。 その代わりこの週はスクロールアニメーションが特徴的なサイトが多かったです。

それでは今週もどうぞ。

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

Studio Björk - A digital production studio in Stockholm

http://www.studiobjork.com/ f:id:mio_U_M:20180610144608j:plain モノクロベースの横向き展開スクロールデザイン。めちゃくちゃかっこいいです。

#TweenMax #Three.js #キレイめ #花柄 #紺色 #奥行き #3D #音声あり

http://glimmerings.gallery/ f:id:mio_U_M:20180610144629j:plain 個性的なフォントが存在感放つサイト。ページ下部にあるフォントアニメーションも良き。

#シングルページ #ホバーアニメーション #黒色 #フォントアニメーション

World Champion Amsterdam

http://www.worldchampionamsterdam.nl/ f:id:mio_U_M:20180610144705j:plain

数字のインパクトに注目。雑誌のレイアウトのようなオブジェクトの組み方が良き。

#TweenMax #Hammer.js #スタイリッシュ系 #全ページスクロール #ホバーアニメーション #ボックススライドイン #ローディングアニメーション

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

The Five Seasons

https://www.alessi.com/thefiveseasons f:id:mio_U_M:20180610144725j:plain

圧倒的世界観。奥行き豊かなおかげでVRっぽい。

#TweenMax #Three.js #スタイリッシュ系 #モノクロ #シームレス遷移 #パララックス

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

株式会社ハッシャダイ | HASSYADAI Inc.

https://hassyadai.com/ f:id:mio_U_M:20180610144742j:plain

ちょっとユニークな制度がありますがサイトのかっこよさはピカイチ。

#Three.js #pjax #スタイリッシュ系 #クール系 #紺色#シームレス遷移 #scroll manager #パララックス

FontFace Dojo

https://fontfacedojo.com/ f:id:mio_U_M:20180610144755j:plain

スクロールアニメーションに目が惹かれる。スライダーの移動演出が実は面白い。

#Three.js #スタイリッシュ系 #かわいい系 #ミントグリーン #シングルページ #パララックス

Phive — Health & Fitness Centers

https://phive.pt/ f:id:mio_U_M:20180610144817j:plain

スクロールアニメーションでよく見られる演出をうまく色々盛り込んでいるサイト。ページ間遷移のローディングアニメーションが可愛らしいです。

#Three.js #スタイリッシュ系 #黄色 #スクロールアニメーション #フォントアニメーション #ローディングアニメーション #シームレス遷移 #インライン再生動画 #SVGアニメーション #ホバーアニメーション

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

In August Company

https://inaugust.co/ f:id:mio_U_M:20180610144948j:plain

水彩風テクスチャがいい感じにゆらゆらと揺れてるのが良い。

#シングルページ #水彩風 #マウスムーブイベント #パステルカラー

Tío Luchín - Cocina en vivo

http://www.tioluchin.com/ f:id:mio_U_M:20180610144845j:plain

美味しそうなパララックススクロール。スクロールがどれくらい進んでるのがわかるようになってる。

#シングルページ #黒 #パララックス #SVGアニメーション #スクロール再生動画

【日々学ぶVue】クラスの切り替えをcopmutedで監視する

f:id:mio_U_M:20180603142226j:plain

※2018.6.5 内容更新しました

どうもです。新居が引きこもりやすくて最高です。

久しぶりにVueについてのメモです。 今回はVueでよくお世話になってるクラスバインディングについてのメモです。

Vueではクラスの切り替えが簡単に行えます

jp.vuejs.org

この公式ドキュメントにもあるように、v-bind:classを要素にくっつければ、dataの値次第でクラスを付け替えたりすることもできます。 また、dataのみならずcomputedを使用してクラス切り替えを管理することも可能です。 どうやってやるねん?という方はこの記事を一緒に見るとわかりやすいかもです。

phiary.me

※察しの言い方は公式ドキュメントだけで十分かもしれませんが、個人的には公式ドキュメントだけじゃわからないことがあるので。。。一応あげさせてもらいました。

クラスの切り替えを値に応じて変更させたい?それもできます。

で、今回はcomputedを用いてクラスを付け替える場合の具体例。

開発の中で、要素に割り振ったidだったりカスタムデータ属性だったりをみて そこに記載されてる値に応じてクラス切り替える、的なことをやりたい!と思って公式リファレンスを眺めていたらそれっぽい記述があったので 一回書いてみないと理解できないな。。。と感じてサンプル作りました。

codepen.io

フォーム要素の中に0や-を入れるとスタイルが変化します(複数値入力も可能になってます)。 jsとタグの中身をみて見るとこんな感じ

HTML側

JS側

スタイルバインディングという形でdata属性に持たせてやる、という方法もあり得ますが 例えばクラスを当てる対象の要素の中身がユーザーの入力によって動的に切り替わるとかであれば 上のサンプルのようにcomputedで判定を持たせてくるくる切り替える方法もありです。

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

どうもです。最近引越ししました。

今週も良きウェブまとめです。 今週は不思議なデザインだったりアニメーションが特徴的だったり、何かしら真新しい感じが得られるサイトをよく見かけた気がします。 一日2、1個ベースでサイト収集するようにしているので数は少なめですが、どのサイトもインパクト大きめです。

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

プロフィールムービー制作|絵本仕立てのEHONICA

f:id:mio_U_M:20180602182513p:plain http://ehonica.jp/

イラストの優しい雰囲気が生えるサイト。

#イラスト #フェードイン #縦書き #かわいい系 #白

f:id:mio_U_M:20180602182533p:plain https://www.node-link.com/

コンソールを開いてみると思わずクスリとします。

#縦書き #CSSアニメーション #レトロ #茶色 #白 #マウス稼働背景

Loop Berlin — A Summit for Music Makers

f:id:mio_U_M:20180602183004p:plain https://loop.ableton.com/2016/

Futuraのタイポが魅力的なグリッドベースレイアウトなサイト。

#グラデーション #スライドイン #キレイめ #白

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

Chunk - Creative Agency

f:id:mio_U_M:20180602182625p:plain http://chunkagency.com/#!intro

グラデーションが鮮やかなサイト。3D回転しながら遷移する様は圧巻。

#グラデーション #3D回転 #スタイリッシュ系 #全画面スクロール

Aristide Benoist — Freelance Developer

f:id:mio_U_M:20180602182634p:plain https://www.aristidebenoist.com/

奇抜なデザインとグニョグニョとうねる感じが特徴的。

#ホバーアニメーション #赤 #シングルページ

Aalto Festival 2018 - 17.-31.05.2018

f:id:mio_U_M:20180602182648p:plain https://aaltofestival.fi/2018/en/

宇宙的雰囲気漂うサイト。

#Pixi.js #フェードイン #3D #キレイめ

GDPR — The Grandmaster Challenge by Ogury

f:id:mio_U_M:20180602182707p:plain https://www.ogury-gdpr.com/

クイズコンテンツ。正解と不正解のアニメーションが思わず見入ってしまう。

#赤 #スタイリッシュ系 #Pixi.js #白

Cuchillo, independent & creative studio

f:id:mio_U_M:20180602182726p:plain http://www.somoscuchillo.com/es

不思議な作りのページ。真ん中の四角形の中がメインコンテンツのようです。

#テキストアニメーション #スライドイン #TweenMax #白 #パララックス

Orenda Security

f:id:mio_U_M:20180602182816p:plain https://orendasecurity.com/

セキュリティ関連の会社のサイトのようです。頑丈なシャッターのように降りて来る無数の四角形が雰囲気に合ってる。

#テキストアニメーション #ボックススライドイン #TweenMax #シームレス遷移 #白

スタジオスプーン株式会社

f:id:mio_U_M:20180602182831p:plain https://studio-spoon.co.jp/

弾みのアニメーションがとってもキュート!

#ホバーアニメーション #3D表示レイアウト #バウンスアニメーション #かわいい系 #Slick #白

ORIENS -オーリエンス- こころに満ちる香り、自分だけの時間。

f:id:mio_U_M:20180602182856p:plain http://www.oriens-tea.jp/

写真の見せ方がありそうでなかったアニメーション。

#かわいい系 #キレイめ #スライドダウン #シングルページ #斜めレイアウト #白

DREAM PLUS 2018 - ドリームプラス 2018

f:id:mio_U_M:20180602182904p:plain https://www.napla.co.jp/dream_plus_2018/

ボックススライドインはスタイリッシュなサイトによく映える。

#ボックススライドイン #グラデーション #キレイめ #ズームイン #Vue #シングルページ

Hublot - Return to Antikythera

f:id:mio_U_M:20180602182923p:plain https://www.hublot.com/antikythera/

ブルーが鮮やか。スクロールしていくとどんどん展開されるストーリーに引き込まれる。

#フレームレイアウト #ホバーアニメーション #全画面スクロール #青 #ボックススライドイン #背景固定スクロール #インライン再生動画 #Hammer.js #TweenMax #キレイめ #シングルページ

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

Make it rain

f:id:mio_U_M:20180602183050p:plain https://www.justmakeitrain.com/en/

斜めを基調としたインパクト十分なサイト。

#黄色 #スライドイン #インライン再生動画 #ズームイン #スタイリッシュ系 #ホバーアニメーション #テキストアニメーション

TALK.GLOBAL

f:id:mio_U_M:20180602183015p:plain http://talk.global/

文字抜き背景とタイポ遣いがオシャレなサイト。

#文字下背景 #スライドイン #グリッドレイアウト #白 #スタイリッシュ系

いかがでしたでしょうか。 私自身も何かポートフォリオサイト作りたいなと思ってはいますが、どういうのがいいだろうなあという目線でここ最近サイト収集している感あります。 個人的に好みなのは色のインパクトどーん!なサイトですが、目的によってサイトの色合いは慎重に選んだ方が良さそうな気がしてます。

ではまた来週。