LP>ランディングページ(LP)を作ってみた

ランディングページ(LP)を作ってみた

2018年7月30日

ランディングページについては広告ページくらいの認識でしたが、意味的には訪問者が最初にアクセスしたページらしいですが、ほとんどの場合で商品やサービスを売る為に作られた縦長のワンページのことらしいです。たまに見かけますね。もう型というのが出来上がってるので見た瞬間に「あっ広告サイトや」とわかるあれです。

本物のランディングページを見ると勉強になる

LPについては胡散臭い広告サイトだ!くらいの認識でした。
というわけで胡散臭いLPを作ったんです
LP勉強

素材がないんでかなり雑になってしまいましたが、形は作れたと思います。ちなみにレスポンシブ対応しています。

で、ランディングページを作る最も重要なポイントはレイアウトなんかじゃなくて文章と組み立て方なんだなってのがわかりました。

思わずこの商品欲しいなって思わせるような文章を書くことが大事で、その為には文章をどう並べていくか?どう組み立てていくかが課題。

例えば「申し込む」って言葉に「売れてます!今すぐ申し込む」なんて言葉が付随していると余計に気になりますね。しかもこれがホームページなわけで、cssとかで綺麗にデザインされてると余計に気になりますね

この辺のライティングスキルとか商品を売る文章を書くスキルとか、もっと身に付けたいなと思いました。今持ってるスキルにこれを合わせることができればもっと選択肢が広がると思いました。
LPを作ってみて思ったのは、ただの縦長の商品紹介ページがLPじゃなくて練りに練られた文章と構成で作られるのがLPなんだなと理解しました。

横並びボックス

今回もフレックスボックスを多用しています。
Bootstrapの機能は使っていません。ぶっちゃけフレックスボックスが使えると、こっちのほうが融通が効く感じがいいですね

画像と文字を並べた時に文字を上下中央に揃えたい時に
align-items: center;
を使うだけでいいのでめっちゃ便利です