【Webデザイン】今週の「良きウェブ」(2月3日〜2月9日)
こんにちは。すき焼きが恋しい季節です。
さて今週もツイッターでつらつら呟いていた良きウェブサイトをまとめたいと思います。
デザインが「良きウェブ」
Change the Work｜RaNa design associates, inc.（株式会社ラナデザインアソシエイツ）
http://www.ranadesign.com/recruit/changethework/
デザイン事務所の採用サイトです。パララックスの使い方がデザインにうまく適した形であしらわれています。
思わずスクロールしたくなるサイトです。
Peckham Levels
https://www.peckhamlevels.org/
四角形をところどころ切り取ったようなレイアウトが見ててかっこよさが感じられます。
アニメーションの動きも四角形をモチーフにして統一感があるところもまた良い。
Epic Magazine: Little America
http://www.epicmagazine.com/littleamerica/
縦スクロールを基本としてますが、人物についての記事は横スライドで雑誌のように読むスタイルなので、マガジンらしさを読んでいて感じるサイトです。
タイポグラフィを生かしたヒーロービューもマガジンらしさを感じられます。
JUKO RADIO｜八戸重工商事ラジオCM
http://hachinohe-juko.co.jp/corporate/radio/
フレームのようにページを囲むレイアウトは最近見かけますがおしゃれです。
ラジオをコンセプトにしていることもあって、PC版で見れるマウスに追随するチューナーの動きやロゴの震えは粋な印象を受けます。
株式会社ゼロ
http://zero-com.jp/
アメコミ調でポップなウェブサイト。
思わずソースを覗きたくなるレイアウト組です。
ギミックや発想が「良きウェブ」
Julie Bonnemoy - Portfolio
https://juliebonnemoy.com/
さらっとWebGLを取り入れているポートフォリオサイトです。
作品の見せ方のスライディングの仕方も心地よいです。
加山雄三の新世界
http://kayama-shinsekai.com/
このデザインを思いついた人を知りたい！と思わせるほどユーモアとポップさに溢れたページです。
構成主義的なコラージュアートを彷彿とさせるこのサイト、CSSアニメーションでグリグリ動かしているようです。
参加アーティストのぐるぐる動かしているところは実装的には特に見ものです。
gskinner lab
https://lab.gskinner.com/
CreateJSを開発したチームのラボサイトです。
様々な作品事例を紹介しています。
AID-DCC Inc.
https://www.aid-dcc.com/
スタイリッシュかつダイナミックなサイト。
このサイトはPCで見るのがおすすめです。
ホバー&クリック時のアニメーションが特に見もの。
Adova Group, bien dormir pour mieux vivre
http://adova-group.com/fr
社内のチームメンバーが呟いていたサイト。
中心の円をベースに展開していく背景は圧巻です。
アニメーションが「良きウェブ」
Fork Spoon
https://t.co/2UUXiFh5ih
鍵マークとDESIGNの文字の点滅がとても心地いいです。
この動き見てると夜のネオン街のチカチカ光る電飾みたいだなと思うのは私だけでしょうか。
tashi design
https://tashi.design/
デザインも動きも可愛らしいサイト。
おしゃれで手作り感を感じられるポートフォリオです。
株式会社メタップス 採用サイト
http://metaps.com/careers/
ロゴはSVGアニメーション、背景はcanvasを用いたアニメーションで構成されている模様です。
ちゃんと枠外からもビュンビュン三角形が飛んできます。
Den of Thieves | Official Movie Site | Now Playing
http://denofthieves.movie/
斜めを基調としたデザインとレイアウトです。ハンバーガーメニューもちゃんと斜めってます。
回転のイージングがサイトのクールさを引き立てています。
AROUND inc.
https://around.co.jp/
宇宙をテーマにしたポップで楽しいアニメーションやデザイン。
トップへ戻るのボタンがロケット発射なのが遊びゴコロ満載です。
the HOUSE
http://www.thehousetokyo.com/
最近よく見かける、スライダー＋αのデザイン。
スクロールするたびにランダムに模様が変わる枠も楽しいです。
DANCE NOT ACT | 株式会社ダンスノットアクト
http://www.dancenotact.com/
手がけた映像作品のサムネイルが映えるレイアウト構成になっています。
マウスオーバー時や画像切替のアニメーションがとてもクールなサイトです。
ベイク チーズタルト | BAKE CHEESE TART
https://cheesetart.com/
行列ができるチーズタルトでおなじみのBAKEのウェブサイト。
こちらもパララックスの使い方がうまいです。お店のストーリーを読み進めるのを邪魔するどころか誘導してくれるようなアニメーションです。
真似したくなるようなテクニックがある「良きウェブ」
横瀬クリエイティビティー・クラス ー YOKOZE CREATIVITY CLASS
https://creativity-class.xyz/
文字すかし写真背景も最近よく見られますよね。
このサイトのヒーロービューはプラスして文字が流れているアニメーションが加わっています。
株式会社カプセル
https://t.co/4lt4demynX
クリックしたらずらずらと現れる、ナビゲーションがメイン並の存在感を放つウェブサイト。
シンプルな作りだからこそ引き立ちます。
いかがでしたでしょうか。
今週は結構面白い作りなサイトを見かけたので表現の奥深さを思い知ったのと、
だんだん自分の好みのWebサイトがどんなものかわかってきた気がした一週間でした。
今後も継続しますが、皆様が知ってる良きウェブがあればぜひ教えてください。
