LPはいきなり外注せず、まずは自作がおすすめ。
ペライチを使うと、縦長のWebページも簡単です。
ここでは、
- 操作の8割を占めるブロックの使い方
- LPパーツごとの作成方法
- ページ情報の編集・公開方法
まで、すぐに実践できるよう解説します。
※本ページはプロモーションが含まれています
■この記事を書いた人
自作した初ランディングページで、約100万円の売上を達成した”うきわ”です。
![自らのLP販売実績](https://denshishoseki-shuppan.com/wp-content/uploads/2022/05/2022-05-14_09h59_33.jpg)
▼LP(ランディングページ)に必要なパーツ・配置する順番が丸わかり!
操作の8割方はこれだけ!絶対に使うペライチの基本操作
ペライチで作成できるのは、このようなLP(ランディングページ)。
LP作成で操作の8割方をしめるのは、3つの基本操作。
- ブロックの挿入
- ブロックのコピー
- ブロックの移動
動画の方がわかりやすいので、約5分と長いですが、はしょりながらご覧ください。(PCでの操作方法)
㊟画面右下のボタンで再生速度・全画面表示が可能です
ペライチの3つの基本操作がわかると、あとは直感的にガンガン進められます。
新規のLPは「新しいページを作成する」から
1. マイページにある「新しいページを作成する」から開始。
![ペライチの「新しいページを作成する」ボタン](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/1.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
「マイページ」へは、トップページのメニューから。
![ペライチのトップページ](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/マイページ-1.jpg)
2. 白紙から作成の「使う」をクリック。
![白紙から作成の「使う」](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/2-1.jpg)
㊟用意されているテンプレートの使用もOK
3. 編集画面へ移動します。
![ペライチの編集画面へ移動](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/3.jpg)
①デフォルトでは「PCの画面サイズ」で表示
②画面表示切り替え:パソコン・タブレット・スマホの画面サイズに変更可
③Copyright表示のブロック:屋号などに変更(ブロックをクリック)
4. Copyright表示を変更したら「保存」をクリック。
![Copyright表示を変更したら「保存」](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/4.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
![屋号に変更されたイメージ](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/4-2.jpg)
5. 現状を保存したいときは、左上の「保存する」をクリック。
![ペライチのメニュー「保存する」](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/5.jpg)
6. すべてのブロックは、「+ボタン」から挿入可能です。
![ペライチの+ボタン](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/6.jpg)
7. ブロックメニューが表示されます。
![ブロックが表示されたイメージ](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/2022-06-17_17h12_31.jpg)
使いたいブロック名から、細かくブロックを撰択可能です。
新規のLP作成は、このように開始してください。
LPパーツ別・作成操作の手順
ペライチでのLP作成をパーツ別に解説します。(パソコンでの操作方法)
ペライチのアカウント作成がお済みでないなら。
LPにどんなことを書くのか知っておきたいなら。
前提として、
文字サイズ
- 本文:18px
- ターゲットコピー:18px
- キャッチコッピー:28px
- サブキャッチ:20px
- 見出し:22px
で作成していきます。
使用する各ブロックは参考程度に、自作する際には、あなたのお好みを見つけ出してください。
こちらのサンプルをもとに、各パーツの作成操作の手順を解説します。
ターゲットコピー
1. 「文章」ブロック➜「テキストのみ」➜「決定」
![「文章」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/8.jpg)
2. 文章を入力するためブロックをクリック。
![「文章」ブロックをクリック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/9-1.jpg)
文字の中央寄せ・サイズ変更などが可能です。
![「文章」ブロックの編集](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/10-2.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![「文章」ブロックのプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/11-5.jpg)
「ターゲット」でした。
キャッチコピー
1. ターゲットコピーのブロックをコピーします。
![ターゲットコピーのブロックをコピー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/12-1.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
![コピーしたターゲットコピーブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/12-2-1.jpg)
2. 文字サイズを28pxに変更し「保存」をクリック。
![文字サイズを28pxに変更](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/13-2-2.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![キャッチコピーのプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/キャッチコピー新-1.jpg)
■メインビジュアルも作成可
ターゲットコピー・キャッチコピーを画像にする、「メインビジュアル」ブロックも用意されています。
「メイン」ブロック➜「メイン・フォト」➜「決定」
![ペライチの「メイン」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/メインビジュアル1.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![「メイン」ブロックのプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/メインビジュアル2.jpg)
もしくは「文章+画像」ブロック➜「上画像(背景画像あり・明)」➜「決定」
![ペライチの「文章+画像」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/メインビジュアル別.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![「文章+画像」ブロックのプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/メインビジュアル別2.jpg)
といった、ブロックの使用もおすすめです。
「キャッチコピー」でした。
区切り線
1. 区切り線を挿入したいキャッチコピー下の「+ボタン」をクリック。
![「+ボタン」をクリック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/14-1.jpg)
2. 「区切り」ブロック➜「区切り線・実践1px」➜「決定」
![「区切り」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/14-2.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![「区切り」ブロックのプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/15-2.jpg)
「サブキャッチ」を上下で挟みたいので、もう一つコピーしておきます。
「区切り線」でした。
サブキャッチ
1. 作成した「キャッチコピー」をコピーして、「サブキャッチ」を作成します。
![「キャッチコピー」をコピー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/2022-06-17_18h29_32.jpg)
※文字サイズ:22px
2. サブキャッチを2つの区切り線の間に移動します。
![サブキャッチを2つの区切り線の間に移動](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/2022-06-17_18h35_35.jpg)
「サブキャッチ」でした。
ボタン
1. 「ボタン」ブロック➜「ボタン(大)」➜「決定」
![ペライチの「ボタン」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ボタン.jpg)
2. 挿入された「ボタン」ブロックをクリック。
![「ボタン」ブロックをクリック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ボタン2.jpg)
3. ボタン内の文字やリンク先、カラーも変更できます。
![ボタン内の文字やリンク先、カラーも変更](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ボタン3.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![ボタンブロックのプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ボタン3-1.jpg)
「ボタン」でした。
商品・サービスの販売に必要な決済機能は、ペライチでは有料となります。
▼無料でクレジット決済を手に入れる方法【ネットショップ利用】
もちろんLPでも応用できます!
見出し
1. 「見出し」ブロック➜「見出し:矢印」➜「決定」
![ペライチの「見出し」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/見出し.jpg)
※文字サイズは22px
※以降の「見出し」作成では、こちらをコピー・移動して使用してください
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![「見出し」ブロックのプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/見出し2.jpg)
「見出し」でした。
お悩みリスト
1. 「箇条書き/リスト」ブロック➜「リスト」➜「決定」
![ペライチの「箇条書き/リスト」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/箇条書き.jpg)
2. 箇条書きの上部にある「見出し」は不要なので削除します。
![「見出し」は不要なので削除](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/箇条書き2.jpg)
㊟削除の「☓ボタン」は薄く表示されています
3. 箇条書きの行数を増やすには、中央にある「+ボタン」をクリック。
![箇条書きの行数を増やすには、中央にある「+ボタン」をクリック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/箇条書き3.jpg)
※文字サイズは18px
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![箇条書きブロックのプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/箇条書き4.jpg)
4. 箇条書きの✔を別の画像に変更できます。
![箇条書きのチェクマークの変更](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/箇条書き5.jpg)
㊟✔は画像のためカラー変更はできません
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
![箇条書きのチェクマークの変更画面](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/箇条書き6.jpg)
「お悩みリスト」でした。
共感
「キャッチコピー」などをコピーして、テキストを変更します。
![「キャッチコピー」などをコピー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/共感.jpg)
※文字サイズは18px・左寄せ
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![共感のプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/共感2.jpg)
※見出しもコピー・作成してください(実はわたしも…の部分)
続けて「悩みの原因」~「その解決条件を満たすのがこの商品!」も、作成済みの見出しと文章をコピーして作ります。
![作成済みの見出しと文章をコピー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/悩みの原因.jpg)
「共感」でした。
ベネフィットリスト
作成済みの「お悩みリスト」をコピー・移動して、文章を書き直すだけです。
![「お悩みリスト」をコピー・移動して、文章を書き直す](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ベネフィットリスト.jpg)
「ベネフィットリスト」でした。
客観的な証拠
複数の証拠を掲載して信頼を高めます。
ビフォー・アフター
1. 「箇条書き/リスト」ブロック➜「ステップ(画像付き)」➜「決定」
![ペライチの「箇条書き/リスト」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ビフォー・アフター.jpg)
2. 見出し、画像、文章をお好みで編集します。
![見出し、画像、文章をお好みで編集](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ビフォー・アフター2.jpg)
3. 画像をクリックすると編集画面が表示されます。
![画像をクリックすると編集画面が表示](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ビフォー・アフター3-1.jpg)
デフォルトで用意されている画像や、任意の画像をアップロードして使用可能です。
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューのイメージ。
![ビフォー・アフタープレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ビフォー・アフター4.jpg)
「ビフォー・アフター」でした。
お客様の声
1. 「文章+画像」ブロック➜「お客様の声」➜「決定」
![ペライチの「文章+画像」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/お客様の声.jpg)
2. 画像を挿入したり、不要なものを削除したりします。
![画像を挿入したり、不要なものを削除](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/お客様の声2-1.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![お客様の声プレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/お客様の声3.jpg)
「お客様の声」でした。
推薦文
1. 「文章+画像」ブロック➜「上画像(枠付)」➜「決定」
![ペライチの「文章+画像」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/推薦文.jpg)
2. 画像を挿入したり、不要なものを削除したりします。
![画像を挿入したり、不要なものを削除](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/推薦文2.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![推薦文のプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/推薦文3.jpg)
「推薦文」でした。
商品・サービスの紹介
1. 「文章+画像」ブロック➜「左画像(背景画像あり・明)」➜「決定」
![ペライチの「文章+画像」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/紹介商品.jpg)
2. 画像を挿入したり、不要なものを削除したりします。
![画像を挿入したり、不要なものを削除](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/商品紹介2-1.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![商品紹介のプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/商品紹介3.jpg)
「商品・サービスの紹介」でした。
プロフィール
- 「文章+画像」ブロック➜「プロフィール」➜「決定」
![ペライチの「文章+画像」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/プロフィール.jpg)
2. 画像を挿入したり、不要なものを削除したりします。
![画像を挿入したり、不要なものを削除](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/プロフィール2-1.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![プロフィールのプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/プロフィール3-1.jpg)
「プロフィール」でした。
特典
1. 「文章+画像」ブロック➜「特典」➜「決定」
![ペライチの「文章+画像」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/特典.jpg)
2. 画像を挿入したり、不要なものを削除したりします。
![画像を挿入したり、不要なものを削除](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/特典2.jpg)
完成したものをコピーして、必要なぶんだけ作成します。
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![特典のプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/特典3.jpg)
「特典」でした。
よくある質問
1. 「文章+画像」ブロック➜「よくある質問(枠付)」➜「決定」
![ペライチの「文章+画像」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/よくある質問.jpg)
2. 必要に応じて削除・コピーします。
![必要に応じて削除・コピー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/よくある質問2.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ
![よくある質問のプレビュー](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/よくある質問3.jpg)
「よくある質問」でした。
ヘッダーメニュー
1. 「ヘッダー/メニュー」ブロック➜「左テキスト+右メニュー(上部固定)」➜「決定」
![ペライチの「ヘッダー/メニュー」ブロック](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ヘッダーメニュー1.jpg)
2. していきます。
![ロゴのテキストやメニューを編集](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/メニューヘッダー2.jpg)
3. メニュー名やリンク先を決定します。
![メニュー名やリンク先を決定](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ヘッダーメニュー3-1.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
背景画像や文字色なども変更可能です。
![背景画像や文字色なども変更可能](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ヘッダーメニュー4.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
メニューに内部リンクを設定したいときは、ブロック単位で簡単に撰択できます。
![内部リンクはブロック単位で撰択可能](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ヘッダーメニュー5-1.jpg)
![](https://denshishoseki-shuppan.com/wp-content/uploads/2022/03/下向き矢印.png)
プレビューでのイメージ。
![ヘッダーメニューのイメージ](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ヘッダーメニュー6-1.jpg)
「ヘッダーメニュー」でした。
以上、この操作手順をマスターするだけで、簡単にLP作成に取りかかれます。
作成したLPの「ページ情報編集・公開」
作成したLPの、URL・ページ名などを設定していきます。
1. 編集画面の左メニュー「ページ情報編集」をクリック。
![ペライチの編集画面の左メニュー「ページ情報編集」](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ページ情報.jpg)
2. URLの設定は、「旧ページURLを利用したい場合」が一番簡単な方法です。
![「旧ページURLを利用したい場合」が一番簡単な方法](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/ページ情報2.jpg)
任意のURLを決めてください。ただし、すでに存在するURLは利用できません。
3. 「公開する」から簡単に公開も可能です。
![ペライチの「公開する」](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/公開.jpg)
4. 説明事項を確認して問題なければ、「確認しました」をクリック。
![ペライチの「確認しました」](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/公開2-1.jpg)
5. 公開したLPを見たいときは「公開ページを見る」から。
![ペライチの「公開ページを見る」](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/公開4.jpg)
6. 「下書きに戻す」で簡単に非公開に戻せます。
![ペライチの「下書きに戻す」](https://denshishoseki-shuppan.com/wp-content/uploads/2022/06/公開3-2.jpg)
以上、ペライチによるLP作成の全操作手順でした。
ペライチのアカウント作成がお済みでないなら。
【ペライチでLP作成する全操作手順】まとめ
この記事のポイント
- ペライチ3つの基本操作
・ブロックの挿入
・ブロックのコピー
・ブロックの移動 - LPバーツ別の使用ブロックはこれ!
・キャッチコピー:文章 or メイン
・区切り線:区切り ➜ 区切り線・実践1px
・ボタン:ボタン ➜ ボタン(大)
・見出し:見出し ➜ 見出し:矢印
・お悩みリスト:箇条書き/リスト ➜ リスト
・ビフォー・アフター:箇条書き/リスト ➜ ステップ(画像付き)
・推薦文:文章+画像 ➜ 上画像(枠付)
・商品の紹介:文章+画像 ➜ 左画像(背景画像あり・明)
・特典:文章+画像 ➜ 特典
・よくある質問:文章+画像 ➜ よくある質問(枠付)
・ヘッダーメニュー:ヘッダー/メニュー ➜ 左テキスト+右メニュー(上部固定)
本気でLPの結果を出したいなら…
この流れがおすすめ!
▼WordPress有料テーマ「SWELL」でもLPを簡単に自作できます!
▼WordPress有料テーマ「SWELL」の購入~ダウンロード・有効化