徒然畑

徒然なるままに。

【Webデザイン】今週の「良きウェブ」(2月17日〜2月23日)

どうもです。早く春が来て欲しい今日この頃です。

今週も良きウェブまとめます。
今週はハイセンスなサイトやらポップなサイトやらまあ多種多様なサイトを見かけました(いつも通り)
気持ち音付きサイト多めだと思いますので、是非イヤフォン付きで閲覧するのがおすすめです。

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

10x17

f:id:mio_U_M:20180217110025p:plain
http://10x17.co/
音楽アルバムをフューチャーしているサイト。
パキッとしたカラーリングとデュオトーンの影がかっこいいサイトです。

BUNDY BUNDY

f:id:mio_U_M:20180217110508p:plain
http://bundy.madebywild.com/
ヘアメイクスタジオのウェブサイトです。
写真が魅力的なので余計な装飾は必要ないですね。
PCでみるとさりげなくシネマグラフ使っているところもおしゃれ。

Nacho — Design Creates Value

f:id:mio_U_M:20180224122223p:plain
https://nacho.design/
ファーストビューでの作品の見せ方が斬新です。斜めスライドで展開していく構図がかっこいい。
個人的にはヘッダーの透かし文字のあしらいが好きなポイント。

NEW MUSIC DUBLIN

f:id:mio_U_M:20180225115424p:plain
https://www.newmusicdublin.ie/Online/default.asp
青と紫を基調としながらもポップでスタイリッシュな雰囲気のサイト。
個人的には全面展開するメニュー画面が特にスタイリッシュで好きです。
(これ書きながら気づきましたが、このサイトASPで作ってるのかな?)

Maidson Weight — Menswear Designer

f:id:mio_U_M:20180224122559p:plain
http://madison-weight.com/index.html
あえてこのレイアウトを取っているのならかえって斬新です。
様々な表現が溢れている現在でこんなにシンプルなサイトは珍しいです。

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

Duroc

f:id:mio_U_M:20180217110401p:plain
https://www.duroc.ma/en/
無限スクロールならぬ無限ドラッグできるサイト。
ドラッグならPCでもスマホでも差異のないユーザー体験ができるので良いですよね。
PC版だと冒頭でダイジェスト動画が流れます。

Love Lost

f:id:mio_U_M:20180225115527p:plain
https://lovelost.jam3.com/
エモい系WebGL。略してエモGLなサイト。
BGMと一緒に楽しむのがおすすめです。

BLUES DESIGN

f:id:mio_U_M:20180225115632p:plain
https://www.blues-d.co.jp/
ラインが美しいスタイリッシュなサイト
PC版で見たときのメニューの表示のさせ方や、モーダル画面の見せ方が独特です。
海外のサイトかなと最初思いましたが、愛知県のサイトの模様。

TEATR LALKA

f:id:mio_U_M:20180225115800p:plain
https://teatrlalka.pl/en
見ても楽しい触っても楽しいサイト。
カートゥンの動きがよく作り込まれてます。

Adoratorio

f:id:mio_U_M:20180225115855p:plain
https://adoratorio.studio/
文字のスタイリングにclip-pathをうまく使っていたり、音声マイクで遊べるページなどがあり、
色々と盛り込んでいるサイトです。

MEFILAS

f:id:mio_U_M:20180225120304p:plain
https://mefilas.com/
タカユリさんから教えてもらったサイトです。
全体的にグイグイくるインタラクションが楽しいです。
コンソールを開いてもちゃんと主張してくるあたりが強さを感じられます。

Robin Payot portfolio

f:id:mio_U_M:20180224122745p:plain
http://www.robinpayot.com/
WebGLを使った演出が魅力的な表現豊かなサイト。
是非ともイヤフォンをつけて没入したいページです。

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

IKKO TANAKA ISSEY MIYAKE

f:id:mio_U_M:20180225120437p:plain
https://www.isseymiyake.com/ikkotanaka/
クリックできる場所がランダムに変わるサイトです。
田中一光の作品モチーフとだけあって色彩が主役。

T H E W E E K N D

f:id:mio_U_M:20180225120526p:plain
https://www.theweeknd.com/
一見横スクロールで進むページかと思いきや、真ん中あたりでスクロールが方向転換します。
PCとSPでそれぞれ動きが異なるので両方とも見てみるのも楽しいかもしれません。

Vintage - strategic web agency

f:id:mio_U_M:20180225120616p:plain
https://vintage.agency/
演出のレベルが高くWebのみならず動画作品も引き込まれます。
素直にめちゃくちゃかっこいい!色々と解析したくなるサイト。

Fubiz • Studio

f:id:mio_U_M:20180224122406p:plain
http://fubiz.studio/
今週一番ページのアニメーションがおしゃれでセンスの塊だ!と感じたサイト。
こちらも縦横無尽のスクロールできる一覧表示が特徴的です。

ertdfgcvb

f:id:mio_U_M:20180224122457p:plain
https://ertdfgcvb.xyz/
こちらもシンプルながらもインパクトがしっかりとあるサイト。
ターミナルを思い出すこのページ、どちらかというとエンジニアの心を惹きそうな気がします。

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

HERO-INNOVATION

f:id:mio_U_M:20180225120938p:plain
http://hero-innovation.com/
メニューボタンをクリックした時の見せ方が真似して見たくなります。
コマ撮りアニメヒーロービューやパララックスなアニメーションも楽しいです。

General Services Inc.株式会社ジェネラルサービシーズ

f:id:mio_U_M:20180225121024p:plain
https://www.gsij.co.jp/
シュシュっと動くアニメーションで統一されているサイト。
ページ切り替えの際も紺色→白の順番でスライドアニメーションを盛り込んでいます。
この見せ方によって、ページを閲覧している人が読み込みを待たされてる感じないあたりが良い構成です。

Makeup & Beauty Products, Makeup Tips, Try On Looks and More|COVERGIRL – Coty Inc.

https://www.meltingpoutmetallics.com/
f:id:mio_U_M:20180225120011p:plain
シンプルなページですが、アクセスするたびにランダムで色が変わります。
スライディングして登場する商品の見せ方が良いです。

FRISK Japanese Official Website

f:id:mio_U_M:20180224122907p:plain
http://www.frisk.jp/
フリスクの日本版のサイトです。全画面スクロールももはや定番感がある見せ方の一つです。
回転する商品の見せ方がクールです。

東京イラストレーターズ・ソサエティ(TIS)】Tokyo Illustrators Society

f:id:mio_U_M:20180224122826p:plain
http://www.tis-home.com/
サイトリニューアルしたTISさん。以前に比べてスタイリッシュになった印象です。
ファーストビューの文字抜きレイヤーの使い方はお手本にしたいです。


いかがでしたでしょうか。
今週は「ユーザ体験を損なわないための工夫」がこしらえられているサイトを色々と見た気がします。
私の会社ではデザイナーとフロントエンドが完全に分業しているので、
ページ切り替えとかスクロールするときのアニメーションなどは、特にフロントエンド側がどういう表現をするとよりいいのかを抑えていると
デザイナーが持って来たデザインをよりよくするのにすごぶる役に立つと思っています。
色々模索してみます。