CTA一体型フッター
CTA一体型フッターは、ページ最下部に 行動を促すブロック（CTA） と ナビ・著作権表記 を一つにまとめた構成です。このパーツでは上段に「無料相談」へ誘う見出しとボタンを置き、その下を細い区切り線で分けてから社名・サイト内リンク・ © 表記を横並びにしています。
このパーツの使いどころと実装ポイント
CTA一体型フッターは、ページ最下部に行動を促すブロック（CTA）とナビ・著作権表記を一つにまとめた構成です。このパーツでは上段に「無料相談」へ誘う見出しとボタンを置き、その下を細い区切り線で分けてから社名・サイト内リンク・©表記を横並びにしています。ユーザーが本文を読み終えた直後に次の一歩を提示できるため、問い合わせ導線として機能します。
向いている場面
コーポレートサイトやサービス紹介ページ、士業・制作会社など「相談から始まる業種」の下部に向きます。資料請求や見積もり依頼など、ページ末尾でひと押ししたいケースで効果的です。
カスタマイズと注意点
下段はflexとflex-wrapで組んでいるため、リンクが増えても折り返して崩れません。ボタンの色（#667eea）を自社ブランド色に変えるだけで印象が変わります。<a>には必ず実際のリンク先を指定し、ボタンであることが伝わる文言にしてください。背景が濃色なので文字とのコントラスト比を確保し、リンクのホバー状態も用意すると操作性が上がります。
よくある質問
CTAとナビを分けず一つのフッターにまとめる利点は何ですか
ユーザーが本文を読み終えた直後に、問い合わせなどの行動と、サイト内の他ページへの移動を同じ場所で提示できる点です。導線が一画面に収まるため、離脱直前のひと押しがしやすくなります。
ボタンのリンク先はどこに指定しますか
上段の無料相談ボタンであるaタグのhref属性に、問い合わせフォームや相談ページのURLを入れます。サンプルではhrefが空なので、公開前に必ず実際の遷移先を設定してください。