Locofyの書き出し物とは
Locofyは、FigmaやAdobe XDなどのデザインを解析して、HTMLやReact、Next.jsといったコードに変換するツールです。手作業でのマークアップを省き、デザインから実装の入口までを一気に近づけてくれます。
書き出し結果は、静的なHTMLとCSSのセットになることもあれば、フレームワーク向けのコンポーネント群になることもあります。共有のしやすさという観点では、まず単体で表示確認できる静的HTMLの形に整えておくと、相手が環境を用意せずに見られます。
書き出し直後に共有でつまずく理由
Locofyからコードを書き出しても、それをそのまま相手に渡すだけでは見てもらえません。HTMLファイル単体ならともかく、CSSや画像、JavaScriptが分かれていると、ファイルをまとめて送る必要があります。
ZIPで送っても、相手はダウンロードして展開し、ローカルで開く手間がかかります。スマートフォンでは確認しづらく、レイアウト崩れの有無を画面で見てもらいたいデザインレビューには向きません。
結局スクリーンショットを送り合うことになり、実際の表示や挙動を共有できないまま話が進む、という状況に陥りがちです。
AI生成HTMLを共有する前の安全チェック
Locofyで書き出したコードを共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
一時URLで見せると確認が速い
解決策はシンプルで、書き出したHTML一式をそのまま表示できる一時URLにしてしまうことです。相手はリンクを開くだけで、実際のブラウザ表示やレスポンシブの挙動を自分の端末で確認できます。
ギガサイト便は、まさにこの用途に向いたサービスです。HTMLファイルやCSS・JS・画像を含むZIPをトップページにドロップすると、その場で共有URLが発行されます。会員登録なしでも公開でき、HTTPSは自動で付き、CDNのエッジ配信で表示も速く済みます。
Locofyの書き出しを共有する手順
実際の流れを順番に見ていきます。デザインのレビューを依頼する相手が決まっている前提で進めます。
ポイントは、画像やCSSが分かれている場合はZIPでまとめてからドロップすることです。これでリンク先がデザインどおりに表示されます。
- Locofyからプロジェクトをエクスポートし、HTMLとCSS・JS・画像を取得する
- ファイルが複数に分かれている場合は、フォルダごとZIPに圧縮する
- ギガサイト便のトップページにHTMLファイルかZIPをドロップする
- 発行されたURLの認証方式を選び、社外なら最低でもパスワードを付ける
- 確認してほしい相手にURLを送り、表示やレイアウトを見てもらう
修正を重ねるときの使い方
デザインのレビューは一度では終わらないのが普通です。Locofyで書き出し直すたびにリンクが変わると、相手は毎回新しいURLを開く必要があり、古いリンクも残ってしまいます。
ギガサイト便では同じURLのままファイルを差し替えられます。Locofyから再エクスポートした内容をアップロードし直せば、リンクを送り直さずに中身だけ更新できます。レビュアーはブックマークしたURLを開くだけで最新版を見られます。
また、公開期限を設定しておけば、レビューが終わったあとに古い確認用URLが残り続けることもありません。無料プランでも最長7日の公開期限を設定できます。
よくある質問
Locofyで書き出したReactコンポーネントもそのまま共有できますか
ビルド前のReactコンポーネント単体はブラウザでそのまま表示できないため、共有用にはビルドして生成された静的HTML一式をアップロードするのが確実です。ZIPにまとめてドロップすれば、表示確認用のページとして共有できます。
画像が表示されないときはどうすればよいですか
多くの場合、画像やCSSがHTMLと別ファイルになっているのにHTML単体だけをアップロードしているのが原因です。関連ファイルをフォルダごとZIPに圧縮してからドロップすると、相対パスが保たれて正しく表示されます。
クライアントに見せたいが検索結果には出したくありません
ギガサイト便の一時公開ページにはnoindexが付くため検索結果には出ません。ただしnoindexはアクセス制御ではないので、関係者以外に見せたくない場合はパスワードやメール認証などの認証方式を併用してください。
Locofy以外で作ったデザインでも同じように共有できますか
はい。共有するのはあくまで書き出されたHTMLやZIPなので、どのツールで作ったものでも構いません。HTMLやCSS・JS・画像を含むZIPであれば、同じ手順で一時URLにして共有できます。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。