採用 CTA バンド
採用ページへ誘導する横長のCTAバンドです。濃紺（ #0f1b3d ）の角丸ボックスを背景に、左側へ小さな英字ラベルと見出し、右側へ白い丸ボタンを置き、 flex と justify-content:space-between で左右に振り分けています。
このパーツの使いどころと実装ポイント
採用ページへ誘導する横長のCTAバンドです。濃紺（#0f1b3d）の角丸ボックスを背景に、左側へ小さな英字ラベルと見出し、右側へ白い丸ボタンを置き、flexとjustify-content:space-betweenで左右に振り分けています。色のコントラストが強いので、ページの中で視線を引きつけやすく、行動を促す出口として機能します。flex-wrapが効いているため、狭い画面では見出しとボタンが自然に縦積みへ切り替わります。
向いている場面
- 会社紹介ページの末尾に置く「採用情報はこちら」への導線
- 記事下や事業紹介の後の応募・問い合わせ誘導
- イベント参加や資料請求など、1アクションに絞った締めくくり
カスタマイズの勘所
ボタンのリンク先を実際の採用ページや応募フォームに設定してください。見出しは「何を募集しているか」が一目で伝わる短文にすると効果的です。背景色を明るくする場合は、ボタンや文字が埋もれないよう明度差を保ちます。ボタンのラベルは動詞で終える形にすると、押す行動がイメージしやすくなります。
よくある質問
ボタンとテキストが狭い画面で重なりませんか？
flex-wrapが指定されているため、画面が狭くなると見出しとボタンは自動的に縦に並び替わります。重なる心配はありませんが、縦積みになった際の余白が詰まりすぎないよう、間隔を確認しておくと安心です。
CTAバンドは1ページに複数置いてもよいですか？
強い誘導要素なので、基本は1ページに1つ、最も自然な位置に置くのが効果的です。複数置くと印象が分散し、かえって反応が鈍ることがあります。長いページではページ末尾の1か所にまとめるのがおすすめです。