【Webデザイン】今週の「良きウェブ」(3月3日〜3月9日)
どうもです。いい加減暖かくなってほしいです。
今週もWebサイトまとめです。
今週は私が本能的にシングルページウェブサイトを色々見たいと感じたので
シングルページウェブサイト多めです。
Webデザイン編
デザインが「良きウェブ」
913 | ヌフアントロワ オフィシャル
http://neufuntrois.com/
おいしさとおしゃれを同居させたデザイン。
SVGアニメーションを要所にうまく使ってます。
Dating Vandalized
http://datingvandalized.com/
色使いが鮮やかなシングルページサイト。
メニューの出方のアニメーションが個人的に好きです。
有馬記念ウィナーズコレクションキャンペーン│JRA
http://www.jra.go.jp/special/nenmatsu2017/index.html
キャラクターの弾む動きが可愛い！
イラストとデザインのトンマナが調和してるのでJRAのサイトだということを忘れそうになります。
haluta | ハルタ
http://www.haluta.jp/
弾むグリッドレイアウト、スプレッドスクリーン×スライダーがなるほどな使い方。
写真多様でもすっきり綺麗なデザインです。
Flywheel | Design Trends 2018
https://getflywheel.com/design-trends-2018/
レトロさと新しさが同居するペライチサイト。
GIFの使い方やふわふわするパララックスが可愛い。
SPACE SHOWER TV Presents SPRING BREEZE 2018
https://www.spaceshowertv.com/springbreeze/
まさに春のライブ！という雰囲気が伝わってくるシングルページサイト。
スマホ版の方が個人的にはスタイリッシュなデザインに感じました。
Masashi Muto｜武藤 眞志
http://www.masashimuto.com/index.html
フリーグリッドで作品をドラマチックに見せています。
こういう絶妙なバランス感があるデザインが個人的に好きです。
ギミックや発想が「良きウェブ」
不良ページとよばれて｜株式会社 フォノグラム
https://www.phonogram.co.jp/lp/furyo/
デザインがどうとかじゃないです。純粋にコンテンツのインパクトにやられました。
元ネタわかれば面白さ倍増なんでしょうけど、わからなくても十分に面白いです。
メンズコスメ【YES】ジャケ買いできる男性化粧品
https://yes-drug.com/
canvasをうまく使った好例。
サイトのテーマとうまくマッチする使い方をしていて楽しい！
お絵描きした画像はダウンロードできます。
Thymia | Discover your mood
http://thymia.world/
リッチな表現の診断コンテンツサイト。
回答次第で自動的にオブジェクトが出来上がります。
選択肢のパラメータが自動で調整できるのも珍しい。
TVアニメ「BEATLESS ビートレス」公式サイト
http://beatless-anime.jp/
現在放映中のアニメの公式サイト。
ローディング時の演出や立体的に動くシースルー背景は真似したくなります。
JOOP! FRAGRANCES
https://joop-fragrances.com/
エクスプラネーションマークが目を引く男性フレグランスのサイト。
コンテンツの表示の仕方やメニューホバー時のアテンションなどが特に目を引きます。
滑らかなスクロールも心地よいおしゃれなサイト。
アニメーションが「良きウェブ」
monopo
https://monopo.co.jp/
先週紹介したおみくじマシーンを作った会社のサイトです。
手がけた作品の見せ方が独特でスタイリッシュです。
Patrick Heng - Creative Developer
https://patrickheng.com/
個人ポートフォリオサイトです。色々詰め込んでます！
挨拶ローディングが個人的にツボ。
GANTZ:O｜ガンツ:オー 公式サイト
http://gantzo.jp/
メインビジュアルに負けず劣らずカッコイイデザイン。
PCで見た方がさらにカッコ良いです。
#letsmuseeum: Stell dir vor, du scrollst durch ein Museum – in echt.
https://letsmuseeum.com/
独特な風合いのサイトです。これも確か以前チームメンバーが共有していたサイトです。
くるくる回りながら登場する画像の見せ方はCDジャケットの見せ方などにも使えそうな印象。
真似したくなるようなテクニックがある「良きウェブ」
ダイワのつみたてNISA（ニーサ）大和証券×ルパン三世 | 大和証券
http://www.daiwa.jp/nisa/tsumi_nisa/lupin_3rd/
ルパン三世の大和証券コラボなシングルページサイト。
スクロールするたびに出現するキャラの見せ方がうまいです。
「メカクシティアクターズ」公式サイト
http://www.mekakucityactors.com/index.html
トップのキャラ紹介スライダーが世界観にマッチしてます。
タイプ打ち風に出現するタイトル要素など、要所のあしらいもこだわってます。
良きウェブ：Webクリエイション編
Waterdroplets
codepen.io
ひたすらに雫が飛び散る作品。
パステルカラーに変えたりするとまた雰囲気がガラッと変わりそう。
Celeste snowglobe round 3D
codepen.io
くるくる回る可愛らしい3D作品。
Bigs & Littles
codepen.io
凝ったことはしてないけれど目を惹く作品。
演出センスが光ります。
いかがでしたでしょうか。
今はWebGLなどのゴリゴリでリッチな表現も色々できるようになりましたが
そういうのにも頼らずともスッと目を引くような表現も追求していこうと思った次第でした。
ではまた来週。
