今回は「動きが秀逸なWebサイト」と題して、Webサイト制作の参考になりそうな事例を14個紹介していく。
ユーザーの目を引くアニメーションが使用されていたり、サイト全体の見せ方が秀逸なサイトを集めたので、普段のリファレンス探しに役立つことだろう。
Webデザイナーの方はデザイン・動きのアイディア探しに、Webディレクターの方は提案に向けたリファレンス探しに、そしてコーダーの方は構成・コーディング手法の参考に。
ぜひ役立てていただけると幸いだ。
- LINE GROUND
- HUMAN MADE Inc.
- Ambient Weaving Ⅱ
- FRIXION SYNERGY KNOCK｜PILOT
- SHIFTBRAIN 20th
- Spade&Co. – VISUAL EFFECTS COMPANY
- やさしい切りかた辞典 | 貝印
- MVMNT
- JHRS TOWN
- バターサンド専門店 PRESS BUTTER SAND
- ½8 JOURNAL: Collecting Stamps on Yoshida Trail, Mt. Fuji
- Agriculture | TOPCON DX | 尖ったDXで、世界を丸く。
- ZOOM —日本発のコンテンポラリーデザインペン
- 未来都市シブヤエフェメラを誘発する装置 | ART & GALLERY | GYRE
- まとめ
LINE GROUND
国内最大級のコミュニケーションアプリ「LINE」のデザイン哲学が紹介されているWebサイト。
最初に本が出てきて、スクロールでその中に入り込んでいく演出が素晴らしい。
サイトの構成自体はシンプルだが、コンテンツの見せ方に工夫が見られる。
スクロールに合わせて画像が拡大されたり、縦方向から横方向への動きにシフトしたり。
ユーザーを飽きさせないように様々な仕掛けが施されている良サイト。
ちなみに、左上の「VIEW ALL PRODUCTS」からサイト全体のコンテンツを一覧で見ることも可能。
こういった動線が用意されていることからも、ユーザーのUXを最大限考慮している様子が伺える。
HUMAN MADE Inc.
アパレルブランド「HUMAN MADE」の会社紹介サイト。
ファーストビューはロゴが表示されるだけのシンプルな構成だが、カーソルに合わせてロゴが動く演出に目を引かれる。
スクロールに合わせて鳥（鴨？）のイラストが動き、隠されていた文字が徐々に見えていく演出も可愛くて素晴らしい。
左上のハンバーガーメニューを展開すると、サイト内のコンテンツを一覧で表示できる。
このように、自分が見たい情報に即座にアクセスできる動線を確保しておくことは、UXの観点から見ると非常に重要なことかもしれない。
Ambient Weaving Ⅱ
一般的なWebサイトとは一線を画す、ハイクオリティ且つ先進的なWebサイト。
運営元はZOZOTOWNを運営する「株式会社ZOZO」。
その関連会社であるZOZO NEXTと東京大学の共同研究プロジェクトの成果として生み出されたものらしく、その時点で他のWebサイトとは経緯も目的も異なる。
本サイトはまさに「Virtual Gallery」の名に相応しく、バーチャル世界に入り込んで作品を見ているような気分になるサイトだ。
スクロールに合わせて視点が動いていき、暗い空間の中を進みながら作品を鑑賞することができる。
奥行きや光の表現が非常にリアルで、本当にその空間に入り込んでいるような錯覚を覚えるほど。
本サイトはあまりにクオリティが高すぎるので、こちらの記事でも詳細に解説している。
興味があればどうぞ。
https://directer.site/2024/12/07/ambient_weaving/
FRIXION SYNERGY KNOCK｜PILOT
書いて消せる筆記具「FRIXION（フリクション）」新製品紹介サイト。
かなりクオリティが高く、演出面で参考になる点も多々ある良サイトだ。
まず、全体を通してスクロールに合わせてCGの製品が動いていく表現が素晴らしい。
製品をCGで細かく見ながら、ブランドのイメージも十分に感じることができる演出となっている。
また、本サイトはカスタマイズ性にも優れている。
左下にあるカラーパレットで色を切り替えることができるのだが、この際に選んだ色がサイト全体のキーカラーに反映されるようになっているのだ。
その他、本サイトにはここでは語り尽くせないほどの工夫が施されている。
その他の工夫についてはこちらの記事で詳細に解説している。
SHIFTBRAIN 20th
クリエイティブ全般をこなす企業「SHIFTBRAIN（シフトブレイン）」の20周年記念サイト。
まず目を引くのが、冒頭の「20」が激しく動くアニメーション。
若干目がチカチカするが、クオリティが非常に高い。
スクロールに合わせてオフィス内をVRっぽく見学できる部分があり、まるで自分自身でオフィス見学をしているかのような気分になれる素晴らしい表現。
その後もクリエイティブなアイディアが遺憾無く発揮された見せ方が連発される。
また、自社で作成したバリアブルフォントを紹介している部分もあり、こういったコンテンツは他サイトとは一線を画している。
背景に宇宙のようなグラフィクが敷かれており、まるでSHIFTBRAINの創造する宇宙の中を彷徨っているような体験ができる点も良い。
Spade&Co. – VISUAL EFFECTS COMPANY
VFXを生業としている企業のWebサイト。
とにかくすごい。
やはりVFXが得意な会社とあって、全体的にリアルな演出が随所に見られる。
事例として紹介されている作品自体も素晴らしいが、サイト内の立体的な表現ももはや芸術レベル。
特に、作品が螺旋状に並んで表示される部分はこれまでに見たことのない表現で度肝を抜かれた。
正直どうやって作っているのか分からないほどだ。
それ以外にも、カーソルの動きに合わせた演出が様々な箇所にあり、これもまた素晴らしい。
他サイトでは見られない表現が豊富に盛り込まれている神サイトだ。
やさしい切りかた辞典 | 貝印
貝印が運営するスペシャルサイト。
野菜を無駄なく食べるための最適な切り方を紹介している。
包丁の商品訴求のためのページと思われるが、それにしてはクオリティが高すぎる気もする。
全体的にグラフィカルな表現が目立ち、それらがカーソルの位置に合わせて有機的に動いて楽しませてくれる。
野菜のグラフィックがスクロール・カーソル位置に合わせて分解されていく様は、見ているだけでかなり楽しい。
コンテンツ自体は非常にシンプルだが、見せ方が秀逸なので飽きずに見続けることができる。
オープニングで野菜が横に流れていくアニメーションも可愛らしくて良い。
MVMNT
センスが溢れすぎているクリエイティブカンパニー「Loftwork（ロフトワーク）」のデザイン・ユニット「MVMNT（ムーブメント）」の紹介サイト。
やはり今回もセンスが溢れすぎており、他のサイトでは見られない表現を随所で見せてくれる。
特に、立体的に並んだ制作事例の見せ方、スクロールに合わせてテキストが動く様が印象的。
hoverアニメーションも多用されており、ユーザーの操作に対してのフィードバックがしっかりと考慮されている。
hoverアニメーションでは３原色が多用されてるのだが、若干目がチカチカするのは筆者だけだろうか？
制作事例も、サイトの構成も、アニメーションも、、とにかくセンスが溢れて仕方がない。
JHRS TOWN
一般社団法人 日本不整脈心電学会が運営するWebサイト「JHRS TOWN」。
なんとも厳かな名前の学会だが、本サイトではその活動をグラフィカルに、親しみやすく紹介してくれている。
本サイトは画面全体をマップに見立てたサイトだ。
スクロールでマップの中を移動することができ、マップから気になる建物を選択することでコンテンツが展開されていく。
いくつか中に入れる建物があり、それを選択した場合はフロアの中を移動できるようになる。
こういったサイトでは、斬新な構成のせいで操作性が損なわれることが多々ある。
だがこのサイトでは、左下のアイコンから各エリアをリストで表示することができ、操作しやすい工夫がなされている。
バターサンド専門店 PRESS BUTTER SAND
お土産として大人気のスイーツ「PRESS BUTTER SAND」のWebサイト。
やはり全体的にクオリティが高い。
スクロールに合わせて画像やテキストが順番に現れるようになっており、中だるみせずにページの最後まで見られるような工夫がされている。
スクロールに応じて、ズーム、パララックス、スライド…など様々な動きが展開されるのも魅力の一つ。
hover時の演出も随所に盛り込まれており、ユーザーの操作に対してのフィードバックもしっかりとしている印象。
½8 JOURNAL: Collecting Stamps on Yoshida Trail, Mt. Fuji
富士山を舞台としたアートプロジェクト「½8 journal」のWebサイト。
富士山の5号目から頂上までの間にある山小屋などを巡りながら、その時の作者の経験を追体験できる一風変わったWebサイトだ。
基本的にスクロールのみの操作だが、ただ上から下にページが表示されるのではなく、かなり特殊な動きをする。
スクロールに応じて背景と中央に配置されたCG、左側のインジケーターが変化していき、頂上を目指して山に登っているかのような体験が味わえる。
サウンドと背景のイラストによって没入感も十分に味わうことができる。
カーソル位置に合わせて背景が動く仕組みになっているが、背景のレイヤーがいくつかに分かれており、それぞれがややズレて動くことで立体感を表現している点も素晴らしい。
かなり特殊なコンセプト、構成のサイトだが、演出面で参考にできる点は多々あるだろう。
Agriculture | TOPCON DX | 尖ったDXで、世界を丸く。
「TOPCON（トプコン）」のDX事業を紹介したサイト。
医・食・住の３分野でのDX活動を分かりやすく見せている。
まず目を引くのが、ページ冒頭の地球のCGだ。
メニューから他のページにアクセスしても、背景のCGそのままで遷移していくのが新しい。
確かに別ディレクトリに遷移しているものの、CG部分は変化しない。
そのため、ページ遷移が非常にスムーズな印象を受ける。
サイトのコンテンツ・構成自体はシンプルだが、目を引くCGとページ遷移の仕方が特殊なサイトだ。
ZOOM —日本発のコンテンポラリーデザインペン
先進的なデザインのペン「ZOOM」の紹介サイト。
TOPページはスクロールで縦ではなく横に動いていく形になっており、最後まで進むとループして最初に戻る仕組みになっている。
また、常にゆっくりとページが自動的にスクロールされている、珍しい構成になっている。
全体的にCGを使ったオシャレな演出が目立つ。
雑誌のようなレイアウトと立体感のあるアニメーションで、他サイトには無い独特な雰囲気を醸し出している。
TOPは自動スクロールでWebサイトというよりは動画のような見せ方になっており、それに対して下層ページは一般的なWebサイトと同じ構成。
TOPではブランドイメージを全面に押し出し、本格的なコンテンツは下層ページに配置する形は、サイト構成を考える上で大いに参考になりそうだ。
未来都市シブヤエフェメラを誘発する装置 | ART & GALLERY | GYRE
アートギャラリーイベント「未来都市シブヤ＿エフェメラを誘発する装置」の特設サイト。
まず目を引くのが、冒頭で表示される渋谷の風景。
画像がタイル状に並び、それが時間経過で徐々に切り替わっていく様は、まるで常に変化を続ける渋谷の街を表しているかのよう。
スクロールに応じて見出しや写真が動いてコンテンツを形作る様も、データ世界を旅しているようなイメージでなかなか素晴らしい。
hover時のアクションも豊富で、画像やテキストがモザイク状に変化していくのが楽しい。
背景の方眼を活かした表現も随所に見られ、デザイン性も非常に高いサイトになっている。
センスが良すぎるせいで、もはや参考になる部分がそこまで多く無いような気もしてしまう。
ここまでのデザイン性が求められる場面は少ないかもしれないが、自分のデザインの引き出しに入れておくと良いだろう。
まとめ
さて、ここまで「動きが秀逸なWebサイト」と題して、皆さんの参考になりそうなWebサイトの事例を14個紹介してきた。
世の中のサイトの中には、これまで自分が見たことのない表現をしているものがあるものだ。
そういった事例をいくつか持っておくことで、Webサイトのデザイン・ディレクション、コーディングの幅はどんどん広がっていくはずだ。
本メディアではこれからも素敵なサイトをテーマごとに紹介していく予定だ。
自分たちのより良い仕事のために、この世界に存在しているさまざまなサイトを、一緒に見ていこう。
コメント