【第1回】LPの基本構成を作ろう〜HTMLのセクションタグとは〜

はじめてのランディングページ制作

この特集では、はじめてのランディングページ（LP）制作として、LPを作成する手順を紹介していきます。今回は以下のようなLPを制作できるようになるゴールとします。

架空の商品ページですが、オーソドックスな情報になっていますので、初めてランディングページをつくる人のご参考になればと思います。このページでは、以下の機能が実装されています。

CSS

jQuery

他のサイトでもよくみる機能ですよね。このページの制作を順を追って紹介していきたいと思います。

ランディングページとは、検索結果や広告から流入してきた人が目にするページになります。商品などの紹介している内容を伝えるページになります。（企業のコーポレートサイトも広くみればランディングページに当てはまります）

なので、役割としては商品詳細や次のアクションをするにあたって必要な情報を伝えるページである必要があります。

さて、最初に何を伝えるかを整理して、HTMLを組んでいきたいと思います。

今回はシーサー像の紹介になりますので、スペックや価格、サンプル写真や購入窓口への導線が必要になりますよね。また、多くの人に買ってもらいたいので特典やキャッチフレーズも入れたいです。考えた結果、以下の構成にしました。

LPでは優先して伝えたいことはなるべく上に配置するようにします。何を伝えたいか、何の為のページかを考えて決めていくことになると思います。

HTMLをマークアップしていくわけですが、今回は以下のようなタグ、クラスやIDを用いりました。

共通している項目はクラスを、個別の箇所はIDを用いることでデザインを反映できるようにしました。うまく割り振ることで効率よく制作していけるようにしたいですね。

さて、タグについて<section>などが出てきていますが、どういった違いがあるのでしょうか。ここでセクションタグについて簡単に紹介しておきます。

セクションタグはページを構成する一つのコンテンツのまとまりを示すタグになります。

こちら厳密に分ける必要性あるの？って思う人がいるかもしれませんが、こちらGoogleのクロール時に正しく評価される為にも気をつけていた方が良いでしょう。特にHTML5では<section>でコンテンツの構成をハッキリさせた方が良いと言われています。

ただ最初は違いがわかりづらいと思います。特に<article>と<section>は結構考えが分かれることも多いです。僕は”コンテンツとして完結するもの=「起」と「結」が揃っているもの”を<article>としており、それ以外を<section>としています。

セクションタグの他に、コンテンツのグループをつくる汎用タグもあります。<div>タグと<span>タグがそれにあたり、セクションタグより小さいグループとして用いることが多いです。この二つのタグの違いはまた別の機会に紹介したいと思います。

さて、タグやクラス、IDを指定したら、次はCSSにてデザインを加えていきたいと思います。