ワイヤーフレームを確認して書き出す

構造と原稿を確認する

ワイヤーは構成の完成原稿を画面に配置したものです。左側の構成一覧と照らし合わせ、見出し、説明、ボタン、重要な条件が一致しているかを確認します。最終配色や写真の評価より先に、話の流れを確認してください。

ワイヤーは完成したブランドデザインではありません。画像が仮のままの場合は引き継ぎ時に明示し、書き出し不良と誤解されないようにします。

PCとモバイルを別々に確認する

PCとモバイルのプレビューを切り替え、最初の画面で価値が伝わるか、長い見出しが重ならないか、ボタンと説明が離れていないか、表や図が読めるかを確認します。まとめて見る場合は全画面表示も使えます。

比較表やFAQが長いときは、モバイルでも判断に必要な順序になっているかを確認します。余白は調整できますが、高さを減らすために条件や根拠を落とさないでください。

変更箇所と目的を具体的に伝える

右側の対話で対象セクションと目的を伝えます。例えば「FAQは全件残し、余白だけを減らす」「中心の主張は変えず、最初の説明のスペースを増やす」と指定します。変更後は構成との整合性を確かめます。

訴求や原稿を大きく変える場合は、構成を先に確認してください。ワイヤーだけで約束する内容を変えると、企画と制作物に異なる説明が残ってしまいます。

書き出し形式を用途で選ぶ

生成と保存が完了したら、ワイヤーフレーム画面の書き出しメニューを開き、用途に合う形式を選びます。

• Figma：デザイン担当へ渡し、取り込み後にPCとモバイルをそれぞれ確認します。
• HTML：ブラウザーで構造を確認したり、開発の参考にしたりします。ワイヤーフレームのHTMLファイルで、画像が仮素材の場合があります。ページ編集画面のHTML ZIPとは異なります。
• 構成CSV：構成案、セクションの番号・名称・要点などを表で確認し、原稿や構成を引き継ぎます。

ダウンロード後はファイルを開き、内容と版、抜けている項目を確認します。CSVはレイアウトの代わりにはなりません。

Figma用コードを発行して読み込む

1. Figmaへの書き出しを選び、準備が完了したら表示されたコードをコピーします。
2. FigmaのPtengineプラグインで「Import wireframe」を開き、コードを貼り付けて読み込みます。
3. PC・モバイルの必要なデータがそろったか、セクション数、順序、文字を確認します。

コードに期限や利用状態が表示された場合は、その案内に従ってください。期限切れ・使用済み・無効のエラーが出たら、書き出し元で新しいコードを発行してやり直します。古いコードの繰り返し貼り付けや、コピー完了だけで取り込み成功と判断することは避けます。

書き出した成果物を確認する

最終確認した版か、仮画像がわかるか、追加素材の担当が決まっているかを確認します。失敗したら形式とエラー文を記録して再試行し、続く場合はその情報を添えて相談してください。自分で続けるなら編集へ、他の人へ渡すなら企画の根拠も一緒に共有します。次はページ制作の始め方を参照してください。

自分で制作を続ける場合は、ワイヤーフレームが3セクション以上あり、生成・同期が完了していることを確認し、「エディターを開く」を押します。操作と更新先は企画から最初のページを作るで確認してください。