Side Headerは、デスクトップで左260pxの固定サイドバーにロゴとナビを置く、モダンでスタイリッシュなサイトタイプです。制作会社、デザイナー、写真家、スタートアップなど、ブランド感と余白を大切にしたサイトに向いています。768px以下では自動的にハンバーガーメニューに切り替わり、モバイルでも使いやすさを維持します。
ライブデモハブのSide Headerデモで、スクロール挙動とモバイル表示を確認してください。
こんなサイトに最適
- クリエイティブ系ポートフォリオ・制作会社サイト
- 左ナビにソーシャルリンクやミニプロフィールを置きたい個人サイト
- トップバーよりサイドブランディングを強調したいケース
- コンテンツエリアを広く見せつつ、ナビは常に同じ位置に固定したいサイト
ライブデモで試せること
Side Headerライブデモで確認できる点：
- 左固定260pxサイドバー（ロゴ・メニュー・SNSアイコン）
- メインコンテンツエリアのワイド表示
- サイドナビのアクティブ状態・ホバー演出
- 768px以下でハンバーガーメニューに自動切替
- オーバーレイ付きモバイルドロワーの開閉
- ヒーロー・ギャラリー・テキストセクションの組み合わせ
レイアウトの特徴
Side Headerは縦軸ナビゲーションがブランドの「背骨」になります。スクロールしてもサイドバーは視界に残り、長ページでも迷いません。メインエリアはCorporateと同様のセクションを配置可能で、見た目の印象だけが大きく変わります。CSSはテーマ側でサイトタイプに応じて自動切替されるため、ユーザーはDesign Settingsでタイプを選ぶだけです。
他タイプとの違い
- Corporate / Corporate Pro：上部横ナビが標準。Side Headerは左固定
- Hero Header：透明トップバー＋全面ヒーロー。Side Headerはサイド常設
- Blog：右サイドバーはウィジェット用。Side Headerの左バーは主ナビ
設定のヒント
- デザイン設定 → サイトタイプ「Side Header」
- ロゴを正方形または縦長で用意（サイドバー幅に合わせる）
- メニュー項目は5〜7個程度に絞り、縦ナビが読みやすい長さに
- ヘッダー設定でCTAやSNSリンクを確認
- モバイル実機でハンバーガー開閉とタップ領域を必ずテスト
まとめ
個性とブランド感を出したいならSide Headerが有力候補です。ライブデモでデスクトップとモバイルの両方を試し、9タイプ一覧と見比べてください。
