Web制作を学んでいる方やフリーランスとして活動を始めた方にとって、クライアントからのLP（ランディングページ）制作依頼は大きな一歩です。
しかし、納品の際に求められる品質やチェックポイントが不明確だと、不安を感じることもあるでしょう。
この記事では、制作会社やディレクターなどのチェック担当者が見る、LPコーディングのポイントをご紹介します。
よくある間違いとその解決策についても解説していますので、ぜひ参考にしてください。
LP納品時に確認すべき5つのポイント
LPを納品する際には、次の5点を確認しましょう。
- デザインカンプの再現度
- 影の表現漏れ
- 動きの表現
- レスポンシブデザインの対応
- 裏側の設定
1. デザインカンプの再現度
コーダーの役割は、デザイナーが作成したデザインカンプを忠実にWeb上で再現することです。
クライアントはデザインカンプ通りの完成を期待しているため、細部まで正確に再現することが求められます。
少なくともデザインカンプで用意されている画面幅のデザインは、十分に再現できているか確認しましょう。
・各要素の位置やスペースが正確か
・画面幅によって要素がずれていないか
デザインの再現度を確認する際は、実装した画面とデザインカンプを重ね合わせることで違いを見つけやすくなります。
「PerfectPixel」というGoogle Chromeの拡張機能を活用すると、コーディングしたページとデザインカンプを重ねて確認できます。
ピクセル単位で違いをチェックできるため、細かなズレも見逃すことなく修正可能です。ぜひ活用してみてください。
2. 影の表現漏れ
影の表現は、デザインカンプ上での立体感や深みを演出する重要な要素です。
しかし、実装時には見落とされやすく、特に微妙なシャドウ効果が省略されてしまうケースが多くあります。
影の表現はデザインカンプと重ね合わせるよりも、目視で見比べたほうが見つけやすいです。
・特定の要素に抜け落ちた影がないか
影の表現は漏れがちであることを認識したうえで、より意識してチェックしましょう。
3. 動きの表現
デザインカンプ上には静止画が載っていますが、実際のページでは動きが求められます。
ボタンのホバーやクリック時の挙動など、デザイナーから共有された動きに関する指示をしっかり実装することが大切です。
マウスを重ねて、実際に表現が変わるかどうかを確認しましょう。
・クリック時に期待通りの挙動があるか
・フォーム要素のフォーカスがわかりやすく表現されているか
フォーム要素のフォーカスに特に指示がない場合は、標準で当たっている表現を適用するとよいでしょう。
4. レスポンシブデザインの対応
デザインカンプは通常、PC用は1440px、スマートフォン用は375pxなど特定の画面幅でのデザインのみが提供されます。
しかし、実際のユーザーはさまざまな画面サイズのデバイスでサイトを閲覧するため、提供されたデザインカンプの画面幅以外でも適切に表示されるよう、レスポンシブ対応を行う必要があります。
・余白や間隔が不自然になっていないか
・文字サイズや画像の可読性が保たれているか
画面幅が変わったときに表示崩れや見づらい箇所がないかしっかり確認しましょう。
5. 裏側の設定
画面には表示されない、SEOやSNSでの拡散に重要な設定も忘れてはいけません。
タイトルタグやメタディスクリプション、OGP画像（SNS共有時に表示される画像）の設定が適切であるか確認が必要です。
・メタディスクリプションがページ内容を的確に伝えるものか
・SNS共有時のタイトルやOGP画像が設定されているか
正しく設定できているか確認するためには、Google Chromeの拡張機能「TDK Meta Checker Action」の利用がおすすめです。
タイトルやディスクリプション、noindexなどが簡単に確認できるツールで、重要な項目が未設定のときは警告メッセージを表示してくれます。
まとめ：チェックポイントを押さえて高品質なコーディングを提供しよう
LPを納品する際にチェックすべきポイントは、次のとおりです。
・デザインカンプの再現度：実装した画面とデザインカンプを重ね合わせてチェック！
・影の表現漏れ：目視でデザインカンプと見比べると見つけやすい！
・動きの表現：デザイナーから共有された動きに関する指示をしっかり実装する！
・レスポンシブデザインの対応：画面幅が変わっても表示崩れや見づらい箇所がないか確認！
・裏側の設定：SEOやSNSでの拡散に重要な設定も忘れない！
仕事をするうえで、品質を担保できることは重要な要素です。
本記事で紹介した5つのポイントは基本的な部分ばかりなので、最低限押さえておきましょう。
自分がどの程度コーディングの実力があるのかを知りたい場合は、Webコーダーの実務力を測る資格試験である「コーディング実務検定」の受験がおすすめです。
学科試験と実技試験から構成されており、特に実技試験では、デザインカンプ（設計図）をもとに納品品質が評価されます。
合格者は複業マッチングプラットフォーム「複業クラウド」でスキルバッジを取得でき、企業に自分の実力をアピール可能です。
詳しくは下記のボタンからご確認ください。
未経験からWeb制作を学ぶならデイトラWeb制作コースがおすすめ！
株式会社デイトラは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
はにわまんさん（@haniwa008）
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。