無料お見積りBLOG
ブログ
コーダーが選ぶアニメーションがすごいサイト3選
業種・職種柄、ギャラリーサイトでトレンドのWebサイトを観てインプットすることが習慣となっています。そうやってたくさんのWebサイトを見てきた中で「これはすごい！」と思わず唸るようなアニメーションに出会う事も多々ありました。
そこで今回はコーダーである私が凄いと思ったWebサイトのアニメーションを3つピックアップしてみました！
ギャラリーサイトを観ていれば、凄いと思わされるようなサイトだらけなのですが、今回取り上げたのは、難易度やクオリティもそうですが、私が直感的に琴線に触れたと思うものです。
目次
1.45R Corporate
https://45rpm.jp/ja/#work
一つ目は、アパレルブランド「45rpm」さんのサイトのトップページにある、「ハンガーにかかってるイラストがスクロールすると左右に揺れる」というアニメーションです。その揺れ方が自然でリアリティがあるのです！
振り子って揺れる時、最初は振れ幅が大きくてだんだん振れ幅が小さくなっていって止まると思うのですが、それがもう忠実に再現されていて、リアリティがあるのです！
こちらはCSSの「transform:rotate();プロパティ（要素を回転させるもの）」をプラスやマイナスに行ったり来たりして、左右に振れているのを再現されています。
これ、どうやってここまで物理法則に則った自然な形で再現できたのだろう？
振り子の揺れを再現するツールやジェネレーターがあるとかでしょうか？（ニッチすぎる）いずれにしてもその職人魂に脱帽です…。
神は細部に宿る、ですね。見習いたいです。
2.レタースペーシング タイポグラフィにおける文字間調整の考え方
https://letter-spacing.mimiguri.co.jp
こちらは『レタースペーシング タイポグラフィにおける文字間調整の考え方』という書籍の販促サイトになります。
タイトルの通り、文字間調整について書かれている本ですね。
メインビジュアルの下に”文字間ひとつで、ここまで変わる。”というタイトルがあるのですが、ここの部分が画面に表示された時にカーニング（文字の間隔を調整）するアニメーションが入ります。
最初イマイチだった文字間が調整されて綺麗に整えられていくのが面白くて印象的でした。プロのデザイナーさんがやるリアルなカーニングを覗き見ているようですね！
文字間を整えるだけでここまで変わるのか！という発見もありました。
こちらはSVGアニメーションによって表現されていますね！
3.三桂電機
http://www.sankei-denki.jp
ここ最近閲覧したもので一番印象に残り、感動しました。
随所にある（六角レンチをモチーフにした？）立体的な3Dの六角形がスクロールするたびに回転して、それぞれの面に配置されている写真やテキストが見れるようになっています。
特にSERVICEセクションにある六角形はスクロールする時にネジを締めたり、緩めたりする時の様を再現できているように見えて圧巻です…。
これは凄い…。これは敵わないな、と思うと同時にワクワクするような気持ちにもなりました。
高度なアニメーションを用いているものの、「ゴリゴリで見ていてクドくなる」といった印象は全くなく、むしろ「サイト全体がシンプルでさわやかな印象」になっているのも好印象でした！
非の打ち所がない…。
これらの3Dはjavascriptのライブラリであるthree.jsやwebGLを用いて実装されたと思われます。
https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
https://threejs.org/
これら2つはブラウザ上で3Dアニメーションを表現するためのものですね。
これら3Dの表現ができるようになればwebサイトの表現の幅も広がりますよね。いずれは私も挑戦してみたいと思います！
まとめ
アニメーションを見てみていかがだったでしょうか？
私は先ほども述べたように「これは敵わないな」と気後れするような気持ちがあると同時に、Webサイト制作の奥深さや面白さを目の当たりにすることができたようで高揚するような気持ちにもなりました。
まだまだ課題点だらけの私ですが、たくさんの方の心を惹き付けられるようなアニメーションができるよう研鑽を積んでいくつもりです。
愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17 花車ビル南館5F
TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから
もぐら
コーダー
2022年入社。実務未経験ながらも一念発起してWeb業界に飛び込みました。日進月歩の変化の速い業界で日々の勉強が必要不可欠ですが、楽しみながら一人前になるべく頑張っています。
おすすめの記事
人気の記事
おすすめ記事
アーカイブ
- 2023年 12月 (13)
- 2023年 11月 (10)
- 2023年 10月 (10)
- 2023年 9月 (9)
- 2023年 8月 (9)
- 2023年 7月 (10)
- 2023年 6月 (9)
- 2023年 5月 (10)
- 2023年 4月 (8)
- 2023年 3月 (9)
- 2023年 2月 (7)
- 2023年 1月 (9)
- 2022年 12月 (10)
- 2022年 11月 (7)
- 2022年 10月 (6)
- 2022年 9月 (6)
- 2022年 8月 (6)
- 2022年 7月 (4)
- 2022年 6月 (4)
- 2022年 5月 (5)
- 2022年 4月 (5)
- 2022年 3月 (10)
- 2022年 2月 (10)
- 2022年 1月 (11)
- 2021年 12月 (12)
- 2021年 11月 (13)
- 2021年 10月 (13)
- 2021年 9月 (13)
- 2021年 8月 (14)
- 2021年 7月 (14)
- 2021年 6月 (14)
- 2021年 5月 (13)
- 2021年 4月 (13)
- 2021年 3月 (18)
- 2021年 2月 (12)
- 2021年 1月 (14)