本記事では、今まで100を超えるLP（ランディングページ）をコーディングしてきた私が実際に行っている、綺麗に、そして素早く完成させるためのLPコーディング手順を紹介します。
駆け出しの初心者コーダーの方や、今までいくつかLPをコーディングした経験があるけどより効率的に完成させられるようになりたいという方にとって、有益な記事になっているかと思います。
10の手順にまとめたので最後まで読んでみてください。
目次
少ない工数で完成させる、効率的なLPコーディング10の手順
0. いきなりコーディングを始めない
「いきなりコーディングを始めないこと」これはすごく重要です。
デザイナーからデザインカンプを受け取って、あるいはデザインが出来上がって、「いち早くコーディングに取りかかりたい」その気持ちはよく分かります。
しかし、早くコーディングを終わらせたいと思うなら、一旦コーディングを始めるのは待ちましょう。
※この0.は「10の手順」に含んでいません。
1. 紙に大まかに要素を記述する
では最初に何をおこなうのか。
まずはじめにおこなうことは、デザインカンプにある要素を、紙に要素ごとに記述することです。
この際、詳細に完璧に写す必要は全くありません。定規などを使ってまっすぐに線を引く必要もありません。
要素の配置や入れ子の状態が分かるだけで十分です。
2. デザインが共通する要素を見つける
紙に要素を書いた次は、デザインカンプを見ながら共通する要素を見つけるということです。
LPの中には、共通となっているデザイン部分がいくつか存在することがありますよね。
例えば、セクションごとの横幅や見出しのデザインなどです。
その共通となっている部分をデザインカンプの中から洗い出し、紙に書いた要素になんらかの目印を付けておきます。この理由は次の③で述べます。
3. 各要素にclassを命名して紙に記述する
紙に書いた要素にclassの名前をつけます、そしてそれを紙に記述していきます。
1.でそれぞれの要素を入れ子構造で記述しているので命名しやすいかと思います。
また、2.で共通要素として挙げた要素に対しては同じclassを命名します。
4. 画像を書き出し、圧縮する
続いて、LPの中で使用する画像を用意します。
デザイナーの方が書き出して用意してくれている場合もありますが、そうでない場合もあります。
その際は、自分でデザインカンプから書き出す必要がありますが、これはコーディングを開始する前に済ませておくと良いでしょう。
書き出しに加えて、画像容量の圧縮まで済ませておくこともおすすめです。
5. HTMLをコーディングする
要素とclass名を記述した紙を用いてHTMLをコーディングしていきます。
あらかじめclass名を考えていたからこそ、コーディング中に命名に対して頭を使う必要はありません。HTMLの記述のみに集中できます。
私は、HTMLを全て記述してからCSSに着手することを勧めています。この⑤がすべて終わってから⑥に移るという流れですね。
万が一全部書いてからCSSを書くと手戻りが発生しそうと不安であれば、細かくHTML→CSS→HTML→CSS…としても構いません。例えば1セクションごとにこれを繰り返すなどでも十分に効率的なコーディングができるかと思います。
6. CSSをコーディングする
HTMLのコーディングが終わったら続いてCSSのコーディングをします。
レスポンシブの際は、レスポンシブも含めて記述します。
代わりにSassやScssでコーディングすれば、なお効率よくスピーディーに進められます。
これが完了すれば大方LPの見た目は完成に近づいてくるかと思います。
7. 問い合わせ機能を実装する
問い合わせ機能が必要なLPであれば、問い合わせ機能を実装します。
問い合わせ機能の実装にあまり経験がなく、円滑に進められる自信がないという場合であれば、もう少し早い段階で着手することをおすすめします。
問い合わせ機能のみならず、「苦労しそうだ」というポイントがあらかじめあれば、まずはそこから片付けると良いですね。
8. JavaScript（ jQuery ）をコーディングする
作っているLPにJavaScript（jQuery）の記述が必要であれば、そのコーディングをします。
例えば要素が動くLPはJavaScriptは必要になるでしょう。
作っていく中でclass・idの追加やCSSの編集が必要であれば、もちろんその記述も行います。
9. headタグ内を記述する
忘れがちですが、必ず忘れてはならないこと、それはheadタグ内の記述です。
CSSファイルやJavaScriptファイルの読み込みのコードはすでに記述していると思いますが、他のものはどうでしょうか。
例えば、titleタグやmeta descriptionタグ、faviconの設定などです。必ず忘れずに記述しましょう。
コーディング着手してすぐのタイミングで、記述すべき内容が分かっていればよいですが、ここを決めるのがリリース間近になってしまうことは珍しくありません。
記述漏れがないことも含めて確認しましょう。
下記のページでは、headタグ内に記載すべきことをテンプレートともに説明しています。ぜひご確認ください。
10. 最終確認・調整・納品
最後に確認や調整です。
デザインカンプと改めてコーディングしたものを見比べてみます。
明らかに見た目が違う箇所はありませんでしょうか？細かいところまで1px単位で完璧に合わせる（パーフェクトピクセル）必要はありませんが、見た目で違和感が生まれてはなりません。
アップで見たあとは引きで見て改めて確認してみましょう。
次いで、対象となるブラウザやデバイスでの見た目の確認です。これも必ず忘れずに行いましょう。
使用するCSSプロパティによっては、ブラウザやデバイスごとに、大きく見た目が変わるものもあり、想定通りの表示になっていないことがあるからです。
それぞれで見た時に表示崩れが起きないこと、これを忘れずに確認しましょう。
下記のページでは、納品前に確認すべきことをすべて挙げています。参考にしてみてください。
確認が完了すれば、これで納品となります。事前に合意した納品形式に沿って納品してください。
このページのまとめ
以上、私が今まで行ってきたコーディング手順を紹介しました。
- 0. いきなりコーディングを始めない
- 1. 紙に大まかに要素を記述する
- 2. デザインが共通する要素を見つける
- 3. 各要素にclassを命名して紙に記述する
- 4. 画像を書き出し、圧縮する
- 5. HTMLをコーディングする
- 6. CSSをコーディングする
- 7. 問い合わせ機能を実装する
- 8. JavaScript（ jQuery ）をコーディングする
- 9. headタグ内を記述する
- 10. 最終確認・調整・納品
なかでも多くの方にお勧めしたいのは、「いきなりコーディングは始めず、まずは紙に要素を書く」ということ。今までこのやり方をしたことがない方は是非とも試してみてください。
いつも以上にスピーディーに効率的に完成させることができるかと思います。
ただ、今回ご紹介したのはあくまで個人的に効率的だと思うコーディング手順です。なので一つの参考程度にしていただけると嬉しいです。
人によってそれぞれの効率的なやり方があるかと思うので、ご自身でもより良いやり方を見つけて見てください。
