ブログ

Wixに写真ギャラリーを追加する方法

最終更新日: 
Wixに写真ギャラリーを追加する方法

言葉は数分で人の心を動かせますが、写真はそれを数秒で成し遂げます。だからこそ、あなたのウェブサイトではビジュアルが非常に重要なのです。サービスを販売する写真家であれ、物件を購入希望者に案内する不動産エージェントであれ、あらゆる角度から商品を見せるオンラインストアであれ、それは変わりません。いずれの場合も、すっきりとしたレスポンシブなギャラリーは訪問者の目を引きつけ、あなたが提供するものへの信頼を築きます。

Wixにはこのためのネイティブツールがあり、最も代表的なのがWix Proギャラリーです。レイアウトはモバイルでレスポンシブに対応し、CMSコレクションに接続してアイテムを動的に表示することもできます。しかし、パワーユーザーにとっては厄介な点もいくつかあります。Wixによると、Proギャラリー単体ではページネーションバーは利用できず(ネイティブの代替手段はもっと読み込むボタンです)、CMSを使う方法では、1枚の写真を表示する前にコレクションとデータセットを構築する必要があります。

マソンリーグリッド、カテゴリーフィルター、パノラマ行など、より細かなレイアウト制御を求める場合、一般的に2つの選択肢があります。App Marketのギャラリーアプリを使うか、埋め込み型のギャラリーウィジェットを使うかです。

オプション1:専用のWix App Marketギャラリーをインストールする

最初に試す定番の方法はApp Marketです。POWRのGalleryのようなアプリをインストールし、専用のダッシュボードで写真を管理します。Elfsightも、自社サイトから埋め込める同様のフォトギャラリーを提供しています。既製のスタイルを利用でき、コードも不要ですが、各ツールには独自のプラン体系があるため、ポートフォリオ全体をアップロードする前に細かい条件を確認しておきましょう。

設定する

  1. アプリを探す。WixエディタからApp Marketを開き、「photo gallery(フォトギャラリー)」を検索します。
  2. Wix App Market displaying photo gallery apps available for installation
  1. ページに追加する。アプリをインストールし、設定パネルを開いて写真をアップロードします。
  2. Wix POWR Gallery settings panel showing options to add images and videos
  1. スタイルを選んで公開する。レイアウトを選び、余白やキャプションを調整したら、サイトを公開します。
  2. Wix POWR Gallery design settings displaying layout, hover effects, and customization options

注意すべき点:

  • 無料プランでのブランド表示。 POWRのリスティングには無料プランがありますが、POWRのブランド表示を削除するには有料のStarterプランが必要です。
  • 表示回数の制限。 Elfsightの無料Photo Galleryプランは、ウィジェット1つと月間200回の表示までをカバーし、Elfsightのブランド表示が付き、制限を超えるとアプリが一時的に無効化されます。アクセスの多いポートフォリオでは、200回の表示はすぐに消費されてしまいます。
  • ページの重さ。 大きな画像はLargest Contentful Paint(最大コンテンツの描画)に影響し、Googleは2.5秒以下を良好と評価しています。どのツールを選ぶにせよ、アップロードする前に写真を圧縮しましょう。

オプション2:無料でカスタマイズ可能なフォトギャラリーウィジェットを追加する(おすすめ)

Jotformフォトギャラリーウィジェットは、少し違ったアプローチを取ります。ビジュアルエディタでギャラリーを作成し、埋め込みコードをコピーして、標準の「HTMLを埋め込む」要素を使ってWixページに貼り付けます。写真はWixメディアマネージャーではなく、ウィジェットビルダーで管理し、アプリのサブスクリプションなしで始められます。

ギャラリーの作成は写真から始まり、そこから先はほとんどがクリック操作だけで済みます。コードは一切不要で、サイトに公開する前であれば、レイアウトやスタイルを好きなだけ何度でも変更できます。手順は次のとおりです。

設定する

  1. 写真を追加する。 画像をアップロードするか、Googleフォトからインポートするか、画像のURLを貼り付けます。その後、タイトル、カテゴリー、代替テキストを入力します。
  2. Photo Gallery Widget builder showing uploaded images and gallery management controls
  1. レイアウトを選んでスタイルを設定する。 レイアウトを選びます。その後、列数、余白、ポップアップの動作、色を調整します。カテゴリーを追加した場合はフィルターをオンにします。
  2. Photo Gallery Widget layout settings displaying masonry, grid, and carousel layout options
  1. Wixに埋め込む。 埋め込みコードをコピーします。Wixエディタで要素を追加を開き、埋め込みコード、続いてHTMLを埋め込むを選び、コードを入力をクリックして、スニペットを貼り付けます。要素を好みの幅まで広げ、公開します。
  2. Wix HTML Settings panel showing gallery embed code inserted into a website

Pro Tip

Wixは、固定サイズで埋め込まれたコードは画面サイズに応じて変化しないと注意を促しています。公開する前に、エディタでモバイル表示を確認しましょう。

どんな場面に向いているか

Use caseSuggested layoutHow to set it up

写真家

縦型マソンリー

各写真にカテゴリー(ウェディング、ポートレート、イベント)を追加し、フィルターをオンにして、訪問者が撮影タイプごとに閲覧できるようにします。

不動産エージェント

パノラマまたはスライダー

物件ページごとに1つのギャラリーを作成します。タイトルを部屋名として使い、写真をバーチャルツアーや問い合わせページにリンクさせます。

Eコマースブランド

グリッドまたはサムネイル

ポップアップ表示で商品をさまざまな角度から見せるか、クリック時の動作を設定して各写真を商品ページにリダイレクトさせます。

写真家は、ギャラリーとJotformの写真撮影用フォームや契約書を組み合わせることで、予約や署名付き契約を管理できます。

覚えておきたい制限が1つあります。各ギャラリーには最大16枚の写真を収められます。これは、厳選したポートフォリオ、単一の物件、または商品ページに適しています。大規模なアーカイブの場合は、カテゴリーページごとに別々のウィジェットを使うか、CMSに接続したProギャラリーを利用しましょう。

スマートでサーバー不要のウィジェットでWixサイトを強化する

ほとんどのWixサイトにとって、埋め込み型のギャラリーウィジェットの方が優れた選択肢です。CMSの設定や別のアプリのサブスクリプションなしで、マソンリーレイアウト、カテゴリーフィルター、ポップアップ閲覧を利用できます。さらに、すべてを1か所で管理できます。 

Proギャラリーを使うのは、CMSを必要とする大規模なアーカイブを表示する場合だけにしましょう。最高の作品を美しく見せたいだけなら、Jotformフォトギャラリーウィジェットから始めてください。

この同じ埋め込み方法は、Jotformの無料ウェブサイトウィジェットディレクトリにあるすべてのウィジェットで使えます。次の4つは、ギャラリーとの相性が良いものです。

予算は、作品を表示するための手数料ではなく、作品そのものに使いましょう。訪問者を顧客に変える準備ができたら、JotformのWix連携で、問い合わせ、予約、支払いのフォームを追加できます。まだサイトを構築中であれば、Wixウェブサイトビルダーガイドから始めてください。

この記事は、ネイティブプラットフォームの制限に引っかかったり、App Marketの継続的な手数料を払ったりすることなく、美しく高速に読み込まれる画像グリッドやマソンリーレイアウトを表示したいWixサイトのオーナー、写真家、不動産エージェント、Eコマースブランドを対象としています。

コメントの送信:

Jotform Avatar
このサイトは reCAPTCHA によって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。

Podo Comment 最初のコメントを投稿してください。