ワイヤーフレームHTMLを共有する方法

ワイヤーフレームを画像でなくHTMLで渡す利点

ワイヤーフレームを画像やPDFで渡すと、要素の位置関係は伝わっても、クリックでどこに飛ぶか、画面幅が変わったときにどう折り返すかといった動きは伝えられません。HTMLで作ったワイヤーをそのまま見てもらえば、クライアントは実際の操作感に近い形で全体像をつかめます。

とくに複数ページにまたがる導線の確認では、リンクをたどって行き来できることが重要です。静的なHTMLとCSSだけで組んだワイヤーフレームなら、サーバー環境を用意しなくてもブラウザだけで動くので、確認用に手早く渡せます。

完成デザインではなく構造の合意を取る段階だからこそ、色や装飾を削ぎ落としたワイヤーをそのまま動く形で見せ、認識のずれを早めに潰しておくことが手戻りの防止につながります。

クライアント確認で気をつけたい公開範囲

ワイヤーフレームには、まだ世に出していないサービス名や新機能の構想が含まれることがあります。誰でも開けるURLで渡すと、検索からたどり着いた第三者に設計意図が見えてしまうおそれがあります。

一時公開ページにはnoindexが付いて検索結果には出ませんが、noindexはあくまで検索除けでありアクセス制御ではありません。関係者以外に見せたくないワイヤーには、パスワードやメール認証を併用して閲覧できる人を絞るのが安全です。

クライアントの担当者が複数いて社内で回覧する場合は、口頭で伝えやすいパスワード方式が扱いやすく、より厳密に絞りたいなら相手の会社ドメインに限定するメール認証や会社ドメイン認証も選べます。

共有前チェックリスト

ワイヤーフレームHTMLを共有は、共有する中身によって確認観点が変わります。見た目、操作、個人情報、外部送信、スマホ表示のどれが重要かを先に決めてからURL化します。

チェックリスト化しておくと、毎回同じ品質で共有できます。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 見た目: PC/スマホ、余白、画像、フォント、折り返しを確認する
• 操作: ボタン、リンク、フォーム、遷移先を確認する
• 情報: 顧客名、社内URL、価格、未公開文言が残っていないか見る
• 共有: 認証、期限、差し替え、レビュー依頼文をセットで決める

ワイヤーフレームHTMLをパスワード付きで共有する手順

ギガサイト便なら、トップページにワイヤーフレームのHTMLファイル、またはCSSや画像を含むZIPをドロップするだけで、その場で共有URLが発行されます。会員登録なしでも公開でき、認証方式やパスワードはあとから設定できます。

1. ワイヤーフレームのHTMLを単体ファイル、または関連ファイルをまとめたZIPで用意する
2. ギガサイト便のトップページにそのファイルをドロップする
3. 認証方式でパスワードを選び、クライアントに伝える合言葉を設定する
4. 発行された〇〇.giga-site.com形式のURLを受け取る
5. 確認期間に合わせて公開期限を設定する
6. URLとパスワードを別々の手段でクライアントに送る

修正のたびにリンクを送り直さない運用

ワイヤーフレームは一発で確定することは少なく、フィードバックを受けて何度も直します。リンクを送り直すたびに、クライアントが古いURLを開いてしまう混乱が起きがちです。

ギガサイト便は同じURLのままファイルを差し替えられるので、修正版をアップロードし直すだけで最新のワイヤーが同じリンクで開けます。「先ほどのURLを更新しました」と一言添えるだけで済み、版の取り違えを防げます。

誰がいつ見たかを把握して進行を読む

アクセスログに対応しているため、クライアントがワイヤーフレームを開いたかどうかを確認できます。返信が来ない理由が「まだ見ていない」のか「見たうえで検討中」なのかを切り分けやすくなります。

対面打ち合わせ用にQRコードを配布すれば、会議室のスクリーンに映したものを各自の端末でも開いてもらえます。確認やレビューの一時共有という用途に向いた使い方です。