【売れるLPの秘密を大公開】
たった1ページで売上を大きく伸ばす LP（ランディングページ） の裏側をすべて公開します。実際に 弊社が運用しているLP を完全解剖し、成果を出すための仕組みを徹底解説。
講座で学べる内容
デザイン – ユーザーの視線を引きつけ、成約率を最大化するレイアウト設計
ライティング – 購買意欲を高め、読者を行動に導く文章の書き方
マーケティング – 広告戦略やターゲット設定など、売れるLPの裏側
サイト構築 – ゼロから売れるLPを作るための具体的なノウハウ
他の講座にはない特長
弊社が実際に運用しているLPの全データを公開
サンプルサイトと全く同じLPを作成できる超実践型プログラム
初心者でも簡単に使えるWordPress人気テーマ「SWELL」を採用
売れるLPを最短で作れる、完全網羅型の実践講座。本格的なLPを手に入れ、ビジネスの成長につなげましょう。
What's inside
Learning objectives
- 未経験者でも本格lp(ランディングページ)が作成できるようになる
- コストを抑えて自社でlp(ランディングページ)を制作＆運用できる
- スタッフにマニュアルとして渡し制作担当として任せる
- 自社の集客や売上アップに貢献するlp(ランディングページ)が作れる
- 未経験者でも本格lp(ランディングページ)が作成できるようになる
- コストを抑えて自社でlp(ランディングページ)を制作＆運用できる
- スタッフにマニュアルとして渡し制作担当として任せる
- 自社の集客や売上アップに貢献するlp(ランディングページ)が作れる
Syllabus
LP制作講座概要
当講座で最終的に作成いただくサンプルLPはこちら
https://rednight22y.com/lpkouza/
サイト制作の前準備
リンクはこちら↓↓
https://rednight22y.com/lp/starter-kit/
Read more
Syllabus
当講座で最終的に作成いただくサンプルLPはこちら
https://rednight22y.com/lpkouza/
リンクはこちら↓↓
https://rednight22y.com/lp/starter-kit/
※本動画で取り上げているサイトはLPまとめサイト【WebDesignClip(https://lp.webdesignclip.com/)】内の掲載サイトを引用しております。
※講座作成時の2023年1月をもってAdobe CCプランに「XD」が無くなったため、「figma」をご活用ください。
＞＞ WEBデザインで使えるサイトまとめ
https://docs.google.com/document/d/1InQGyBxO3zIRp2yThbGpa3C_soXjit9rEPsLrL8m0J4/edit?usp=sharing
※講座作成時の2023年1月をもってAdobe CCプランに「XD」が無くなったため、「figma」をご活用ください。
※HTMLやCSSについて理解がない方は、特典の「HTML＆CSS解説動画」をご活用ください。
↓「contact form 7」HTMLテンプレート
（コピペしてお使いください）
＝＝＝＝＝
<div id="form-wrapper">
<table>
<tbody>
<tr>
<th><span class="required">必須</span>お名前</th>
<td>[text* your-name]</td>
</tr>
<tr>
<th><span class="required">必須</span>メールアドレス</th>
<td>[email* your-email]</td>
</tr>
<tr>
<th><span class="required">必須</span>電話番号</th>
<td>[tel* your-tel]</td>
</tr>
<tr>
<th><span class="required">必須</span>お問い合わせ項目</th>
<td>[checkbox* checkbox01 use_label_element "制作依頼" "無料相談" "その他"]</td>
</tr>
<tr>
<th><span class="optional">任意</span>お問い合わせ内容</th>
<td>[textarea your-message]</td>
</tr>
</table>
<p>[acceptance acceptance-187]プライバシーポリシーに同意[/acceptance]<p>
</tbody>
</div>
[submit "送信する"]
＝＝＝＝＝
↓「contact form 7」CSSテンプレート
（コピペしてお使いください）
＝＝＝＝＝
#form-wrapper {
width: 100%;
}
#form-wrapper table{
width: 100%;
border-collapse: collapse;
}
#form-wrapper table tr th,
#form-wrapper table tr td{
padding: 1em;
text-align: left;
vertical-align: top;
vertical-align: middle;
}
#form-wrapper table tr th{
width: 30%;
}
@media screen and (max-width:960px){
#form-wrapper{
width: 100%;
}
#form-wrapper table,
#form-wrapper table tbody,
#form-wrapper table tr,
#form-wrapper table tr th,
#form-wrapper table tr td{
display: block;
}
#form-wrapper table{
width: 100%;
}
#form-wrapper table tr th,
#form-wrapper table tr td{
width: 100%;
padding: 5%;
}
}
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
width: 100%;
padding: 5px 15px;
margin: 10px 0px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
height: 250px;
}
/*「必須」文字デザイン*/
.required{
font-size: 0.75em;
padding: 5px;
color: white;
background-color: #A80604;
border-radius: 3px;
margin-right: 10px;
}
/*「任意」文字デザイン*/
.optional{
font-size: 0.75em;
padding: 5px;
color: white;
background-color: #646464;
border-radius: 3px;
margin-right: 10px;
}
/* 「送信する」ボタン */
input.wpcf7-submit {
display: block;
color: white;
background-color: #323232;
padding: 5px 0;
width: 100%;
margin-top: 50px
＝＝＝＝＝
↓メッセージ本文１（自分宛）
＝＝＝＝＝
差出人: [your-name] <[your-email]>
＝＝＝＝【お問い合わせ内容】＝＝＝＝＝＝
お名前: [your-name]
メールアドレス: [your-email]
電話番号: [your-tel]
お問い合わせ項目: [checkbox01]
お問い合わせ内容: [your-message]
----------
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました
＝＝＝＝＝
↓メッセージ本文２（相手宛）
＝＝＝＝＝
この度はお問い合わせありがとうございました。
担当者より後日連絡いたしますので、しばらくお待ちください。
以下、送信内容になります。
----------
お名前: [your-name]
メールアドレス: [your-email]
電話番号: [your-tel]
お問い合わせ項目: [checkbox01]
お問い合わせ内容: [your-message]
----------
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました
↓Twitterカード用コード
＝＝＝＝＝
<meta name="twitter:card" content=" カードタイプ（*1） " />
<meta name="twitter:site" content=" Twitterアカウント名（*２） " />
<meta name="twitter:title" content=" タイトル " />
<meta name="twitter:description" content=" 説明文 " />
<meta name="twitter:image" content=" 画像パス " />
＝＝＝＝＝
(*1)サマリーカードの場合は”summary“、大型画像のサマリーカードの場合は”summary_large_image”と指定
(*2）「@〇〇」と指定
＞＞ 画像素材はこちら
https://drive.google.com/drive/folders/1U79sa0vYObUUIRKVLlljRvkV45Bwrsbw
※イラスト素材は必要に応じてデザイン編で紹介した素材サイト等より各自ダウンロードをお願いします。
＞＞ テキスト素材はこちら
https://docs.google.com/document/d/1vfEkKic_VLjANTBaZ99NqLYRfSlL5nAetlbY_5TJ140/edit?tab=t.0
追記：ボタンアニメーションのCSSテンプレートコードは特典で用意しておりますので、よろしければご活用ください。
Traffic lights
Save this course
Save
Reviews summary
Wordpressとswellで学ぶ実践lp制作
最新ツールへの対応などが行われている
実制作に役立つ素材やコード
デザインから集客戦略までカバー
人気のツールを使った具体的な方法
LP制作の全工程を順に学べる
Activities
ウェブデザインの原則に関する書籍を読む
Show steps
ウェブデザインの原則に関する書籍を読むことで、ランディングページのデザインスキルを向上させます。
View
ノンデザイナーズ・ウエッブブック
on Amazon
Show steps
-
ウェブデザインの原則に関する書籍を選択する
-
書籍を読み、重要なポイントをまとめる
-
学んだ知識を実際のLP制作に適用する方法を検討する
ランディングページ最適化に関する書籍を読む
Show steps
ランディングページ最適化に関する書籍を読むことで、コースで学ぶ知識を補完し、より実践的なスキルを習得します。
View
Melania
on Amazon
Show steps
-
ランディングページ最適化に関する書籍を選択する
-
書籍を読み、重要なポイントをまとめる
-
学んだ知識を実際のLP制作に適用する方法を検討する
ランディングページのコピーライティングの練習をする
Show steps
ランディングページのコピーライティングの練習を繰り返すことで、読者の心を掴む効果的な文章を作成するスキルを向上させます。
Show steps
-
様々なランディングページのヘッドラインを分析する
-
異なるターゲット顧客に向けたヘッドラインを作成する
-
作成したヘッドラインを評価し、改善する
Two other activities
Expand to see all activities and additional details
Show all five activities
ランディングページのデザインに関するブログ記事を書く
Show steps
ランディングページのデザインに関する知識を整理し、ブログ記事として発信することで、理解を深め、アウトプットスキルを向上させます。
Show steps
-
ランディングページのデザインに関するテーマを選択する
-
テーマに関する情報を収集し、構成を考える
-
ブログ記事を執筆し、公開する
架空のビジネスのためのランディングページを設計する
Show steps
コースで学んだ知識を実践するために、架空のビジネスのランディングページを設計することで、デザイン、ライティング、マーケティングのスキルを総合的に向上させます。
Show steps
-
架空のビジネスのコンセプトとターゲット顧客を定義する
-
ランディングページの目的とKPIを設定する
-
ワイヤーフレームを作成し、コンテンツを配置する
-
デザインを作成し、ライティングを行う
ウェブデザインの原則に関する書籍を読む
Show steps
ウェブデザインの原則に関する書籍を読むことで、ランディングページのデザインスキルを向上させます。
View
ノンデザイナーズ・ウエッブブック
on Amazon
Show steps
- ウェブデザインの原則に関する書籍を選択する
- 書籍を読み、重要なポイントをまとめる
- 学んだ知識を実際のLP制作に適用する方法を検討する
ランディングページ最適化に関する書籍を読む
Show steps
ランディングページ最適化に関する書籍を読むことで、コースで学ぶ知識を補完し、より実践的なスキルを習得します。
View
Melania
on Amazon
Show steps
- ランディングページ最適化に関する書籍を選択する
- 書籍を読み、重要なポイントをまとめる
- 学んだ知識を実際のLP制作に適用する方法を検討する
ランディングページのコピーライティングの練習をする
Show steps
ランディングページのコピーライティングの練習を繰り返すことで、読者の心を掴む効果的な文章を作成するスキルを向上させます。
Show steps
- 様々なランディングページのヘッドラインを分析する
- 異なるターゲット顧客に向けたヘッドラインを作成する
- 作成したヘッドラインを評価し、改善する
ランディングページのデザインに関するブログ記事を書く
Show steps
ランディングページのデザインに関する知識を整理し、ブログ記事として発信することで、理解を深め、アウトプットスキルを向上させます。
Show steps
- ランディングページのデザインに関するテーマを選択する
- テーマに関する情報を収集し、構成を考える
- ブログ記事を執筆し、公開する
架空のビジネスのためのランディングページを設計する
Show steps
コースで学んだ知識を実践するために、架空のビジネスのランディングページを設計することで、デザイン、ライティング、マーケティングのスキルを総合的に向上させます。
Show steps
- 架空のビジネスのコンセプトとターゲット顧客を定義する
- ランディングページの目的とKPIを設定する
- ワイヤーフレームを作成し、コンテンツを配置する
- デザインを作成し、ライティングを行う
Career center
ランディングページデザイナー
ウェブマーケター
コンテンツマーケター
ウェブサイト開発者
デジタルマーケティングコンサルタント
UI/UXデザイナー
広告運用者
セールスライター
マーケティングアナリスト
ブランドマネージャー
広報担当
中小企業診断士
ECサイト運営者
営業担当
人事担当
Reading list
Save
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
