徒然畑

徒然なるままに。

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

こんにちは。正直言って毎日めまぐるしいです。

最近社内のチーム内での個人的な今年の目標として「ウェブ上での表現力や演出力を高める」と掲げました。
その一環として、自分の表現のインプットを増やそうということで毎日良い!と思ったWEBサイトやWEB表現を一日最低3つ見つけることを目標としています。
(ツイッタで私をご存知のかたは、最近やたらサイトが流れてくるのはそのためです)

ただ見つけるだけでは意味がないので、それぞれ収集したサイトや表現を
「デザイン」「ギミックや発想」「アニメーション」「真似したい」という観点でカテゴライズしてまとめることにしました。

そんなわけで、1月29日から2月2日に見かけた「良きウェブ」を紹介しようと思います。

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

富山アートトリップ

f:id:mio_U_M:20180207073704p:plain
https://toyama-art-trip.jp
ファーストビューのコラージュ風タイトルがおしゃれです。
縦書き指定、斜めカットの写真、縦書きの地図マークレットなど、実装的にも参考になる箇所がたくさんあります。

intentionallies

f:id:mio_U_M:20180207074019p:plain
https://t.co/4shQ03NbBN
ページの構成が斬新です。会社のキーワードとなる言葉たちをタグとしてトップに表示されます。
余計な情報を削ぎ落としたシンプルな構成となっています。

Elegant Seagulls

f:id:mio_U_M:20180207010456p:plain
https://www.elegantseagulls.com/
デジタルクリエイティブを専門とする事務所のサイトです。
鳥の羽をモチーフにしており、ページ切り替え時のアニメーションやスクロールした時の羽の動きがロマンチックなサイト。
レイアウト構造や画面下部のスクロールした時の人物のモーションなども参考にしたい箇所が盛りだくさんです。

PAPER TIGER

f:id:mio_U_M:20180207010701p:plain
https://www.papertiger.com/
ヒーロービューの文字に写真や色マスクがかかっているのがおしゃれです。
各ページのカラー構成はもちろん、canvasを利用したアニメーションもスタイリッシュなサイト。

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

1-10 Robotics

f:id:mio_U_M:20180207010417p:plain
https://1-10robotics.com/
株式会社ワントゥーテンロボティクスのコーポレートサイト。
コミュニケーションロボット開発を中心事業としているだけあってか、サイトの案内役のロボットがトレードマークとなってます。
時間帯によって会話内容が違ったり、テキストうちで話しかけられたりできるのが楽しいです。

Ueno Interview

f:id:mio_U_M:20180207075855p:plain
https://interview.ueno.co/
WebGLで作成された3Dもりもりなサイト。
サイトのプレイヤーとなって各社員にインタビューしていく形式がゲーム感覚で楽しいです。

POSSiBLES

f:id:mio_U_M:20180207080124p:plain
https://t.co/AKUY4j5Czb
スマホでも見れますが、是非ともPCで見て欲しいのがこのサイト。
このサイトのダイナミックさがわかるのはPC版ならではです。

De Boer & de boer | Nespresso | Nespresso Netherlands

f:id:mio_U_M:20180207081046p:plain
https://www.nespresso.com/mobile/nl/en/deboer
何語かがわからなかったのが残念ですが、上空から撮影した映像の上にナビゲーションが現れるようになっている高度な仕掛けをしているサイトです。
パノラマ撮影した画像をうまく取り入れ、農園の空気感をうまく伝えています。

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

Milwaukee Ballet

f:id:mio_U_M:20180207010739p:plain
https://www.milwaukeeballet.org/
バレエ教室のサイトです。ところどころアクセントカラーに赤を使っているおかげで、「内なる情熱」が感じられます。
トップページのスクロール時のサークルアニメーションが可憐なサイト。

Design Leadership Forum Brought to you by InVision

f:id:mio_U_M:20180207010436p:plain
https://www.invisionapp.com/design-leadership-forum
四角形とモノトーンを基調としたデザインがかっこいいサイト。
四角形をうまく用いたアニメーションもスタイリッシュな印象です。

MulberDen

f:id:mio_U_M:20180207082546p:plain
http://www.mulberden.com/
メインビューがダイナミックなデザイン事務所のサイト。
もりもり動きますが情報の読みやすさはちゃんと維持されているのがポイントです。

Relativity Of Time

f:id:mio_U_M:20180207082955p:plain
https://relativityoftime.net/
人類の歴史を「1分間でこの時代の人間は何ができるか」「1時間でこの時代の人間は何ができるか」という切り口で説明しているこのサイト。
アニメーションが主体となっているので、直感的に理解しやすいサイトです。

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

LE GRAMME

f:id:mio_U_M:20180207010559p:plain
https://legramme.com/en/content/home
シンプルな作りながらも洗練された構成のECサイト
大きめのナビゲーションメニューや商品のスライドの見せ方など、参考になる箇所が盛りだくさんです。

Gradient Topography Animation

https://tympanus.net/codrops/2018/01/24/gradient-topography-animation/
さまざまなWEB表現のデモを公開しているこのサイト。
SVGとanime.jsを使って楽しいページ展開をしてくれます。

TWO Inc.|株式会社TWO

f:id:mio_U_M:20180207010643p:plain
http://two2.jp/
横スクロールでページが展開される、モバイルデバイスフレンドリーなサイトです。
背景がインライン再生動画なサイトはそれだけで目を引きます。



いかがでしたでしょうか。
ひとまず一週間やって見て感じたのは、収集するのは簡単ですが各サイトに用いられている技術やギミックが
どういう風にすごいのかを理解するところまで到達できたりできていなかったり、という点です。
なので今後はより技術的な解説もできるように各サイト解析しながら
国内外問わず様々な「これ良いな!」と思うサイトをまとめていくことを目標に更新したいと思います。