* Blogs are only available in Japanese. Sorry for the inconvenience.

暑かった夏もようやく終わり、秋の涼しさが感じられるようになってきました。皆さん、今年の夏らしい思い出はありますか?私は「ウェブサイトで花火を打ち上げる」という経験をしました。

今、このページに表示されている花火にお気づきでしょうか?これは、私たちがキャンペーンページの演出として取り入れたもので、今回はその制作の背景や工夫した点について詳しくご紹介します。

なぜ花火を打ち上げたのか?

今回、私たちが担当したのは雑誌系ウェブサイトのキャンペーンページでした。メインビジュアルに花火が採用されていたため、キャンペーンサイト全体にもその雰囲気を反映させることにしたのです。

メインビジュアル

メインビジュアルは、花火の軌跡が特徴的なデザインです。このビジュアルに合うようなCanvas表現を実現しようと考え、実際のキャンペーンページでは以下のような仕上がりになりました。

実際の利用例

表現と使いやすさのバランス

花火をサイトに取り入れる際に直面した課題は、コンテンツの読みやすさを損なわないようにすることでした。対策として、画面サイズに応じて花火の打ち上げ回数を調整したり、消えるタイミングの調整を行っています。完全な解決策とは言えないものの、ある程度コンテンツの読みやすさを確保できました。

実際のキャンペーンページでは控えめに花火を打ち上げていますが、このブログではページ下部のボタンをクリックすると、何度でも花火を楽しめるようになっています。ぜひ試してみてください!

ウェブにも遊び心を

「花火のエフェクトは本当に必要か?」と問われれば、確かに必須ではないかもしれません。しかし、私たちはWebページに遊び心を持たせることで、キャンペーンに特別感を演出できると考えました。普段は情報提供が主なWebサイトに、こうした動的なエフェクトを取り入れることで、ユーザーに「驚き」や「楽しさ」を提供できるのではないでしょうか。

特に、私たちが多く担当する雑誌系ウェブサイトは、実物の雑誌と比べてやや淡白な印象を受けることがあります。同じ情報でも雑誌ではワクワクするのに、CMSの枠に収めるとその魅力が薄れてしまうのです。

Webページにこうした遊び心を取り入れることで、新たなワクワク感を生み出すことができるのではないかと考えています。