Shopifyで無料で使えるギャラリーアプリ「GA Image Gallery: Photo Gallery」を紹介。複数ギャラリーの作成やおしゃれなデザインが可能で、商品やイベントをビジュアルに魅力的に表現できます。
Shopifyはテーマ編集やLiquidの仕組みを活用することで、ストアをリッチに表現できるのが大きな魅力です。HTML・CSS・JavaScriptを直接記述できる環境も整っているため、独自エフェクトの実装も可能です。
しかし、写真ギャラリーのような高機能デザインを一から作り込むとなると、時間も工数もかかってしまうのが現実。加えて、便利なアプリは多くがサブスクリプション型で、コスト面の負担を感じる方もいるでしょう。
そこで本記事では、無料で使えて高機能な写真ギャラリーアプリ「GA Image Gallery: Photo Gallery(以下、GA Image Gallery)」の設定方法と設置手順を解説します。
無料アプリ「GA Image Gallery: Photo Gallery」とは
無料で使えるアプリ「GA Image Gallery:」のダウンロードページ(Shopify App Store)では、アプリの特徴を次のように案内しています。
カスタマイズ可能なギャラリーで商品やイベントを際立たせ、サイトのビジュアル訴求を高められます。ルックブック、画像ギャラリー、画像スライダー、スライドショーなど多彩な表示形式に対応し、Shop the Look（見たまま購入）の導線づくりにも最適です。写真を美しく見せることでユーザーの関心を高め、エンゲージメントや売上の向上に寄与します。さらに、必ずしも商品販売に限らず、記事やイベント、ブランド独自のコンテンツの見せ方を強化する用途にも活用でき、サイトの差別化に役立ちます。
実際に使ってみた感想として、まず最大のメリットは「無料で複数のギャラリーを作成できる」という点です。
多くの類似アプリにも無料プランはありますが、ギャラリーの作成数や掲載できる写真の枚数、利用できるテンプレートなどに制限があり、フル活用しようとすると月額5〜10ドル程度のコストが発生します。その点、このアプリは無料で複数のギャラリーを作れるので、初期導入のハードルが非常に低いと感じました。
もう一つ大きな魅力は「ギャラリー自体がおしゃれ」であることです。特にキャプションの表示方法が洗練されており、デザインの細かい部分まで調整できるのも嬉しいポイントです。見せ方にこだわりたい方にとっては、この自由度は大きな利点になるでしょう。
一方で、デメリットもあります。
細かい設定ができる分、設定項目が多岐にわたり、ダッシュボードが英語表記であるため少し難しく感じるかもしれません。また、設置方法もやや複雑で、初心者の方には最初の導入で戸惑う部分(特に「Advanced Setup:Embed a Widget by Identifying CSS Selectors」)があると思います。
設定方法
では、ここからは設定方法について触れていきます。アプリをインストールすると、自動的に外部サイトである「GA Image Gallery」のダッシュボード へ遷移します。メニューから「Photo Gallery Widget」を選び、「Create Photo Gallery」ボタンを押すとテンプレート選択画面に進みます。
具体的な操作手順については、細かく説明するより実際に触ってみる方が理解が早いと思うので、ここでは割愛します。ただし、1点だけ他のアプリと異なる点があります。
通常のギャラリー系のアプリでは、まず写真をアップロードしてからギャラリーを組み立てていく方式が一般的。しかし、このアプリの場合は「Add New Element」を押すと、仮の写真が挿入されたエレメントが追加されます。その後、そのエレメントを編集画面で開き、仮の写真を差し替えるタイミングでファイルをアップロードする仕組みになっています。
最初は「アップロードのボタンが見当たらないけど？」と少し迷ってしまったのですが、仕組みを理解してしまえば直感的に操作できます。これは実際に使ってみて気づいた点なので、初めての方は覚えておくとスムーズです。
ギャラリーを設置
ギャラリーの作成が一通り終わったら、次のステップはサイトへの設置です。
まずは Shopifyのテーマエディタ → アプリを埋め込み →「Photo Gallery」をON にすることで簡単に反映できます。基本的にはこれで十分ですが、設置方法は大きく分けて2種類が用意されています。
ひとつは「Quick Setup: Embed a Widget Using the App ID（テーマエディタ挿入）」で、テーマエディタから直接アプリを設置するシンプルな方法。もうひとつは「Advanced Setup: Embed a Widget by Identifying CSS Selectors」で、任意の場所にギャラリーを挿入できる応用的な方法です。公式YouTube動画でも設置手順が公開されているので、実際に確認しながら進めるのがおすすめです。
ただし、「Advanced Setup」の方は動画を見ても最初はすんなり理解しづらいかもしれません。通常のテーマエディタ経由での設置でも十分使えますが、ランディングページなど独自のデザインを組み込みたい場合には、この方法が役立ちます。
仕組みを簡単に紹介すると、任意の場所に
<div id="〇〇〇"></div>
<div class="〇〇〇"></div>のようなタグを挿入すると、「Photo Gallery」がJavaScriptのDOM操作を行い、ギャラリーをiframeとして読み込むという流れです。
デフォルトでは「gallery-id-1234」のようなIDが用意されており、
<div id="gallery-id-1234"></div>と記述すればすぐに設置できます。もちろん、任意のIDやClassを作成して活用することも可能です。
***
いかがでしょうか。無料で使えるギャラリーアプリとして、「GA Image Gallery: Photo Gallery」は導入を検討してみる価値があると思います。
設置方法については本記事ではかなり省略しましたが、この手のアプリは実際に触って体得するのが一番です。操作に慣れてしまえば直感的に扱えるようになるはずです。
リッチなプロダクトの表現や、こだわりのランディングページを作成したいときにもきっと役立つと思います。
