MeDo

AIヘッダージェネレーター。

ページ最上部を説明すれば、MeDoが帯全体を構築します — ロゴとブランドロックアップ、その上に置くお知らせバー（任意）、フロストガラスのブラーを伴うスティッキーなスクロール挙動、そしてCTA。ナビゲーションリンクはその内側にあり、ヘッダーはそれを囲むすべてです。

ヘッダー
ヘッダー

ヘッダーはすべてのページに存在する唯一のコンポーネント

ランディングページ、ドキュメント、チェックアウトフローの間で他の何が変わっても、ヘッダーは一定です。そのためブランドアイデンティティを担う要素であり、同時にパフォーマンスを誤ると最も高くつく場所でもあります。フォント読み込み時にずれるヘッダー、ハイドレーション前に高さを確保しないヘッダーは、1ページだけでなく訪問者が見るすべてのページでレイアウトシフトを起こします。スティッキー挙動にも同じ乗数が働きます。スクロールのたびに再描画されるブラーは、サイト全体の滑らかさを損ないます。一度生成してどこでも使うものだからこそ、ヘッダーはプロンプトで過剰に細かく指定する価値があります。

6 個のテンプレート

生成できる ヘッダー テンプレート

どのテンプレートもスクリーンショットではなく実際のプロンプトです。任意の AI エディタに貼り付けるか、MeDo で実行して React + Tailwind のコードを受け取れます。

Fixed heightAcme

Sticky Header With a Frosted Scroll State

The default worth starting from: a pinned height and a blur that only appears once you have scrolled. Specifying the height is the whole point — a header that sizes to its content shifts on every page as the webfont swaps in.

Create a sticky website header with an explicit 64px height set on the container so the space is reserved before the logo and webfonts load. Logo mark plus wordmark on the left, four navigation links in the middle, one filled Get started button on the right. Start with a solid white background and a 1px bottom border, then switch to a semi-transparent surface with a backdrop blur once the page scrolls past 80px, transitioning over 200ms. Drive the state from an IntersectionObserver watching a 1px sentinel above the header rather than a scroll listener, so nothing runs on the scroll thread. Below 768px, replace the links with a hamburger that opens a drawer.

MeDoで試す
Announcement barMega

Promo Bar Above a Sticky Row

Two stacked strips where only the lower one stays pinned. The trap is the sticky offset: dismiss the bar without recomputing it and the header floats 36px below the viewport top for the rest of the session.

Create a two-part header: a dismissible 36px announcement bar on an accent background with a short promo line, an inline link and a close button, and beneath it a 64px main row with logo, links and a CTA. Only the main row is sticky. Persist the dismissal in localStorage so the bar does not return on the next page, and recompute the sticky top offset when it is removed so the main row still pins flush to the viewport top. Render the bar server-side and hide it with a class rather than mounting it after hydration, so dismissing it never causes a visible reflow of the page below.

MeDoで試す
TransparentShipfast

Transparent Over Hero, Solid on Scroll

For landing pages with a full-bleed hero behind the header. Everything that depends on the background — logo variant, link color, border, button style — has to flip in one state change, not four.

Create a header that overlays a full-bleed hero image: fully transparent with no border at the top of the page, with a light logo variant and white links. Once the page scrolls past the hero height, switch in a single state change to a solid white surface, a dark logo variant, dark links and a 1px bottom border, transitioning over 200ms. Keep the header height fixed at 72px in both states so the switch does not move the links. Add a scroll-margin-top equal to the header height on all headings so in-page anchors do not land behind the bar.

MeDoで試す
Two-rowShop

Utility Row Over a Sticky Search Row

A storefront header where the top row scrolls away and the search row stays. Pinning both eats 100px of a phone viewport, which is most of a product image.

Create a two-row e-commerce header. The top row, 32px tall, carries a free-shipping message on the left and Track order, Help and account links on the right, and scrolls away with the page. The bottom row, 64px tall, holds the logo, a wide search input, a wishlist icon and a cart button with a count badge, and is the only row that stays sticky. Announce cart count changes through an aria-live="polite" region. Below 768px, collapse the top row entirely, keep logo, search icon and cart in the sticky row, and open search as a full-width overlay when the icon is tapped.

MeDoで試す
App shellDocs

Fixed Header With a Sidebar Toggle

A docs header that has to coordinate with a sidebar below it. Reserve the toggle button's space at every breakpoint, otherwise the logo jumps sideways when the button appears at the tablet threshold.

Create a fixed 56px documentation header: a sidebar toggle button on the far left that is only interactive below 1024px but keeps its 40px slot reserved at every breakpoint so the logo never shifts, then the logo, a version switcher, a search button with a Command-K hint, a theme toggle and a GitHub link. Because the header is fixed rather than sticky, add matching top padding to the page body and set scroll-margin-top on every heading so deep links from search land below the bar. Give the toggle aria-expanded and aria-controls pointing at the sidebar element.

MeDoで試す
StaticStudio

Oversized Wordmark, No Sticky

Not everything needs to be pinned. A tall static header that scrolls away gives an agency site its full viewport back, and removes the scroll listener along with it.

Create a static header for a design studio that scrolls away with the page rather than sticking: 120px tall, with an oversized lowercase wordmark on the left, a one-line location and availability note beneath it, and four right-aligned links in a light weight with wide letter spacing. No border, no background change, no scroll listener at all. Below 640px, reduce the height to 80px, keep the wordmark, and move the four links into a full-screen overlay opened by a text Menu button — labelled Menu rather than a hamburger icon, and closing on Escape with focus returned to the button.

MeDoで試す

ヘッダー をカスタマイズする方法

スタイルを整える前に高さを固定する

ヘッダーの高さを明示的に指定してください。たった1行のコストで、ロゴとWebフォントの読み込み時に全ページで起きるレイアウトシフトを取り除けます。これはヘッダーに起因するCore Web Vitalsの最も一般的な劣化要因です。

スクロール状態をスロットリングする

生のスクロールリスナーで切り替わるbackdrop blurは毎秒何十回も再描画されます。スクロールハンドラーをrequestAnimationFrameでスロットリングする、またはIntersectionObserverのセンチネルで駆動すると指定して、ミドルレンジ端末でもスクロールを滑らかに保ちましょう。

お知らせバーもヘッダーの一部として扱う

メイン行の上にプロモーション帯を置きたい場合は、同じプロンプト内で説明してスティッキーのオフセットに高さが織り込まれるようにしてください。後付けにすると、コンテンツを覆うか、閉じた後に高さを二重に数えてしまいます。

ブランドロックアップを正確に指定する

マークのみか、マークとワードマークの組み合わせか、小さい画面ではマークだけに縮退するワードマークか — どれが欲しいかを伝えてください。ヘッダーは全ページに存在する唯一のコンポーネントなので、ブランドの一貫性はここで守られるか失われます。

ヘッダー コンポーネントを使うのは誰か

SaaS製品サイト

固定高さ64pxの白いヘッダー。スクロールするとフロストブラーがかかり、その上にはキャンペーン期間中ローンチプロモを流す、閉じられるお知らせバーが並びます。

ECサイト

上段に送料無料バナーとアカウントリンク、下段に検索とカートを配置した2段ヘッダー。買い物客がスクロールしても下段だけがスティッキーに残ります。

マーケティングまたはランディングページ

全幅ヒーロー画像の上に重なる透明ヘッダーが、スクロールで不透明な背景へ遷移し、同じブレークポイントでロゴがライトからダークのバリアントに切り替わります。

開発者ドキュメントサイト

バージョン切り替えと検索トリガーを備えた固定ヘッダー。タブレットのブレークポイント以下で現れるサイドバートグルは自前の領域を確保するため、ドキュメント本文は決してリフローしません。

サイト種別ごとの ヘッダー パターン

同じ ヘッダー コンポーネントを、掲載するサイトの種類に合わせて調整します。

01 / 06

SaaS Product Header

One fixed-height sticky strip with a brand lockup, links and a single CTA. Because it renders on every route, any layout shift here is multiplied across your whole Core Web Vitals field data rather than isolated to the landing page.

ヘッダー のスタイルとバリアント

ページ全体のトーンに合うバリアントを選び、そのまま生成します。

01 / 06

Fixed-Height Sticky Header

An explicit height on the container, pinned to the top. The height is not a styling detail — without it the strip resizes as the logo and webfonts resolve, and that shift lands on every page a visitor opens.

React・Next.js・Vue・Svelte での ヘッダー

React、Next.js、Vue 3、SvelteKit、Astro、素の HTML — 同じ ヘッダー を 6 通りの方法で組み込めます。

01 / 06

React Header

Keep the scroll state in the header itself with an IntersectionObserver on a sentinel div, not a scroll listener. Render it once above your router outlet so the observer is created once per session.

src/components/Header.tsx

export function Header() {
  const [pinned, setPinned] = useState(false)
  const ref = useRef(null)

  useEffect(() => {
    const io = new IntersectionObserver(
      ([e]) => setPinned(!e.isIntersecting)
    )
    io.observe(ref.current)
    return () => io.disconnect()
  }, [])

  return <header className={pinned ? 'backdrop-blur' : ''} />
}

ヘッダー をプロジェクトに追加する方法

ヘッダー テンプレートを選んで本番に載せるまでの 4 ステップ。

01~30s

Pick a Header Template

Decide two things first: does the strip stay pinned, and is there an announcement bar. Those choices drive the sticky offset and the scroll state, and they are the awkward ones to retrofit.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Keep the explicit pixel height and the sentinel-based scroll state in the text — those two sentences are what stop the header shifting and repainting on every page.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "make the blur stronger", "persist the dismissed announcement bar", "flip the logo variant on scroll".

04~2min

Mount It in Your Layout

Put the header above {children} in your root layout. If it is fixed rather than sticky, add matching top padding to the body and scroll-margin-top to your headings so anchor links do not land underneath it.

ヘッダーに関するよくある質問

AIヘッダージェネレーターとは？

AIヘッダージェネレーターは、ウェブサイトの自然言語での説明を受け取り、完全でスタイリングされたヘッダーコンポーネントのHTML、CSS、JavaScriptを自動生成するツールです。ゼロからレイアウトコードを書く代わりに、欲しいものを説明するだけで動作するコードが返ってきます。

AIでウェブサイトヘッダーを作るには？

MeDoを開き、「デザインエージェンシー向けのスティッキーヘッダーを作成。左にロゴ、作品・会社概要・お問い合わせのリンク、右に「相談する」ボタン」のようなプロンプトを入力すると、MeDoが完全なコンポーネントを生成します。その後コードをコピーするか、フォローアッププロンプトで編集を続けられます。

AIでレスポンシブヘッダーを生成できますか？

はい。MeDoはデフォルトでモバイルファーストのヘッダーを生成します。気になるブレークポイントやデバイスを指定 — 「768px以下でハンバーガーメニューに折りたたむ」— すれば、レスポンシブロジックを処理します。

ヘッダーとナビバーの違いは何ですか？

ヘッダーは全ページ最上部の全幅の帯です。ブランドロックアップ、任意のお知らせバー、スティッキーおよびスクロール時の挙動、そしてすべてを収めるコンテナを含みます。ナビバーはその中にあるナビゲーションリンクです。サイト全体でページ上部がどう見えどう振る舞うかが気になるならヘッダーを作ってください。関心が実際にはリンク構成、ドロップダウン、モバイルメニューにあるなら、AIナビバージェネレーターをご覧ください。

ヘッダーがレイアウトシフトを起こさないようにするには？

プロンプトでヘッダーに明示的な高さを与え、フォントとロゴが読み込まれる前にブラウザが領域を確保できるようにします。お知らせバーがある場合もその分の領域を確保し、ハイドレーション後にコンテンツを押し下げないようにします。ヘッダーがstickyではなくfixedなら、ページ本文に同じ高さのトップパディングを加えてください。MeDoに固定のヘッダー高さを依頼すれば、両方を適用します。

ウェブサイトヘッダー生成に最適なAIツールは？

MeDoはヘッダーを含む個別のウェブサイトコンポーネントをプロンプトから生成するために特化して構築されています。汎用AIチャットツールとは異なり、MeDoはコンポーネント構造、アクセシビリティ要件、実世界のUXパターンを理解しているため、シニアフロントエンド開発者が出すものに近い結果が得られます。

ヘッダーを今すぐ生成。

プロンプトを試す — 無料、登録不要。

無料で構築開始料金を見る
ナビバー

ナビバー

サイトを説明して完全レスポンシブなナビバーを取得 — ロゴ、ナビリンク、ドロップダウンメニュー、モバイルハンバーガーメニュー付き — 1つのプロンプトから生成。テンプレート不要、調整不要。

関連コンポーネント
ヒーローセクション

ヒーローセクション

何を作っているか一文で書くだけで、完全なアバブ・ザ・フォールド・ヒーロー — 見出し、サブ見出し、コールトゥアクション、レイアウト — がすぐに完成します。

関連コンポーネント
パンくずリスト

パンくずリスト

プロンプトを入力するだけで、完全にスタイリングされたパンくずナビゲーションコンポーネントを数秒で取得。MeDoはサイト構造を理解し、クリーンでアクセシブルなパスマークアップを生成 — どのページにもすぐに組み込めます。

関連コンポーネント