このページの中身

LPを組む

パターン ／ パターン集トップ

1枚もののLPは、ここにあるパターンを上から順に貼るだけで骨格が立ちます。判断が要るのは並び順と、どの節を削るかだけです。
LPを13の節で組み上げた実画面
図を大きく見る

節の並びと使うパターン#

「この節のボタン」の列は、貼ったあとに直さなくて済むようにパターン側の既定と揃えてあります。強さは 塗り（--primary）＞ 枠（--secondary）＞ 文字だけ（--ghost） の3段で、派生は 出発点のCSS に1回だけ書きます。

順節パターンこの節の idこの節のボタン置く理由
1ヘッダー固定ヘッダー持たない置かない（ナビの文字リンク）導線は常に画面内に置く
2ファーストビュー写真ヒーロー＋スクリム か 文字だけのヒーロー持たない枠を1つ。並べるなら文字だけを1つ添える写真が強ければ前者、言葉で勝負なら後者
3特徴特徴の3列グリッドreason置かない3つに絞ると読み切れる
4実績実績数字の帯results置かない数字は文章より速い
5提供内容画像と本文の左右交互work置かない（本文中の文字リンクで足りる）単調な縦積みを崩す
6料金料金プランの比較カードplan3枚とも枠。推しは枠の太さとバッジで立てる迷いは離脱になる。推しを1つ決める
7声お客さまの声voices置かない自分の言葉より他人の言葉
8流れ進め方の3ステップflow置かない頼んだあとの不安を消す
9FAQFAQアコーディオンfaq置かない問い合わせの手前で答える
10概要会社概要の表company置かない実在の証明
11締めのCTA問い合わせCTAの面contact塗りを1つ。副の連絡先は枠読み終えた場所に出口を置く
12フッター最小のフッター持たない置かない主役はCTA。フッターは静かに

「この節の id」は各パターンのHTMLに入れてあります。ヘッダーのナビは #work・#plan・#contact、ヒーローのボタンは #plan、料金カードの「申し込む」は3枚とも #contact を指すので、順に貼れば行き先がそろいます。節を削ったら、その節を指すリンクも一緒に消してください。行き先のない # リンクは、押しても何も起きません。

塗りのボタンは締めのCTAだけが持ちます。途中の節にも塗りを置くと、読み手は同じ強さの出口を何度も渡されて、どれが本命か分からなくなります。途中で申し込ませたいときは、ボタンの色を強めるのではなく、行き先を締めのCTAと同じ #contact に揃えます。申し込みの導線でページの外へ出るのは、締めのCTAの塗りのボタン（フォームのページ）1本だけです。

章見出しの帯は貼るたびに書き換える#

各節の頭には 章見出しの帯 を使い、同じ形を反復させます。帯は形だけを反復させるもので、中身は毎回変わります。章番号・見出し・リード・id の4つを、貼るたびにその節のものへ書き換えてください。

id は「sec-」にその節の id をつないだ名前にします。料金の節なら sec-plan、FAQの節なら sec-faq です。章番号は帯を置いた順に 01・02 と振ります。同じ id が1ページに2つあると、そこを指すリンクは先に出てきたほうへ着きます。帯を5回貼って id を書き換えなければ、同じ名前が5つ並びます。

帯を置いた節では、節のパターンが持っている h2 を消し、aria-labelledby を帯の見出しへ向けます。そのままだと同じ見出しが2行続きます。

このコードで動いている見本です

全部は要りません。削る候補は 5・7・8 です。削っても塗りのボタンの数は変わりません。

骨格#

先に 出発点のCSS を貼り、その下へ各パターンの「コピーする」を節の順に足します。右に書いたのが、その節が持つ id です。

このコードで動いている見本です

節と節のあいだは --space-9 以上を取り、節の中は --space-5 前後に詰めます。この差が章のリズムになります（余白）。

固定ヘッダーの下にリンクが潜らないよう、html に scroll-padding-block-start を置きます。値は 固定ヘッダー のCSSにあります。

ダミー文は1つの店で書いてある#

この12節のダミー文は「つばめ珈琲焙煎所」という架空の1店にそろえてあります。順に貼れば、店名も営業時間も受付時間も食い違わない1枚になります。言葉を差し替えるときも1店ぶんずつ通しで直してください。節ごとに別の業種の文が混ざると、読み手はそこで話者を見失います。

確認する#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。