「メインビジュアルとお知らせ一覧の間に、ブランドメッセージを印象的に表示したい。」
今回は、このようなご要望をもとに、スクロールに合わせてメッセージが自然に表示されるアニメーションをWordPressへ実装した事例をご紹介します。
ご相談内容
- メインビジュアルとお知らせ一覧の間にブランドメッセージを配置したい。
- スクロールで表示位置まで来たタイミングで、3つのメッセージを順番にアニメーション表示したい。
- フォントや文字組の雰囲気は、サイトのクールな感じに合わせてほしい。
ざっくりと記載すると上記のようなご相談内容でしたが、今回のお客様はしっかりとイメージが決まっており、文字を表示するスクロール位置や利用するフォントの属性、利用カラーや余白の大きさも事前に具体的なご指定を頂いておりました。
ご要望いただいたアニメーションをWordPressへ組み込むにあたり、イメージ通りの動きに近づけるために細かな調整を重ねながら実装を進めていきました。
ここでは、実装時に特に意識したポイントをご紹介します。
工夫したポイント
1. ページ修正画面でのわかりやすさ
今回のアニメーションは、ブロックエディタだけでは実現が難しい内容だったためコーディングが必要だったのですが、修正該当箇所が固定ページの編集画面ですぐわかるようにショートコードを利用して実装しました。
ショートコードを既存の固定ページへ挿入する構成とすることで、「追加した機能がどこに配置されているのか」をお客様自身でも把握しやすくしています。
また、今後アニメーションの前後にコンテンツを追加したい場合でも、固定ページから自由に編集できるため、運用面にも配慮した実装となっています。
2. ご要望に近づけるため、細かな調整にも柔軟に対応
アニメーションは、表示速度や開始タイミングなど、わずかな違いでも受ける印象が大きく変わります。
そのため、まずはご要望に限りなく近づけた内容を実装したうえで、実際の動きをご確認いただきながら、表示速度やアニメーション開始位置などの細かな調整を実施しました。
「イメージどおりに動くこと」を大切にし、ご納得いただける仕上がりを目指しています。
3. スマートフォンでの見やすさも考慮
ご提供いただいたデザインカンプはPC表示を前提としたものでした。
しかし、実際にはスマートフォンから閲覧されるユーザーも多いため、文字サイズや行間、余白などがスマートフォンから見ても同様の印象が得られるように調整しています。
画面サイズが変わっても読みやすく、違和感のない表示になるよう配慮して実装しました。
ご要望を形にするために大切にしたこと
WordPressのカスタマイズでは、「お客様のイメージ通りにご要望を実現できているか」は非常に重要だと考えています。
この点を達成するためには、些細な部分であっても実際の動きや表示タイミングなど細かな部分までお客様と一緒に確認・調整を行うことが必要です。
時には、仕様を指定したお客様自身が「なんだかちがうな・・・」と思うことも少なくありません。そういった場合でも、「本当に実現したかったことは何か？」を一緒に探りながら調整を行い、より良いものができるように心がけています。
WordPressのカスタマイズをご検討中の方へ
「デザインはあるけれど実装できる人が見つからない」
「参考サイトのような動きを再現したい」
「既存サイトを崩さずに機能を追加したい」このようなWordPressカスタマイズのご相談にも対応しています。見た目の調整だけでなく、ECシステム構築、予約システム構築、会員登録機能追加など、難易度の高い内容も対応可能です。
仕様が固まっている案件はもちろん、「こんな感じのことを実現したい」というざっくりとした構想段階からでもご相談可能です。
ご要望を一つひとつ確認しながら、公開後の運用まで考慮したカスタマイズを「WordPressカスタマイズ改修専門家」がご提案・実装いたします！