はじめに

Shopifyストアで漫画LPを作成する方法について、詳しく解説します。漫画形式のランディングページは、視覚的インパクトが強く、商品やサービスの魅力を分かりやすく伝えることができる効果的なマーケティング手法です。

今回は、以下の記事を参考にしています。

漫画LPとは？その効果と重要性

漫画LPは、ストーリー形式で商品やサービスの価値を伝えることができる強力なマーケティングツールです。テキストや通常の画像では伝えきれない「体験」や「変化」を、物語として訴求できるため、顧客の共感を得やすく、コンバージョン率の向上が期待できます。

特にShopifyストアにおいては、商品の使用シーンや効果を漫画で表現することで、顧客の購買意欲を高めることができます。また、縦スクロールや横スクロールなど、スマートフォンでの閲覧に最適化された形式で提供できるため、モバイルファーストの現代においても効果的です。

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

まず最初にご紹介するのは、「シンプル漫画LP｜お手軽イラスト画像LP」です。このアプリは、ノーコードで誰でも簡単に漫画形式のランディングページを作成できる優れたツールです。

アプリの特徴

「シンプル漫画LP｜お手軽イラスト画像LP」は、Shopifyストアに漫画形式のランディングページを簡単に追加できるアプリです。ドラッグ&ドロップの直感的な操作で、プログラミング知識がなくても美しい漫画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. 商品の設定

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

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

今すぐ購入ボタンに表示する画像や PC 表示時の最大幅を指定できます。

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

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

4. その他の設定

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

固定画像ボタン

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

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

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

1. 画像ボタンの設定

固定ボタンの画像やリンク PC 表示時の最大幅を指定できます。

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

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

3. その他の設定

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

固定横並びボタン・固定縦並びボタン

「固定横並びボタン」「固定縦並びボタン」のカスタマイズ方法を解説します。

サイドバーの「固定横（または縦）並びボタン｜シンプル漫画LP」をクリックしてください。

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

1. メインボタンの設定

メインボタンのラベルやリンク、色の設定ができます。

2. サブボタンの設定

サブボタンのラベルやリンク、色の設定ができます。

3. ボタンの共通設定

ボタンの各部サイズやスタイル、リンクの開き方を指定できます。

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

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

5. その他の設定

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

おわりに

このように「シンプル漫画LP｜お手軽イラスト画像LP」を使うことで簡単に高品質な漫画LPを作成することができます。

縦スワイプ・横スワイプ対応の漫画LPを誰でも簡単に作成
固定（追従）ボタンを使ってユーザーの行動をダイレクトに促進
ノーコードで LP をデザインし、複数の LP を作成・管理できる
月額 $99.99 で 1 週間の無料トライアルもご利用可能

漫画という視覚的インパクトの強い形式で、ユーザーの興味を引き付け、ブランドや商品の魅力を存分にアピールしてみてください。

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

Pagetify Landing Page Builder

項目	内容
価格	無料インストール、有料プラン：$9～$59/月
特徴	ドラッグ&ドロップビルダー、99以上のテンプレート、SEO最適化
対応言語	英語
評価	5.0（90レビュー）

ワンポイント解説

Pagetifyは、コーディング不要で美しいランディングページを作成できるビルダーです。プロフェッショナルなテンプレートが豊富で、スライドショーやビデオバナー、パララックス効果など、視覚的に魅力的な要素を簡単に追加できます。Judge.meやLooxなどの人気アプリとの連携も可能で、レビューや証言を効果的に表示できます。漫画LP作成においても、複数のセクションを組み合わせてストーリー性のあるページを構築できます。

GemPages Landing Page Builder

項目	内容
価格	無料プラン有、有料プラン：$29～$199/月
特徴	80以上のCROテンプレート、AI機能、ビジュアルエディター
対応言語	英語（日本語未対応）
評価	4.9（2,563レビュー）

ワンポイント解説

GemPagesは、AI機能を搭載した高機能なページビルダーです。参照画像やURLから編集可能なレイアウトを自動生成できるAI Image-to-Layout機能が特徴的です。コンバージョン最適化に特化した要素（カウントダウンタイマー、在庫カウンター、バンドル表示など）が組み込まれており、漫画LPに購買促進要素を簡単に追加できます。グローバルスタイル機能により、ブランドの一貫性を保ちながら複数のページを効率的に管理できます。

Instant Section & Page Builder

項目	内容
価格	無料プラン有、有料プラン：$39～$249/月
特徴	500以上の無料テンプレート、Figmaプラグイン、A/Bテスト機能
対応言語	英語
評価	5.0（184レビュー）

ワンポイント解説

Instantの最大の特徴は、Figmaとの連携機能です。デザイナーがFigmaで作成したデザインを直接コピー&ペーストでShopifyページに変換できるため、デザインの再現性が非常に高いです。13,000人以上のユーザーが使用しているFigmaプラグインは、デザインからコードへの変換を自動化し、開発時間を大幅に短縮します。漫画LPの制作においても、プロのデザイナーが作成した高品質なデザインをそのまま実装できるのが魅力です。

Beae Landing Page Builder

項目	内容
価格	無料プラン有、有料プラン：$19.99～$149.99/月
特徴	A/Bテスト機能、高速パフォーマンス、CRO最適化
対応言語	英語
評価	4.9（756レビュー）

ワンポイント解説

BeaeはA/Bテスト機能に特化したページビルダーです。複数のデザインバリエーションを作成し、どのデザインがより高いコンバージョンを生むかを実際のデータで検証できます。これは漫画LPにおいても非常に重要で、ストーリーの展開方法や画像の配置、CTAボタンの位置などを最適化できます。また、ページの読み込み速度にも配慮されており、画像の多い漫画LPでも高速表示を実現します。

まとめ

Shopifyで漫画LPを作成する方法として、5つの優れたアプリをご紹介しました。

シンプル漫画LP｜お手軽イラスト画像LPは、日本語対応で操作が簡単、漫画LP専用に設計されているため、初心者でも迷わず使えるのが最大の魅力です。縦・横スワイプの選択や固定ボタンの種類も豊富で、日本のECサイトに最適化されています。

その他のアプリも、それぞれ独自の強みを持っています。Pagetifyは豊富なテンプレート、GemPagesはAI機能、InstantはFigma連携、BeaeはA/Bテストと、用途に応じて選択できます。

漫画LPは、商品の魅力を物語として伝えることで、顧客の共感を得やすく、購買意欲を高める効果的な手法です。特にモバイルファーストの現代において、スマートフォンでの閲覧に最適化された漫画形式は、今後ますます重要になるでしょう。

まずは無料トライアルを活用して、自社のブランドや商品に最適なアプリを見つけることをお勧めします。適切なツールを選択し、魅力的な漫画LPを作成することで、Shopifyストアの売上向上につながることでしょう。

参考記事

今回は、以下の記事を参考にしています。