ページ演出追加プラグイン for EC-CUBE4.1

このプラグインでできること

ページ演出プラグインは、EC-CUBEのフロントエンドページに表示時のアニメーション演出を追加するプラグインです。
フェード、スライド、ズームイン、ズームアウト、3D回転、グリッチ、エラスティックなど、合計34種類の演出を搭載しています。
管理画面のページ管理から、ページごとに異なる演出を設定できます。
演出を選択すると、その動きを説明する文章が表示されるため、設定内容を確認しながらスムーズに選択できます。
設定された演出IDは body タグにクラスとして自動付与されます。
演出用のCSSは、プラグイン専用のコントローラーから動的に配信されます。

導入することで解決できる課題

サイトの見た目を少し変えたい場合でも、テンプレート編集やCSS調整には手間がかかります。
ページごとに印象を変えたい場合、個別にカスタマイズを行うと管理が複雑になりやすくなります。
本プラグインを導入することで、管理画面からページ単位で演出を設定でき、テンプレートファイルを直接書き換える負担を軽減できます。
既存のカスタマイズと競合しにくい設計のため、デザイン改善を行いやすくなります。

導入後に得られるメリット

商品ページ、特集ページ、案内ページなどに動きのある演出を追加することで、ページ表示時の印象を高められます。
重要なページに自然な動きを加えることで、お客様に見てもらいたい情報を印象付けやすくなります。
管理画面から演出を選択できるため、専門的なCSS編集に慣れていない場合でも運用しやすくなります。
ページごとに演出を変えられるため、キャンペーンページや新商品紹介ページなど、目的に応じた見せ方の調整にも役立ちます。

想定される利用シーン

トップページにフェードインやスライド演出を設定し、サイト全体の第一印象を良くしたい場合に利用できます。
商品一覧ページや商品詳細ページにズームやフォーカス系の演出を設定し、商品情報を印象的に見せたい場合にも役立ちます。
キャンペーンページや特集ページに動きのある演出を追加し、通常ページとの差別化を図りたい場合にも活用できます。
シンプルなサイトに少し動きを加えたい場合や、ページごとに雰囲気を変えたい場合にも適しています。

運用時の注意事項

演出の見え方は、使用しているテーマ、テンプレート構造、CSSの内容によって異なる場合があります。
独自カスタマイズを行っているサイトでは、事前に表示確認を行ってください。
演出を多用しすぎると、ページの印象が強くなりすぎたり、閲覧時に見づらく感じられる場合があります。
店舗やページの目的に合わせて、必要な箇所に適度に設定する運用をおすすめします。
アニメーションの速度や挙動を微調整したい場合は、Resource/assets/css/page_effect.css を編集することで調整できます。

EC-CUBE4.1に対応したPage Effect for EC-cube4.1 ver1.0.0 をリリースしました。