【Webデザイン】今週の「良きウェブ」(4月7日〜4月13日)

どうもです。今は春なのか冬なのかわかりません。

今週も懲りずに良きウェブまとめです。
この時期は新卒採用シーズンということで何個かそれ系のサイトも含んでますが
まあいつも通り個人的に気になってものを中心にまとめています。

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

132 5. STANDARD | ISSEY MIYAKE INC.

https://www.isseymiyake.com/1325/standard/
三宅一生の新しいブランドのサイト。
服のコンセプトが平面から立体へ、立体からその先へ、という思いを込めていることもあってか
ロゴやメニューのデザインがフラットだったり、実際に服のコンセプトを伝えるための見せ方の工夫がこしらえられています。

J Dilla Changed My Life

http://jdillachangedmylife.com/
このインパクトで一枚ページはなかなか存在感あります。
ファーストビューのvideoで興味を引きつけて、全体スクロールする視聴エリアで音楽に集中させる構成になっています。
メリハリがはっきりしているサイトです。

Max Kaplun

https://maxkaplun.com/
私のブログでは結構この手のデザインのサイトはよく取り上げているので珍しみがないかもしれませんがw
こちらは文章の途中にリンクがところどころ入っているタイプです。
手書きっぽい文字がところどころサイトの説明で入ってるのも可愛い。

Millemann Consulting - Des solutions éthiques et responsables

https://www.millemannconsulting.fr/fr/consulting/quintessence
日本語で縦書きはたまにみるので珍しいとは言えませんが、英文字で縦書きは逆に目を引きます。
下までいくと自動遷移しますが、その際の見せ方も艶があって良いです。

Will Mayer - Director (among other things)

http://willmayer.com/
背景に邪魔にならない程度にスクラッチノイズが入っており、それが逆に心地いいサイトです。
作品事例のムービーのUIは個人的に珍しくて参考になります。

Film Truck

https://www.filmtruck.co/
書体や配色の雰囲気がレトロですが、ムービーのおかげで今っぽく感じるネオレトロなサイト。
ホバーアクションな仕掛けもところどころあるのでPCでもみるとよいかも。

HEROs - Sportsmanship for the future -

https://sportsmanship-heros.jp/
大胆なまでにデュオトーンの写真を使ったサイトです。
スポーツスピリッツに赤と青はよく映えることを痛感するデザインです。

Frans Hals Museum

https://www.franshalsmuseum.nl/en/
PCでみる際はタイミングずらしたダブルパララックスイメージを、スマホで見るときはまるでアプリのようにわかりやすいUIに注目して欲しいです、
こんな楽しいミュージアムサイトあると、美術館行こうかなとか思っちゃいますね。

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

Ghost | Augmented Reality Headset | A New Digital Experience

http://ibelieveinghost.com/
商品説明のお手本とも言えるサイト。
実際にこのサイトを見ていてこの商品すご！というのが伝わってきました。
モヤモヤ〜としているところにwebglを用いて表現しています。

HAJIME WATANABE / 渡邉肇

https://hajimewatanabe.jp/
写真家さんのポートフォリオサイトです。
正直ページ導線が慣れていない人にとっては難しいかもしれませんが
世界観の表現としてこんなに水面、波紋の作り込んでいるサイトはなかなかないかも。

インターネットの歴史 History of The Internet - Yahoo! JAPAN

https://internethistory.yahoo.co.jp/rich/index.html
インターネットの歴史を塔にしました！なサイトです。
塔のオブジェをクリックすると詳細が見れるのはもちろん
サイドに行きたい年代にジャンプできるサイドバーもちゃんと備えており、UIもしっかりとしたサイトです。

Howlt

http://howlt.com/
ちゃんと閲覧している時間帯によって明るくなったり暗くなったりするサイト。
サイトの入り口が街の風景イラストなのもなんか可愛い。

ADK RECRUIT 2019

http://www.adk-recruit.jp/index.html#
ダイナミック。その一言に尽きます。
赤ベースなので元が目立つんですが無限に広がるような社員たちのマップもなかなかに凄みがあります。

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

契約社員採用｜リクルートライフスタイル RECRUIT LIFESTYLE

https://www.recruit-lifestyle.co.jp/recruit/keiyaku/
まるで日本ドラマの番宣ポスターみたいなファーストビュー。ポップ&スムーズな雰囲気に仕上がってます。
個人的に下位ページの文字の現れ方がスムーズで好きです。

ヘアケアメーカー ナプラの リクルート(採用情報)サイト

https://www.napla.co.jp/recruit/
新卒採用サイトらしくフレッシュで清潔感がある印象。
アニメーションでプラススタイリッシュな雰囲気を添えています。
個人的には枠を囲む動きが好きです。

ブラザーブランドコンテンツ｜企業情報｜ブラザー

http://www.brother.co.jp/corporate/brand/
こちらはスマホでも見れますが、PCでみることをおすすめ。
スクロールした時のアニメーションの躍動感に驚かされます。
各ページの要素を見ていくのが楽しいです。

KAWANO | セレクトショップ

http://www.kawanoshinjuku.com/
めちゃくちゃ優雅です。サイトデザインと雰囲気にあった速度とフェードの仕方をしたアニメーションが心地よい。
ブランドの高級感をグッと助長しています。

Brontide

https://www.brontidebg.com/home
横スクロールで展開していく絵巻物ムービー的なサイト。
このサイトの奥行きとゆったりとしたスクロールの動きのおかげでナチュラルな雰囲気がグッと引き立てられている印象。

The Shift

https://theshift.tokyo/ja/
シフト、という名前だけあってか、オブジェクトの位置がジグザグだったり、文字の位置が不思議な感じだったり、デザインは名を表している状態です。
projectページの背景スクロールは面白いですよ。

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

Max Allouch - Creative Designer Portfolio

http://maxallouch.fr/
PCで閲覧推奨なポートフォリオサイトです。
ムービーカルーセルから詳細ページへ飛ぶ時のアニメーションの見せ方が個人的に好き！

ELIN

https://elinjp.com/
シンプルなファッションサイトですが、ふわふわとイメージが浮いているように見えるのが印象的です。
背景のテクスチャを固定背景にすることで府中間に説得力を持たせています。

いかがでしたでしょうか。
新卒サイトはやはりより印象的な会社に見えるように演出をしっかり凝っている印象でした。
デザインに説得力を持たせる実装ができるように参考にしようとおもいます。

ではまた来週。