Shopifyで画像LPを作成できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2025/06/16

はじめに

今回の記事は、Shopify アプリである「シンプル画像 LP ｜お手軽画像ランディングページ」の解説記事です。

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

「シンプル画像 LP ｜お手軽画像ランディングページ」は、誰でも簡単に魅力的な画像ランディングページを作成できるアプリです。

アプリを利用することで、コーディング不要のドラッグアンドドロップエディタで直感的に画像 LP を作成し、キャンペーンやプロモーションの LP を短時間で公開できます。また、固定（追従）ボタンから今すぐ購入ができる機能により、コンバージョン向上を実現できるため、初心者から大規模店舗まで幅広く活用が可能です。

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

シンプル画像 LP ｜お手軽画像ランディングページ

「シンプル画像 LP ｜お手軽画像ランディングページ」でできること

Shopify アプリである「シンプル画像 LP ｜お手軽画像ランディングページ」は、以下のように誰でも簡単に魅力的な画像ランディングページを作成できるアプリです。

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

コーディング不要・ノーコードで LP 作成
ドラッグアンドドロップエディタで直感的に操作でき、すぐにストアに LP を公開できます。
固定（追従）ボタンから今すぐ購入が可能
画面下に固定表示されるボタンから、ワンクリックで購入へ誘導できます。
動画コンテンツにも対応
アップロード動画や YouTube 動画も設定でき、より訴求力の高い LP を作成できます。

これらを活用することで、ストアを訪れた顧客の興味を引き付け、キャンペーンやプロモーションの効果を最大化し、売上向上につなげることができます。

LP の作成・編集はすべてノーコードでできる

コーディング知識不要で、ドラッグアンドドロップの直感的な操作だけで画像 LP を作成できます。豊富なテンプレートから選択して、短時間で効果的な LP を公開しましょう。

ドラッグアンドドロップで簡単にLPを作成できるエディタ画面

固定（追従）ボタンから今すぐ購入ができる

画面下に固定表示されるボタンから、顧客はワンクリックで商品を購入できます。スクロール中も常に表示されるため、購買意欲が高まったタイミングを逃しません。

画面下部に固定表示される購入ボタンの例

画面下の固定（追従）ボタンは複数の種類から選べる

固定今すぐ購入ボタン、固定画像ボタン、固定横並びボタン、固定縦並びボタンなど、LP の目的に合わせて最適なボタンタイプを選択できます。

様々な種類の固定ボタンの選択肢

LP にはアップロード動画や YouTube 動画も設定できる

静止画だけでなく、アップロード動画や YouTube 動画を LP に組み込むことができます。動画コンテンツで商品の魅力をより効果的に伝えられます。

LPに動画コンテンツを組み込んだ例

シンプル画像 LP アプリのインストール

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

シンプル画像 LP ｜お手軽画像ランディングページ

アプリの料金は、月額 $29.99（1 週間の無料期間あり）となっております。

ストア管理画面左下の「設定」をクリックします。
Shopify管理画面の設定メニューを表示

「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
Shopify管理画面のアプリと販売チャネルメニューを表示

検索窓に「シンプル画像 LP ｜お手軽画像ランディングページ」と入力し、表示されたアプリをクリックします。
Shopify App Storeでのアプリ検索画面を表示

アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額 $29.99 でご利用いただけます（1 週間の無料期間付き）。
シンプル画像LPアプリのインストール画面を表示

「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
アプリのインストール権限確認画面を表示

以下のアプリ管理画面が表示されます。
シンプル画像LPアプリの管理画面を表示

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

シンプル画像 LP のアプリブロックをテーマに追加

アプリの機能を実際にテーマに組み込み、画像 LP をストア上に表示できるように設定していきましょう。

自動でアプリをテーマに追加

アプリの管理画面を開いてください。
『テーマに画像 LP を追加」の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
テーマ選択画面を表示

「テーマに追加」ボタンをクリックします。
テーマに追加ボタンを表示

テーマ編集画面が開き、アプリが有効化されるので、「保存する」をリックして有効化は完了です。
エラーが起きる場合や画像以外のブロックを追加したい場合、トップページ以外に追加したい場合は次の項に進んでください。
テーマ編集画面でのアプリ有効化状態を表示

以上で、テーマに自動的に画像 LP アプリブロックが追加されます。

手動でアプリをテーマに追加

画像以外のブロックを追加したい場合、トップページ以外に追加したい場合は以下の手順で行ってください。

アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
テーマプレビュー画面を表示

テーマエディタが開くので、アプリを追加したい画面に移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
テーマエディタでのセクション追加画面を表示

「アプリ」のタブに「LP 画像」「LP 動画」「固定今すぐ購入ボタン」「固定今すぐ購入画像ボタン」「固定画像ボタン」「固定横並びボタン」「固定縦並びボタン」というアプリブロックが表示されるので、使用したいブロックをクリックして追加します。
アプリブロックの選択画面を表示

アプリセクションが追加されその中に選択したアプリブロックが追加されました。詳細な設定が完了したタイミングで「保存する」ボタンをクリックしてください。

アプリブロック追加後の編集画面を表示

以上で、手動でのブロック追加は完了です。

テーマのデフォルトスタイルを OFF にする

次に LP の表示を最適化するため、テーマのデフォルトで設定されている表示設定を無効化します。
これにより、漫画 LP を画面いっぱいに表示できるようになり、固定ボタンも正常に表示されるようになります。

※ ご利用のテーマによって項目名や設定方法が異なる場合があります。（この解説では Dawn のテーマを使用しています）

カスタマイズ画面で、「LP ｜シンプル漫画 LP」が挿入されている「アプリ」セクションをクリックします。

アプリセクションの選択画面を表示

「セクションの余白をテーマと同じにする」を無効にします。

セクションの余白設定画面を表示

「テーマ設定」の項目をクリックして開きます。

テーマ設定メニューを表示

「スクロールでセクションを表示する」を無効にして、右上の「保存する」をクリックします。

スクロール表示設定画面を表示

以上でテーマのデフォルトスタイルの無効化ができました。

アプリブロックのカスタマイズ

テーマにアプリブロックを追加したら、カスタマイズ画面より「シンプル画像 LP ｜お手軽画像ランディングページ」のカスタマイズを行えます。

カスタマイズ画面で画像 LP のアプリブロックを追加したページを開いてください。

カスタマイズ画面でのアプリブロック編集画面を表示

LP 画像ブロックの設定項目

「LP 画像」ブロックのカスタマイズを行っていきます。

サイドバーの「LP 画像」ブロックをクリックします。

LP画像ブロックの選択画面を表示

以下のような設定項目が表示されます。
LP画像ブロックの設定項目一覧を表示

画像の設定

LP 画像（PC）：PC 表示用の画像を選択します
LP 画像（スマホ）：スマホ表示用の画像を選択します
画像のサイズ（PC）：セクションに合わせる / 画像をセクションの幅で表示 / 画像に合わせる / 画像のサイズで表示（最大幅はセクションの幅）から選択
画像のサイズ（スマホ）：スマホ表示時の画像サイズを同様に設定

LP画像の設定画面を表示

リンクの設定

リンク：画像クリック時の遷移先 URL を設定
遷移先リンクの開き方：現在のタブで開く / 新しいタブで開くから選択

LP画像のリンク設定画面を表示

背景色の設定

背景色：透明または任意の色を設定（透明の場合、LP 上にボタンが表示されます）

LP画像の背景色設定画面を表示

余白の設定

上部の余白（PC）：0〜400px で設定
上部の余白（スマホ）：0〜400px で設定
下部の余白（PC）：0〜400px で設定
下部の余白（スマホ）：0〜400px で設定

LP画像の余白設定画面を表示

追加の CSS

検証機能でカスタマイズしたい要素のクラス名を確認して、CSS を上書きしてください。

LP画像のCSS追加設定画面を表示

LP 動画ブロックの設定項目

「LP 動画」ブロックをカスタマイズしていきます。

「LP 動画」ブロックをクリックします。
LP動画ブロックの選択画面を表示

以下のような設定項目が表示されます。
LP動画ブロックの設定項目一覧を表示

動画の設定

LP 動画（PC）：PC 表示用の動画ファイルまたは YouTube URL を設定
LP 動画（スマホ）：スマホ表示用の動画ファイルまたは YouTube URL を設定
YouTube 動画 URL（PC）：YouTube 動画の URL を入力（LP 動画（PC）より優先して表示されます）
YouTube 動画 URL（スマホ）：スマホ用の YouTube 動画 URL
動画のサイズ（PC）：セクションに合わせる / 動画をセクションの幅で表示 / 動画に合わせる / 動画のサイズで表示（最大幅はセクションの幅）から選択
動画のサイズ（スマホ）：スマホ表示時の動画サイズを同様に設定

LP動画の設定画面を表示