明けましておめでとうございます。
スピッカートの金山(@spicato_kana)です。
今回は、会社で制作した年賀サイトの裏側を紹介できればなと思います。
概要
今回はエンジニアチームの 4 人で役割を分担して制作しました。
その中で、私は年賀サイトの実装とアニメーションの検討と実装を担当しました。
実装の内容を話すので構成の決定などの話は省きますが、福笑いをコンセプトにしてサイトに組み込みたいものをメンバーで出し合いました。
- 制作風景を動画する
- クリックでスタンプを押すことができる
- 要素で重なっていく演出を入れる
- 福笑いをダウンロードできる
- 無限スクロールできる（下方向のみ）
実際に開発を進めていく上で、良かった点と悪かった点を紹介していきます。
開発環境について
開発環境は、Vite を使用しました。
既存の Webpack の環境は使用せず、簡単な Vite の環境を作成しました。
1 ページのサイトだったので特にテンプレートエンジンなども必要ないと思い、Vite にしたのですがこれが結構ミスでした。。。
良かった点
最近、Vite に触れていなかったので、Vite に関する知識を再確認できた点が良かったです。
また、Webpack に比べて開発サーバーの動きが軽く、開発がしやすかったです。
悪かった点
実際のコーディングの際に繰り返し文を利用したい部分が多く、Vite を使用せず最初から Astro の環境で制作すればより効率よく開発出来ただろうなと最後に思いました。
アニメーションについて
アニメーションは、GSAP を使用しました。
イメージだけ共有してもらい大体のアニメーションは自分の方で検討し、実装しました。
良かった点
自分なりにイメージを噛み砕いて実装したものが、メンバーからも好評だった点が良かったです。
最初の予定ではスタンプは完全にランダムに配置されるものでしたが、実装していく中でパーツを選択することで実際の福笑いのようになるのではないかと思い、実装しました。
正直なぜこの案を最初から出なかったのか。。。という感じですが、実装してみて良かったです。
無限スクロールは、Lenis と IntersectionObserver を使用しました。
下部にトリガーを設置し、Lenis の isScrolling の 真偽値 とトリガーの交差を監視して Lenis の関数を実行し、画面トップに戻すというものです。
// Lenisの関数
lenis.scrollTo(".js-mv", {
duration: 0,
lerp: 0, // lerp: 0 でアニメーションを無効化
});
悪かった点
実際に実装してみると、『クリックでスタンプを押すことができる』と『要素で重なっていく演出を入れる』が相性が悪く、スタンプがスクロールでずれてしまうという問題が発生しました。
なので、『要素で重なっていく演出を入れる』は不採用としました。
ちょっとこだわった部分について
- クリックでスタンプを押すときに、カーソルを実際に押した感じにする
このために、通常状態と押した時のハンコのイラストを作成して頂きました。
- 設置したスタンプを全て削除するボタンを実装する。
これにより、より福笑い要素を楽しめるようになりました。 - アニメーションはフェード系のアニメーションはほぼ使わず、パキパキと動くアニメーションのみ。
これにより統一感（世界観）を演出が出来たかなと思います。 - favicon を正月仕様にする
よく見ると、spicatoのsにみかんが乗っています。
これに気づいた方はいらっしゃるでしょうか？（笑）
総評
最終制作物は、良いものが出来たかなと思っています！
また今回の一番の反省点が、詰め込みすぎのアニメーションだったと思います。
あれもしたいこれもしたいという気持ちが強く、工数も多くかけれない状況での実装でどうしても浅く広くなものになってしまいました。
それが悪い訳ではないのですが、もう少し深く掘り下げて実装できればより良いものになったのではないかと思います。
例えば、アニメーションの部分で述べた スタンプのパーツを選択してランダムに配置し実際の福笑いのようにする が案外楽しく、これをメインにしたサイトにしても良かったかなと思いました。
ランダムでレアパーツが出る、完成したら何かアクションさせるなどの深掘り要素を入れることでより楽しめるものになったのではないかと思います。
その場合、動画を撮るなどの工程がなくなるので、工数的にも余裕が出てきたかもしれません。（それなりに工数がかかりました。。。）
また、年賀状と連携したサイトになっており、年賀状の QR コードを読み込むと年賀サイトに飛ぶという仕様になっています。
なので、SP 特化のサイトにすれば良かったのではという話もありました。
PC と SP でかなりレイアウトが変わるので、SP 特化にすることでも工数を削減できたかもしれません。
何だかんだ PC のみのこだわり部分も多いので。。。笑
年賀サイト（ちょっとした LP）を作る上で、1 つの大きなコンセプトを軸にして制作することが大事だと改めて感じました。
特に、遊べるギミックがある場合は色々な要素を詰め込みたくなりますが、それを抑えて 1 つの要素を深掘りすることでより良いものになるのではないかと思います。
ただ今回は、動画を入れることで社内の雰囲気を伝えることができつつ、スタンプで遊べて『ふふと笑って、福を呼ぶ。』というコンセプトは守れたので結果的には良かったです。。。笑
もし来年も年賀サイトを制作する機会があれば、今回の反省点を活かして制作していきたいと思います！！！
Discussion