---
title: "入力フォームのモックHTMLを動かしながら見せる方法"
description: "バックエンドなしのモックHTMLを共有すれば、相手に実際にフォームを触ってもらいながら入力の流れを確認できます。スクリーンショットでは伝わらない操作感をリアルタイムにレビューしてもらう方法を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/share-html-form-mockup"
markdown: "https://giga-site.com/articles/share-html-form-mockup/index.md"
category: "ハウツー"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 入力フォームのモックHTMLを動かしながら見せる方法

フォームの見た目や入力の流れを相手に確かめてもらいたいけれど、バックエンドはまだない。そんなときは送信処理のないモックHTMLをそのまま動く状態で共有するのが近道です。スクリーンショットでは伝わらない入力の挙動を、実際に触ってもらいながら確認できます。

> Source HTML: https://giga-site.com/articles/share-html-form-mockup
> Article index: https://giga-site.com/articles/index.md

## 送信先のないデモフォームでUIだけを確認してもらう

実装前のフォームは、ラベルの並びや必須項目の位置、入力欄の幅といった見た目の確認が中心になります。データを保存する仕組みがなくても、HTMLとCSSだけでレイアウトの良し悪しは十分に判断できます。

むしろ初期段階では送信処理を作り込まないほうが、相手も気軽に何度も触れます。送信ボタンを押しても何も起きない、あるいは入力内容を画面に表示するだけのダミー挙動にしておくと、誤って本番送信される心配もありません。

確認してほしいのはあくまで入力体験です。バリデーションの赤字表示やプレースホルダーの文言など、触って初めて気づく点を洗い出してもらうことを目的にしましょう。

## スクリーンショットでは伝わらない挙動を動かして見せる

ラジオボタンやチェックボックスの切り替え、入力に応じて項目が出し分けされる動き、フォーカス時の枠線の変化などは、静止画では魅力も問題点も伝わりません。動く状態で渡すと、相手は迷わず操作感を評価できます。

とくにスマートフォンでの表示は実機で触ってもらう価値が大きい部分です。タップしたときのキーボードの種類や、入力欄が画面に隠れないかといった点は、実際の端末で動かして初めて分かります。

## 最短手順：まずこの3ステップで完了

入力フォームのモックHTMLを動かしながら見せる方法は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
- 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
- 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

## 動くモックを共有URLで渡す手順

JavaScriptで簡単なダミー挙動を仕込んだHTMLを用意したら、あとは共有するだけです。次の流れで進めると確認依頼までが短くなります。

ここで大切なのは、依頼の前に自分でURLを開いて表示を確かめておくことです。手元では動いても共有先で崩れることがあるため、相手に渡す前のひと確認が無駄なやり取りを防ぎます。

1. 送信処理を持たないモックHTMLを用意し、ダミーの確認表示だけを入れる
2. 画像やCSS、JSがある場合はまとめてZIPにする
3. ギガサイト便のトップにファイルをドロップして共有URLを発行する
4. 確認だけが目的なら認証はURLのみ、社外に渡すならパスワードを設定する
5. 発行されたURLとあわせて見てほしい観点を一言添えて送る

## フィードバックを反映したら同じURLで差し替える

もらった指摘を反映するたびにリンクを送り直すのは手間です。ギガサイト便は同じURLのままファイルを差し替えられるので、修正版をアップロードし直すだけで相手は最新のモックを確認できます。

やり取りが続くフォームのUI調整では、この差し替えが効きます。チャットに貼ったURLを更新せずに済むため、過去のリンクを誤って開かれる事故も防げます。

## 公開期間と検索対策の注意点

モックは確認が終われば不要になります。公開期限を設定しておけば、期限切れで自動的に閲覧できなくなり、古い試作が残り続けるのを避けられます。無料プランでは公開期限を最長7日まで設定できます。

一時公開ページにはnoindexが付くため検索結果には出ませんが、noindexはアクセス制御ではありません。社外の特定の人だけに見せたい場合は、パスワードやメール認証を併用して見られる相手を絞ってください。

## よくある質問

### 送信ボタンを押したらどうなるようにすればいいですか。

本番送信されると困るので、何も起きないか、入力内容を画面に表示するだけのダミー挙動にしておくのが無難です。UI確認が目的なら、実際にデータを送る仕組みは不要です。

### JavaScriptで作った動的な挙動も共有先で動きますか。

はい。HTMLとCSS、JSをまとめてZIPで渡せば、ブラウザ上でそのまま動きます。切り替えや出し分けといった挙動も相手の画面で再現されるので、操作感ごと確認してもらえます。

### 確認のたびに新しいURLを送らないといけませんか。

いいえ。同じURLのままファイルを差し替えられるので、修正版をアップし直すだけで済みます。相手は同じリンクを開けば常に最新のモックを見られます。

### 社外のデザイナーに見せても安全ですか。

noindexで検索結果には出ませんが、URLを知っていれば誰でも開けます。社外に渡すならパスワードやメール認証を設定し、見られる相手を限定してください。

### 最短で進める場合でも省略しないほうがよい確認は何ですか？

不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。

## 関連記事

- [公開URLをX（Twitter）でシェアして見栄えよく見せる方法](https://giga-site.com/articles/share-on-x-twitter/index.md)
- [公開URLをFacebookでシェアする方法](https://giga-site.com/articles/share-on-facebook/index.md)
- [公開URLをLinkedInでシェアする方法](https://giga-site.com/articles/share-on-linkedin/index.md)
- [共有URLをメール署名に入れる方法と注意点](https://giga-site.com/articles/add-url-to-email-signature/index.md)
- [OGP画像を設定してSNSのサムネを整える方法](https://giga-site.com/articles/set-ogp-image/index.md)
- [共有ページにファビコンを設定する方法](https://giga-site.com/articles/set-favicon-howto/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "入力フォームのモックHTMLを動かしながら見せる方法",
  "description": "バックエンドなしのモックHTMLを共有すれば、相手に実際にフォームを触ってもらいながら入力の流れを確認できます。スクリーンショットでは伝わらない操作感をリアルタイムにレビューしてもらう方法を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/share-html-form-mockup",
  "url": "https://giga-site.com/articles/share-html-form-mockup",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "送信ボタンを押したらどうなるようにすればいいですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "本番送信されると困るので、何も起きないか、入力内容を画面に表示するだけのダミー挙動にしておくのが無難です。UI確認が目的なら、実際にデータを送る仕組みは不要です。"
      }
    },
    {
      "@type": "Question",
      "name": "JavaScriptで作った動的な挙動も共有先で動きますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。HTMLとCSS、JSをまとめてZIPで渡せば、ブラウザ上でそのまま動きます。切り替えや出し分けといった挙動も相手の画面で再現されるので、操作感ごと確認してもらえます。"
      }
    },
    {
      "@type": "Question",
      "name": "確認のたびに新しいURLを送らないといけませんか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。同じURLのままファイルを差し替えられるので、修正版をアップし直すだけで済みます。相手は同じリンクを開けば常に最新のモックを見られます。"
      }
    },
    {
      "@type": "Question",
      "name": "社外のデザイナーに見せても安全ですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "noindexで検索結果には出ませんが、URLを知っていれば誰でも開けます。社外に渡すならパスワードやメール認証を設定し、見られる相手を限定してください。"
      }
    },
    {
      "@type": "Question",
      "name": "最短で進める場合でも省略しないほうがよい確認は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。"
      }
    }
  ]
}
```