SaaS ヘッダー（無料トライアル）
SaaS や Web サービスのトップでよく見る、 ロゴ・ナビ・2つの CTA を一列に並べたヘッダーです。左にロゴ、中央寄りにメニュー、右端に「ログイン」と「無料で試す」を配置し、 margin-left:auto でメニュー以降を右へ押し出して自然な間隔を作っています。
このパーツの使いどころと実装ポイント
SaaS や Web サービスのトップでよく見る、ロゴ・ナビ・2つの CTAを一列に並べたヘッダーです。左にロゴ、中央寄りにメニュー、右端に「ログイン」と「無料で試す」を配置し、margin-left:auto でメニュー以降を右へ押し出して自然な間隔を作っています。新規ユーザーの登録と既存ユーザーのログインを、同じ行で迷わせず案内できる構成です。
向いている場面
クラウドツール、業務 SaaS、サブスク型サービスなど、無料トライアルへの誘導が成果に直結するサイトに最適です。製品・料金・導入事例・ブログといった検討段階別のリンクを並べると、ユーザーが情報を集めながら最後に CTA へ進む流れを作れます。
カスタマイズの勘所
- 主役の「無料で試す」は塗りボタン、「ログイン」は控えめなテキスト系にして優先度に差をつけます
- CTA の文言は動作が伝わる言葉（無料で試す・今すぐ始める等）に。矢印は付けすぎないこと
- ロゴ色とボタン色を同系統で揃えるとブランドの一貫感が出ます
狭い画面ではナビと CTA が収まらないため、ハンバーガー開閉でメニューをまとめ、CTA だけは押しやすい位置に残すと取りこぼしを防げます。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
ボタンを2つ並べると目立ちすぎませんか？
役割を分けるのが要点です。主役のトライアルだけ塗りつぶしの目立つボタンにし、ログインは枠線なしのテキストリンクに近い見た目にすると、視線が一点に集まり過剰になりません。色の彩度と太さで優先度の差をつけてください。
スマートフォンでは2つの CTA をどう扱えばよいですか？
ナビ項目はハンバーガーメニューに格納し、最も重要な無料トライアルのボタンだけはヘッダー上に残す方法が一般的です。ログインはメニュー内へ移しても問題ありません。最重要の行動を画面上で常に押せる状態に保つのがコツです。