WP-LOAD

LESSON / WP LOAD

LPのHTMLを上から組み立てる

実装計画をもとに、LPの内容をheader・main・section・footerへ分け、意味の通るHTMLを作ります。

目安 90分 コース進捗 0 / 12

GOAL

このレッスンでできるようになること

  • LP全体を意味のあるHTML構造へ置き換えられる
  • 見出しとCTAを適切な要素で書ける
  • CSSなしでも読める順序を作れる

デザイン画像をそのまま四角いdivへ置き換えるのではなく、最初に文章として自然な順番を作ります。HTMLが完成してからCSSで横並びや背景を追加します。

このレッスンでは、サービス紹介LPを例にページ全体のHTMLを組み立てます。

ページの大きな領域を作る

デザインの見た目だけで分けず、内容の役割と読む順番からHTMLの大きな領域を決めます。

LPをヘッダー、メイン、セクション、CTA、フッターへ分けたHTML構造
LPをヘッダー、メイン、セクション、CTA、フッターへ分けたHTML構造

サイト名と主要なナビゲーションをheader、ページ固有の内容をmain、運営情報や補助リンクをfooterへ分けます。

<body>
 <header class="site-header">...</header>
 <main>
  <section class="hero">...</section>
  <section class="features">...</section>
  <section class="steps">...</section>
  <section class="contact">...</section>
 </main>
 <footer class="site-footer">...</footer>
</body>

セクションを見出しと内容で作る

背景色が変わることだけを理由にsectionを増やさず、1つの見出しで説明できる内容のまとまりを基準にします。見出しを非表示にする場合でも、そのセクションに見出しが必要かを検討します。

次の画像は、「セクションを見出しと内容で作る」で扱うコードや構成をブラウザで表示した結果です。

「セクションを見出しと内容で作る」で扱うコードや構成の表示結果
「セクションを見出しと内容で作る」で扱うコードや構成をブラウザで表示した結果
<section class="features" aria-labelledby="features-title">
 <div class="container">
  <h2 class="section-title" id="features-title">サービスの特徴</h2>
  <div class="feature-list">
   <article class="feature-card">
    <h3>初心者から学べる</h3>
    <p>基礎から順番に制作を進めます。</p>
   </article>
  </div>
 </div>
</section>

CTAの目的をHTMLで表す

資料請求ページやお問い合わせページへ移動するCTAはリンクです。モーダルを開く、メニューを切り替えるなどページ内の処理にはボタンを使います。見た目ではなく動作で選びます。

次の図では、「CTAの目的をHTMLで表す」の仕組みや関係を確認できます。

「CTAの目的をHTMLで表す」の仕組みや関係を示す図
「CTAの目的をHTMLで表す」の仕組みと関係
<a class="button" href="contact.html">無料で相談する</a>

画像と文章の関係を確認する

画像がなくても文章の意味が通るか確認します。図や写真が内容を補う場合は、周囲の文章と重複しすぎない代替テキストを設定します。

次の図では、「画像と文章の関係を確認する」の仕組みや関係を確認できます。

「画像と文章の関係を確認する」の仕組みや関係を示す図
「画像と文章の関係を確認する」の仕組みと関係

背景画像に重要な文字を含めると、画像を読み込めない場合や拡大表示で情報を失います。必要な文章はHTMLとして配置してください。

CSSを外して確認する

  1. 一時的にCSSの読み込みを外す
  2. ページを上から読んで内容の順番を確認する
  3. 見出しだけを確認して全体像が分かるか見る
  4. リンク名だけで移動先が分かるか確認する
  5. HTML検証で入れ子や属性のエラーを確認する

CHECK POINT

完了条件