背景と実施したこと
今回はノーコードツール「Wix」を使ってHP制作テクニックのご紹介です。
企業のロゴ画像などが、HP上で横に自動で流れているデザインを見たことがある人もいるでしょう。
スクラッチで組むと簡単なこの処理ですが、Wixで組むときに「あれ。これどうやるんだ？」となったので備忘録を残しておきます。
使用している技術の情報は以下の通りです。
- Wix（≠Wix Studio）
- パワーポイント
概要
- きれいに流そうと思うとパワポ等で画像を並べて、統一した大きさの1枚絵を作る方がよい。
- レイアウトは「スライドショー」を選択。選択するデザインによって設定内容が変わる。
- レイアウトの「詳細設定」から「画像をループ表示」を設定する。その他の細かい設定もここで行う。
手順① ロゴを並べた一枚絵を作る
画像単体をアップしてもよいのですが、だいたい大きさ等の調整が入るので最初に16:9などの大きさに合わせて
スライドに各ロゴ画像を貼り、そのスライド1枚を流すようにした方がうまくいきます。
※スライドのサイズ比は、Wixの設定に合わせて16:9か4:3がよさそうです。
自分の場合あ16:9を選択する方が多いです。
手順② Wixプロギャラリーを追加、設定する
対象のページにWixプロギャラリーを追加します。
レイアウトは「スライドショー」を選択しましょう。
お察しの通り、スライドショーを自動で流すことによってカルーセルの動きを実現しています。
なお、サムネイルも似たような動きがありますが、微妙に設定できる内容が違うので注意が必要です。
「レイアウトを編集」から、画像をループ表示、自動でスライドのトグルをONにすると最低限の動きは実現できます。その他画像のサイズなども合わせて整えていきましょう。
デザインの部分で不要な矢印を削除したり、その他の細かい設定を行います。
手順③プレビュー確認、スマホ版の実装
あとはプレビューで確認して、スマホ版も忘れずに実装しましょう。
動きとしては画像を一巡したあとにわずかにストップが入るかもしれませんが、現状これが限界のようです。
またプレビュー状態では、自動再生にしていても2巡目が始まらないようですが、これは公開設定にすると問題なく動作しますのでご安心ください。（不具合？仕様？）
まとめ
ということで、意外とできないカルーセル設定でした。
ノーコードツールは生成AIでも知見が得にくいですし、こういった細かいノウハウは従来の技術記事が一番役立つかもしれませんね。
今後も何かTipsがあれば投稿していきます。