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

株式会社UnReact

2025/06/16

はじめに

今回の記事は、Shopify アプリである「シンプル漫画LP｜お手軽イラスト画像LP」の解説記事です。

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

「シンプル漫画LP｜お手軽イラスト画像LP」は、漫画形式のイラストを使ったランディングページをノーコードで簡単に作成できるアプリです。
視覚的インパクトが強く、エンターテインメント性を高めることで、ブランドの認知度向上やコンバージョン率アップに貢献します。

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

シンプル漫画LP｜お手軽イラスト画像LP

「シンプル漫画LP｜お手軽イラスト画像LP」でできること

「シンプル漫画LP｜お手軽イラスト画像LP」を使うと、以下のことが実現できます。

縦スワイプまたは横スワイプの漫画LPを作成できる！

漫画を活用した魅力的なランディングページを手軽に作成。読み手の興味を引きつけ、商品やサービスの魅力をわかりやすく伝えます。
固定（追従）ボタンから今すぐ購入ができる！

漫画の最後のページで「今すぐ購入」や「お問い合わせ」などのボタンき表示でき、コンバージョンを促進します。
画面下の固定（追従）ボタンは複数の種類から選べる！

ボタンのデザインやテキストを自由に選択でき、ショップのイメージにあわせてカスタマイズできます。
LP の作成・編集はすべてノーコードでできる！

ドラッグ&ドロップ操作で漫画スタイルのLPを直感的に編集。専門知識は不要です。
複数のLPを作成・管理できる！

キャンペーンごとや商品カテゴリーごとに、いくつでも漫画LPを作成・運用できます。

アプリのインストール

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

シンプル漫画LP｜お手軽イラスト画像LP

ストア管理画面左下の「設定」をクリックします。

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

検索窓に、「シンプル漫画LP｜お手軽イラスト画像LP」と入力してください。
以下の画像のアプリをクリックしてください。

「インストール」ボタンをクリックして、ストアにアプリを追加しましょう。マーチャント用のアカウント（実際に物販などで運用しているアカウント）ですと、月額 $99.99 でご利用いただけます。インストール後、7 日間は無料でご利用いただけます。
また開発ストアの場合、無期限かつ完全無料で全機能をお試しいただけます。

「インストール」ボタンをクリックすると以下の画面に遷移します。右下の「インストール」ボタンをクリックして、アプリのインストールを行いましょう。

以下の管理画面が表示されます。

アプリの設定

次に、アプリの設定を行なっていきます。

漫画LPの作成

漫画LPを作成します。

基本設定

アプリ管理画面の LP 管理 ページ右上にある「LP を作成する」をクリックします。

すると以下の LP 作成 ページに遷移するので、ここで LP を作成していきます。

まず、LP 名 を入力します。
この名前は顧客には表示されることはなく、管理用の名前になります。

次に LP 画像の並び（スマホ） と LP 画像の並び（PC） を設定します。
ここで「縦」と指定すると縦スワイプ、「横」と指定すると横スワイプで LP が表示されます。
スマホと PC で別々に設定できるので、お好みで設定してください。

画像の並びを横に設定した場合は 横スクロールの方向 も設定しておきましょう。
縦書き漫画であれば左、横書きであれば右がおすすめです。

次に LP 画像の表示設定 を行なっていきます。

スマホ用の画像のみを設定し、PC でもスマホ用の画像を表示したい場合、「スマホと PC で同一の画像を表示する」にチェックを入れてください。

次に テーマの設定 を行なっていきます。

デフォルトで非表示になっているヘッダーやフッターを表示させたい場合、「テーマのヘッダーを表示する」や「テーマのフッターを表示する」にチェックを入れてください。

コンテンツの設定

次に、表示させるコンテンツの設定を行なっていきます。

LP 画像（スマホ） に対して「画像を追加する」ボタンか、ドラック&ドロップにて画像ファイルを追加してください。

画像が追加できると、以下のように追加した画像が表示されます。

PC用の画像もある場合は LP 画像（PC） にも画像を設定しましょう。
なお、スマホ・PC どちらかの画像が未設定の場合、未設定側のデバイスでは該当するコンテンツがスキップして表示されます。

画面クリックで任意のページに遷移させたい場合、 LP 遷移先リンク URLを指定してください。

「LP 遷移先リンク」を指定した場合、 LP 遷移先リンクの開き方 も確認しておきましょう。
上記で指定したリンクに遷移する際の開き方を「現在のタブで開く」か「新しいタブで開く」から選択できます。

LP 背景色 では、コンテンツの余白の色を指定できます。
入力欄をクリックしてください。

カラーピッカーが表示されるので、色を指定します。

以上で一つのコンテンツの設定が完了しました。
コンテンツを追加したい場合は、右下の「コンテンツを追加する」をクリックしてください。

すると、新たなコンテンツが追加されるので、同じように設定していきましょう。

コンテンツの編集・入れ替え・削除

一度設定したコンテンツの画像を変更したい場合、像入力欄の右上にあるアイコンから操作します。
鉛筆のアイコンをクリックで画像を変更、ゴミ箱のアイコンをクリックで画像を削除できます。

コンテンツの並び順を変更する場合、左側にある上下の矢印をクリックすることで順番を入れ替えることができます。

コンテンツ自体を削除したい場合は、コンテンツの右上のゴミ箱アイコンをクリックで削除できます。
漫画LPの作成完了

コンテンツの設定が完了したら、画面右上の「LP を作成する」をクリックします。

T

すると、LP 管理 ページに遷移し、作成した LP の設定が表示されていることが確認できます。

以上で漫画LPの作成が完了です。

漫画LPの管理・編集・複製・削除

作成した漫画LPは LP 管理 ページから、一覧で管理できます。

編集

既存の漫画LPを編集する場合、対象の LP をクリックします。

LP 編集 ページに遷移するので、必要な編集を行なった上、右上の「LP を更新する」をクリックしてください。
複製

既存の漫画LPを複製したい場合、対象の LP の 3 点リーダーをクリックします。

ドロップダウンが表示されるので、「LP を複製する」をクリックします。

すると、複製された LP が一覧に追加されます。
削除

漫画LPを削除したい場合、対象の LP を選択し、右上の「LP を削除する」をクリックします。

すると、確認ダイアログが表示されるので、問題なければ「削除する」をクリックで削除が完了します。

テーマに漫画LP機能を追加する

次に、テーマに漫画LP機能を追加していきます。
アプリ管理画面のサイドバーにある「設定」をクリックします。

すると、以下の設定画面に遷移するので、ここで設定を行なっていきます。

自動追加

テーマに漫画LP機能を自動追加します。

設定画面で追加したいテーマを選択し、「テーマに追加」ボタンをクリックしてください。

すると、テーマにアプリが自動追加されます。
問題なく追加されていることを確認し、右上の「保存する」をクリックしてください。
（※ まだ作成したLPと紐づいていないため、この段階では真っ白に表示されます）
エラーで失敗する場合や、トップページ以外に追加したい場合は、次の「手動追加」に進んでください。
手動追加

自動追加がエラーで失敗する場合や、トップページ以外に追加したい場合は手動で追加していきます。

設定画面で追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックしてください。

するとテーマのカスタマイズ画面に遷移するので、漫画LPを表示したいページに移動し、サイドバーの「セクションを追加」をクリックします。

すると、以下の画面が開くので、「アプリ」タブ内にある「LP｜シンプル漫画LP」をクリックします。

アプリブロックが追加されていることを確認し、右上の「保存する」をクリックしてください。

以上で漫画LP機能の追加が完了しました。
アプリブロック内の各種設定はアプリブロックのカスタマイズの項で解説します。

作成した漫画LPをテーマで表示させる

テーマへの機能追加が完了したら、作成した漫画LPをストアに表示させましょう。

アプリ管理画面の LP 管理 ページで、表示させたい LP の ID の右端にあるコピーアイコンをクリックします。

次にカスタマイズ画面に移動し、「LP｜シンプル漫画LP」セクションをクリックします。

アプリブロックの設定画面が開くので、「LP ID」の入力欄に先ほどコピーした ID を貼り付けます。
すると、作成した漫画LPが反映されます。
右上の「保存する」をクリックして保存しておきましょう。

以上で、作成した漫画LPをストアに表示させることができました。

テーマに固定ボタン機能を追加する

LPの表示ができたら、固定ボタン機能を追加します。
この操作によって LP の最終ページ下部に表示するボタン（赤枠の部分）を追加できます。
固定ボタンを表示しない場合、この項を飛ばして次に進んでください。

固定ボタンの種類

固定ボタンは漫画LPの最終ページで表示させるボタンです。
以下の五種類の中から好きなものを選択できます。

固定今すぐ購入ボタン
固定今すぐ購入画像ボタン
固定横並びボタン
固定画像ボタン
固定縦並びボタン

それぞれ以下のような見た目と機能を持っています。（見た目のカスタマイズも可能です）

固定今すぐ購入ボタン

一つのボタンを表示でき、ボタンクリックで登録した商品の決済画面に遷移させます。
固定今すぐ購入画像ボタン・固定画像ボタン

任意の画像をボタンとして表示できます。
「固定今すぐ購入画像ボタン」の場合、クリックで任意の商品の決済画面に遷移させます。
「固定画像ボタン」の場合、クリックで任意のリンク（商品ページやお問い合わせページなど）に遷移させます。
固定横並びボタン・固定縦並びボタン

任意のリンクを持たせた二つのボタンを表示できます。

「固定横並びボタン」では以下のように、スマホ時にボタンを横並びで表示します。

「固定縦並びボタン」では以下のように、スマホ時にボタンを縦並びで表示します。

固定ボタンの追加

それでは実際に固定ボタンを追加していきます。

カスタマイズ画面で、先ほど追加した「LP｜シンプル漫画LP」セクションの下の「＋」ボタンをクリックします。

以下の画面が表示されるので、「アプリ」タブを開き、任意の固定ボタンを選択してください。

アプリブロックが追加されていることを確認し、右上の「保存する」をクリックしてください。

以上で固定ボタンの追加が完了しました。
固定ボタン内の各種設定はアプリブロックのカスタマイズの項で解説します。

その他のセクションを非表示にする

アプリブロックの追加が完了したら、アプリ以外のセクションを非表示にします。
これにより、ページを漫画LPの表示に最適化できます。

カスタマイズ画面で、「LP｜シンプル漫画LP」セクションを追加したページを開きます。

当アプリ以外のセクションの目のアイコンをクリックして非表示にします。（削除でも良いです）

すると、以下のように漫画LPのみが表示され、画面のスクロールも発生しなくなります。
右上の「保存する」をクリックしてください。

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

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

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

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

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

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

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

以上でアプリの設定が完了しました。

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

アプリの設定が完了したら、仕上げにアプリブロックをカスタマイズしていきましょう。
カスタマイズ画面に移動し、LP セクションを追加したページに遷移してください。

LPセクション

LP セクションのカスタマイズをしていきます。

サイドバーの「LP｜シンプル漫画LP」をクリックしてください。

以下のような設定項目が表示されます。

1. LP の設定

表示させる LP の ID を指定します。
参考：作成した漫画LPをテーマで表示させる

2. LP 画像の設定

LP 画像の表示方法を指定できます。

3. プログレスバーの設定

縦スワイプ表示の際に表示されるプログレスバーの太さや色を指定できます。

4. プログレスドットの設定

横スワイプ表示の際に表示されるプログレスドットの大きさや、ドット下余白を指定できます。
※ 固定ボタンの背景色を透明に指定している場合、固定ボタンの高さ以上の下余白を指定する必要があります。

5. アニメーションの設定

LP のスワイプアニメーションの時間（速さ）を指定できます。

6. その他の設定

追加の CSS を指定して、より細かなデザインを実現できます。

固定今すぐ購入ボタン

「固定今すぐ購入ボタン」のカスタマイズ方法を解説します。

サイドバーの「固定今すぐ購入ボタン｜シンプル漫画LP」をクリックしてください。
※ アプリブロック内で商品を指定している場合、上記のアプリブロック名の代わりにその商品名が表示されます。

以下のような設定項目が表示されます。

1. 商品の設定

今すぐ購入ボタンに紐づける商品を指定できます。
購入ボタンをクリックすると、ここで指定した商品のチェックアウト画面に遷移します。
バリエーションのある商品が指定された場合、以下のようにバリエーション選択欄が表示されます。

2. 今すぐ購入ボタンの設定

今すぐ購入ボタンに表示するテキスト、ボタン各部のサイズ、各部の色や文字の太さ、枠線のスタイルや影、ボタンとバリアントセレクター間の余白などを指定できます。

3. セレクターの設定

バリエーションセレクターのラベルのテキストやサイズを指定できます。
※ セレクターは複数バリエーションのある商品でのみ表示されます。

4. ボタンコンテナの設定

ボタンコンテナの背景色や余白、影の指定ができます。

5. その他の設定

追加の CSS を指定して、より細かなデザインを実現できます。

固定今すぐ購入画像ボタン

「固定今すぐ購入画像ボタン」のカスタマイズ方法を解説します。
このセクションでは、任意の画像を今すぐ購入ボタンとして表示させることができます。

サイドバーの「固定今すぐ購入画像ボタン｜シンプル漫画LP」をクリックしてください。
※ アプリブロック内で商品を指定している場合、上記のアプリブロック名の代わりにその商品名が表示されます。

以下のような設定項目が表示されます。

1. 商品の設定

今すぐ購入ボタンに紐づける商品を指定できます。
購入ボタンをクリックすると、ここで指定した商品のチェックアウト画面に遷移します。
※ このセクションではバリエーションのある商品は非推奨です。（バリエーション選択機能がないため）バリエーションのある商品を指定した場合、常に先頭のバリエーションが選択された状態となります。