こんにちは。WEBチームのO倉です。
今回は成果につながるランディングページ（以下LP）の制作工程（戦略設計・情報設計・デザイン・コーディング）のうちの4つ目である「コーディング」のポイントについて解説していきたいと思います。

　

　

コーディングのポイント

コーディングは、デザインをブラウザ上で忠実に再現し、機能させるための最後の工程です。
WEBサイトはHTML、CSS,JavaScriptといったコードと画像や音声ファイルで構成されております。WEBサイトの本文や画像配置などの構造をつかさどるHTML、WEBサイトの見た目を整えるCSS、WEBサイトに動きをくわえるJavaScriptを使用して、デザインを実際に形にしていく重要な作業です。

　

表示速度の速さを優先する

LPのコーディングで最も重要なのが、表示速度のコントロールです。
表示速度はコンバージョンを左右する要素でもあります。
LPを訪れるユーザーのほとんどは、元々訪れる予定のなかった人たちです。そのようなユーザーがページの読み込みを20秒も30秒も待ってはくれません。
情報をすばやく届けられているかを優先してコーディングを行いましょう。

具体的な改善策
●画像ファイルの容量を落とす（画質が粗くならないように注意）
●ソースコードの容量を軽くする（無駄なコードを極限まで削る、起動のタイミングを指定する

　

ユーザー目線での動作確認

基本的な動作上の不具合がないか、ブラウザやデバイスごとにレイアウト崩れがないかの確認はもちろんのこと、ユーザー目線で使いやすいLPかどうかを意識することが重要です。
コンバージョン寸前のメールフォーム入力の動作確認は特に念入りに。入力完了後にユーザーへ完了メールが送信されているか、管理者に通知メールが届いているか、入力項目が最善かなど、実際にテスト入力し体感しながら改善していくことが重要です。

　

運用改善のしやすさを考えてコーディング

LPは一度公開したら終わりではなく、コンバージョン率を上げるため何度も検証と改善を重ねていくものです。
LPのコーディングは、のちのち編集する時にわかりやすいものになっていることが重要です。

具体的な方法
●コメントを利用してコードをカテゴリごとに整理
●コードを見やすく整形

無駄のない美しいコードを書くことで、運用改善がスムーズになるほか、サイトの軽量化にもつながるため表示速度も早くなります。まさに、良いことづくめです♪

まとめ

このシリーズで何度も「LPは育てていくもの」とお話ししていますが、より良いLPに育てていくためにコーディングは重要な工程だということが伝われば幸いです。

次回は「成果につながるランディングページの制作工程」の総まとめをしていきたいと思います。
お楽しみに！

　

アーカイブ

成果につながるランディングページの秘密
【第1回】ランディングページとは何か
【第2回】成果につながるランディングページの条件
【第3回】LPの制作・運用で失敗しないためのポイント

成果につながるランディングページの制作工程
【第1回】戦略設計のポイント
【第2回】情報設計のポイント
【第3回】デザインのポイント