【ペライチ作成編】LP(ランディングページ)を作成!画像付きで解説!
本記事の内容は、
・LP(ランディングページ)を簡単に作れるツールを知りたい
・LP(ランディングページ)をペライチで作りたい
こういった疑問やお悩みにお答えします。
本記事のテーマ
【ペライチ作成編】LP(ランディングページ)を作成!画像付きで解説!
【ペライチ作成編】LP(ランディングページ)を作成!画像付きで解説!
![](https://oceandesign-web.com/wp-content/uploads/2021/12/ペライチTOP2021-1024x322.png)
まだ新規アカウント登録を行っていない方は以下からアカウント登録を行えます。↓
前回の記事では、ペライチでのアカウント取得の手順を解説致しました!
こちらのぜひ記事もご参考下さい。
>>【ペライチ登録手順編】LP(ランディングページ)を作成!画像付きで解説!
では、今回の記事では実際にペライチを使ったLP(ランディングページ)制作を行っていきます。
分かりやすい様に、画像付きで解説しておりますので、少しでもご参考になりましたら幸いです。
ペライチでのLP(ランディングページ)作成手順
それでは、実際に解説していきます。
解説が少し長くなってしまっているので、休憩を取りながら作成してみてください。
①ペライチのマイページより、「新しいページを作成する」をクリックします。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/①新しいページを作成する-1024x434.png)
②テンプレート一覧が出てきますので、お好きなものを選択します。
今回は無料の「ブランク」を使用します。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/②テンプレート一覧-1024x573.png)
③テンプレートを選択すると、このようなポップアップが出てきます。確認したら、今すぐ編集を始めるをクリックします。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/③ポップアップ-1024x634.png)
④作成時の初期画面になります。「+」の所から、ブロックを挿入していきます。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/④初期画面-1024x509.png)
⑤ここから様々なブロックを挿入することが出来ます。上から順番にヘッダー/メニュー、メイン、見出し、文章+画像 の様にどんどん作成していきます。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑤作成-1024x500.png)
⑥まずは、ヘッダー/メニューから作成していきたいと思います。ここでは、「左テキスト+右メニュー」を選択しました。お好きなものを選んでください。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑥ヘッダー選択-1024x498.png)
⑦ヘッダー選択後は、こんな感じになりました。次ににヘッダーのサイト名を変えます。
サイト名の部分「Peraichi」にカーソルを合わせると編集ボタンが出るので、選択します。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑦ヘッダー選択後-1024x490.png)
⑧選択すると、編集画面が出てきます。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑧サイト名編集-1024x495.png)
⑨「OceanDesign」としました。変更したら、保存を押します。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑨サイト名変更-1024x423.png)
⑩変更されました。次は、メニューのところを選択します。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑩メニュー選択-1024x494.png)
⑪ナビゲーションの設定画面が出てきます。LP(ランディングページ)の場合は、基本的に1カラムなので、メニューは全て消します。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑪ナビゲーション設定-1024x498.png)
⑫メニューを消したら、保存を押します。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑫メニュー削除保存-1024x484.png)
⑬この様になりました。続いて、同じ様にブロックを追加でメインを挿入していきます。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑬メニュー削除後-1024x470.png)
⑭メインからお好きなものを選択します。ここでは、「メイン:背景画像」を選びました。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑭メイン選択-1024x498.png)
⑮メイン選択後はこの様になりました。メインの背景画像を変えたいと思います。背景設定をクリックします。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑮背景設定-1024x495.png)
⑯PC・タブレット/スマホでの背景をそれぞれ設定できます。設定したい画像がある場合は、マイライブラリを選択します。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑯画像設定-1024x497.png)
⑰画像をアップロードしたら、「この画像を選択する」を選びます。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑰この画像を選択する-1024x498.png)
⑱スマホ用に設定したい場合は、スマホサイズを選択して背景設定を行います。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑱スマホ用背景設定-1024x504.png)
因みに今回、PC・タブレットサイズは、この幅で調整しました。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/幅間-1-1024x284.jpg)
スマホサイズはこの幅で調整しました。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/幅間スマホ-1024x512.jpg)
⑲続いてヘッダーの下に、お問い合わせボタンを設置してみます。「ボタン」→「ボタン(背景画像あり)」を選択しました。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑲ボタン選択-1024x501.png)
⑳画像の様な感じになりました。テキストやボタンの文字を変更します。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/⑳ボタン追加-1024x503.png)
㉑テキストやボタンを修正してみました。次は、下によくある「お悩み訴求」を作成してみます。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/㉑ボタン修正-1024x510.png)
㉒ブロック追加から、「文章+画像」→「お悩み」を選びます。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/㉒お悩み-1024x500.png)
㉓見出しを変更します。(吹き出し内は、今回はサンプルとしてそのままにしておきました)
![](https://oceandesign-web.com/wp-content/uploads/2020/12/㉓見出し変更-1024x523.png)
㉔「こんなお悩みありませんか?」の部分が簡単に出来ました。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/㉔こんなお悩み-1024x510.png)
㉕あとはレイアウトをお好みで組んでいきます。ここでは「文章+画像」→「上画像」を選択しました。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/㉕上画像-1024x510.png)
㉖この様な感じになりました。レイアウトがすべて完成したら、「公開する」を選択します。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/㉖公開する-1024x512.png)
㉗その際、こういった画面が出てきます。基本設定から、ページタイトルやURLを設定しましょう。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/㉗公開前ポップアップ-1024x489.png)
㉘ページURLやページ名(タイトル)、ページの説明文等を入力します。
設定したら、一番下の保存を押します。必要であれば、OPG設定(SNSでシェアされた際に、画像やタイトルなどを表示させるための設定)なども行います。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/㉘基本設定完了-1-1024x493.png)
㉙一通り設定が完了したら、公開するを押します。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/㉙公開する-1024x501.png)
㉚これで公開が完了です!お疲れさまでした!公開URLはお気に入り等で控えておくと便利かもしれません。
![](https://oceandesign-web.com/wp-content/uploads/2020/12/㉚公開完了-1024x498.png)
まとめ
今回は、前回と2回に渡り、ペライチでLP(ランディングページ)を作成する手順をご紹介させて頂きました。
本記事が少しでもLP(ランディングページ)を自作されたいと思ってる方のご参考になりましたら幸いです。
こちらの記事を最後まで、ご覧いただきありがとうございました!
ペライチのアカウント作成はこちらから↓
【この記事をチェックした人はこんな記事もチェックしています】
>>【2021年最新版】LP(ランディングページ)の おすすめ作成方法6選!【無料から有料まで】
>>【有料テンプレート】LP(ランディングページ)をワードプレスのLIQUID LPで簡単に作成する方法!