先日、「はなゐ」のウェブサイトをリニューアルしました。
はなゐ
広島のWeb屋さんです。
使ったツールは下記の通りです。
- Astro
- Netlify
- SSGform
アニメーション
Lottieアニメーションがページ遷移しても動きはそのままに位置だけが変わるのがお気に入りです。これはAstroのビュートランジションを利用しています。今のところChromiumブラウザのみ対応ですが…。
Base.astro
---
import { ViewTransitions } from 'astro:transitions'
---
<html lang="ja" class="h-full scroll-smooth">
<head>
<ViewTransitions />
</head>
<body>
<Lottie />
</body>
</html>
Lottie.astro
<div
id="lottie"
class="size-[min(50vw,240px)]"
transition:animate="none"
transition:persist="lottie">
</div>
<script>
import lottie from 'lottie-web'
const container = document.getElementById('lottie')
if (container) {
document.addEventListener(
'astro:page-load',
() => {
lottie.loadAnimation({
container,
renderer: 'svg',
loop: true,
autoplay: true,
path: '/lottie.json',
})
},
{ once: true }
)
}
</script>
Lottieアニメーションは下記の記事を参考に、Figmaで作成しました。私が作ったアニメーションは動きが荒いですが、本当はこのくらいなめらかにかわいく動くんですよ…！
FigmaでLottieアニメーションを作ってみよう！作成方法やメリット、注意点を解説 - necco note | necco inc.
Figmaを使ってLottieアニメーションを作成する方法を解説しました。作成時のポイントや注意点、FigmaでLottieを作るメリットなどもまとめています。
メールフォーム
お問い合わせフォームはSSGformを使いました。指定のURLへPOSTするだけでとてもシンプルで、無料プランの範囲でかなり機能が豊富だったので選びました。
メールフォームサービス/API/ASP/Saas | SSGform
SSG(Static Site Generator）やWEBサイトに簡単にフォームを導入でき、セキュリティリスク低減や管理効率向上を実現できるサービスです。
ついでに、スパム対策としてreCAPTCHAを導入しました。リニューアル前は何も対策していなかったためスパムがひどかったのですが、今のところそれらしいものは届いていません。
reCAPTCHA
reCAPTCHA is a security service that protects your websites from fraud and abuse.
バリデーションライブラリを入れようかとも思ったんですが、項目も少なく簡素な内容なのでrequired属性などHTMLの機能で実装しました。
最後に
定期的にメンテナンスをしないといざ手を入れたいと思った時に触れなくなってしまうので気をつけようと思いました…。