おばんです、アルテガエンジニアのはるきちです。
私はWeb制作会社でエンジニアとして働いていますが、細かい指示がないとアニメーションを実装できない自分に不安を感じて、徹底的に学ぶために『100日間アニメーション探求』という挑戦を始めました。
無事に100日目を迎えたので記録に残してみようと思います。
集めたアニメーションはNotionにまとめて公開します。
記事の最後にリンクがあるので、どなたかの参考になれば幸いです！
社長、ブログ勝手にお借りします！！
不勉強なだけかも
ほぼ未経験で入社して2024年7月で1年が経ちました。
当初からアニメーションには苦手意識がありましたが、イージングやタイミング、実装方法までも具体的な指示をもらうこともあり、メンバーに頼りっぱなしな自分に不安を覚えました。
私側から何か提案したり議論したりなんてもってのほかだし「エンジニアにとって最後のインタラクションで仕上げる時間が至高やんな〜！！」という弊社長の言葉にも全っ然共感できず。。デザイナーさんの案を形にするのがまず難しくて大変だった。
もちろん数も経験値も必要だとは思うけどなんか違うなぁ…と感じた入社1年目。
これって苦手なんじゃなくて不勉強なのでは😱これは苦手の一言で片付けちゃいけないと思いました。
100日間アニメーション探求の経緯
そして勝手に立ち上げた #100日間アニメーション探求。
正直、100日なんかでめちゃくちゃ腕が上がるほど甘くないです。
けど世のすごいエンジニアの人たちも絶え間ぬ努力と熱量と数で強くなっていったはず。
この積み重ねがきっと大きな結果になると信じて小さく始めることにしました。凡人は手を動かす量が必要。凡人である私がやらないでどうする。
学習のねらい
大きな狙いはアニメーションの実装方法の引き出しを増やすことです。
ただ、やるからには「三方よし」「一石三鳥」を狙おうと思いました。
2.将来的に積極的にアイディアを出してエンジニア側からも提案する（for会社）
3.素敵なアニメーションと実装方法の共有（forフォロワーさん）
3番目は、Xで素敵なサイトやTipsの紹介をされている投稿を見て「ありがたい、めっちゃ勉強なる・・」と自分自身が思っていたからです。
積み上げを公開すれば誰かの役に立つかもと思いました。
また、裏テーマとして自分自身でも弊社のサイトやブログ投稿を広めたい。求む拡散力！！がありました。
よりいいものを作ることも、それを見てもらう努力も大切だと思っています。
積み上げの進め方
主には、手元のNotionにまとめながらXで発信しました。
Notion
アニメーションなので動きがわかるようにgifサムネイルを使いました。
Xの投稿も同じgifを流用していたのですが、動きがカクカクすることが多く途中からmp4に切り替えました。
Notionはこんな感じです。一応、大きすぎるカテゴリーですがフィルターもできます。
Xポスト
実装方法についての学びや面白いアイディアだと感じたことについて投稿しました。
影の演出すごい…
・スポットライト→svgの<mask>をmask-imageとしてセクションに紐づけ、マウス位置は<mask>内で動的に反映
・h1の影が動く→absoluteで配置した影のskew(52deg) scale(1, 0.6);を動的に動かすhttps://t.co/bZwoWgsS17#100日間アニメーション探求 91日目 pic.twitter.com/souZrqejKY— はる🌸ARUTEGA (@fuwafuwahappy) November 25, 2024
grid上に置かれた多数の白いマスクをtranslateで動かすことで下に敷いたcanvasが見えていく！発想面白いなぁぁぁ。
スクロール量をCSS変数に入れる実装方法✏︎https://t.co/cPEef3mdr2#100日間アニメーション探求 84日目 pic.twitter.com/JmhGVknipA
— はる🌸ARUTEGA (@fuwafuwahappy) November 16, 2024
たまに出てくる商品がマスクされてる形がユニークだなぁと思ったら、最後にコンテンツ自体が商品の形になってたとわかった！おもしろい！https://t.co/5NPrQin3N6#100日間アニメーション探求 77日目 pic.twitter.com/ooWnkbKZb9
— はる🌸ARUTEGA (@fuwafuwahappy) November 9, 2024
hoverすると箱がひらいて中身が見えるアニメーションとか…発明すぎる…！
昨日からゆっくり拝見してるspicatoさんのお仕事。
サイトのコンセプトや商品にあったアニメーションの好例ですよね。丁寧な仕事だ…！https://t.co/7CZlXzBsMd#100日間アニメーション探求 19日目 pic.twitter.com/SUKPKkbNPl— はる🌸ARUTEGA (@fuwafuwahappy) September 4, 2024
実際に手を動かす
StackBlitzで実際にコードを書いて、Xに載せることもありました。
参考：https://aquall.jp/ 様
参考：https://cow-aka.jp/ 様
参考：https://www.tedy.app/ 様
参考：https://www.umetoku.co.jp/recruitingsite/ 様
参考：https://marnon.jp/ 様
得られた学びと成果
まず、結果的に複数のアーカイブサイト全部をくまなくチェックすることにつながりました。
自分の目で見て、手で集めるからこそ、解像度高くサイトと向き合えるようになったと思います。
前からアーカイブサイトを見るのは日課でしたが、どうしても「わー！すごい！めっちゃいいサイト！」で終わることが多くて、具体的にどんな技術を使ってる？どういう実装？なぜこのアニメーション？という深い部分まで見れていなかった。
それが、サイトのTOPも下層も上から下まで確認できたので、インタラクションに限らず「うわぁこれこうやって実装してるのか、、！！こんなアイディアが、、！！」といった学びを深くすることができました。
あとは、確実に引き出しが増えました。
同じ実装でも、自分はclip-pathだと思ったけど、コードを見てみたらborder-radiusだった！！など「自分だったらこうやって実装するかな？」と最初に当たりをつけてからコードを見ることで引き出しも増えていったと感じます。
実装だけではなくてアイディア面での学びも多かったです。
難しい技術をたくさん駆使している、というのは案外少なくて、スタンダードなCSSを使っている「頭いいなー🛫！！」と思うようなひらめきが多いこと。アイディア・ひらめきによってサイトにあったイメージやコンセプトと引き立たせる役目としてアニメーションを使うことが何より大事だと気づきました。
Notionの公開
作ってきたNotionをせっかくなので公開してみようと思います！
これは最初に考えた「三方よし」の1つである”素敵なアニメーションと実装方法の共有（forフォロワーさん）”にあたるかもしれません。
なんとか値して欲しいw
与えられることが少ない状態からgiveするって非常に難しいですよね。。とやってみて感じます。
また、アニメーション探求は不定期で継続していきます。少しずつ増えていくかなと思うのでぜひご覧ください。
仕事外で自主的にやっていることもあり、考察が深い日もあれば浅い日もあります。。
コメントの量や質などに他意はございません！！悪しからず😭
今後について
当初から100日を超えても続けようというのは決めていました。
今は特に「「弊社のサイト大リニューアル」」が目下で行われており更新が不定期になるかもしれませんが・・・また見ていただけたら嬉しいです！
考察が間違っていたらコメントして教えてもらえると嬉しいですし、共感してもらえるのも嬉しいです。
全部ひっくるめてアルテガの制作の糧にしていきます！し、どなたかの糧になるとまた嬉しいです。
たくさんのアニメーションとその実装方法を見てきたけど、実際に自分でコードを書く行為はどうなのか？？という現実もあります。
実際に手を動かすフェーズは仕事でたくさんいただいているのですが、正直それも足りないと思っています。デモも増やしていけたらいいなぁ。
あとはプライベートで、このNotionを紐付けてNext.jsを使ったアニメーションのピックアップサイトを個人開発してみたいなと考えていたりします。🔥
まとめ。Webサイト好きだわ。
拙い挑戦を見ていただきありがとうございました！！
Notionに集まったパーツの精鋭たちを見てるとめちゃアドレナリン出ます！このWeb上で表現されるものが自分はたまらなく好きだな！と思いました。
世の中にはたくさんのいいWebサイトが溢れている = 先輩、教材で溢れているということでもあるので、今後もたくさん制作の糧にしていきたいです。
このアニメーション探求の間に、試行錯誤しながら実装した渾身のWebサイトももしよかったらご覧ください！
したっけね！
