ワイヤーフレームツールとは?

ページレイアウトやUIモックアップをすばやくスケッチするためのデバイスベースのワイヤーフレームツールです。ボタン、テキストブロック、画像、入力フィールドなどよく使われるUI要素をキャンバスにドラッグ&ドロップしてワイヤーフレームを作成し、PNGまたはJSONとしてエクスポートして後から編集することができます。

使い方

  1. ツールバーからUI要素(長方形、テキストブロック、ボタン、画像プレースホルダー、入力フィールドなど)を選択し、キャンバスをクリックして配置します。
  2. 要素をドラッグして位置を変更し、ハンドルを引いてリサイズし、ダブルクリックでテキストを編集します。要素をグループ化して移動しやすくすることもできます。
  3. ワイヤーフレームをPNG画像としてエクスポートして共有するか、JSONとして保存して後から再読み込みして編集を続けることができます。

結果

プロダクトマネージャーがモバイルアプリのログイン画面を、ロゴのプレースホルダー、メールとパスワードの入力フィールド、サインインボタン、「パスワードを忘れた」リンクでスケッチし、PNGをエクスポートしてSlackチャンネルで共有します。

関連ツール