こんにちは、makeshopデザイン質問掲示板担当です。
いつもmakeshopをご利用いただきありがとうございます。
販売しているイチオシの商品を大きな画像を使って宣伝したい、
でもフリーページでLP（ランディングページ）を一からHTMLで作るのは大変…と感じているショップ様向けの記事です。
今回は、「画像とテキストを組み合わせ、最後に購入ボタンを設置するLPの作り方」を紹介します。
今回は例として、サンプルショップ【Complete】（グレー）のマカロンのLPを作成します！
1. LP用の画像の準備
今回の例では下記の画像やテキストをタテにつなげます。
| セクション | 要素 | 目的 |
|---|---|---|
| 1. 導入 (メインビジュアル) | ・メインの画像 ・導入テキスト |
興味付け、導入、期待感の醸成 |
| 2. 商品特長 | ・説明用画像 ・特長説明テキスト |
商品の魅力・多様性の紹介、納得感の提供 |
| 3. 訴求 | ・訴求用画像 ・訴求テキスト |
利用シーン、用途などの訴求、共感 |
| 4. 購入導線 (CTA) | ・商品画像 ・最終キャッチ（購入ボタン） |
最終確認、購入意欲の向上、行動の誘導 (CTA) |
・画像は容量を軽くしておくと、ページ表示がスムーズになります。
・訴求用のテキストが思いつかない、とりあえずサンプルで入れたいなどの場合は、ChatGPTやGeminiなどの生成AIに
”（商品説明）のLP用に「商品の興味付けの導入テキスト」、
「商品の魅力を説明するテキスト」、
「利用シーンを具体的にイメージさせる訴求テキスト」、
「商品購入用に購入意欲の向上最終キャッチ」を作成してください”
といったプロンプトで生成されるテキストを元に、ショップ様で内容をアレンジする方法もあります。ぜひお試しください！
（商品説明）の箇所には実際の商品の説明や、スペックなどを入力してください。
2. HTMLの基本構造を作成
画像と説明テキストをタテに並べるだけのシンプル構造です。
下記は一例です。ページのタイトルや背景色、画像のURLやテキストなどはショップ様の実際に表示させたい内容に変更してください。
ヘッダーやフッターがないため、どのクリエイターモードのテンプレートでも使用可能です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>華やかマカロン｜Macarons de Rêve</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Yu Gothic', 'Meiryo', sans-serif; /* フォントを調整 */
background-color: #f8f8f8; /* 背景色を少し明るく */
color: #333;
}
.lp-section {
max-width: 800px; /* LP全体の最大幅を少し広げる */
margin: 0 auto;
padding: 20px 0;
text-align: center;
}
.lp-image {
display: block;
width: 100%;
max-width: 750px;
margin: 0 auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 画像に影を追加 */
border-radius: 8px; /* 角を少し丸める */
}
.text-content {
padding: 30px 20px;
line-height: 1.8;
text-align: left;
background-color: #fff;
margin-top: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.text-content h2 {
font-size: 1.8em;
color: #a0522d; /* マカロンに合う色に */
margin-bottom: 20px;
text-align: center;
}
.text-content p {
font-size: 1.05em;
margin-bottom: 15px;
}
.section-title {
font-size: 2.2em;
color: #a0522d;
margin: 40px 0 20px;
text-align: center;
font-weight: bold;
}
.sub-description {
font-size: 1.1em;
color: #555;
margin-top: 15px;
margin-bottom: 30px;
line-height: 1.6;
text-align: center;
font-weight: bold;
}
.buy-button {
display: block;
width: 350px; /* ボタンの幅を調整 */
margin: 15px auto;
padding: 15px 25px;
background-color: #ff6600;
color: #fff;
font-size: 2em; /* フォントサイズを大きく */
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 30px; /* ボタンの角を丸く */
transition: background-color 0.3s ease; /* ホバーエフェクト */
box-shadow: 0 5px 15px rgba(255, 102, 0, 0.4);
}
.buy-button:hover {
background-color: #e65500;
transform: translateY(-2px); /* 少し浮き上がるエフェクト */
}
.lp-section form {
display: inline-block;
/* 上下のマージンをゼロに設定して、余分なスペースを削除 */
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.lp-section form:last-child {
margin-right: 0;
}
.lp-section .buy-button {
background: #e63946!important;
color: #ffffff;
border-radius: 30px!important;
border: none;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: inline-block;
text-align: center;
font-weight: bold;
cursor: pointer;
outline: none;
}
p.product-link a{
background: #4f0804;
width: 100%;
display: inline-block;
text-align: center;
border-radius: 5px;
padding: 15px 0;
margin: 20px 0;
font-weight: bold;
font-size: 2em;
color: #fff;
}
.copyright{
background: #A55D35;
color: #fff;
font-size: 14px;
text-align: center;
padding: 20px;
}
@media screen and (max-width: 480px) {
.lp-section {
padding: 10px 0;
font-size: 2em;
}
.lp-image {
border-radius: 0; /* スマホでは角丸をなくす */
box-shadow: none;
}
.text-content {
padding: 20px 15px;
margin-top: 15px;
border-radius: 0;
}
.text-content h2 {
font-size: 2.2em;
}
.text-content p {
font-size: 2em;
}
.section-title {
font-size: 2.5em;
margin: 30px 0 15px;
}
.sub-description {
font-size: 1em;
margin-bottom: 20px;
}
.buy-button {
width: 90%;
font-size: 2em;
margin: 30px auto;
padding: 12px 20px;
}
}
</style>
</head>
<body>
<div class="lp-section">
<img src="test1.jpg" alt="華やかで優雅なマカロン" class="lp-image">
<div class="text-content">
<h2>Macarons de Rêve - 夢のマカロン</h2>
<p>華やかで優雅なデザート、それが当商品のマカロンです。フランス発祥の伝統的な製法に基づき、厳選された上質なアーモンドプードルと砂糖をベースに、丁寧に焼き上げました。マカロンの2つのふわふわとしたシェルの間には、豊かなフィリングが詰まっており、一口食べるたびに口の中に広がる風味に感動します。</p>
</div>
</div>
<div class="lp-section">
<h2 class="section-title">色彩豊かなフレーバーの饗宴</h2>
<p class="sub-description">カラフルな外観と、中身のバリエーション豊かなフィリングが、見た目にも味覚にも楽しみをもたらします。</p>
<img src="test2.jpg" alt="多彩なマカロンフレーバー" class="lp-image">
<div class="text-content">
<p>バニラ、チョコレート、フルーツ、キャラメルなど、多彩な味わいがラインナップ。それぞれの風味が絶妙なバランスで調和し、幅広い好みに応えます。</p>
</div>
</div>
<div class="lp-section">
<h2 class="section-title">大切な方への贈り物にも</h2>
<p class="sub-description">手間暇かけて一つ一つ心をこめて製作され、美しい外観と繊細な味わいが特徴です。</p>
<img src="test3.jpg" alt="商品画像" class="lp-image">
<div class="text-content">
<p>贈り物としても喜ばれ、特別な日のお茶うけやパーティーにも最適。美味しさと美しさが融合したマカロンは、至福のひとときを演出します。ぜひ、上質なデザートの世界をお楽しみください。</p>
</div>
</div>
<div class="lp-section">
<h2 class="section-title">＜今すぐ購入＞</h2>
<h3>個数をお選びいただけます</h2>
<img src="test4.jpg" alt="商品画像" class="lp-image">
<form action="https://cpgray.makeshop.jp/api/basket/add.html" method="post" accept-charset="EUC-JP" target="_blank">
<input type="hidden" name="brand_info" value="1,000000000014,1,N,1,">
<input class="buy-button" type="submit" value="購入する（10個入り）">
</form>
<form action="https://cpgray.makeshop.jp/api/basket/add.html" method="post" accept-charset="EUC-JP" target="_blank">
<input type="hidden" name="brand_info" value="1,000000000014,1,N,2,">
<input class="buy-button" type="submit" value="購入する（15個入り）">
</form>
<form action="https://cpgray.makeshop.jp/api/basket/add.html" method="post" accept-charset="EUC-JP" target="_blank">
<input type="hidden" name="brand_info" value="1,000000000014,1,N,3,">
<input class="buy-button" type="submit" value="購入する（20個入り）">
</form>
<form action="https://cpgray.makeshop.jp/api/basket/add.html" method="post" accept-charset="EUC-JP" target="_blank">
<input type="hidden" name="brand_info" value="1,000000000014,1,N,4,">
<input class="buy-button" type="submit" value="購入する（25個入り）">
</form>
<p class="product-link">
<a href="https://cpgray.makeshop.jp/view/item/000000000014" target="_blank">商品詳細ページへ</a>
</p>
</div>
<div class="copyright">
※makeshopのLPサンプルページです。<br>
© 2025 Complete|gray | makeshop All Rights Reserved.
</div>
</body>
</html>
3. ポイント解説
実際に購入者様に届く商品画像やギフト包装はページの最後に配置することで、
説明 → 興味 → 購入！
の流れを作りやすくなります。
商品のイメージにあわせて変更は必要ですが、一般的に購入ボタンは目立つ色（オレンジや赤系）にするとクリック率が上がります。
購入ボタンはカゴだけmakeshopで設置可能です。
バリエーションごと、オプショングループ別の買い物カゴの設置もできるのでぜひ設置をお試しください！
→カゴだけmakeshopについては下記のサポート記事をご参照ください。
参考：サポート記事：「カゴだけmakeshopを設置したい」
こちらの記事内の簡易のツールにて、パラメーターの作成も可能です。
LPからブランドに興味をもった閲覧者様向けに、同じカテゴリーのページや、通常の商品ページ、ショップのトップページなどのリンクの設置もおすすめです！
もっと手軽に！AIを活用したLP作成ツール
よりカンタンにLPのサンプルページを作成したい、HTMLとCSSを作る時間が取れないというショップ様向けに簡易ではありますが、Geminiを使用してLP作成ツールを生成してみました！
下記のリンクからアクセスできます。
→LP作成ツール
作成したHTMLはそのままフリーページに使用することができます。
※ツールは予告なく公開停止する場合がございます。ご了承ください。
いかがでしたでしょうか。
ぜひお試しください！それではまた！
