複数メッセージ ローテーション告知バー
複数メッセージ ローテーション告知バーは、1本のバーの中で複数のお知らせを順番に切り替えて見せるUIです。 .an-mr__msgs の中に複数の <p> を重ね、 position:absolute で同じ位置に置いたうえで、表示中の1枚だけ is-act を付けて見せています。
このパーツの使いどころと実装ポイント
複数メッセージ ローテーション告知バーは、1本のバーの中で複数のお知らせを順番に切り替えて見せるUIです。.an-mr__msgs の中に複数の <p> を重ね、position:absolute で同じ位置に置いたうえで、表示中の1枚だけ is-act を付けて見せています。切り替えは透明度と上下方向の transform で滑らかにフェードします。左側のスピーカーアイコンはインラインSVGです。
向いている場面
- セール・送料無料・営業時間など複数告知があるEC
- キャンペーンと注意喚起を同じ場所で回したいサイト
- ヘッダー上部の限られた幅を有効に使いたい場合
固有の勘所は、メッセージごとに長さをそろえること。極端に長い文と短い文が混ざると切り替わるたびに視線移動が大きくなります。回転の間隔は読み切れる速さにし、3〜5秒程度を目安に内容量で調整します。
実装上の注意
自動で切り替わる演出は、読んでいる途中で消えると不便です。重要な告知はリンク先でも確認できるようにしておきます。動きを抑えたい利用者向けに prefers-reduced-motion でフェードを弱める配慮や、要素の高さを固定して切り替え時にレイアウトが揺れないようにする点も押さえておきましょう。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
メッセージは何件まで入れられますか
技術的な上限はありませんが、1周が長くなると見てもらえない告知が出ます。実用的には3〜5件程度に絞り、優先度の高いものから並べるのがおすすめです。
切り替えの速さはどう決めますか
一番文字数が多いメッセージを無理なく読み切れる時間を基準にします。短すぎると読めず、長すぎると次に気づきません。3〜5秒前後を出発点に内容量で微調整してください。