商品やサービスを案内するページの構成と、各部の名前
商品やサービスを案内するページ（ランディングページ）は、申し込んでもらうことがゴールです。魅力、選ばれる理由、利用者の声、料金、よくある質問の順に、迷いをひとつずつ解いていき、最後にもう一度、申し込みへ誘います。
図は、珈琲豆の定期便「つきひ珈琲」の架空のページです。気になる場所か名前を選ぶと、その言葉の説明が開きます。
- お知らせバー
期間限定の知らせを、いちばん上の細い帯で。
- ナビゲーションバー
ロゴと行き先。申し込みのボタンは右端に置く。
- ヒーローセクション
何の商品か、次に何をするかを、最初に伝える。
- アイブロウ
見出しの上の小さな一行。補足を先に伝える。
- スターバースト
ギザギザの形で、特典やお得さを目立たせる。
- マーカーハイライト
大事な言葉にだけ、蛍光ペンのような線を引く。
- アーチ型トリミング
上を丸く切った写真。やわらかい印象になる。
- ピル型ボタン
両端が丸いボタン。押せることが伝わりやすい。
- ドットグリッド
等間隔の点。背景に、さりげなく表情を出す。
- ロゴクラウド
取引先のロゴを並べて、信頼の裏づけにする。
- フィーチャーセクション
選ばれる理由を3つに絞り、同じ形で並べる。
- カード
ひとつの内容を、ひとつの枠にまとめる。
- 角丸 / ボーダーラジウス
角を丸めると、やさしく親しみやすくなる。
- シャドウ / エレベーション
薄い影で、紙から少し浮いたように見せる。
- テスティモニアル
利用者の声。申し込む前の不安をやわらげる。
- アバター
丸く切った顔写真。誰の言葉かがわかる。
- レーティング（星評価）
星の数で、評価をひと目で伝える。
- プライシングテーブル
プランを横に並べ、違いを比べやすくする。
- バッジ
おすすめのプランに、小さな札で目印を付ける。
- アコーディオン / FAQ
質問を押すと答えが開く。長くなる内容に向く。
- トースト通知
操作の結果を、画面の隅に数秒だけ知らせる。
- ウェーブ区切り
境目を波形にして、次の場面へやわらかくつなぐ。
- CTAセクション
読み終えた人を、もう一度申し込みへ誘う。
- グラデーション
色がなめらかに移る背景。締めの場面を強める。
- フッター
いちばん下の案内。行き先の一覧と、店の情報。
- トップへ戻るボタン
長いページで、先頭へすぐ戻れるボタン。
- 破線の区切り
点線の区切り。実線より控えめに分けられる。
図 商品・サービスのページの中にある、27の名前。
この構成で、AIに頼む
図と同じ順番と部品で、ページをつくってもらうための文章です。
文章を確かめる
「珈琲豆の定期便」のホームページ（トップページ）を作成してください。 ページは、上から次の順で組み立ててください。 1. お知らせバー：送料無料などの期間限定の知らせを、一文とリンクひとつで表示する。 2. ナビゲーションバー：左にロゴ、右にメニューを3〜4個と、申し込みへ進むボタンを置く。 3. ヒーローセクション：左に、小さな補足の一行（アイブロウ）、大きなキャッチコピー、短い説明文、申し込みのピル型ボタン。右に、アーチ型に切り抜いた商品の写真と、初回特典を知らせるスターバーストを置く。背景は、淡いドットグリッドにする。 4. ロゴクラウド：取り扱い店やメディアのロゴを、同じ大きさ・同じ色で横一列に並べる。 5. フィーチャーセクション：選ばれている理由を3つ、アイコン・見出し・短い説明のカードにして、3列で並べる。カードは角丸にし、薄い影を付ける。 6. テスティモニアル：利用者の声を、丸い顔写真（アバター）、星の評価、ひとことの感想で紹介する。 7. プライシングテーブル：3つのプランを横に並べ、名前・月額・内容・選ぶボタンを同じ順で見せる。おすすめのプランは枠を太くし、「いちばん人気」のバッジを付ける。 8. アコーディオン / FAQ：よくある質問を、押すと答えが開くアコーディオンで3〜5問のせる。 9. CTAセクション：読み終えた人に向けて、短い呼びかけと申し込みボタンを、グラデーションの背景の上に置く。直前の区切りとの境目は、波形にする。 10. フッター：ロゴ、リンクの一覧、コピーライトを置き、右端に、トップへ戻るボタンを付ける。 全体は、白地に1色のアクセントカラーでまとめ、余白を広くとって、申し込みボタンがどの場面でも目に入るようにしてください。 スマートフォンでも読みやすいレスポンシブ対応にし、見出し・本文・ボタンに一貫したルールを適用してください。写真は、仮の画像でかまいません。