Webデザインのモーション集サイトを作りました
個人開発の一環でWebデザインのモーションのアイデアを集めたサイトを作りました。掲載されているコードは自由にお使いいただけます。
このサイトのコンセプトやどのような作りになっているのか紹介します。
サイト概要
Webデザインにおける様々な動きに注目して、そのプリミティブな要素を紹介したサイトです。個々の作例には実装コードを掲載していて、コピペで利用することもできます。内容もよく紹介されているような基礎的なものは少なく、少し改造すれば使えるような実践的なものを紹介しています。そのためHTML・CSS・JavaScriptの基本を理解している前提のレベル感になっています。
そのほかWebの動きに関するコラムやTips的な読み物もあります。
使用技術
各使用技術についてそれぞれ説明していきます。
レンダリング戦略
サイトの性質として、そう頻繁な更新やリアルタイム性が求められるものではないのでSSG（Static Site Generator）でほぼ静的なページとして作っています。予算もないのでSSGの方がランニングコストも低価格になるというのも採用理由になります。後述しますが静的化することで高速な表示にも役立っています。
フレームワーク
メインのフレームワークにNuxtを使っています。バージョンは3系ですが、近くリリース予定の4系互換モードで使って将来のマイグレーションに備えています。採用理由は単純にVue.jsが好きで得意だからです。
Nuxtには開発に便利なさまざまなモジュールが用意されています。ESLintの設定のような開発環境を良くするものをはじめ、画像のサイズバリエーションやフォーマット変換をしてくれるもの、SEO周りの設定をするものなどあります。
最近はあまりNuxtに触れてなかったのですが、Nuxt2系の頃よりもエコシステムも成熟しいろいろ使い勝手が良くなった印象です。
CMS
CMS（コンテストマネージメントシステム）にはNuxt Contentを使用しています。
編集者は自分しかいないのでWYSWYGツールは不要でマークダウンで十分です。またVueコンポーネントも簡単に利用できるので少し凝った内容の記述できます。とはいえ、複雑なレイアウトはできなくもないですが、記述が複雑になったりであまり向きません。パーツを当てはめていく感じです。
地味にゼロランタイムのコードハイライターが内包されているので、技術系ブログには便利です。
ホスティング
ホスティングサービスはCloudFlare Pagesを利用しています。
個人プロジェクトの静的サイトなら無料プランで十分で、帯域やリクエストも無制限なので予算もない自分にはピッタリでした。ほかにもドメイン周りもCloudFlareのサービスを利用しています。ドメイン取得費も安値でよかったです。
お問い合わせフォーム
ほぼ静的サイトですが、唯一動的な部分がお問い合わせフォームの部分です。お問い合わせフォームのAPIはCloudFlare Workers、メールの送信にはResend、またBOT対策にはhCaptchaを利用しています。
お問い合わせフォームにはBot対策にhCaptchaの検証を導入しています。検証を通らないと送信ボタンは押せません。フォームから投げられたデータはCloudFlare Workerで受け取ります。この時hCaptchaの検証結果自体の検証を行って改竄されていないことを確かめます。（POSTデータを直接投げられた場合の対応）
フォームデータが妥当ならWorkerからさらにResendのAPIへデータを投げます。Resendに登録したメールアドレスへ転送されます。
いずれのサービスもプランによっては有料ですが、少なくともスタート時の規模であれば無料プランで十分でした。
アニメーションについて
動きを主体としたサイトではありますがサイトアニメーションとしてはGSAPなどのアニメーションライブラリは使っていません。作例の中で個別にライブラリを利用したものはあります。
できるだけウザくないアニメーションを目指したつもりです。動作はキビキビとしてユーザーのしたいことを邪魔せず、状態変化が滑らかに着地できるようなアニメーションを意識しました。
CSSについて
技術的に挑戦した点に脱Sassを行ったことがあります。VueのScoped CSSを使いつつもスタイリング自体はネイティブのCSSのみで記述しています。
これは掲載している作例についても同様です。現代CSSはネスティング記法や算術関数が使えるようになっているのでSassに頼らずとも多彩に書けました。
広告について
営利目的のサイトではないですが、維持費捻出のためにアフィリエイト広告を掲載しています。
昨今の自動広告はサイト運営者が意図しない広告やコントロールが難しくなっていることもあり掲載広告を選べるアフィリエイト広告にしました。掲載されている広告は全て自分が責任持って選んでいます。
ユーザーが不必要ならバツボタンでしばらくの間非表示にできます。そのクリックした時刻はブラウザのローカルストレージに保存しています。
ただご存知のとおり、ローカルストレージはユーザーが好きに書き換えられます。そこで時刻と対になる署名を生成して一緒に保存しています。この署名と時刻を検証すれば改竄されているかどうか分かります。
署名の生成はサーバーのCloudFlare Workersが検証はブラウザで行っています。署名と検証はWeb Crypt APIを使っています
高速表示を目指して
アニメーションが多いサイトは表示速度が遅いこともままありますが、できるだけ速くなるよう目指しました。静的サイトとした理由の1つでもあります。次のような高速化施策を行っています。
- AVIF画像フォーマットの採用
- フォントの遅延読み込み
- 静的化
- CDNの活用、ライブラリのダイナミックインポート
AVIF画像フォーマットはWebPと比べても高い圧縮が可能なので画像のファイルサイズを削減できます。ただし2025年3月現在ではSafariでアニメーションAVIFの再生が非常に遅くなる現象を確認しています。
Webフォントは重いのでunicode-rangeによる分割と遅延読み込みを実施しています。そもそもWebフォントを使わない方が速いのですがここはデザインのこだわりと速さへの挑戦ポイントでもあります。
静的化は先のレンダリング戦略とおりでサーバーの処理を減らして配信速度を上げています。CDNもCloudflare Pagesのおかげでリソースの配信が最適化されます。
アニメーションの作例に必要なライブラリなどは共通ファイルには含めず、必要な場面でダイナミックインポートしています。
最後に
これからも少しずつ作例は追加予定です。Webデザインの参考になれば幸いです。
Discussion