Shopifyストアに画像ギャラリーを表示できるアプリを徹底解説｜ご利用ガイド

株式会社UnReact

2026/01/04

はじめに

今回の記事は、Shopify アプリである「シンプル画像ギャラリー｜お手軽フォトグリッド」のご利用ガイドです。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築できるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識いただいて大丈夫です。

「シンプル画像ギャラリー｜お手軽フォトグリッド」は、ホームやコレクション、商品ページなど 任意のページにデザイン性の高い画像ギャラリー（イメージグリッド）を追加できるアプリです。
コード不要で、レイアウトや画像比率、余白、ホバーエフェクト、オーバーレイなどを調整できるため、ビジュアル重視のストアでも “らしさ” を崩さずに、スタイリッシュな見せ方を実現できます。

料金は Basic Plan：月額 $2.99（1 週間の無料期間あり） です。

ご興味のある方は、以下の URL からインストールしてみてください。

シンプル画像ギャラリー｜お手軽フォトグリッド

「シンプル画像ギャラリー｜お手軽フォトグリッド」でできること

Shopify アプリである「シンプル画像ギャラリー｜お手軽フォトグリッド」は、あらゆるページに“魅せる”画像グリッドを追加できるアプリです。
ストアの世界観に合わせて、レイアウトや比率、余白、ホバー表現などを整えられるので、商品・コレクションの訴求力を高めたいときに役立ちます。

シンプル画像ギャラリー｜お手軽フォトグリッド

主な特徴は次のとおりです。

ノーコードで画像ギャラリーを挿入
テーマ編集（オンラインストアエディタ）から追加でき、コード編集は不要です。
複数のグリッドレイアウト・画像比率を選択可能
ストアデザインに合わせて、自然に溶け込む見せ方を作れます。
余白・ホバーエフェクト・オーバーレイなどを簡単に調整
“並べるだけ” ではなく、ブランドらしい表現に近づけられます。
セクションタイトル・説明を追加できる
画像の意図（ルックブック、使用シーン、ランキングなど）を伝えやすくなります。
1 クリックでテーマに追加
初期導入のハードルが低く、すぐに公開まで進めます。

ノーコードで画像ギャラリーを挿入できる

テーマエディタからアプリブロック（またはアプリセクション）として追加できるため、コード編集なしで画像ギャラリーを表示できます。
トップページの特集エリア、コレクションの雰囲気づくり、商品詳細での使用シーン紹介などにおすすめです。

ノーコードで画像ギャラリーを挿入できる！

様々なレイアウトを設定できる

複数のグリッドスタイルから選択できるため、同じ画像でも “見え方” を変えられます。
写真の構図やブランドトーンに合わせて、最適な並びを作りましょう。

様々なレイアウトを設定できる！

様々なデザインの画像ギャラリーを挿入できる

画像比率や間隔（ギャップ）などを調整し、ストアに馴染むデザインに整えることができます。
“画像が綺麗に見える余白” を作るだけで、ストア全体の印象が一段上がります。

様々なデザインの画像ギャラリーを挿入できる！

ホバー時のデザインを変更できる

ホバー時の見え方（エフェクトやオーバーレイなど）を調整できます。
PC での閲覧体験をリッチにし、クリック誘導やブランドの雰囲気づくりに役立ちます。

ホバー時のデザインを変更できる！

1 クリックでテーマに追加できる

アプリの導入後、テーマへの追加がスムーズに行えます。
「まずは入れてみて、テーマ上で調整して公開」という流れが作りやすいのもポイントです。

1クリックでテーマに追加できる！

アプリのインストール

それでは、実際にアプリをインストールしていきましょう。

シンプル画像ギャラリー｜お手軽フォトグリッド

アプリの料金は、Basic Plan：月額 $2.99（1 週間の無料期間あり） です。

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリ」をクリックし、「Shopify App Store」へ移動します。
検索窓に「シンプル画像ギャラリー｜お手軽フォトグリッド」と入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので内容を確認し、「インストール」を完了してください。

以上で、アプリのインストールは完了です。

アプリブロックをテーマに追加

インストールが完了したら、テーマ編集画面で「シンプル画像ギャラリー｜お手軽フォトグリッド」を追加して、ストア上に表示できるようにしていきます。

自動でテーマに追加（1 クリック追加）

アプリの管理画面を開きます。
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

これで、テーマへの追加は完了です。

手動でテーマに追加（任意ページに設置したい場合）

自動追加がうまくいかない場合や、特定ページ（商品ページや任意のテンプレート）に入れたい場合は、手動追加がおすすめです。

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
テーマエディタ上部のプルダウンから、追加したいページ（ホーム / コレクション / 商品など）に移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」タブから「イメージグリッド」「タイルグリッド」のどちらかを選んで追加します。
表示を確認し、問題なければ「保存する」をクリックします。

イメージグリッドのアプリカスタマイズ

テーマに「イメージグリッド」ブロックを追加したら、テーマエディタの右側（または左側）に表示される設定項目からデザインを調整できます。
イメージグリッドブロックの設定パネルが表示されたテーマエディタ

一般設定

タイトル
ギャラリー全体の見出し（セクションタイトル）です。
例）「イメージギャラリー」「LOOKBOOK」「スタッフスタイリング」など、画像の目的が伝わる名前にすると親切です。

イメージグリッドの一般設定：タイトル入力フィールド

レイアウト

列数
PC での表示列数をスライダーで調整できます。商品数や写真の密度に合わせて変更しましょう。
モバイル列数
スマホ表示時の列数を調整できます。スマホでは 1〜2 列で見せると、写真が潰れず見やすくなることが多いです。
画像比率
画像の縦横比（例：正方形など）を選択できます。比率を揃えると、グリッド全体が整って “きれいな一覧” になります。
間隔
画像同士の余白（ギャップ）を px 単位で調整できます。
余白を少し広めにすると上品に、狭めにすると情報量が増えた印象になります。
ホバーエフェクト
画像にマウスを重ねたときの演出を選べます（例：ズーム）。
さりげない演出にすると、世界観を崩さず自然にクリックを促せます。

イメージグリッドのレイアウト設定：列数、モバイル列数、画像比率、間隔、ホバーエフェクトの設定項目

コンテンツ

タイトル表示（ON / OFF）
各画像に設定した「タイトル（タイトル 1〜）」を表示するかどうかを切り替えます。
ルックブックやカテゴリ誘導など、画像に意味を持たせたい場合は ON がおすすめです。

オーバーレイ表示（ON / OFF）
画像の上にオーバーレイ（半透明の重なり）を表示します。
タイトルの可読性を上げたいときや、落ち着いた印象にしたいときに便利です。

ホバー時にタイトル表示
タイトル表示・オーバーレイ表示の組み合わせにより、マウスオーバー時にタイトルが見える挙動になります。
「普段は写真を主役にして、触れた時だけ情報を出す」見せ方にしたい場合に相性が良いです。

イメージグリッドのコンテンツ設定：タイトル表示、オーバーレイ表示、ホバー時にタイトル表示の設定項目

画像（画像 1〜画像 5）

イメージグリッドでは 最大 5 枚まで画像を登録できます。各画像は次の 3 項目で設定します。

画像（画像 1〜5）
「選択」から画像をアップロード・選択できます。必要に応じて「無料画像を探索する」から素材を探すことも可能です。
タイトル（タイトル 1〜5）
画像に表示したいテキスト（キャプション）です。
※「タイトル表示」が OFF の場合は、入力しても画面上に表示されません（リンク管理用として入力しておくのは OK です）。
URL（URL1〜5）
画像クリック時の遷移先です。
商品ページ・コレクション・特集ページなど、導線にしたいページの URL を貼り付けてください。
未入力の場合は、クリックしても遷移しない "見せるだけのギャラリー" として使えます。

イメージグリッドの画像設定：画像1〜5の選択、タイトル1〜5、URL1〜5の入力フィールド

カスタム CSS

追加 CSS
標準設定だけでは調整しきれない見た目（余白の微調整、テキストサイズ、ホバー演出の細部など）を CSS でカスタマイズできます。
テーマ全体に影響しないよう、まずは小さな調整から試すのがおすすめです。

イメージグリッドのカスタムCSS設定：追加CSSの入力エリア

タイルグリッドのアプリカスタマイズ

テーマに「タイルグリッド」ブロックを追加したら、同様にテーマエディタ上でタイルの見た目・動きを調整できます。
タイルグリッドは、画像の並びが "雑誌風" になりやすく、世界観の表現に向いています。

タイルグリッドブロックの設定パネルが表示されたテーマエディタ

一般設定

タイトル
タイルグリッド全体の見出し（セクションタイトル）です。
例）「タイルギャラリー」「NEW COLLECTION」「FEATURED」などがおすすめです。

タイルグリッドの一般設定：タイトル入力フィールド

レイアウト

レイアウトパターン
タイルの並び方（例：非対称）を選べます。
非対称は動きが出て、ビジュアル訴求を強めたいときに向いています。
タイルスタイル
タイルの見た目スタイル（例：モダン）を選択できます。
テーマの雰囲気に合わせて、最も馴染むスタイルを選びましょう。
タイトル表示（ON / OFF）
各タイルの「タイトル（タイトル 1〜）」を表示するかどうかを切り替えます。
コレクション誘導やカテゴリ分けをしたい場合は ON が便利です。
ホバーエフェクト（なし / 拡大 / 透過）
タイルにマウスオーバーしたときのアニメーション効果を選べます。
- なし：落ち着いた印象で、写真をそのまま見せたい場合におすすめ
- 拡大：クリック誘導を強めたい場合におすすめ
- 透過：やわらかい雰囲気・テキストの視認性を上げたい場合におすすめ

タイル（画像 1〜画像 6）

タイルグリッドでは 最大 6 枚まで登録できます。各タイルは次の 3 項目で設定します。

画像（画像 1〜6）
「選択」から画像をアップロード・選択します。必要に応じて「無料画像を探索する」も利用できます。
タイトル（タイトル 1〜6）
タイルに表示したいテキストです。短め（1〜2 行）にすると崩れにくく、デザインがまとまります。
URL（URL1〜6）
タイルクリック時の遷移先です。
商品・コレクション・特集ページなど "見せたい先" を URL で設定してください。
未入力の場合は、リンクなしのギャラリーとして表示されます。