トップページを部品で組み立てる

ツピツピのトップページは、固定ページ「ホーム」（スラッグ home）に部品を並べて作ります。部品は追加も並べ替えも自由で、使わない部品は置かなければ表示されません。

3つのエリア

固定ページには、部品を置ける場所が3つあります。

• 上部エリア（全幅）: 画面幅いっぱいに表示。メインビジュアルや強みを置くのに向いています
• メインエリア: 本文の列に表示。2カラムならサイドバーの横に並びます
• 下部エリア（全幅）: ページの最後に画面幅いっぱいで表示。CTA を置くのに向いています

部品の種類

メインビジュアル

キャッチコピー、説明文、ボタン2つ、写真を置けます。デザインは「写真を横に並べる」「背景を写真にする」「写真なし」の3つから選べます。

強み・バナー

複数の項目を並べる部品です。デザインは3つあります。

• 強み: 番号付きで横に並べる
• バナー: 画像付きのリンクカード
• スライド: 横にスクロールする

記事一覧

新着、カテゴリー別、タグ別のいずれかで記事を並べます。デザインは「カード」と「リスト」から選べます。タグ「ピックアップ」を付けた記事だけを並べれば、おすすめ記事の一覧になります。

CTA

読者にしてほしい行動へ案内するエリアです。見出し、説明文、ボタン2つを置けます。

自由入力

見出しや文章、リスト、画像を自由に書ける部品です。

AI に頼むときの例

部品の追加や並べ替えは管理画面でできますが、AI に頼むこともできます。

トップページの記事一覧の上に、「はじめての方へ」というバナーを3つ追加して

このサイトのトップページも、ここで紹介した部品だけで作っています。