お客さまお一人お一人に合わせたトータルコーディネートを大切に家づくりをされているハナホーム様のサイトを制作させていただきました。
デザイナーのRINg CREATE様よりご依頼いただき、トップページのコーディング及びアニメーション実装を担当させていただきました。
今回はトップページを他のサイトとは違うようなこだわったものにしたいというご相談をいただき、参考サイトを元に今回のサイトのアニメーションを実装させていただきました。
WordPressの既存テーマを使用しておりますが、既存テーマの範囲を超えてカスタマイズをしたかったため、トップページのみPHPで構築させていただきました。
目次
依頼内容
- 使用CMS：WordPress
- 使用テーマ：SWELL
- 依頼ページ：トップページ
- デザイン：依頼者であるRINg CREATE様が制作され、そのデザインカンプを元に実装いたしました。
- 仕様：特にアニメーションや見せ方にこだわりをお持ちのお客様でしたので、その要望を叶えるべくアニメーションの出し方も提案させていただきました。
- 既存テーマをご希望だったのですが、一部ブロックエディタでは難しい箇所もあった為、トップページのコンテンツ部分はPHPを使って構築しております。
アニメーション
ローディングアニメーション
住宅のコーディネートをされているので、そのモチーフである窓のモチーフを使ったアニメーションをご希望いただきました。窓の外から家の中が見えるようなイメージで実装させていただきました。
毎回トップページにアクセスするたびに表示された場合、表示時間が長く離脱に繋がる可能性も考慮し、ローディングアニメーションは初回アクセス時のみに限定しております。
サイト全体のアニメーション
ローディングだけではなく画像の出現や見出しの出現アニメーション、背景が固定されるような視差効果も実装させていただきました。この背景固定になる部分がブロックエディタでの構築が難しかった箇所です。
Windowsからの閲覧環境であれば問題なく実装できますが、MacやiPhoneなどのiOSでは固定されないような状況でしたのでPHPで実装することでどのデバイスからも同じように表示されるようにさせていただきました。
この度はご依頼いただきありがとうございました。
こちらの要望を的確にくみ取り、叶えるための最適な手段をいつも提案していただけます。特にレスポンシブ対応の調整は丸投げでも安心して任せられるので、こちらの作業負担が大幅に軽減され、本当に助かっています。
構築スピードが速く、修正にも迅速に対応していただけるため、タイトなスケジュールのプロジェクトでも頼りになります。やり取りもスムーズで気持ちよく、安心してお願いできるエンジニアさんです！