WixではjQueryなどのプログラムで実装するギャラリー機能をドラッグ＆ドロップで実装することができます。
今回は主なギャラリーパーツの使い方、活用方法をご紹介したいと思います。
ギャラリーパーツの使い方は簡単です。
Wixエディタのメニューから追加ボタンを押して、「ギャラリー」を選択すると、数十種類の中から選んで配置したい場所にドラッグ＆ドロップするか、もしくはダブルクリックで配置できます。
ホームページを制作後も自分で簡単に追加できるので、新しいコンテンツに使用する画像の部分をギャラリーパーツに変更すれば、画像の差し替えも簡単に行えます。
それではどんな色々なギャラリーパーツの使い方を見ていきましょう。
グリッドギャラリーでシンプルに画像を配置
1番シンプルなサムネイルタイプのギャラリーパーツです。
サムネイルをクリックすると、画像を拡大してポップアウトで表示、またはリンク先を設定して開くことも可能です。
ギャラリーパーツの項目に「グリッドギャラリー」の一覧には数種類のタイプが存在します。
上の画像のグリッドタイプは、マウスオーバー(マウスをサムネイルに合わせる)で写真のタイトルや詳細を表示することができます。
画像のギャラリーを使用しているサイトはカフェのサイトなので、メニューの画像として使用しています。
ユーザーが写真にマウスオーバーすると商品の名前を表示して、クリックすると画像が拡大表示されるので、ギャラリーを使ってお店のアピールに効果的です。
他にもショッピングサイトの商品画像やイベントの画像をまとめる時など、色々な使い方ができます。
また、「レイアウト」の設定から画像の余白や行数、列数などの細かい設定もできるのでデザインに合わせて調節するといいかと思います。
グリッドのタイプによっては設定項目や使える機能が違うので、用途に合わせて選んでいきましょう。
画面幅ギャラリーでダイナミックに魅せる
画面の両端までいっぱいに画像を配置するタイプのギャラリーパーツです。
上の画像のタイプは、画像の下辺りにある丸いボタンをクリックすると、スライドやスワイプ、ズームやフェードインといったエフェクトで登録されている画像に切り替わって表示されます。読み込み時に自動で再生にチェックをいれると、サイトを表示した際に自動でエフェクトが再生されます。
画面幅を使用したギャラリーパーツは解像度の高い綺麗な画像を使用すると更に見栄えがよくなります。
写真家やアパレル、飲食店の料理写真など、画像を使ってサイトでアピールしたい時によく使われます。
あとはスライドやフェードインといったエフェクトがあるので、トップページに配置すると動きがあるサイトでユーザーを惹きつけることができます。
画面幅ギャラリーは、同じページに多用するとサイトの表示速度やデザインのまとまりに影響がでるので、使用する際は一箇所にするか、テキストは多用せず画像で伝わるような見せ方が効果的です。
他にもグリッド、スライド、コラージュといったタイプの画面幅ギャラリーがあるので、色々試してみましょう。
サイズを自由に変更！様々な用途に使えるスライドショーギャラリー
サイズを自由に変更できるので、商品紹介のページ、説明ページなど、テキストと組み合わせて画像を表示する際に使えます。
上の画像のタイプの他にもアコーディオンといった縦長のタイプもあります。
アコーディオンはスライドショーとしては使えませんが、画面幅いっぱいに表示することも可能です。
スライドショーのよく使うパターンとしては、説明文の横に参考画像用として活用することで、見ている人に分かりやすく見せることができます。
3Dギャラリーでちょっと変わった見せ方
最後は3Dギャラリーです。
その名の通り、三次元のような動きをするギャラリーです。
上のタイプの3Dギャラリーは、画像が手前と奥とで移動して切り替わります。
オシャレな動きをするので、サイトのデザインやイメージに合わせて使うとグッとサイトがかっこ良くなると思います。
他にもキューブタイプやフリースタイルといった他のギャラリーとは一味違った動きをするので、使ってみることをオススメします。
以上がWixのギャラリーパーツの紹介になります。
Wixではこのように誰でも簡単にスライドショーやグリッドデザインのギャラリーを追加することができるので、Wixでホームページを作られた方は是非ともご活用ください。ギャラリーを使えば画像の変更もまとめてできるので管理も簡単になりますね。