徒然畑

徒然なるままに。

【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/

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

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

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

ではまた来週。