【Webデザイン】今週の「良きウェブ」(5月12日〜5月18日)
どうもです。引越し前日にブログ更新しています。
今週の良きウェブまとめです。 今週はなんだかSVGアニメーション多いなあな感想を抱く選出となりました。 うまく駆使していい感じにサイトをみせたいものです。
デザインが「良きウェブ」
BOEL Inc. ボエル | ブランディングカンパニー
https://boel.jp/
サイトのデザインはシンプルなのでテキストアニメーションの存在感が光ります。
#テキストアニメーション #スライドイン #キレイめ #白
Finesse Design Atelier | Digital & Creative Studio
http://finesseatelier.com/
思い切りよく赤と黒をつかったドラマティックなサイト。好みどストライクなサイトです！
#ドラマチック #スタイリッシュ系 #TweenMax #デュオトーン #赤 #パララックス
伊勢丹セレクション｜JAPAN SENSES
http://www.miguide.jp/japansenses/shinjuku/
写真の和な雰囲気を大人っぽくも可愛くもあるピンクで景気づけてるサイト。シンプルな作りながらも印象に残ります。
#スプレッドスクリーン #和 #ピンク #TweenMax
NPO法人HELLOlife ｜ Create the NEW PUBLIC
https://co.hellolife.jp/
動画のキラキラ幻想的な雰囲気を背景に用いたサイト。動画の文字すかしにはCanvasを使っているようです。
#パララックス #pixi.js #キレイめ #黄色 #可愛い系 #インライン再生動画 #Canvas
InSymbiosis
http://www.insymbiosis.com/
医療系のサイトのようです。WebGLを用いてメディカルな雰囲気を現しています。
#TweenMax #グラデーション #Three.js #パララックス #シームレス遷移
ギミックや発想が「良きウェブ」
MIAMI - 東京大学
http://www.sip-miami.iis.u-tokyo.ac.jp/
縦横無尽に動き回る立方体、ちゃんとサイトの名前を形成したり崩れたりを繰り返しています。
#Three.js #シームレス遷移 #カラフル #白
MOUTAKUSANDA!!! magazine [モウタクサンダ!!! マガジン]
http://moutakusanda.com/
ぶっ飛んだサイトすぎて正直タグ付けに困りました。とにかく訪れて中身を見てみることをお勧めします。
#Hammer.js #ポップ #爆発エフェクト #白 #ホバーアニメーション #劇薬
PLASTICTOKYO
http://plastictokyo.jp/
トップのグリニッチな表現も素敵ですが、Conceptページのテキストアニメーションも見ものです。
#テキストアニメーション #グリニッチエフェクト #キレイめ #ボックススライド
株式会社ココノヱ - coconoe inc.
https://9ye.jp/
とにかく芸が細かいサイト。特にホバーアニメーションが楽しいです。（確か昔はコンソールでテトリスゲームができたはずなのですが、今は見れないみたい？）
#ピンク #ホバーアニメーション #可愛い系 #
DreamTeam Katarzyna Konkowska
http://dreamteam.pl/
ページの遷移の仕方が圧倒的にドラマチック。
#テキストアニメーション #ダイナミック #キレイめ #青緑 #TweenMax #Three.js #シームレス遷移
#Art4GlobalGoals – 17 Issues Interpreted by Leon Löwentraut in His Art
https://art4globalgoals.com/en
閲覧したいページを筆でなぞることで遷移できるという、絵描きごころをくすぐる作りになってます。
#TweenMax #ダイナミック #固定背景スクロール #スタイリッシュ系 #ドラッグ操作
アニメーションが「良きウェブ」
Studio MOTIO ® – Design interactif et développement web à La Rochelle
https://www.studiomotio.com/
円形状に広がる、描くモーションを基調としたスタイリッシュなサイト
#テキストアニメーション #スライドイン #スタイリッシュ系 #黒 #円形アニメーション #パララックス
wrk - French Creative Web Studio
https://waaark.com/
こちらは波打つモーションを基調としたスタイリッシュなサイト。SVGを用いて軽快にみせています。
#TweenMax #シームレス遷移 #SVGアニメーション #可愛い系
homunculus Inc. | 株式会社ホムンクルス
http://homunculus.jp/
独特の演出が光るホムンクルスさんのサイト。気になってコンソールを開いてみると。。。な仕掛けもあります
#Three.js #シームレス遷移 #キレイめ #白 #ホバーアニメーション
Super Duper Studio
https://www.superduper.wtf/
最初はシンプルですが、スクロールするとダイナミックに動き出します。
#SVGアニメーション #パララックス #キレイめ #グラデーション #シングルページ
株式会社コトノバ
http://www.kotonoba.co.jp/
「コトノバ」の文字の中をうねうねと動くアニメーションが特徴的。最初と最後にヒーロービューを見せる、という構成はシングルページサイトでも珍しい印象。
#SVGアニメーション #シングルページ #キレイめ #白 #TweenMax #背景固定スクロール
POGG | スイートポテトパイ専門店
https://pogg-sweetpotatopie.com/
つかもとさんがツイートしていたサイトです。なだらかなテキストアニメーションやシームレス遷移、重くないインライン再生動画など、参考になる点が盛りだくさん。
#テキストアニメーション #スライドイン #キレイめ #紫 #TweenMax #SVGアニメーション #インライン再生動画 #シームレス遷移
真似したくなるようなテクニックがある「良きウェブ」
Abschluss HSD Sommersemester 2017
http://abschluss-hsd.de/
フォントの存在感がある一枚ペラのサイト。
#ホバーアニメーション #スプレッドスクリーン #カラフル #シングルページ
Jacob Sutton
http://jacobsutton.com/
作品が切り替わるごとにタイトルも切り替わる仕組みのサイト。カテゴリごとでフィルター的な役割も果たしている模様。
#Hammer.js #スケールイン #シームレス遷移 #グレー #インライン動画再生
Whitelist
http://whitelist.tv/
虹色の背景が美しいサイト。ページトップのテキストアニメーションが個人的にきになる。
#Pixi.js #スライドイン #キレイめ #シームレス遷移 #虹色 #スライドイン #テキストアニメーション
いかがでしたでしょうか。 最近は意図的にwebサイト収集ペースを減らしています。 まあただいろんなサイトをみるのは嫌いじゃないのでつい色々見たときにガーッと呟きまくることもあるのですが。 その分よりいいインプットになるサイトかどうかアンテナ貼っていきたいと思います。
ではまた来週。
