クライアントからの依頼でLPを作るとき、デザインは作れても「決済機能の実装までは難しそう」と感じたことはありませんか。
CTAボタンにクライアントが用意した決済代行会社のリンクを埋め込む、という進め方に手間を感じている方も多いはずです。
Shopifyを使えば、コードを1行も書かず、決済代行会社のリンクを別途用意することもなく、画像バナーを並べるだけで決済機能付きのLPを作れます。
この記事では、Shopifyの標準テーマ「Horizon」のヒーローセクションを使って、画像LPをノーコードで作る手順を、テーマの準備から画像設定・リンク・購入導線の最適化まで全手順で解説します。
デイトラのShopifyコースでコースマネージャー兼メンターを務めるサックさんが実演した内容をもとにしています。
・Shopifyで作る決済機能付き画像LPの完成イメージ
・Horizonテーマのヒーローセクションを使ったLPの仕組み
・テーマの準備と不要セクションの削除方法
・PC用・スマホ用の画像設定と、2サイズ用意すべき理由
・バナー全体をクリック領域にするリンク設定
・購入までの導線を短くしてコンバージョンを高める一手
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
Shopifyで作る決済機能付き画像LPの完成イメージ
まずは今回作成するLPの完成形を確認します。
縦長の販売ページで、スクロールするとファーストビュー → 悩みの訴求 → 商品の特徴 → お客様満足度 → 申し込みボタンという流れで構成されています。
スマホ版も同じく、ファーストビュー・悩みの訴求・商品の特徴・お客様満足度・申し込みボタンという並びです。
このページの特徴は、コードを1行も書いていないという点です。
ノーコードのページビルダー系アプリも使っていません。Shopifyの標準テーマだけで作られており、しかもカート（決済機能）まで付いています。
デザイナーが作った1枚の画像が、そのまま売れるページになる——これが今回のゴールです。
世界中で使われているECサイト構築プラットフォームです。ネットショップの開設・商品管理・決済・配送設定などを、専門知識がなくても行えます。今回はこのShopifyに標準で用意されているテーマ機能だけを使ってLPを作ります。
種明かし｜Horizonのヒーローセクションを6つ並べるだけ
このページの正体は、Shopifyのテーマ「Horizon」のヒーローセクションを、縦に6つ並べただけのものです。
1つのセクションにPC版とスマホ版のバナー画像をそれぞれ設置し、それを6回繰り返しているだけです。
特別なセクションもHTMLもCSSもいりません。やることは「画像を入れる」「リンクを貼る」の2つだけです。
今回の手順では、商品の情報・価格・送料をあらかじめ設定してある状態から進めます。この「商品・送料・決済の設定」がネットショップとして最も大事な部分ですが、まずは見せ方（デザインの並べ方）を先に理解するため、設定部分は記事の最後で改めて触れます。
ここを設定しておけば、あとはデザインを並べるだけでお客さんが購入できる状態になります。
今日の主役は、サイト上の「見せ方」の方です。
HorizonはShopifyの標準テーマの1つです。その中の「ヒーローセクション」は、大きな画像やメッセージを全面に表示するためのブロックで、本来はページ上部の目立つ視覚要素として使われます。今回はこれを商品情報の入力ではなく、画像バナーを1枚ずつ表示する土台として活用します。
Horizonテーマの準備と不要セクションの削除
それでは実際にLPを作っていきます。
テーマを追加して公開する
- すでに用意された「Horizon完成系」からHorizonのテーマを追加する
- 追加したテーマを公開する
- 新しく作っていくHorizonテーマの「編集」をクリックする
不要なセクションを削除・非表示にする
ヒーローセクションを6つ重ねて作るので、それ以外の不要なものは削除・非表示にしていきます。
- フィーチャーコレクション → 削除
- 広告バー → 削除
- ヘッダー → 使うかもしれないので、目のマークをクリックして非表示
- フッター → 同じく非表示
次に、ヒーローセクションの中にある見出しとボタンのブロックは使わないので削除します。
今回は画像1枚で完成させたいので、テーマ側にテキストを入力するブロックは残しません。
削除は要素を完全に取り除く操作、非表示は残したまま表示だけを消す操作です。ヘッダーやフッターは後で使う可能性があるため、削除ではなく非表示（目のマーク）にしておくと、必要になったときにすぐ戻せます。
ヒーローセクションに画像を設定する（PC版・スマホ版）
不要なセクションを整理したら、ヒーローセクションに画像を設定します。
- ヒーローセクションをクリックすると、右側に「メディア」が表示される
- ここにPC版の画像を設定する（画像はドラッグ&ドロップでShopify上に登録できる）
- PC版の1番の画像を選択する
- 「モバイルで別のメディアを表示する」をクリックし、スマホ版の画像を設定する（スマホ版01を選択）
続いて、表示を整えます。
- 現在は画像の上下が見切れているので、高さを「自動」にする（画像そのままの大きさで表示できる）
- 画像に少しグレーがかかっているので、メディアのオーバーレイを外す
- 上下の余白があるので、それぞれ0にする
これで保存すると、画像を選んだだけでファーストビューが完成します。
文字も配置もすべて画像の中にデザインしてあるので、テーマ側でテキストをいじる必要はありません。あくまで画像を全面に出す使い方です。
画像の上に重ねる半透明の色のことです。本来は画像の上に載せた文字を読みやすくするための機能ですが、今回は文字も画像の中に入れているため不要です。オーバーレイを外すことで、デザインした画像の色をそのまま表示できます。
なぜPC用とスマホ用で2枚の画像を作るのか
ここが、デザイナーに1番知ってほしいポイントです。
Horizonは画面の横幅750ピクセルを境に、表示する画像を自動で切り替えます。
- 750ピクセル以上（PC画面） → メディアに入れた横長の画像を表示
- 749ピクセル以下（スマホ画面） → モバイルメディアに入れた画像を表示
つまり、作るバナーは750ピクセルを境とした2種類が基本単位になります。
横長と縦長、それぞれに最適なレイアウトで文字を組めるので、スマホでも文字が潰れず、しっかり読んでもらえます。
Figmaなどでバナーを作るときは、この750ピクセルを意識して2サイズ用意しておく。
それだけで、Shopify側の作業は「ただ画像を入れるだけ」になります。
PCとスマホなど、画面の幅に応じて表示を変える仕組みのことです。通常はコードで細かく制御しますが、Horizonのヒーローセクションはあらかじめ750ピクセルを境にPC用・スマホ用の画像を切り替えてくれるため、2サイズの画像を用意するだけでレスポンシブに対応できます。
バナーにリンクを貼って「押せるLP」にする
次に行うのはリンクの設定です。
バナー画像には「今すぐ試す」というボタンが描かれていますが、これは画像の中に書いた絵なので、このままでは押せません。
そこで、ヒーローセクションの「リンク」という項目に商品ページを指定します。
- 「リンク」をクリックする
- 「商品」をクリックする
- 先に登録しておいた商品「オーラ導入美容液」をクリックする
- 保存する
こうすることでバナー全体がクリック領域になり、お客さんがバナーのどこを押しても商品ページに移動して、そこでカートに追加できるようになります。
ボタンを個別に作らなくても、画像1枚が丸ごと「買えるボタン」になります。
リンクを入れるのは、申し込みを促すバナーだけで十分です。今回ならファーストビューと1番下のオファーのバナーにリンクを付けます。途中の「悩みの訴求」や「特集紹介」のバナーはリンクなしでOKです。
なお、画像全体にリンクを付けるのが嫌な場合は、ShopifyではノーコードでCTAボタンだけを設置することも可能です。
CTA（Call To Action）は「行動喚起」の意味で、CTAボタンは「今すぐ購入」「申し込む」など、ユーザーに次の行動を促すボタンのことです。今回は画像全体をリンクにしていますが、ボタンだけを別に設置したい場合もShopify上でコードなしで対応できます。
ヒーローセクションを複製してLPを完成させる
ファーストビューができたら、あとは同じ作業の繰り返しでLPを完成させます。
2枚目・3枚目のバナーを作る
- ヒーローセクションを右クリック → 複製して2つ目のセクションを作る
- 画像をPC02 / SP02に変更する
- 2枚目は商品ページへのボタンが不要なので、リンクは削除する
- スマホでも正しく表示されるか確認して保存する
- 同じ要領で2つ目を複製し、画像をPC03 / SP03に変更して保存する
最後の6枚目はリンク付きのセクションを複製する
最後の6枚目の画像には商品へのリンクが必要です。
そこで、リンクが付いている1番上のヒーローセクションを複製し、1番下に移動させます。
- 1番上のヒーローセクションを複製する
- 複製したセクションを1番下に移動する（すでに商品へのリンクが付いた状態）
- 画像だけをPC06 / SP06に変更する
- スマホ版が表示されていることを確認して保存する
- クリックして商品ページへ遷移するかを確認する
これで、コードを書かず、アプリも入れず、デザイナーのスキルから決済までつながる縦長のLPが完成しました。
やったことは「画像を入れて、必要なところにリンクを貼っただけ」です。
購入までの導線を短くしてコンバージョンを高める一手
ここからは、もう1歩踏み込んだ話です。
これまでのやり方だと、お客さんは「バナーを押す → 商品ページに移動する → 購入する」という流れになります。
ここでShopifyを少し勉強すると、「セクションを追加」から「特集商品」というセクションを使えます。
- 「セクションを追加」から「特集商品」セクションを追加する
- そのセクションで商品を選択する
- 購入ボタンの「クイックチェックアウト（簡単なチェックアウト）」を設置する
これを設置すると、商品ページやカートページを飛ばして、そのままチェックアウト（決済）の画面に移動できます。
ECでは購入までの導線が短くなるほどコンバージョンの改善につながるとされています。
「画像を貼るだけ」から始めて、こうした一手を知っているかどうかで、同じデザインでも売れ方が変わってきます。
商品ページやカートを経由せず、ボタンを押すと直接決済画面へ進める機能のことです。購入までのステップが減るぶん、途中離脱を防ぎやすくなります。ECにおける「コンバージョン（購入などの成果に至る割合）」の改善に有効とされています。
まとめ｜デザインは簡単、その手前の設定こそが「売れるLP」を分ける
今回見てきたように、デザインを並べるところまでは、コードなしで本当に簡単に実装できます。
一方で、その手前にある商品・在庫・送料・税金・決済の設定、そして今回の特集商品のような購入導線の設計——ここを正しく押さえられると、作ったページがちゃんと売れるLPになります。
つまずきやすいけれど1番大事な部分を、最初から順番に手を動かしながら学べるのがデイトラのShopifyコースです。
デザインのスキルにShopifyを掛け合わせて、Shopify制作を新たな武器にしたい方は、ぜひ挑戦してみてください。
Shopifyの画像LPに関するよくある質問
Q. 本当にコードを書かずに決済機能付きのLPが作れますか？
はい、作れます。動画では、Shopifyの標準テーマ「Horizon」のヒーローセクションを6つ並べ、画像とリンクを設定するだけで、カート（決済機能）付きの縦長LPを完成させています。HTMLやCSS、ノーコードのページビルダー系アプリも使いません。
Q. なぜPC用とスマホ用で画像を2枚用意する必要があるのですか？
Horizonが画面の横幅750ピクセルを境に、表示する画像を自動で切り替えるためです。750ピクセル以上ではPC用（横長）、749ピクセル以下ではスマホ用（縦長）の画像が表示されます。2サイズ用意しておくと、スマホでも文字が潰れずに読めるLPになります。
Q. バナーはどこにリンクを貼ればいいですか？
申し込みを促すバナーだけで十分です。動画では、ファーストビューと1番下のオファーのバナーにリンクを付け、途中の「悩みの訴求」や「特集紹介」のバナーはリンクなしにしています。ヒーローセクションの「リンク」項目に商品ページを指定すると、バナー全体がクリック領域になります。
Q. 購入までの流れを短くする方法はありますか？
あります。「特集商品」セクションを追加し、購入ボタンにクイックチェックアウト（簡単なチェックアウト）を設置すると、商品ページやカートを飛ばして直接決済画面に進めます。ECでは購入導線が短いほどコンバージョン改善につながるとされています。
Q. デザインを並べる以外に、事前に必要な準備はありますか？
商品の情報・価格・送料をあらかじめ設定しておく必要があります。動画では「商品・送料・決済の設定」がネットショップとして最も大事な部分だと説明されています。デザインの見せ方は簡単でも、この手前の設定と購入導線の設計が「売れるLP」かどうかを分けます。
ShopifyでのLP制作・EC構築をさらに深く学ぶならデイトラ「Shopifyコース」
本記事で解説したShopifyの画像LPは、独学でも基礎を押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Shopifyコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
デザインのスキルにShopifyを掛け合わせ、EC制作を新たな武器にしたい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
