徒然畑

徒然なるままに。

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

どうもです。なんとか生きてる今日この頃です。

今週もWebサイトまとめです。 今回は結構カテゴリーが似てるサイトが集まってるので、カテゴリーでサイト比較などができたりするかと思います。 それでは以下からどうぞ。

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

渋谷 シェアオフィス x コワーキング | Connecting The Dots

f:id:mio_U_M:20180508062018p:plain https://dots.bz/

シンプルですがキレイに整ったサイト。ところどころに赤色を忍ばせているのがアクセントになっています。

#ジャーナル風 #フェードイン #キレイめ

クリエイティブメモメモ

f:id:mio_U_M:20180508062032p:plain http://creativememomemo.com/

要所にこだわりが詰まってます。フォントや色合い、アイコンの形まで統一感が気持ち良い。

#ジャーナル風 #フェードイン #キレイめ #かわいい系 #ブログ

株式会社エアー.プラス

f:id:mio_U_M:20180515014715j:plain http://air-plus.jp/

思わず「かわいい！」と悶えたサイト。ブログ楓なレイアウトですが、写真の配置や背景イラストなどをうまく用いてるおかげで可愛さに目がひく。

#ジャーナル風 #canvas #キレイめ #かわいい系 #背景固定 #イラスト

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

Serpentiform

f:id:mio_U_M:20180508062042p:plain https://www.serpentiform.bulgari.com/en/home

ご存知ブルガリのダイナミックなサイト。蛇の蛇行のような動きをするスクロールアニメーションが粋。

#ゴージャス #Three.js #キレイめ #Pixi.js #パララックス

LattexPlus Festival 2017

f:id:mio_U_M:20180515014733j:plain http://festival.lattexplus.com/

レイヤーがどんどん開かれていく様はなかなかユニーク。文字打ちアニメーションはちゃんと一個一個バラしてできてます。

#カラフル #Three.js #クール系 #フォントアニメーション #パララックス #シングルページ

BATON PASS | バトンタッチ | JAL企業サイト

f:id:mio_U_M:20180515014750j:plain http://www.jal.com/ja/outline/brand/baton/

スクロールを利用した行程の説明アニメーションがすごい！要所でSVGアニメーションを使っているのも相性が良いです。

#SVGアニメーション #TweenMax #キレイめ #パララックス #シングルページ

DELAUNAY(ドロネー) - Web construction unit based in Tokyo.

f:id:mio_U_M:20180515014800j:plain https://delaunay.jp/

マウスに合わせてウネウネ動く背景はスクロールすると弾け飛びます。優雅です。

#キレイめ #シンプル #ホバーアニメーション #Canvasアニメーション #シングルページ

ESPALMADOR MARISQUERIA｜エスパルマドール マリスケリア｜仙台

f:id:mio_U_M:20180515014811j:plain http://www.tf-corp.co.jp/espalmador

ファーストビューのインパクトがピカイチ。全体を通して伝わるバカンス感が心地よい。

#キレイめ #カラフル #かわいい系 #パララックス #Canvasアニメーション #ホバーアニメーション #シングルページ

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

201˚

f:id:mio_U_M:20180508062052p:plain https://201d.jp/

有機的に動く要素のアニメーションが特徴的。スクロールすると画像が完成するなど、工夫も色々。

#パララックス ＃キレイめ #シームレス遷移 #インライン再生動画 #円形アニメーション

Type Terms

f:id:mio_U_M:20180508062106p:plain https://www.supremo.co.uk/typeterms/

タイポグラフィの基礎的なことを解説しているサイト。フォントとSVGの相性が良い。

#シングルページ #青 #フェードイン

fillab - FILが運営するファブ・スタジオ

f:id:mio_U_M:20180515014820j:plain http://lab.fillinglife.co/

下から上へスライドカバーしていくサイト。下層ページに遷移すると次のページへ移動するようになっているのも特徴的

#パララックス ＃キレイめ #シームレス遷移 #インライン再生動画 #円形アニメーション

株式会社グッドライフ | 一歩先のオフィスをご提案します

f:id:mio_U_M:20180515014833j:plain http://goodlife-inc.co.jp/

コマ撮りアニメーションのような動きが随所に見られるおかげで企業サイトの堅苦しさが緩和されてる例

#パララックス ＃スタイリッシュ #ロゴアニメーション #TweenMax #インライン再生動画 #イラスト使用

Blocksphere

f:id:mio_U_M:20180515014933j:plain https://blocksphere.co/

デジタルっぽさを感じられるデザイン。ものすごくスムーズに動きます。

#パララックス ＃スタイリッシュ系 #シームレス遷移 #全画面スクロール #フォントアニメーション

Luc Dandrel

f:id:mio_U_M:20180515014900j:plain https://lucdandrel.com/

黒を基調としたスタイリッシュなポートフォリオサイト。

#TweenMax＃Vue.js #シームレス遷移 #ボックススライドイン #スタイリッシュ系 #黒

札幌円山のコンディショニングジム＆パーソナルトレーニング FORH

f:id:mio_U_M:20180515014947j:plain http://forh.jp/

ボックススライドインアニメーションの好例。

#パララックス ＃グラデーション #SVGアニメーション #ボックススライドイン #インライン再生動画

Top Paddock

f:id:mio_U_M:20180515015009j:plain https://toppaddockcafe.com/

文字が浮遊するのが楽しいサイト。スクロールで画像がもにょんと動くのは珍しいです。

#パララックス ＃TweenMax #smooth.js #フェードイン #シングルページ　#ボックススライドイン 　

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

FLOWER AQUARIUM BY NAKED Secret sea

f:id:mio_U_M:20180508062121p:plain http://www.aqua-park.jp/special/floweraquariumsecretsea2018/

幻想的な森の中を歩いているような気分になる、雰囲気を上手く見せたサイト。

#パララックス #奥行き #3D展開アニメーション #フェードイン #シングルページ #ボックススライドイン

POINT EDGE ShibuyaBASE

f:id:mio_U_M:20180508062134p:plain http://www.pointedge.work/shibuya/

時折出てくるくるくると回る四角形がポイント。

#パララックス #フェードイン #シングルページ #CSSアニメーション #シンプル

株式会社CRAZY(株式会社クレイジー) | CRAZY,Inc.

f:id:mio_U_M:20180515015022j:plain https://www.crazy.co.jp/

ファーストビューにインパクトのあるサイト。ボックススライドするアニメーションを基調として展開して行きます。

#パララックス #フェードイン #キレイめ #全ページスクロール #CSSアニメーション #ボックススライドイン

いかがでしたでしょうか。 早いもので5月になってしまいましたが、1月末から収集し始めてきた良きWebサイト、おそらく３００超えたかなと感じている今日この頃です。 （一日３個ずつ見つけているので、毎回の記事で２１個ずつと換算して単純計算したらそれくらいあるかと） ちりつもとはよく言ったものです。 6月以降は少し方向を変えたいと考えています。

ではまた来週。