はじめに
最近LP制作のニーズが増えてきました。
そこで、主な作り方を備忘録としてメモしておきます。
LP制作TIPS
LP制作に必要なTIPSをご紹介
フォントサイズ
PC/SP共に読んでもらいたいテキストは最低でも14px以上が一般的です。
12pxはかなり小さいので、使うとしたらコピーライトのような読まれなくても問題ない部分に適用されています。
ちなみに、10pxを下回るとGoogle Chromeブラウザでは10px未満になりませんので、小さいフォントサイズで使う場合は基本10px以上を推奨しています。
ファーストビューがフルサイズ
下記のようなLPはファーストビューがフルサイズの横幅で、あとは細くなっています（背景はフルサイズ）がサイズはどのように設定しているのでしょうか？
ファーストビューは画像のみの配置で横幅の指定は無し。
ファーストビューより下の各コンテンツは、980px及び1000pxのコンテンツ幅（横幅）に収まっているレイアウトで、それよりはみ出ている背景の部分は背景画像で実装されています。
ファーストビューは横幅いっぱいで、それ以外の部分はコンテンツ幅を設定して、テキストやボタンなどをその中に収めるのは一般的なデザインですので、このような感じでデザインされますとWebサイトとして違和感が無い作りになります。
.htaccessファイル設置
LP実装に.htacessファイルを忘れないようにしましょう。
“http”入力時にサイト全体で”https”にリダイレクトさせなければいけません。
メール送信元は独自ドメインで
LPに設置するメールフォームで、メールの送信元はGメールなどのフリーアドレスではなく独自ドメインのメールアドレスにしましょう。
でないと、迷惑メール判定されてしまいます。
ドメイン設定でSPF、DKIMなどのドメイン認証をするのも必要かもしれません。
テキスト実装か？画像実装か？
画像で制作すればカンタンなLP制作ですが、SEO上テキストを多く含めた方が好ましいのは当然です。
しかし、手間なども考慮するとその判断も難しいものです。
その判断基準を記しておきます。
・要素の配置がCSSで再現するのが難しい
・デザインの込んだフォント
などの場合は画像で実装するようにしています。
Webサイトの見た目は基本的に箱を積み重ねていくイメージですので、
・テキストの入れた箱
・画像を入れた箱
などを並べて組み立てるように作っていきます。
要素と要素（箱と箱）が半端に重なったり、斜めの位置関係のようなレイアウトは再現が難しいです。
なお、PC、スマホで片方はテキストで実装可能でも、もう片方の再現が難しい場合は画像で実装という方法がいいでしょう。