ホームページにマーキーと動きを加えて、サイトを進化させました
2026年8月11日
Web制作アニメーション
このサイトをさらに良くしたい、という想いから、参考サイトの解析を行い、動的な表現を取り入れました。
今日はその裏側を少しだけ。
Playwright によるサイト解析
自動ブラウザの Playwright を使って、参考サイトの構造・アニメーション・配色を詳しく調べました。
- どんなセクション構成か
- どのCSSアニメーションを使っているか
- マーキー（横スクロール）の動き方
- スクロール時の表示タイミング
こうした「実際の動き」をデータとして取り出し、巧黄土のサイトに取り入れています。
取り入れた要素
- マーキー: サービス名が横に流れる演出
- スクロール表示: 画面に入ったらふわっと表示されるアニメーション
- CTAの矢印: ボタンをホバーすると矢印が動く
- 先頭へ戻るボタン: スクロールすると現れる
大切にしていること
ただし、動きを増やせばいいわけではありません。巧黄土の哲学は「静けさのなかの信頼」。落ち着いたデザインの中で、程よい動きが訪れた人の目を引き、安心感を与える。そんなバランスを大事にしています。
— 巧黄土