コンバージョンを向上させるコーディングの役割について考える

 

良いランディングページを構築する上で欠かせない工程が、コーディングです。

 

 

 

ですが、コーディングは、構成（コピーやシナリオ）やデザインに比べて、軽視されがちな面もあります。

 

 

 

その理由は、よほど派手な動きなどを実装しない限りは、構成（コピーやシナリオ）やデザインほど
見た目にはっきりとわかるものではないからです。

 

 

 

しかしながら、コーディングはランディングページを構築する上で、非常に重要な役割を担っています。

 

 

 

コンバージョンラボでは、ランディングページのクオリティを次のような公式で考えています。

 

 

つまり、どれかひとつの要素でもクオリティが下がれば、自ずとランディングページの質が下がり、コンバージョンの確率も下がっていきます。

 

 

 

では、コーディングの役割とはいったいなんでしょうか。

 

 

 

今回の記事では、改めて、その役割・重要性について考えたいと思います。

コーディングの役割は大きく以下のように考えられます。

 

 

 

 

それぞれの役割を具体的に見ていきましょう。

 

 

 

デザインの忠実な再現

 

 

「デザインカンプ通りに、コーディングされている。」

その結果だけを見れば当然のことのように思います。

 

 

 

ですが、ランディングページというものは、実は非常にコーダー泣かせなwebページです。

 

 

 

ダイナミックさを重視するランディングページは、実は、コーディングする上で、とても大変な面があります。

 

 

 

言うなれば、ランディングページのデザインは、複数ページもののwebサイトに比べ、ルールが少なく自由度が高く、ある意味では変則的なデザインだからです。

 

 

 

その変則的なデザインを要素ごとにすべて分解（スライス）して、再度、レイアウト・配置し直していくのがコーディングです。

 

 

その配置の際に、変則的なデザインどおりの余白やレイアウトなどを再現しながら、再構築すること自体がとても大変な作業です。

 

 

 

経験が少ないフロントエンドエンジニアや手間をかけたくないフロントエンドエンジニアは、効率的にやろうとするがあまり、デザイン自体が忠実に再現されていないということが少なくありません。

 

 

 

たとえば、
デザインどおりのフォントの大きさになっているか、
デザインどおりの行間になっているか、
デザインどおりの余白・レイアウトが作れているか、
デザインどおりの色味を再現できているか、
など注意しなければいけないポイントは複数に渡ります。

 

 

 

できあがって見て、当たり前のように見える見栄えも、裏側にはデザインをしっかりと再現しようとするフロントエンドエンジニアの細かな努力があります。

 

 

 

読み込み速度（表示速度）のコントロール

 

 

いくらで、優れたコピーや美しいデザインができても、そのランディングページを開いてから表示されるまでに、20秒〜30秒かかってしまえば、そのページを閉じてしまいますよね。

 

 

 

ましてや広告ページであるランディングページなのに、クリックした時にすぐにページが見れないのは、広告費を無駄にしてしまうことにもなります。

 

 

 

では、具体的にはどのように速くしていくのでしょうか。

 

 

 

たとえば、画像の扱いです。

 

 

 

画像は高画質になればなるほど、見栄えが良くなります。

 

 

 

しかし、画質の質が高いほどに、ファイル容量が大きくなり、そのファイルが積み重なればそのランディングページ全体の容量が重くなり、結果、読み込み速度が遅くなります。

 

 

 

とはいえ、画像を多く活用したランディングページを作ることは多々ありますし、画像でなければダイナミックに表現できない要素などもたくさんあります。

 

 

 

その場合、画像の書き出し方や軽量化によって「高画質だけど容量の軽い画像」をつくるなどのひと手間をしっかりと実践することが大切です。

 

 

 

あるいは、画像そのものの軽量化という視点ではなく、画像の表示のさせ方自体を工夫させることで、読み込み速度をコントロールする方法もあります。

 

 

 

たとえば、スクロールごとに画像を順番に読み込ませるという方法です。

参考として、弊社でコーディングを行った以下の企業様のランディングページのケースをご参考ください。

 

 

▼バリ活！！（株）アークティブ様運営

 

 

 

 

 

または、デバイスフォントやwebフォントを活用することで、テキスト自体を画像ではない形式で表示させる方法で読み込み速度を早くする方法があります。

 

 

 

これにより、読み込み速度の向上や、テキストの差し替えなどの変更作業が容易になるなどの運用面でのプラスもありますが、一方で画像ならではのダイナミックさやデザイン性を表現できないこともあるため、適切なフォントの選定や、場合によっては有料のwebフォントの導入など、しっかりと方針を決めて取り組むことが大切になります。

 

 

 

運用改善のしやすさ

 

 

運用改善のしやすさとは、のちのちの改修作業を考慮した際に、誰もが編集しやすいコードになっているかということです。

 

 

 

プロ野球選手はバッティングフォームが美しい。

プロ棋士は打ち方が美しい。

洗練された数式は見た目が美しい。

 

 

 

これと同様に機能が充実している効果が高いランディングページはコードの見た目がとても美しく、
「どこに何が書いてあるのか、どんな設定にしているのか」がコードを打った本人でなくてもすぐに理解できます。

 

 

 

初期に構築したコードを社内外の誰かが編集するということは非常によくあることです。

そのような時に、素早く編集でき、素早くクオリティアップにつなげられるかどうかという「見た目」の要素もコーディングの良し悪しを決める大きなウエイトを占めているように思います。

 

 

 

また、コードの見た目を美しく書くという意識は無駄なコードを書かないという意識にもつながり、結果、読み込み速度にも大きく関係してきます。

 

 

 

OS・ブラウザなどの環境に依存しない確実な表示

 

 

ランディングページを見ているユーザーが、どういった環境で、そのランディングページを見ているかは、発信者側にはわかりません。

 

 

 

OSやブラウザやブラウザ自体のバージョンなど様々な環境で見るユーザーがいます。

 

 

 

それらを考慮せずにコーディングすると、たとえば以下のような現象が起きます。

 

 

 

「グーグルクロームでは正しく表示できているけど、Firefoxだと崩れてしまう。」

「Windowsでみると正しく表示されているけど、macだと崩れてしまう。」

「InternetExplorerのバージョン８だと動画やスライダーが全く動かない。」

「iPhoneだと綺麗だけどAndroidだと見栄えが悪い。」・・・・など

 

 

 

GoogleChrome、InternetExplorer、Firefox、Safariなどなど、それぞれのブラウザはバージョンごとに独自の表示基準やフォントを持っていて、それに合わせた知識や技術が必要になります。

 

 

 

また、OSやデバイスそのものについても、「最近の人は、新しいパソコンを持っているでしょうし、Windowsの方が大半でしょう」とお思いになるかもしれません。

 

 

 

しかしながら、意外にそうでもありません。たとえば、ヒートマップなどの解析ツールを活用すると、本当に多種多様なブラウザやデバイス・機種で自社のランディングページが見られていることがわかります。

 

 

 

パソコンであれば、InternetExplorer8を使っている人もいますし、スマートフォンであればAndroid2系を使っている人もいます。

 

 

 

人それぞれ主に使っているブラウザやデバイス・機種は異なります。

 

 

 

ですから、どんな人にも、的確に正しいページをみせる技術が必要になってくるのです。

 

 

 

もちろん、あまりにも古いブラウザに対応させようとすると無駄に多くのコードを打つ必要があり、無駄にリソースを消費してしまうので、ある程度の線引きは必要です。

 

 

 

ブラウザのシェアは時代とともに変わっていくので、固定化したルールを持つことが難しい面もありますが、自社においてはどこまでを是とするのか、否とするのかある程度のガイドラインを持っておくことはとても重要なことかと思います。

 

 

 

まとめ

 

 

他にもこれらの4つの役割以外に、コーディングには、SEOを考慮したコーディングなど企業のwebマーケティング戦略にも紐付いてくる面もありますが、今回は、焦点を4つにしぼって考えてみました。

 

 

さて、このように、コーディングは、ランディングページの開発工程において、最終工程を担う重要な技術ですが、見た目にもわかりづらいため、敬遠され理解されにくい分野です。それゆえに効率化を求めて一番おろそかにされてしまいがちです。

 

 

 

ですが、コーディングに手を抜けば、読み込み速度の遅いページになったり、OSやブラウザによっては崩れて見れないページになっていたり、気づかぬところで大きな損失をもたらす可能性がある工程です。

 

 

 

ですから、デザインを的確に表示させつつもその後の運用も踏まえて丁寧にコーディングする。それらを実現してこそ、納得がいき、長く使える効果の高い良いランディングページになりえるのです。

 

 

 

表には見えづらいですが、とても重要な工程であるコーディング。

今回は、その役割について改めて考えてみました。