ワイヤーフレームツールとは？
ページレイアウトやUIモックアップを数秒でスケッチできます。ボタン、テキストブロック、画像、入力フィールドなどのUI要素をキャンバスにドラッグ＆ドロップし、PNGでエクスポートするかJSONで保存して後から編集を続けられます。
キャンバスは fabric.js ベースで、矩形・テキスト・ボタン・画像プレースホルダ・入力欄・ナビゲーション・カード・チェックボックス・ドロップダウン・ラジオグループ・プログレスバー・スライダー、そして注釈用の付箋まで揃った要素セットを備えています。ズームと画面フィットで要素の多いレイアウトも見やすく、キャンバスをモバイル・タブレット・デスクトップ幅に合わせられます。元に戻す・やり直し・グループ化・解除・前後の並べ替えはすべてキーボードで操作可能。共有用に PNG か SVG を、編集を続けたいときは JSON を書き出して同じ状態で再開できます。
使い方
- ツールバーからUI要素（長方形、テキストブロック、ボタン、画像プレースホルダー、入力フィールドなど）を選択し、キャンバスをクリックして配置します。
- 要素をドラッグして位置を変更し、ハンドルを引いてリサイズし、ダブルクリックでテキストを編集します。要素をグループ化して移動しやすくすることもできます。
- ワイヤーフレームをPNG画像としてエクスポートして共有するか、JSONとして保存して後から再読み込みして編集を続けることができます。
使用するタイミング
- レビュー直前の15分で3パターンの画面案を出してすり合わせる。
- Slack に簡単な図を貼って、言葉でレイアウトを説明する手間を省く。
- 新人デザイナーに低 fidelity と高 fidelity の違いを実演で教える。
結果
プロダクトマネージャーがモバイルアプリのログイン画面を、ロゴのプレースホルダー、メールとパスワードの入力フィールド、サインインボタン、「パスワードを忘れた」リンクでスケッチし、PNGをエクスポートしてSlackチャンネルで共有します。
よくある質問
- Figma との違いは?
- Figma はコンポーネントもプロトタイプもチーム共有も揃った高 fidelity ツールです。こちらはあえて低 fidelity に振っていて、基本的な図形の小さなセットだけで、装飾の沼にはまりません。画面案が分単位で形になります。アウトプットは思考整理用で、実装受け渡しのためではありません。
- 要素を1ピクセル単位で動かすには?
- 選択した状態で矢印キーを押すと 1px ずつ移動します。Shift と矢印キーを組み合わせると 10px 単位の移動になります。リサイズはコーナーのハンドルをドラッグ、Shift を押しながら引くと比率を保ったまま拡大縮小できます。
- 別のワイヤーフレームから要素をコピーできる?
- 両方の JSON を書き出してテキストエディタで開き、必要な elements 配列のエントリを片方からもう片方にコピーします。再読み込みすれば新しい形状が乗ります。多くの人はそこまでせず、同じファイル内で Ctrl+D の複製で済ませています。
- JSON が PNG より大きくなることがあるのはなぜ?
- JSON は各シェイプの位置、塗り、線、フォント、テキストといった全プロパティをそのまま可読テキストで保存します。PNG はフラットなラスター画像です。テキストの多いワイヤーフレームでは JSON が PNG を上回ることもありますが、編集を続けられるのは JSON だけです。
- 独自のカスタム要素を追加できる?
- ツール内で直接の追加はできませんが、既存のプリミティブを Ctrl+G でグループ化すれば、検索バーやタブ群のような再利用パーツが作れます。JSON を保存しそのグループ部分だけ取り出して新規ファイルに貼れば、自前のミニライブラリになります。