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

こんにちは！　吉田です！

今日は、
昨日、日南本先生がデザイン実演を行った
「スマホ版オプトインLPのコーディング」を
お届けしたいと思います！

オプトインというのは、簡単にいうと
ユーザーさんにメルマガ登録を促して、
コンテンツに興味のある方の
メールアドレスを取得するような
ページの総称です。

「デザイン作るところ、
まだ見ていない！」という方は、
まずはこちらからご覧ください＾＾
↓↓
https://salesdesign-school.jp/blog/kiji/lp-sp-business/

今回のコーディングは、
ちょっとレベルアップして本格派です。

ポイントは２つです！

１つは、チェックリスト（ブレットともいいます）を、
画像を使わず、テキストと
CSSでコーディングしていきます。

もう１つは、
メルマガの登録フォームの
簡単なコーディングを
お見せしていきます。

ランディングページにおいて、
この２つのパーツは必ずといっていいほど
顔を出してくる、定番中の定番のパーツになりますので、
コーディング初心者の方、苦手意識のある方は
ぜひご参考ください。

またしても緊張で
cssを１つ入れ忘れてしまいました。。

.sec-wrap img, .formBtn{
width: 100%;
}

上記を動画内のcssにいれていただければ、
下記URLと同じものになります。

実際にコーディングしたものはこちらです。
↓↓
https://salesdesign-school.jp/sample/lp-sp-business-opt-coding/

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

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

投稿者プロフィール

吉田 祥太

フロントエンジニア出身の叩き上げセールスデザイナー
セールスデザイナーとしては５年目。

ノンデザイナー出身でめちゃめちゃ苦労した経験から、
感覚的になりやすいデザインの指導を
理論的かつ再現性ある形で伝えることをモットーにしている。

⇒ 詳しいプロフィールはこちら

最新の投稿

この著者の記事一覧

• 記事2023.03.29セールスデザイナーが獲得するべき目線
• 記事2023.03.22斜向かいのマックとシェイクシャックは競合なのか？
• 記事2023.03.15デザイナーが長生きするために身につけるべき３つのスキル
• 記事2023.03.08鼻外して洗いたい