GODRICH

HUD デザインとは？画面に見つめ返される9パーツ

· Godrich · 9種 · 7分で読める

デザイントレンドページテンプレートCSSのみLPヒーローCTAボタン

HUD デザインとは、ゲームやSF映画の照準器やレーダーのように、座標や状態の数値を画面に重ねて表示し、まるで自分が見つめ返されているような印象を与えるインターフェース手法です。

まずは下のワンページを実際にスクロールしてみてください。上部のナビゲーションから一番下のターミナル風フッターまで、4隅のブラケットとスキャンラインが画面全体で同じリズムで動いているかどうかが、このスタイルが成立しているかの判断基準です。

ページを新しいタブで開く

このワンページを作っている9個の部品は、下の格子でそれぞれ単独でも開けます。並び順は、訪問者が実際にページをたどる流れ(最初に目を引かれる、メニューを確認する、機能をざっと見る、進行ログを見る、料金を比べる、レビューで信頼する、もう一押しされる、登録する、フッターで締めくくる)そのままです。

01 hero-hud 02 nav-hud 03 card-grid-hud 04 feature-list-hud 05 pricing-hud 06 testimonial-hud 07 cta-band-hud 08 footer-hud 09 buttons-inputs-hud

自動再生 · タイルを押すとその項目へ · すべて1つのzip

01ロックオンヒーロー

見出しカードを囲む4つの角ブラケットが0.15秒ずつずれたタイミングで内側へ狭まるように脈打ち、背後ではスキャンラインが上から下へ一度だけ流れます。SaaSランディングの最初の画面や新製品発表のカバーなど、「この画面が自分を認識している」という第一印象を作りたい場所に向いています。

브래킷 락온스캔라인 스윕모노스페이스 리드아웃
<div class="relative w-full max-w-md overflow-hidden rounded-control bg-ink px-6 py-8 shadow-glow">
  <span class="corner corner-tl" aria-hidden="true"></span>
  <span class="corner corner-tr" aria-hidden="true"></span>
  <span class="corner corner-bl" aria-hidden="true"></span>
  <span class="corner corner-br" aria-hidden="true"></span>
  <div class="scan-sweep absolute inset-0 pointer-events-none" aria-hidden="true"></div>
  <p class="mb-3 flex items-center gap-2 text-[11px] font-bold uppercase tracking-widest text-accent">
    <span class="blink-dot inline-block h-1.5 w-1.5 rounded-full bg-accent"></span>SENTRY / ONLINE
  </p>
  <h1 class="mb-2 text-2xl font-bold leading-tight">見逃す瞬間なく、見守るダッシュボード</h1>
  <p class="mb-4 text-sm text-cream/60">リアルタイムで検知し、記録します。</p>
  <button class="rounded-control border border-accent bg-accent/10 px-5 py-2 text-sm font-bold text-accent">無料で始める</button>
</div>

02ステータスバーナビ

ナビ全体がHUDのステータスバーのようにブラケットで囲まれ、アクティブなタブの下の線がスキャンするようにタブの間を滑って移動します。LP上部バーやダッシュボードナビのように、ブランド名・メニュー・状態表示を1行に同居させたい場所で使います。

스캔 밑줄 이동브래킷 프레임깜빡이는 상태 점
<nav class="relative flex items-center gap-4 rounded-control bg-ink/95 px-3 py-2 shadow-glow" aria-label="SENTRY">
  <span class="shrink-0 whitespace-nowrap pl-2 font-extrabold text-sm">SENTRY</span>
  <div class="relative flex min-w-0 flex-1 items-stretch">
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">ホーム</span>
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">機能</span>
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">料金</span>
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">お問い合わせ</span>
    <span class="nav-indicator absolute bottom-0 left-0 h-[2px] w-1/4 bg-accent"></span>
  </div>
  <span class="shrink-0 whitespace-nowrap flex items-center gap-1 pr-2 text-[10px] font-bold tracking-widest text-accent">
    <span class="blink-dot inline-block h-1.5 w-1.5 rounded-full bg-accent"></span>LIVE
  </span>
</nav>

03ターゲット認識カード

グリッドの各カードにカメラのビューファインダーのようなブラケット枠が付き、スキャンラインがカードを順番に一枚ずつ走査し、右上の座標表示も一緒に動きます。機能紹介グリッドやポートフォリオカードのように、同じ形のカードが何枚も並ぶ場所に向いています。

뷰파인더 브래킷순차 스캔좌표 리드아웃
<div class="relative overflow-hidden rounded-card bg-ink p-4 shadow-glow">
  <span class="corner corner-sm corner-tl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-tr" aria-hidden="true"></span>
  <span class="corner corner-sm corner-bl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-br" aria-hidden="true"></span>
  <div class="scan-sweep absolute inset-0 pointer-events-none" style="animation-delay:-.5s"></div>
  <span class="relative mb-2 block text-right text-[10px] font-bold text-data/85">#A1</span>
  <span class="relative mb-3 block h-5 w-5 rounded border border-accent bg-accent/20"></span>
  <p class="relative text-sm font-bold">追跡</p>
</div>

04システムログリスト

リストの各行にタイムスタンプが付き、明るいスキャンバーが上から下へ一行ずつ走査してOK表示を残していきます。機能一覧やオンボーディングのチェックリストのように、確認作業が順番に終わっていく感覚を伝えたい場所に使います。

세로 스캔타임스탬프순차 체크
<ul class="flex flex-col gap-1">
  <li class="row-scan flex items-center gap-3 rounded px-3 py-2">
    <span class="flex-none text-[10px] font-bold text-accent/70">00:01</span>
    <span class="min-w-0 flex-1 text-sm font-semibold">ユーザー認証を確認</span>
    <span class="flex-none text-[10px] font-bold text-accent">OK</span>
  </li>
  <li class="row-scan flex items-center gap-3 rounded px-3 py-2" style="animation-delay:-.5s">
    <span class="flex-none text-[10px] font-bold text-accent/70">00:02</span>
    <span class="min-w-0 flex-1 text-sm font-semibold">位置データを同期</span>
    <span class="flex-none text-[10px] font-bold text-accent">OK</span>
  </li>
</ul>
<p class="mt-3 text-[10px] text-accent/70">READY <span class="blink-dot inline-block h-2.5 w-1.5 bg-accent"></span></p>

05ロック対象プラン

おすすめプランのカードだけブラケットが呼吸するように脈打ってLOCKEDバッジが付き、もう一方のカードは不透明度を下げてピントが外れたように後ろへ下がります。2段階の料金プランや無料・有料比較のように、どちらを推しているか一目で伝えたいときに使います。

브래킷 맥동LOCKED 배지디포커스
<div class="glow-breathe relative flex-1 basis-40 rounded-card bg-ink p-5 shadow-glow">
  <span class="corner corner-sm corner-tl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-tr" aria-hidden="true"></span>
  <span class="corner corner-sm corner-bl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-br" aria-hidden="true"></span>
  <span class="mb-2 inline-block rounded bg-accent/15 px-2 py-1 text-[10px] font-bold tracking-widest text-accent">LOCKED</span>
  <p class="mb-1 text-base font-bold">プロ</p>
  <p class="mb-3 text-xs text-cream/60">月1,200円</p>
  <ul class="flex flex-col gap-1 text-xs text-cream/75">
    <li>リアルタイム追跡</li>
    <li>チャンネル無制限</li>
  </ul>
</div>

06顔認識風レビュー

アバターの上を顔認識ボックスが一度だけ走査し、引用カードはVERIFIEDタグとブラケット枠をまといます。顧客の声やパートナーの引用のように、「これは確認済みの人の発言だ」という信頼感を視覚的に添えたいときに使います。

원샷 스캔VERIFIED 태그브래킷 프레임
<div class="flex flex-wrap items-center gap-4">
  <div class="relative h-16 w-16 flex-none overflow-hidden rounded-control bg-ink">
    <span class="face-scan absolute left-0 top-0 h-[3px] w-full bg-accent/85"></span>
  </div>
  <div class="relative min-w-[220px] flex-1 rounded-card bg-ink p-4 shadow-glow">
    <span class="corner corner-sm corner-tl" aria-hidden="true"></span>
    <span class="corner corner-sm corner-tr" aria-hidden="true"></span>
    <span class="mb-2 inline-block text-[10px] font-bold tracking-widest text-accent">VERIFIED</span>
    <blockquote class="mb-2 text-sm font-semibold leading-relaxed">見逃しがないので安心です。</blockquote>
    <p class="text-xs text-cream/60">イ・ドユン · セキュリティチームマネージャー</p>
  </div>
</div>

07アラート帯

画面幅いっぱいの帯の上を斜めのスキャンラインがゆっくり流れ、角のブラケットが脈打ち、ボタンは2秒に一度だけ短いグリッチで揺れます。登録誘導帯や無料トライアル開始のように、ページの途中でもう一押ししたい場所に向いています。

대각 스캔 드리프트브래킷 맥동글리치 호버
<div class="relative overflow-hidden rounded-card bg-ink px-8 py-12 shadow-glow">
  <span class="corner corner-tl" aria-hidden="true"></span>
  <span class="corner corner-tr" aria-hidden="true"></span>
  <span class="corner corner-bl" aria-hidden="true"></span>
  <span class="corner corner-br" aria-hidden="true"></span>
  <div class="scan-diag absolute inset-0 pointer-events-none"></div>
  <p class="mb-2 text-[11px] font-bold uppercase tracking-widest text-accent">ALERT</p>
  <h2 class="mb-5 max-w-2xl text-2xl font-bold leading-snug sm:text-3xl">今すぐ監視網をオンにしましょう</h2>
  <button class="glitch-btn rounded-control border border-accent bg-accent/10 px-6 py-3 text-sm font-bold text-accent">無料トライアルを始める</button>
</div>

08ターミナルフッター

インク色の背景の上でうっすらしたノイズがフレームごとに位置を変えて点滅し、リンクの区画はデータ表示のように整理され、上端の角にブラケットが残ります。マルチカラムフッターやサイトマップ整理のように、リンクが多い下部領域のトーンを揃えたいときに使います。

노이즈 플리커브래킷 코너모노스페이스 링크
<footer class="relative overflow-hidden rounded-t-card bg-ink px-6 pt-8 pb-6 shadow-glow">
  <span class="corner corner-tl" aria-hidden="true"></span>
  <span class="corner corner-tr" aria-hidden="true"></span>
  <div class="noise-flicker absolute inset-0 pointer-events-none"></div>
  <div class="relative grid grid-cols-1 gap-6 sm:grid-cols-3">
    <div class="min-w-0">
      <p class="mb-2 text-[10px] font-bold uppercase tracking-widest text-accent">SYSTEM</p>
      <ul class="flex flex-col gap-1 text-xs text-cream/70">
        <li>ダッシュボード</li>
        <li>通知設定</li>
      </ul>
    </div>
  </div>
  <p class="relative mt-6 border-t border-accent/20 pt-3 text-[10px] text-cream/40">SENTRY © 2026</p>
</footer>

09ロックオンボタン・スキャン入力欄

ボタンを押すと4つの角のブラケットが内側にスナップしてロックし、入力欄はフォーカスするとスキャンするように広がる琥珀色のグローが下線に現れます。フォーム送信ボタンやメール入力欄のように、訪問者の最後の1クリックにしっかりした手応えを返したい場所で使います。

브래킷 스냅스캔 포커스 글로우깜빡이는 캐럿
<form class="mx-auto flex max-w-md flex-col gap-3 rounded-card bg-ink p-6 shadow-glow sm:flex-row">
  <label class="field-glow relative flex-1 rounded-control bg-ink">
    <input class="w-full rounded-control bg-transparent px-4 py-3 text-sm text-cream outline-none" type="email" placeholder="メールアドレス">
  </label>
  <button class="btn-snap relative rounded-control border border-accent bg-accent/10 px-5 py-3 text-sm font-bold text-accent">
    <span class="snap-corner snap-tl" aria-hidden="true"></span>
    <span class="snap-corner snap-tr" aria-hidden="true"></span>
    <span class="snap-corner snap-bl" aria-hidden="true"></span>
    <span class="snap-corner snap-br" aria-hidden="true"></span>
    登録する
  </button>
</form>

tailwind.config カスタム

上の部品9個とワンページは、色・書体・角丸・影の値をすべてこの設定ひとつだけから読み込んでいます。ここの数値を書き換えるだけで、ブラケットの色からカードの角まで画面全体が一度に変わります。

theme: {
  extend: {
    colors: {
      ink: "#17141a",
      cream: "#fff7e6",
      accent: "#ffd23f",
      data: "#2f6df6",
      line: "rgba(255,210,63,.12)",
    },
    fontFamily: {
      display: ["'Space Grotesk'", "system-ui", "sans-serif"],
      body: ["'Inter'", "system-ui", "sans-serif"],
    },
    borderRadius: { control: "12px", card: "16px", pill: "999px" },
    boxShadow: {
      glow: "0 0 0 1px rgba(255,210,63,.4), 0 0 24px rgba(255,210,63,.16)",
      "glow-strong": "0 0 0 1px rgba(255,210,63,.6), 0 0 32px rgba(255,210,63,.4)",
    },
    spacing: { gutter: "16px" },
  },
},

働いている色は実質2つだけです。accent(#ffd23f)の琥珀色がブラケット・状態ドット・ボタンをすべて担当し、data(#2f6df6)の青は座標やID番号のように「これは数値だ」と区別したい場所だけの例外として使います。

バイブコーディング プロンプト

この設定を先にプロジェクトへ入れておけば、Claude CodeやCursorに渡す指示は下の一段落で足ります。ルールまで細かく書いた全文はzip内のprompt.mdに入っています。

背景はink(#17141a)ひとつ、強調はaccent(#ffd23f)の琥珀色ひとつ。カード・ヘッダー・
CTAの角にはすべてL字ブラケットを置き、accent色でうっすら脈打たせる。モノスペース
書体は座標・タイムスタンプ・状態テキストだけに使い、本文の書体はそのままにする。
角丸はrounded-card・rounded-pill・rounded-controlの3種類だけを使う。

この指示をそのままpage/index.htmlに適用し、1280px幅のビューポートでページ全体をキャプチャしました。

結果

どこで壊れるか — 落とし穴

いちばん多い落とし穴は、大きな見出しにmax-widthをかけたまま複数の画面幅を確認しないことです。この記事の07番アラート帯も最初は見出しにmax-w-sm(384px)がかかっていて、見出しの文字がわずか数文字だけ次の行に取り残される不自然な折り返しが起きていました。しかも1280pxのデスクトップのように画面が広くても同じ崩れ方をしていて、原因はビューポート幅ではなくmax-widthの値そのものだったため、狭い画面だけ確認しても見つけられません。max-w-2xlに変えてようやく1280・768・375pxの3幅とも自然に収まりました。パスワードt2nt5x9vのzipには、この折り返しを直したあとのpage/index.htmlがそのまま入っています。

二つ目の落とし穴は06番の顔認識風レビューです。スキャンボックスが下がる距離(61px)は、アバターの高さ(64px)からボックスの太さを引いた値を固定pxで書き込んだものなので、アバターの大きさを変えるとこの数値も手で計算し直す必要があります。三つ目は03番のカードグリッドのように、走査の順番をnth-childの遅延値で決めている項目です。カードの枚数を4枚から増減させるとanimation-delayの並びも手で合わせ直さないと、走査がカードの途中で重なったり順番が飛んだりします。

アクセシビリティ

9個のデモはすべてMDNが定義するprefers-reduced-motionのメディアクエリを漏れなく入れており、動きを減らす設定をオンにした訪問者の画面には、スキャンやグリッチや脈動の代わりに「すでにロックされた」静止状態(ブラケットは等倍サイズ、ドットとカーソルは常に点灯)だけが残ります。ブラケット・スキャンライン・ノイズの層はすべてaria-hidden="true"で装飾であることを明示し、LOCKED・VERIFIED・LIVEといった状態は色だけでなく文字そのもので伝わるので、色覚特性のある訪問者にも状態が読み取れます。

監視カメラ風以外のデザイントレンドが気になる方はデザイントレンドカテゴリーにまとめてあり、各部品がどんな基準で公開されているかは紹介ページに書いています。

FAQ

実在するゲームやSF映画のHUDをそのまま真似たのですか?

いいえ。この記事の部品は特定のゲーム・映画・サービスの画面を複製したものではなく、ブラケットロックオン・スキャンライン・モノスペースの数値表示といった、監視カメラ的な視覚表現の型だけを参考にしています。サービス名のSENTRYも架空の例として作ったものです。

この暗いトーンを明るい(ライトモードの)サイトにも使えますか?

部分的には可能ですが、あまりおすすめしません。HUD・ターミナルらしさは暗い背景の上でブラケットとスキャンラインが浮き上がることで成り立っており、背景を明るくすると同じコントラストを出すためにaccent色をより濃く使う必要が出てきて、警告やエラーのトーンに近く見えてしまいがちです。

Tailwindなしの素のCSSでも使えますか?

使えます。zipに同梱したtokens.cssがtailwind.config.jsと同じ値を--color-inkや--color-accentのようなCSS変数として書き出したファイルなので、これ1枚を読み込むだけでTailwindがないプロジェクトでもvar(--color-accent)で同じ琥珀色を再現できます。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。