【Webデザイン】今週の「良きウェブ」(6月30日〜7月6日)
どうもです。まじでお久しぶりです。二週間くらいぶりです。。。
もう季節はすっかり8月になっちゃったわけですが、今週の良きウェブまとめ6月末からの分です。 まとめておかないと自分が辛くなるので。。。 それでは今週も以下からどうぞ。
デザインが良きウェブ
KYOTOGRAPHIE international photography festival
パキッとした赤とボックスベースにしたデザインがめちゃくちゃかっこいい。
#赤 #スタイリッシュ #外枠あり
Paradiso
モーダルを開いたときに領域外をタップしたら閉じる、というのは良くある実装ですが、このサイトは領域外に出るとちゃんとマウスカーソルの変化で閉じれることを示してくれてる。さりげないユーザビリティへの配慮。
#グリッドレイアウト #ホバーアニメーション #シームレス遷移 #スタイリッシュ #ダイナミック #無限スクロール
アニメーションが良きウェブ
一般社団法人クオリティ・ワン
日本のサイトでアメコミ調なイラストを使うのは珍しい。ボックススライドインがとても良きイージング。
#CSS animation #パワフル #スタイリッシュ #スクロールアニメーション #ボックススライドイン
What is Data Science? | Thinkful
https://www.thinkful.com/blog/what-is-data-science/
パララックスで動く幾何学模様たちがおしゃれ
#CSS animation #スタイリッシュ #パララックス #シングルページ
ハーゲンダッツアカデミー since1961
https://www.haagen-dazs.co.jp/brand/academy/
アカデミックな雰囲気の女子が本当にトコトコ歩きながら登場しているみたいだ。。。！複数の種類のアニメーションをうまく使って構成しているところも良い。
#TweenMax #SVGアニメーション #CSSアニメーション #かわいい系
焼きたて抹茶チーズタルト | ベイク チーズタルト | BAKE CHEESE TART
https://cheesetart.com/lp/matcha2018/
本家のサイトと雰囲気を合わせていますね。
#スクロールアニメーション #SVGアニメーション #ボックススライドイン #テキストアニメーション #縦書き #シングルページ
Barsi Marmi - Estrazione, Lavorazione e Commercio Marmo di Carrara
デザインにあったスタイリッシュな動きを取り入れているいいお手本。スクロールせずにページコンテンツが見れるようになってる親切さ。
#Hammer.js #TweenMax #固定ページスクロール #テキストアニメーション #シームレス遷移 #ボックススライドイン #斜めスライドイン
TAKAAKI ISHIKAWA | design studio drop.
この週で一番好きなサイトの演出があしらわれたサイトです。 一覧の画像の見せ方が、単純にノイズが動いているテクスチャgifを上に載せているだけですが、だいぶん雰囲気が変わるのが良い
#スクロールアニメーション # グリニッチ #ホバーアニメーション #スタイリッシュ #黒
網頁設計
ページ遷移の仕方がダイナミックで一番の見どころ。 メニューのデザインもただのハンバーガーメニューじゃないものを出そうという気概がうかがえる。
#グリッドレイアウト #ホバーアニメーション #シームレス遷移 #スタイリッシュ #黒 #スクロールアニメーション
