KAIZEN REPORTブログ
2016.2.26 | LP運用レポート
改善・運用のしやすいランディングページのコードとは
ランディングページは一度作って完成するものではなく、何度も仮説を立て、検証を繰り返し、改善を図りながら育てていくものです。
メインビジュアルのデザイン変更、キャッチコピーの変更、コンテンツの入れ替え、ボタンデザインの変更、新たなコンテンツの追加などなどその作業は多岐に渡ります。
つまり、ランディングページを構成しているhtml、CSS、JavaScript、PHP、画像などのファイルは頻繁に改善されることを前提に作成されなければなりません。
ランディングページをコーディングするコーダーは常に「改善しやすいコードを書かなければならない」ということでもあります。
「改善しやすいコード」とは一言で言うと「見やすく、分かりやすい、無駄が少なく、綺麗なコード」というように訳すことができます。
では、この改善しやすいコードとは具体的にどんなコードなのでしょうか。
安定してコンバージョンを出すためには運用改善は必須の作業となります。
今回はそんな改善しやすいコードを書くためのコツ、ノウハウの一部ご紹介したいと思います。
htmlのインデントを取り、入れ子構造の階層を見やすくする
htmlはサイトの文章構造を司り、セクション、見出し、段落などが入れ子のように定義されています。
<html>タグの中に<body>タグがあり、<body>タグの中に<header>タグがあり、<header>タグの中に<div>タグがあり、<div>タグの中に見出しの<h2>タグがありと、任意の数だけこの構造が続いていきます。
上の例ですと、<footer>タグが親であり、「inner」と名付けられたdiv要素がその子供にあたり、さらに一つの段落が子供になります。
運用改善しやすいコードにするためには、htmlが今どの階層にあるのか、どの要素と親子の関係にあるのかを一目で分かるようにすると便利です。
例えば、以下のコードをご覧ください。
→ こちらはインデントを全て削除したタイプ。
→ そして、こちらは子どもの要素が一つできる度に半角スペース２つ分のインデントがあるタイプです。
この2つはWebページとしての機能や見た目には変化がありません。
しかし、編集しやすいという観点で見た時、とても大きな差があります。
閉じるタグがどこにあるのかも分かりやすく、今どの階層をいじっているのかが一目で分かります。
インデントの数を増やせば増やすほど、htmlのファイルサイズは増えていきますが、非常に微々たるものである上、改善しやすいという大きなメリットがあるため積極的にインデントは活用するべきだと言えます。
しっかりと意味が伝わり、見やすいclass名とid名を指定する
htmlにおいてclassとidを振り当てるとき、ほぼ必ずと言っていいほど名前を命名します。（命名しないときもたまにあります）
例：<section id = “js-header” class = “header”>…..</div>
CSS、JavaScriptはhtmlに指定されたclass名、id名を探し、処理を行います。
つまり、htmlコーディングにおいて適当にclass名やid名を指定してしまうと後々、コードの可読性だけでなく、メンテナンス性も損なわれてしまいます。
そこで、フロントエンドコーディングにおいては第三者が見てもしっかりと意味が伝わり、尚且つ可読性の優れた命名規則が必要になります。ここを徹底することで編集のしやすさが大幅に変わってきます。
classやidの命名規則は数多く存在し、宗教のようなもので、どの手法が正しいというものはありません。人によって千差万別であり、定義が難しいものです。
しかし、ある一定のルールを設けることによってネーミングセンスに依存しない見やすいコードを書くことができます。筆者は以下のルールを自分に設けてコーディングを行なっております。
どの要素であるのか、親子の関係がしっかりと分かるようにする
先ほど、htmlの要素は親子の関係にあり、入れ子の構造になっていると説明させていただきました。つまり、この親子の関係が分かるとどの場所であるのかがclass名、id名を見るだけで分かるようになります。
例えば、<div id = “keyVisual__title”></div>と
<div id = “faSuTobyu”></div>
とでは分かりやすさは一目瞭然です。一つ目はファーストビューのメインタイトルを囲っているdiv要素であり、keyVisualセクションが親であることまで分かります。
同様に、ヘッダーの社名ロゴを取り扱うのであれば、
<div class =”header__logo”></div>、
CTAエリアの電話番号であれば、
<span class =”cta__number”></span>という様になります。
これらをCSSで装飾しようとなると以下のコードになります。
#keyVisual__title { font-size:34px; }
.header__logo { margin:10px 0 4px 18px; }
.cta__number { color:#fff; }
class名で親子の構造を分かる様にすれば、CSSでセレクターを指定するときも「どこに何を指定されているのか」が分かりやすくなり、第三者が見ても編集は非常に容易です。
コーディングを経験したことがある人は必ずと言っていいほど「どんな名前にしようか？」と命名に悩み時間を浪費した経験があると思います。
命名規則におけるルールを設けることは命名における時間を短縮することができ、「短時間で高品質なページを作る」ことにもなるのです。
特にBEMという命名規則が有名ですので、
是非チェックして学んでみてください。
https://app.codegrid.net/entry/bem-basic-1
※BEMの記法はhtmlの階層が深くなればなるほど、class名が冗長になり、逆にhtmlが汚れてしまうというデメリットもあります。htmlの階層が深くなってしまうページの場合はこの記法を使用しないほうが良い場合もあります。
JavaScriptによって取得されるid、class名には「js-」と頭に入れる
例：<div id = “js-slider__Area” class = “slider__Area”></div>
これによってJavaScriptによって取得される要素であることが分かります。
これを徹底することによってclass名やid名の変更によってjsが動かなくなるというトラブルも防ぐことができます。
これは広く一般的に用いられている命名ルールであり、非常に便利なので取り入れてみてください。
html,css,JavaScriptにおいてコメントアウトを有効活用する
html、CSS、JavaScriptにはメモを挟むことができます。これを「コメントアウト」とよび、コメントと略されます。
コメントを使うことでどこにどのコードが書かれているかを区別することができます。運用改善をしやすくするためには必須であり、基本的な方法となります。
例えば、以下のコードをごらんください。
これを見るだけでfaqセクションのコードに適応されているCSSがまとめられていることが分かります。
htmlの場合、ランディングページのセクションの変わり目にコメントを挟んであげるととても便利です。
JavaScriptの場合はどんな処理を書いているのかをコメントします。特にJavaScriptは書いた本人でも時間を置いてみると、どこのことを書いているのかが分かりにくいものです。
変数を宣言する位置など人によって書き方が違うとなればコメントは必要です。
メソッドを定義する場合、仮引数に渡される値の説明、戻り値などを書いたAPIコメントを記述するのがおすすめです。
プログラムの規模が大きくなると、仮引数に渡される値が何かをさかのぼって確認するのは非常に手間がかかります。引数に配列が渡される場合はその配列の中身なども記述してあげると非常に読みやすいソースになります。
jsファイルを複数に分割し、別ファイルで記述されているオブジェクトが渡される場合はほぼ必須と言っても良いでしょう。
画像のファイル名の命名にも気を使う
class名やid名の命名規則の大切さをご説明させていただきました。それだけではなく、画像のファイル名にも気を使うと編集が大幅に楽になります。
これも今まで述べた命名規則と同じです。
header_logo.png
header_icon01.gif
footer_img01.jpeg
このように親と子の関係を記すことで画像のサムネイルを見なくても、どこの画像なのかが分かりやすく、尚且つコーディングを高速で行うことにもなります。基本、フォルダー内ではアルファベット順に画像が並ぶことになるので、頭文字をセクションごとに統一することにもなり、管理が楽になります。
JavaScriptの関数名は分かりやすく命名する
htmlとCSSと違い、JavaScriptはどこにどんなことを書いてあるのかが分かりづらい言語です。
ですので、関数名と変数名を工夫してあげることによって、それを解消してあげる必要があると言えます。
例えば、キービジュアルに文字がタイピングのように表示されるアニメーションが実装されていたとします。
この処理を一つの関数にまとめ「type_anime」と命名した場合、どの処理なのかが分かりづらいと思います。しかし、「keyvisual_typing_animation」と命名するとどうでしょう？
var type_anime = function(){};
var keyvisual_typing_animation = function(){};
「ここに処理がまとめて書かれているんだな」と一瞬にして理解することができると思います。このように多少長くなったとしても関数名は過不足無く書くことが大事です。
htmlやCSSの場合、過不足書いてしまうとファイルサイズの肥大化を招くことになりますが、に関してはその心配をする必要はありません。
JavaScriptにおいて命名規則を細かく定める
JavaScriptは制限が緩い言語です。大文字小文字は区別されますが、関数名の頭は大文字でなければならない、PHPのように変数の頭には$をつけなければならないといったルールがありません。
自由過ぎるがゆえ、ある程度のルールを設ける必要があると言えます。
例えば、大文字小文字の使用方法です。
グローバルオブジェクトのみを大文字にして命名し、それ以外のローカルオブジェクトには小文字で命名してあげる方法があります。
JavaScriptはPHPなどの言語のようにメンバにprivate、protectedのようなアクセス権を指定することができません。全てがpublicです。
それゆえ、即時関数などでアセクス権を作成してゆくのですが、外部からアクセスできるかどうか、できないかを一目で分かるようにすることは重要なことです。
var GLOBAL_OBJECT = 'グローバル変数';
(function() {
var local_object = 'ローカル変数';
})();
無秩序に大文字と小文字を使用していると可読性を損ねるだけでなく、ソースの役割が分かりづらくなるデメリットがあります。
jQueryを使って変数にセレクターを代入する場合は変数名の頭に$をつけるのも効果的です。
var $header = $('header');
var is_mobile = false;
一目で変数の役割を理解することができます。
CSSは子孫セレクターの階層を深くしない
htmlの記述を汚さないために多くのコーダーの方は子孫セレクターを使用することでしょう。しかし、子孫セレクターへの依存は表示速度の低下を招くだけでなく、改善しやすさも損ねてしまうという事実があります。
階層を深くしてしまうと大きくソースの可読性を損ねてしまいます。
.header .inner .left-block .logo .span .txt { width:100%; }
.feature .inner .list .item .box .ttl img { width:100%; }
子孫セレクターを使用しないとhtmlが汚れてしまう、しかし、子孫セレクターを使用し過ぎると今度は表示速度が遅くなり、CSSファイルが汚れてしまうというジレンマがあります。
この中間をうまく取り入れることができれば改善しやすく、表示速度もはやいコーディングをすることができるのではないかと考えています。
具体的には子孫セレクターは多くて３階層まで、可能な限り２階層で組むというようにするとバランスが良いでしょう。
先ほどの例でも
.header .inner .left-block .logo .span .txt { width:100%; }
ここまで書く必要は現実的にほとんどなく、
.header .txt { width:100%; }
だけで問題がない場合がほとんどです。
こちらの記述であれば可読性に優れ、レンダリング速度の低下を防ぎます。改善運用はソースコードの量が少なければ少ないほど行いやすいです。そのために行える工夫の一つです。
まとめ
これだけ見てみるととにかく「命名」の仕方が大きくコードの品質を決めているように思います。
命名規則やインデントは最初の段階だとどうしても軽んじて適当に行ってしまうものです。そして、他のエンジニアに迷惑をかけるということもあるのです。
ここまでご説明させて頂いたことは全てフロントエンドコーディングにおいては全て基礎的なことでありますが、徹底して行うにはとても神経を使うものです。
デザインやコーピーライティングと比べ、この改善しやすいコードを書くということはコンバージョンと関係がないようにも思えます。
しかし、質が高いページを作る縁の下として徹底することによるメリットは大きなものであることは間違いがないと思います。
