CocoonでワンカラムのLPを作成する方法[初心者・シニア]その2:LPのパーツを作る

2021年4月29日

この記事ではCocoonを使ってワンカラムのLP(ランディングページ)を作成する方法を初心者向けに紹介しています。

まず、準備編で固定ページをワンカラムにし、不要なパーツを非表示にする方法を解説しました。
↓↓↓↓↓↓↓
CocoonでワンカラムのLPを作成する方法[初心者・シニア]その1:いらないパーツを非表示にする

ではいよいよ、Cocoonの機能をふんだんに使用して、LPのパーツを作成をしていきます(^^)

 

LP(ランディングページ)のパーツとは

LPでは、色々なパーツが利用されます。

ちょっとデモサイトをご紹介しますので、まずパーツのイメージを描いてください。

ペライチのデモサイト
*画像をポイントし(マウスを乗せて)「プレビューを見る」をクリック

LPテンプレートクリエイティブパック「Colorful(カラフル」
*「どんなレイアウトもデザインもあなた次第で無限種類・自由自在」の欄で画像をクリック

 

上記を観て、「これでいいじゃん」と思ったあなた、
いやいや、まずは以下をご覧ください。

こっちがいい!と思っていただきたくてこの記事を書いていますヾ(*^o^*)/

↓↓↓↓↓↓↓(読み進める)
 

では、色々なパーツを作成するための、お勧めな機能を紹介していきます。
この記事で紹介するCocoonの機能は、標準(デフォルト)で準備されているものです。
*画像作成システムのCANVA(無料)+マニュアル(有料)をご紹介しています
*プラグインやCSSを追加する機能(応用編)は別記事で紹介します。

 

ヘッドコピー:CANVA(キャンバ)を使おう!

ヘッドコピーは文字のみでもかまいませんが、できれば画像を利用したほうがインパクトがあり、情報も伝わりやすいです。

そしてこのヘッドコピー作成にもってこいなのが、無料で利用できる「CANVA(キャンバ)」です。
*CANBAはヘッドコピーだけでなくLP作成の様々な場面で便利に使えます。

 

CANVAを使ったヘッドコピー画像の作成

豊富なテンプレートやパーツ、簡単な操作でインパクトのある画像が作成できます!

キャプチャー、キャンバの紹介

 

お知らせ↓↓↓↓↓↓↓

CANBAの使い方を網羅したりんごのお勧めマニュアルが発売されました!
CANBAの全てがここにあると言ってもいいくらいなマニュアルです!!
初めての方お勧め!!!

Canvaマスター講座
↓↓↓↓↓↓↓
詳しくは画像をクリック!
画像、キャンバーマスター講座へのリンク

販売開始しました!!
ちょっとチラ見せ(^^)
内容ひとつひとつがとっても丁寧でわかりやすいです
キャンバマニュアル

特典豪華特典もあります
キャプチャー、キャンバ特典

 

↓↓↓↓↓↓↓ボタンをクリックして、Canvaマスター講座を購入する

画像、キャンバマスター講座を手に入れる

 

 

 

 

 

作成した画像の設定

では作成した画像を設置します。WordPressの画像挿入機能を使います。
まず、Canvaから作成した画像をダウンロードします。(ここまではCanvaのマニュアルで確認ください)

ブロックの追加の[+]マークをクリックします。
キャプチャー、ブロックの追加

画像の追加アイコンをクリックします。

キャプチャー、画像の追加

[アップロード]をクリックします。
キャプチャー、アップロード

画像のある場所で、画像ファイルを選択して、[開く]をクリックします。
キャプチャー、画像の選択

画像が挿入されます。

キャプチャー、画像挿入

画像が選択されている状態(が表示されている)で、画面上部にある画像の編集ツールバーから、画像の位置設定のアイコンをクリックし、[幅広]を選択します。キャプチャー、全幅設定

 

[幅広]と[全幅]のちがい
幅広は横幅100%にする。
全幅の場合はブラウザ全体に広がる。

*イメージがつかみにくい場合は実際に設定してみて、どちらを利用するか決めてください。

 

 

文字を修飾する

Cocoonの文字の設定バーには簡単に文字を修飾するツールがあります。
キャプチャー、文字修飾

文字を選択した状態で画面丈夫にある文字の修飾バーを使います。
キャプチャー、文字修飾

 

 

順番や時系列がある項目にタイムラインを使う

操作説明等で、順番や時系列がある項目はタイムラインを利用するとわかりやすいです。
ブロック追加の[+]をクリックして、タイムラインのアイコンをクリックします。

キャプチャー、タイムライン

タイムラインのブロックが追加されました。

キャプチャー、タイムライン

 

画面右の更新ボタンの横にある[設定]ボタン(歯車マーク)をクリックして、設定領域を表示させます。
キャプチャー、設定ボタン

 

タイムラインのブロックを選択した状態で、右サイドのブロック設定領域で設定します。スタイル設定を[]になっていることを確認します。

③アイテム数:アイテムの数を設定します。
④ポイント色:●の色を設定します。
キャプチャー、設定画面1

⑤背景色,⑥文字色,⑦ボーダー色 を設定できます。

キャプチャー、色設定

「全体のタイトル」、「ラベル」、「タイトル」を入力すると、
設定後は以下のようになります。
*各タイトルの下に、説明文を入力することができます。

設定例
キャプチャー、設定後

 

 

 

アイコンリスト

「◯」「×」「レ」などを使ったアイコンリストが使えます。
ブロック追加をクリックして、[アイコンリスト]のアイコンをクリックします。

キャプチャー、アイコンリスト

 

画面右の更新ボタンの横にある[設定]ボタン(歯車マーク)をクリックして、設定領域を表示させます。
キャプチャー、設定ボタン
 
 

設定欄で、アイコンを選びます。

キャプチャー、

続いて、上記と同じように 「背景色」,「文字色」,「ボーダー色」 を設定できます。

内容を入力して完了です(^^)

設定例
キャプチャー、アイコンリスト

 

 

吹き出し機能

Cocoonでは吹き出し機能も、簡単設定! 顔のイラストも豊富です(^^)

ブロック追加をクリックして、[吹き出し]のアイコンをクリックします。

キャプチャー、吹き出し設定

イラストと吹き出しが追加されます。同じ操作を続けて必要な個数分吹き出しを追加します。
キャプチャー、吹き出し

 
画面右の更新ボタンの横にある[設定]ボタン(歯車マーク)をクリックして、設定領域を表示させます。
キャプチャー、設定ボタン
 
 

設定画面で、人物を変更します。
(右)と記載があるものを選ぶと、画面の右側に設定されます。

アイコンスタイル

キャプチャー、吹き出しの設定

設定領域では、

吹き出しスタイル」や「アイコンスタイル」が選べます。
また枠線の色や枠の背景色も選べます。

キャプチャー、吹き出しのバリエーション

人物の名前や、吹き出しの文字をいれたら完成です。
人物を自分が作成したものや、無料イラストサイト等で入手したものに差し替えも可能です。

Q&Aやお客さまの声の欄に利用すると、効果的です。
キャプチャー、吹き出し

 

 

バリエーションのあるボックス

Cocoonの汎用ブロックにバリエーションのある見出しブロックが用意されています。

ブロック追加をクリックして、お好みの[◯◯ボックス]のアイコンをクリックします。

ボックスの種類は「見出しボックス」「タブ見出しボックス」「ラベルボックス」など。
キャプチャー、コクーンのボックス

それぞれのボックスで、アイコンドロップキャップ(先頭文字を大きく)や枠線色設定背景色設定など、バリエーション豊なボックスが利用できます。

 キャプチャー、ボックスバリエーション

 

 

画像と文章の枠

よく使われている、画像(写真やイラスト)があって、文章とセットになった枠です。

[メディアと文章]というブロックを使います。

キャプチャー、メディアと文章

 

アイコンをクリックすると、以下の枠が出てきます。[アップロード]のボタンをクリックします。
キャプチャー、メディアと文章

該当の画像ファイル(イラストや写真)を選択して、[開く]をクリックします。

キャプチャー、画像選択

画像が挿入されたら、位置と大きさを調整します。
文章の欄に、タイトルと文章を入力します。

キャプチャー、画像の挿入

画面上部の設定バーで、画像の位置を左右どちらにするかを選択できます。

キャプチャー、画像の位置

 

 

メディアと文字の挿入例

キャプチャー、設定した図

 

 

申し込みボタンの挿入

LPになくてはならないのが、申し込み用のボタンです。
ボタンの先ににはそれぞれの申込みフォームが待ち構えていることになります

<それぞれのLPのジャンプ先>

レビューページ→→→セールスページ
セールスページ→→→申込みページ・ASPページ・決済ページ
メール申込み案内→→→メール登録フォーム

ちなみに各LPは以下の目的で作成します
*レビューページ:アフィリエイト等で販売者さんのコンテンツ等を紹介するLP
*セールスページ:自分のコンテンツを販売するためのLP
*メール申込み案内:メルマガへ登録してもらうための案内LP

 

Cocoonには標準で、ボタン作成機能があります。(めちゃくちゃありがたい機能です)
では、ボタンの挿入方法です。

ブロック追加[+]をクリックして、[すべて表示]の黒いバーをクリックします。

キャプチャー、全てを表示

 

左サイドバーに、ブロック機能の一覧が表示されます。
[COCOONブロック]の欄で [ボタン]をクリックします。

キャプチャー、ボタンのアイコン

ボタン」と書かれたボタンが挿入されます。

キャプチャー、ボタンの挿入

 

ボタンに表示する文字の入力

「ボタン」の文字をクリックして、ボタンに表示させる文字を入力します。
キャプチャー、ボタンに表示させる文字

ボタンに記載する文字は簡単な「申込み」などよりも具体的な行動を促す文章を入れましょう。

このボタンをクリックして◯◯に◯◯する

例)
「申込み」→→→「このボタンをクリックして◯◯に申し込む」
「購入」→→→「ここをクリックして◯◯の購入をする」
「クリック」→→→「このボタンをクリックして、◯◯の購入ページにジャンプする」

 
 

ボタンの大きさを選択する

ボタンの大きさは、小・中・大 から選択できます。

設定画面のサイズの欄で[]を選択します。キャプチャー、小のボタン

設定画面のサイズの欄で[]を選択しますキャプチャー、中ボタン

設定画面のサイズの欄で[大]を選択しますキャプチャー、中ボタン

 

ボタンの形や色設定

ボタンの(角の丸さ)や背景色ボーダー(線)色文字色は自由に変更できます。

角を丸くします

キャプチャー、角を丸くする

色を変えます

背景色ボーダー色(縁の色)、文字色が変えられます。

キャプチャー、色を変える

 

光らせる

ボタンを左から右に光らせるアニメーション効果を設定できます
*ボタンはなるべくボタンとわかるよう、目立たせましょう!

キャプチャー、光らせる

実際のひかる様子はサンプルで(^^)
↓↓↓↓↓↓↓
セールスレターの書き方セミナーのLP

 

 

位置を調整する

ボタンの位置を調整します
*大ボタンの位置は調整できません(幅いっぱいになります)

画面上部のツールバーで、[左寄せ][中央揃え][右寄せ]を選びます。
キャプチャー、位置調整

 

リンクの設定をする

ボタンにリンクの設定をします。

①クリックした時にジャンプするページのURLを入力します。
*アフィリエイトのレビューページの場合はアフィリエイトリンクを貼ります(^^)
↑↑↑
これ最重要ポイントです!ちゃんとアフィリエイト用のリンク貼らないと全てが水の泡ですよ〜

②リンクの開き方を選択します。
*現在のタブで開くがお勧めです。

キャプチャー、ボタンのリンク先

 

これでボタンの挿入は完成です。
 

 

 

その他のパーツの紹介(Cocoon公式サイト)

Cocoonが用意しているパーツの種類はとても豊富です、以下のCocoon公式サイトにまとめられていますので参照ください。
↓↓↓↓↓↓

Cocoon Blocksの現在の対応状況

 

 

以上が、基本的なパーツの作成方法です。一通りの機能はそろっているので、LP作成には十分かと思います。
難しい操作はないので、是非使いこなしてLP作成に役立ててください。

今回作成したサンプルページはこちら
↓↓↓↓↓↓↓(ただいま作成中!いまなら作成過程がライブ感覚でみられます(^^))

https://applired.net/support/lp01/

 

お勧め! 売れるLPテンプレートをゲットしよう!!

いくら、LPの作成方法を取得しても、
肝心のLPの中身(文章)の書き方がわからなければ、売れる(成果のでる)LPは作れません。

 

売れる(成果の出るLP)には
==========================
知るべき型学ぶべきノウハウがあります。
==========================
是非この機会に売れるテンプレート(型)売れるための書き方のノウハウを習得しましょう
↓↓↓↓↓↓↓
お勧めのコンテンツ
近日販売開始!!
【セールスレターの書き方セミナー】
このセミナーがコンテンツになって販売されます
↓↓↓↓↓↓↓ヾ(*^o^*)/

画像、セールスレター作成セミナー

販売開始をいち早く知りたい方は、りんごのメルマガへ登録ください。
臨時便でお知らせします!

↓↓↓↓↓↓↓(以下のメルマガ へ登録)

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで、非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。

このブログと連携して「ゆとりのシニアライフを実現させる」をテーマにメルマガを配信、シニア&初心者向けにネットビジネスの魅力と取り組み方をお伝えしています。噛み砕いた解説がわかりやすいと好評です(^^)
経済的にも心にも「ゆとり」をもたらす収入をゲットしませんか!
イラスト、葉っぱ付きりんごを持ったおじさんとおばさん ブログを作ったけどアクセスが無い!、アフィリエイトの成果が出ない!
そんなあなたは必見ですよ
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓ バナー、りんごメルマガ登録用 *詳細ページが表示されます、すぐにメルマガ申し込みはされません

よろしければ、この記事やブログに関する 感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です(^^)
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ

お願い記事内の不具合や間違い等をお知らせください。 (キャプチャーの違い、古くなった情報、誤字脱字等些細なことでもかまいません)
↓↓↓↓↓↓↓↓
バナー、不具合問い合わせフォーム *お知らせいただいた方にはりんごからささやかなお礼を送らせていただきます。