入力フォームのモックHTMLを動かしながら見せる方法

送信先のないデモフォームで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はアクセス制御ではありません。社外の特定の人だけに見せたい場合は、パスワードやメール認証を併用して見られる相手を絞ってください。