Pockez
ワイヤーフレーム作成ツール
無料のワイヤーフレーム作成ツール。27 種類のパーツをドラッグ＆ドロップでWeb・アプリの画面を設計。PNG・JSON出力、共有リンク対応。登録不要、データ送信なし。
- UIパーツ27種類
- リンクで共有
- PNG出力
- 下書き自動保存
パーツをクリックすると画面中央に追加されます。キャンバスへドラッグしても置けます。テキストはダブルクリックで直接編集でき、パーツ内の文字はプロパティの「テキスト」欄で変更します。
スペースキーかマウスの中ボタンを押しながらドラッグで画面を移動、Ctrl＋ホイールで拡大縮小します。全画面ではホイールでも移動できます。スマホでは「⋯ その他」の「画面を移動」を使ってください。
下書きはこのブラウザ（localStorage）にだけ自動保存され、送信されません。端末を変える前や閲覧データを消す前に JSON を書き出してください。
🔒 計算はすべてブラウザ内で行われ、データがサーバーに送信されることはありません。
こんなときに使えます
- Webサイト・アプリの提案：開発前にページの構成を描いて、クライアントや上司と要件をすり合わせられます。
- 授業・課題：UI／UX の授業で画面のラフをすばやく描けます。ソフトのインストールは不要です。
- 要件のすり合わせ：PM がラフを描いて「共有リンクをコピー」で送れば、エンジニアやデザイナーは開くだけで確認できます。
- 個人プロジェクト：コードを書く前に、ブログやポートフォリオサイトのレイアウトを計画できます。
使い方
- 右側の「キャンバス設定」でデスクトップ・ノートPC・タブレット・スマホのサイズを選び、左のパーツ一覧をクリックすると画面中央に追加されます。キャンバスへドラッグして置くこともできます。
- オブジェクトを選ぶと、右のプロパティで塗り・枠線・文字・文字サイズ・位置とサイズを変更できます。複数選択して「⋯ その他」の「整列」「グループ化」で整え、間違えたら Ctrl＋Z で元に戻せます。
- 完成したら「PNG書き出し」で画像（1～3倍の解像度）を保存するか、「JSON書き出し」で編集用ファイルを保存し、あとで「JSON読み込み」から続きを編集できます。
使用例
800×600 の編集エリアで 1440×900 のデスクトップ用キャンバスを開き「全体表示」を押すと、倍率は min((800 − 80) ÷ 1440, (600 − 80) ÷ 900) = min(0.5, 0.58) = 50% になり、左右に 40px、上下に 75px の余白で中央に表示されます。375×812 のスマホ用キャンバスなら (600 − 80) ÷ 812 ≈ 64% です。
オブジェクトA（X 100、Y 50、幅 200、高さ 40）とB（X 400、Y 120、100×100）を一緒に選び「左揃え」を選ぶと、Bが左へ 300 動いて X 100 になります。「下揃え」なら両方の下端が 220 にそろい、Aが下へ 130 動きます。Aだけを選んで「右揃え」にするとキャンバスの右端に合わせられ、右へ 1140 動いて X 1240 になります。
「グリッドにスナップ」をオンにすると、X 14 へドラッグしたオブジェクトは 10 に、X 15 なら 20 に吸着します。2026年10月14日 15:30 に書き出した画像のファイル名は wireframe-20261014-1530.png、同じ分に書き出したJSONは wireframe-20261014-1530.json です。
結果の見方
- 上部の倍率は表示だけに影響し、オブジェクトの実際の大きさや書き出し結果は変わりません。プロパティの X・Y・幅・高さは常に 100% 時のピクセルで、X・Y はキャンバス台紙の左上からの位置です。
- ボタン・カード・表などのパーツは複数の図形をまとめたグループです。塗りと枠線は本体（ボタンの背景など）、文字欄はメインのラベルを変更します。細かい部品を個別に直すときは先に「グループ解除」してください。
- ステータス欄に「このブラウザに自動保存しました」と出ていれば保存済みです。赤字で保存できない旨が出たとき（シークレットウィンドウや容量不足）は、すぐに「JSON書き出し」でバックアップしてください。
仕組みと計算方法
- キャンバスはオープンソースの Fabric.js 6 で HTML canvas に描画しています。各パーツは長方形・円・線・文字のベクター図形の集まりなので、拡大してもぼやけません。
- 整列は、1つだけ選んだときはキャンバス台紙を、複数選んだときは全オブジェクトの外枠を合わせた範囲を基準にし、各オブジェクトの外枠（回転後の範囲を含む）を水平または垂直に移動します。
- 元に戻す・やり直しは、変更のたびにキャンバス全体を JSON のスナップショットとして記録し、最大 100 件保持します。内容が同じなら記録せず、元に戻したあとで新しく変更すると、やり直し用の記録は破棄されます。
- 下書きと書き出しは同じ {app, version, canvas} 形式の JSON です。読み込み時に形式のバージョンと各オブジェクトの種類を確認し、このツールが作る図形と文字だけを受け付け、画像やパターンなど外部リソースを読み込む内容は拒否します。
- PNG書き出しでは、表示を一時的に 100% に戻してキャンバス台紙の範囲だけを指定倍率で描画し、ブラウザの canvas.toBlob で PNG を作ります。サーバーは一切使いません。
注意点と制限
- レイアウトや情報設計の検討向けで、クリックで動くプロトタイプ、複数ページの遷移、共通コンポーネント、共同編集はありません。
- 実際の画像やアイコンは入れられず、SVG・PDFでの書き出しもありません。くっきりした画像が必要なら PNG 3倍を選んでください。
- 下書きは1つのブラウザの localStorage（通常 5 MB 程度）に保存されるため、内容がとても多いと保存できないことがあります。読み込みファイルは 10 MB まで、キャンバスは一辺 5000 px までで、巨大なキャンバスを3倍で書き出すとブラウザの canvas サイズ上限を超えて失敗することがあります。
- 文字は端末のシステムフォントで表示するため、同じJSONでも別のパソコンや言語設定では文字幅や改行位置が少し変わることがあります。
よくある質問
途中でページを閉じると内容は消えますか？
消えません。変更のたびにこのブラウザ内へ下書きとして自動保存され、次回開くと読み込まれます。ただし下書きはこの端末のこのブラウザにしかないため、閲覧データの削除、シークレットウィンドウ、別のパソコンでは見られません。大事なものは「JSON書き出し」でバックアップしてください。
PNGにはどこまで入りますか？グリッドが無いのはなぜ？
キャンバスの台紙の範囲だけが出力され、はみ出した部分は切り取られます。グリッドや選択枠は編集用の補助なので画像には入りません。2倍を選ぶと 1440×900 のキャンバスは 2880×1800 ピクセルの画像になります。
スマホでも使えますか？
閲覧と簡単な編集はできます。パーツ一覧をタップして追加し、オブジェクトをドラッグして移動し、プロパティで文字を直せます。タッチ操作ではパーツのドラッグ追加と2本指ズームに対応していないため、「＋／−」ボタン、「⋯ その他」の「画面を移動」、「全画面」を使ってください。
Figma など他のツールのファイルを読み込めますか？
読み込めません。このツールで書き出したJSONファイルのみ対応です。安全とオフライン利用のため、画像や外部リソースを含むファイルは拒否されます。画像を入れたい場所は「画像プレースホルダー」で示してください。
ワイヤーフレームをチームに共有するには？
「共有リンクをコピー」を押すと、キャンバス全体が圧縮されてURLの「#」以降に入り、相手は同じ画面案を開いて自分のブラウザで編集できます。この部分はサーバーに送信されません。リンクはその時点のスナップショットです。パーツが多すぎてリンクが長くなる場合は、JSONの書き出しを案内します。
ワイヤーフレームとデザインカンプ（モックアップ）の違いは？
ワイヤーフレームはグレーの箱でレイアウトや機能の配置を示し、構成を確認するためのものです。デザインカンプ（モックアップ）は配色・フォント・画像を加えた完成イメージです。先にワイヤーフレームを描くと、見た目の細部に早くからこだわりすぎるのを防げます。
無料でインストール不要の Figma の代わりになるツールは？
このツールは低忠実度のワイヤーフレームをすばやく描くのに向いており、登録不要で開いてすぐ使えます。複数人でのリアルタイム共同編集やコンポーネント管理、高忠実度のデザインが必要なら、Figma や Penpot などの専門ツールのほうが適しています。
スマホアプリの画面も描けますか？
描けます。「キャンバス設定」で「スマホ」のサイズを選べばスマホ画面の大きさで描け、ボタン、入力欄、ナビゲーションなどのパーツもすべて使えます。