ランディングページを簡単に作れる穴埋め式LPテンプレート

LP（ランディングページ）はウェブマーケティングにおいて無くてはならないものですが、ウェブデザインが出来ない人にとって頭の痛いことの1つです。

ウェブデザイナーに外注するほど資金に余裕が無い
明日にでもLPをリリースしたい
自分で細かく修正しながらLPOを実践したい

そんな人におすすめのテンプレートが「穴埋め式LPテンプレート」です。これはいまあなたがお使いのWordPressテーマの中に埋め込んで、テーマはそのままで本格的にランディングページを作成することができるツールです。

穴埋め式LPテンプレートのサンプル

例えば僕が最近作成したのが下記のようなもの。

これらのLPはテンプレートを使って文章作成からデザインまで3時間ほどで作成しました。原稿を作成⇒デザイナーに依頼という流れだと早くても3日はかかりますが、このテンプレを使えば自前で1日でもLPを作成することが出来ます。

このテンプレートの販売ページはこちら

フォントがダサいので明朝体にしちゃう

販売ページを見れば分かるのですが、悪いけどフォントデザインがちょっとダサい（笑）ので、明朝体にしちゃいます。CSSで以下のように記述。

body,.lp_catch_sub,.lp_action_up,.lp_catch_main,.lp_intro_title01,.lp_intro_title02,.lp_benefit_title01,.lp_benefit_merit01,.lp_free h3,.lp_item_title01,.lp_free h3,.lp_item_title02 {
	font-family: serif !important;
}

Cyfonsフォーム用に最適化したCSS

例のごとくCSSを載せておきます。

body,.lp_catch_sub,.lp_action_up,.lp_catch_main,.lp_intro_title01,.lp_intro_title02,.lp_benefit_title01,.lp_benefit_merit01,.lp_free h3,.lp_item_title01,.lp_free h3,.lp_item_title02 {
	font-family: serif !important;
}

.lp_catch_main {
	font-family: serif;
}

/*================
CyfonsCSSのデフォルト
==================*/
.cyfons {
	background: #282b34;
}

.cyfons form {
	padding: 36px 0 10px;
	text-align: -webkit-center;
}

.cyfons input {
	width: 95%;
	font-size: 3.25em;
	font-weight: bold;
	padding: 12px 16px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
	border: none;
	margin-bottom: 10px;
}

.cyfons input[type="submit"] {
	width: 100%;
	height: 95px;
	padding: 0 18px;
	color: #fff;
	cursor: pointer;
	border-style: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #f12b24;
	background-image: -moz-linear-gradient(top,#0088cc,#0044cc);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0044cc));
	background-image: -webkit-linear-gradient(top,#0088cc,#0044cc);
	background-image: -o-linear-gradient(top,#0088cc,#0044cc);
	background-image: linear-gradient(to bottom,#f12b24,#ff0000);
	background-repeat: repeat-x;
	border-color: #0044cc #0044cc #002a80;
	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
}

@media screen and ( min-width:1025px) {
	.section02 {
		padding: 30px 0 0;
	}

	.cyfons input {
		font-size: 4em !important;
	}

	.content02 {
		width: 1150px;
	}
}

/*================
iPad用CSS
==================*/
@media screen and (min-width:768px) and ( max-width:1024px) {
	/*　for iPad 　*/
	.content09 {
		width: 100%;
	}

	p {
		padding: 0 5px;
	}

	.cyfons_action input {
		font-size: 3.5em !important;
	}

	.cyfons_action input[type="submit"] {
		height: 90px !important;
	}
}

/*=============================
iPhone横用CSS
============================*/
@media screen and (min-width:480px) and ( max-width:767px) {
	/*　for iPhone Landscape　(iPhone 横)　*/
	p {
		padding: 0 5px;
	}

	.cyfons input {
		font-size: 2em;
	}

	.cyfons input[type="submit"] {
		font-size: 2em;
	}
}

@media screen and (max-width:375px) {
	/*　for iPhone Landscape　(iPhone 横)　*/
	.section02 {
		padding: 10px 0 0;
	}

	.cyfons {
		background: #282b34;
	}

	.cyfons input {
		width: 95%;
		font-size: 2em;
		font-weight: bold;
		padding: 16px 18px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		-ms-border-radius: 8px;
		-o-border-radius: 8px;
		border-radius: 8px;
		border: none;
		margin-bottom: 10px;
	}

	.cyfons input[type="submit"] {
		font-size: 1.5em;
	}

	.cyfons_action input[type="submit"] {
		font-size: 1.5em;
	}
}

@media screen and (max-width:320px) {
	/* iPhone5 */
	table {
		font-size: 75%;
	}

	input#login {
		font-size: 22px;
	}
}

tr {
	text-align: -webkit-center;
}

/* ============
アクション導線のフォームCSS
===========*/
.cyfons_action form {
	padding: 36px 0 10px;
	text-align: -webkit-center;
}

.cyfons_action input {
	width: 100%;
	font-size: 2em;
	font-weight: 700;
	padding: 7px 20px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
	border: none;
	margin-bottom: 10px;
}

.cyfons_action input[type="submit"] {
	width: 100%;
	height: 70px;
	padding: 0 18px;
	color: #fff;
	cursor: pointer;
	border-style: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #f12b24;
	background-image: -moz-linear-gradient(top,#0088cc,#0044cc);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0044cc));
	background-image: -webkit-linear-gradient(top,#0088cc,#0044cc);
	background-image: -o-linear-gradient(top,#0088cc,#0044cc);
	background-image: linear-gradient(to bottom,#f12b24,#ff0000);
	background-repeat: repeat-x;
	border-color: #0044cc #0044cc #002a80;
	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}