スマホ版オプトインLPをコーディングしてみよう!

こんにちは! 吉田です!

 

今日は、

昨日、日南本先生がデザイン実演を行った

「スマホ版オプトインLPのコーディング」を

お届けしたいと思います!

 

 

オプトインというのは、簡単にいうと

ユーザーさんにメルマガ登録を促して、

コンテンツに興味のある方の

メールアドレスを取得するような

ページの総称です。

 

 

「デザイン作るところ、

まだ見ていない!」という方は、

まずはこちらからご覧ください^^

↓↓

https://salesdesign-school.jp/blog/kiji/lp-sp-business/

 

 

今回のコーディングは、

ちょっとレベルアップして本格派です。

 

 

ポイントは2つです!

 

1つは、チェックリスト(ブレットともいいます)を、

画像を使わず、テキストと

CSSでコーディングしていきます。

 

もう1つは、

メルマガの登録フォームの

簡単なコーディングを

お見せしていきます。

 

 

ランディングページにおいて、

この2つのパーツは必ずといっていいほど

顔を出してくる、定番中の定番のパーツになりますので、

コーディング初心者の方、苦手意識のある方は

ぜひご参考ください。

 

 

 

またしても緊張で

cssを1つ入れ忘れてしまいました。。

 

―――

 

.sec-wrap img, .formBtn{

        width: 100%;

}

 

―――

 

上記を動画内のcssにいれていただければ、

下記URLと同じものになります。

 

実際にコーディングしたものはこちらです。

↓↓

https://salesdesign-school.jp/sample/lp-sp-business-opt-coding/

 

(スマホ版なので、お手持ちのスマホでご覧ください。)

 

 

 

それでは今日はこの辺で!

 

 

投稿者プロフィール

上野 健二
上野 健二セールスデザイン講座 代表講師
中小・個人事業企業の業績アップをデザインでサポートする売れるLP制作所・株式会社ガツンで代表取締役を務める。
年間100本以上ランディングページを制作に携わる現役のセールスデザイナー兼ディレクター。
詳しいプロフィールはこちら