昔先輩に教えられたことですが、HTMLコーディングを効率化するにはとにかくコードを書きまくってHTMLタグを覚えろと言われました。
確かに何度も書いて練習するのも重要ですが、書くこと以外にも効率化できるポイントはあるので全部合わせてやることでもっと効率よくHTMLコーディングができるようになります。
ここではとにかく書いて覚えるだけでなくLPを効率よくHTMLコーディングする方法を紹介します。
LPコーディングを効率よくやるには？
LPに限らずHTMLコーディングを効率よく行う方法は次のようなものが考えられます。
- 軽量なコードエディターを使う
- CSSフレームワークを使う
- 静的サイトジェネレータを使う
- LPテンプレートを使う
それぞれ詳しく解説します。
軽量なコードエディターを使う
HTMLコーディングはテキストエディタでもやろうと思えばできます。
でもコードの色分けだったり、折りたたみだったり、コードスニペット(省略タグの作成)だったりコードエディターを使うことでコーディングの生産性はかなり上がってくるのでコードエディター使いましょう。
コードエディターの中でも軽量で機能豊富でプロも使っている定番のエディターがこちら。
無料でダウンロードできるのでもしまだ使っていないならエディターはVSCodeがおすすめ。
テーマを変更して見た目を変えたり、拡張機能を使ってさらに便利にカスタマイズすることもできます。
CSSフレームワークを使う
CSSフレームワークとは再利用可能なコンポーネントやスタイルの集まりで、CSSスタイルやよくあるUIコンポーネントをClassを使うだけで作れてしまう大変便利なツールです。
例えばCSSコードで要素の下の余白を変えたい場合次のように書きます。
p {
margin-bottom: 2rem;
}このコードをstyle.cssとかに書いてHTMLから読み込むことでデザインが適用されます。
CSSフレームワーク使うことでHTMLコードに直接Classを書くことでスタイルができるようになります。
<p class="mb-3">Lorem ipsum dolor sit amet.</p>この1行だけならCSSファイルに書くのとHTML書くのとどっちもあまり変わらない気がしますが、数千行とかになってくるとCSSの管理がすごく大変になって上書きに上書きを重ねるみたいなやばい状況に。
Classで書かれてるなら変更が必要なところを直接変えればいいだけなのでHTMLコーディングの効率もかなり上がるわけです。
CSSフレームワークで最も使われてるのがこちら
また、こちらの記事では静的サイトジェネレーターとBootstrap5を使ってコーディングを爆速化する方法を解説しています。
静的サイトジェネレータを使う
先ほども少し出てきましたが、HTMLコーディングを効率化する方法の3つ目は静的サイトジェネレータを使うことです。
HTMLってWordpressのようにヘッダーやフッターを分けて管理できないので、ページ数が多くなるごとに更新作業がすごく大変になるんですよ。
例えばヘッダーメニューのリンクURLを変えようと思ったら全ページのヘッダーを修正するみたいな感じです。
そのような問題を解決できるのがこちら。
Jekyllは静的サイトジェネレータの１つで、コードを分割して個別にHTMLファイルとして保存し、テンプレートから呼び出せるようにすることができます。
この他にもHTMLでは使えない、繰り返し処理(for文)や制御構文(if文)を使えたり、Jekyll単体でブログを作ることができるなど便利な機能満載です。
LPテンプレートを使う
4つ目はLPテンプレートを使って効率化する方法です。
ゼロからコーディングってめちゃくちゃ大変なんですが、テンプレートを使えばコンテンツごとに用意されたブロックを組み立てるだけでサクサクLP制作ができてしまいます。
HTMLのLPテンプレートでFigmaのデザインテンプレートもついてるLP-UIKITを使うことでかなり効率化できます。
LPテンプレートを使えばテンプレートをコピーして部分的にカスタマイズするだけで複数のパターンを量産することができ、大量の広告テストを効率よく回すこともできます。
まとめ
HTMLコーディングは便利なツールを使ったりLPテンプレートを使うことで大幅に効率化することができます。
とくにJekyllのような静的サイトジェネレータを使うことでHTMLファイルを細かく分割して再利用できるようになるので、作れば作るほど作業時間を短縮できるようになります。