webデザイナーの平尾です。
今年もいけてるサイトがたくさんありました。
僕は海外サイトと国内サイトを毎日両方をみています。
今年は出来るだけ制作の参考にするために、国内サイトを特にたくさん見た年でした。
その中の一部で個人的に特にいけてると思ったものをご紹介します。
- 2019年にみたすごいサイトをまとめる
- Web Design Conference Tokyo – Digital Thinkers – UX / UI Event – Awwwards
- Yuto Takahashi
- Payme
- 株式会社LARGO（ラルゴ）
- 株式会社ON | ON CO.LTD.
- エス・グルーヴ新卒採用サイト
- Mercedes-Benz The New CLA
- UNLOCK YOU | WW | WIRED
- みさとと。——島根県美郷町魅力再発見プロジェクト
- ドラえもん ｜ フェリシモ
- DAISO（ダイソー）｜株式会社大創産業
- TOYOTA 高校生向けリクルートサイト
- 永和商事ウイング硬式野球部
- 日本経済社 2020年度採用サイト
- BEAMS JAPAN 公式サイト
- ロゼット洗顔パスタ ブランドサイト
- GO inc. The Breakthrough Company
- カルティエ、時の結晶
- JPホールディングスグループ リクルートサイト
- まとめ
2019年にみたすごいサイトをまとめる
Web Design Conference Tokyo – Digital Thinkers – UX / UI Event – Awwwards
https://conference.awwwards.com/tokyo/
日の丸のローディングから始まり、今年人気の横長ゴシックをベースに使ったサイト。
トレンド盛りだくさんでありながらも、日本らしい街並みやシーンを切り取ってる。
Yuto Takahashi
これでもかと言わんばかり、国内最大レベルの自己主張をWebGLで表現。
スクロールしすぎると猫が出てくるシャレが効いてていい。
フォトグラファーとしての実力まで兼ね備えた、無双なフリーランス。
サムネイルが映えまくる。
Payme
LPを飽きさせないようにするのってすごいと思うねん。
動画やgifアニメーションをちりばめながら、サービスを言葉ではなくグラフィックで説明できている。
株式会社LARGO（ラルゴ）
下層ページ遷移先でのSVGを動かしたメインビジュアルなど、デザインをインタラクションでジャンプアップさせている好例。
線形のアニメーションをとても研究しました。
最高ですね。
株式会社ON | ON CO.LTD.
ネオンの画力にグリッジアニメーション。
とてもオタク気質な世界観を全面に出したエモさ最高。
マウスを載せたらティルトしたり、ページ遷移も既視感ない。
世界観がネオ宇宙。
袋文字を魅力的に大きく使っているのも印象的。
エス・グルーヴ新卒採用サイト
https://www.s-groove.co.jp/freshers/#/
アパレルの会社だけあっておしゃれな多色使い。
採用サイトはかなりインパクトに振ることができるから、デザイナーとしてもディレクターとしても面白い案件だろうな。
サイトでどんな色使いをするかを、あらかじめ撮る前から決めてる。
じゃないと服装まで決められるはずない。
アートディレクターすげえとしか言いようがない。
Mercedes-Benz The New CLA
https://www.mercedes-benz.jp/special/cla/
ベンツがめちゃめた攻めた！
これはまじで見入った。スピード感あるビデオ。ネオン輝くタイポとシーン。
それでいて、右上の資料請求がいつでも目立つので、とても機能的にも充実している。
縦書きの日本が古い雑誌を思わせる。
ドライブのシーンが切り取られてるんだけど、日常を非日常に変えてしまうのは、ポージングなどのフォトディレクションなのかも。
いろんな画角の写真が使われているのに全然うるさくないし、目線が散らない。
ブランド特設サイトという扱いでは、2019年で一番かも。
UNLOCK YOU | WW | WIRED
https://w-wired.com/ww/pc/?page=intro
意味がわからなすぎて怖い。
これ見た瞬間、webサイトなのこれ？ってなった。どのようにして、WebGLを人間の動きのようにしているのだろうか。
そしてこのサイトのコンバージョンは何なのか。。
ものすごく技術が詰まっているので、これを作らせた人も作った人もすごいな。
『ストリートを楽しめ』という、メッセージが語られている。
Flashみたいだな。
みさとと。——島根県美郷町魅力再発見プロジェクト
http://www.town.shimane-misato.lg.jp/misatoto/
これ地方都市のPRサイトだからねw攻めたね！
スクロールが止まらない、奥行きを利用したシームレスなサイト。
衝撃でしかない。日本離れした日本画！
ドラえもん ｜ フェリシモ
https://www.felissimo.co.jp/doraemon/
デザインうますぎる。
装飾を多分に使っていながらも、ドラえもんのコミカルさとユーモラスさを立てせている。
実際の原画を利用しているのかな。
SNSのボタンをマウスオーバーすると、シェアしたくなる。
インタラクションのセンスすごい。
DAISO（ダイソー）｜株式会社大創産業
https://www.daiso-sangyo.co.jp/
このサイトは何度も見た。ダイソーのリブランディング。
大きな企業はいまどきのデザインをにしないことが多い。
理由は株主だったり、リテラシーがない人でもわかるようにしなければいけなかったり、古いOSに対応させたりしなければいけないから。
それにしてもこのサイトは全部クリアしてる。
プロデュース力によってデザイン経営に身を乗り出した感ある。
社長から従業員まで、全員で作ったサイト。
だから全員で経営しているように見えて、好意度が上がる。
100円のやすさは感じない。新商品の更新性も担保していて、機能的に素晴らしい。
機能美 OF THE YEAR。王道の中の王道。
TOYOTA 高校生向けリクルートサイト
http://www.toyota-monozukuri.jp/
これ見たらすごく車が身近な生活の道具だと感じれる。
単色のイラストでここまで表現するか。
グラフィックの素晴らしさを必要最低限のwebのギミックで表現。
可愛いサイコー。
永和商事ウイング硬式野球部
https://baseball.eiwa-shoji.jp/
会社の野球部でここまでするww
何を目的にしてるんかわからんけど、結果的にこの会社が社員のことを愛しているのがわかる。
ギミックもマウスストーカーがあったりで、トレンドを入れてる。
デュオトーンを好きなのもあってなかなか好きこれ。
日本経済社 2020年度採用サイト
https://www.nks.co.jp/recruit2020/
ジオラマの中に迷い込んだようになる劇場型採用サイト。
採用サイトはだいたい面白くなるな。
こんなデザインが上がってきたら、エンジニアはどうやってコーディングすればいいのか悩みますね。
BEAMS JAPAN 公式サイト
https://www.beams.co.jp/special/beams_japan/
日本のアイコンが可愛い。
赤をベースカラーにしたデザインでいてうるさくない。
途中に縦書きが出てきて洋服のブランドなのに、和のテイストを組み合わせてるところが好き。
ロゼット洗顔パスタ ブランドサイト
クリックしたら泡がでる。
とても可愛いマイクロインタラクション。
レトロな雰囲気をちょうどいい感じのコミカルさ。
写真や素材感がとても商品の良さを訴求できていて、ブランドサイトなのにLPの役割もしている。
とにかく技あり。最高。
作り手として、制限がありながらも訴求をわかりやすくするってうまい証拠。
GO inc. The Breakthrough Company
今年は企業のメッセージをメインビジュアル or メインビジュアルすぐ下に配置するデザインが多かったですね。
この流れはコトバが装飾を意味するデザインよりも人の行動を促すと言うことを物語っていると思います。
シンプルでいてギミックが適度に配置されていて僕好みです。
カルティエ、時の結晶
時空を歪ませたような世界観の中に潜ってしまう。
サウンドと素材に迫っていく感じとてもすごい。
WebGlでアクセサリーが現れるのだけど、重力をたっぷり感じさせる物理演算がエモい。
クリスタルの眼下を見下すような、宇宙に立ったような錯覚。
光を感じれるWebGLがすごい。
これはデザイナーではなくデベロッパーがデザインしてるんじゃないかな。
僕からすればカルティエよりもサイトの芸術性の方が高いんじゃないかってくらい。
JPホールディングスグループ リクルートサイト
保育士さんの採用サイト。
SVGが積み木のごとく上から落ちてくる。
何回もスクロールしちゃう。気持ちい！
まとめ
正直ありすぎて選べないので、この辺にしておきます。
来年もよろしくお願いします。
ほなね
