Roughpad AI向けラフ画作成ツール
ぱっとツールズブラウザで使える道具箱 ほかの便利ツール

言葉だけでは伝えにくい配置を、ラフ画に。

編集に戻る ↑

Roughpadは、AIに伝えたい画面や資料の構成を、線・枠・文字で描くツールです。描いた画像をAIのチャットに貼り付け、作ってほしいものの配置を伝えられます。

サイトの見出し、画像、説明文、ボタンの配置を四角と文字で描いたRoughpadのラフ画の完成例
Webページの構成を描いた例。画像と一緒に「この配置で、商品紹介ページを作って」のような依頼を添えてAIに渡します。

特徴

用紙
最初は1200×800px。各辺100〜4000px、面積400万px以内に変更できる
出力
PNG画像(用紙の各辺の2倍の大きさ、白い背景)。画像のコピーまたはダウンロード

使い方

  1. 枠や文字で描く

    「四角」「丸」「線」「矢印」「手描き」を選んで用紙をドラッグ。「文字」はクリックして入力します。

  2. 配置を整える

    図形の輪郭や文字をドラッグして移動します。選んだ要素の辺・四隅で大きさを調整でき、「戻す」でやり直せます。

  3. AIのチャットに貼る

    作業画面上部の「画像をコピー」で画像を貼り付け、依頼文を添えます。コピーできると、ボタンに「✓」が付き、用紙の縁を光が一周します。コピーできない場合は「PNGをダウンロード」でダウンロードした画像を添付します。

図形・文字を編集する
  • 図形の輪郭や文字は、どのツールでもドラッグで移動できます。「選択」なら図形の内側からも動かせます。辺・四隅でサイズを変え、「削除」で取り除きます。
  • 文字はクリックで再編集。Enterで改行し、外側のクリックで確定します。文字の枠を狭めると折り返し、文字自体の大きさは変わりません。
  • 「選択」「四角」「丸」では、用紙のダブルクリックでも文字を入力できます。
用紙サイズ・表示を変える
  • 下部の「用紙サイズ」を開き、幅・高さを入力して「適用」で用紙サイズを変更。「選択」で用紙の余白をクリックし、外周の辺・四隅をドラッグする方法もあります。
  • 「+」「−」で拡大縮小し、「全体を表示」で画面に収めます。背景のドラッグやホイールで表示位置を動かせます。スマホやタブレットでは2本指のピンチで拡大・縮小できます。
  • 作業画面上部の「全画面」(非対応環境では「作業画面を広げる」)で編集領域を広げ、「元の表示に戻す」で戻せます。
キーボード操作

⌘はMac、CtrlはWindowsなどで使います。

ツールの切り替え
V 選択R 四角O 丸L 線A 矢印T 文字P 手描き
戻す / やり直す
⌘/Ctrl + Z / ⌘/Ctrl + Shift + Z
選んだ要素を削除
Delete または Backspace
正円を描く
Shift を押しながら丸を描く
文字を確定 / 取り消す
⌘/Ctrl + Enter / Escape
表示位置 / 表示倍率
Space + ドラッグ / ⌘/Ctrl + ホイール
選択を解除
Escape
編集に戻る ↑

ユースケース

基礎知識

よくある質問

自動保存できないと表示されたら?

「PNGをダウンロード」で必要な画像を取り出してください。通常は「保存中…」が消えると、このブラウザへの保存が完了です。ブラウザの保存領域を利用できない場合や容量が不足している場合は、ラフ画を保持できないことがあります。

前に描いたラフ画が見つかりません

描いたときと同じ端末・ブラウザで開いているか確認してください。別端末・別ブラウザへの同期はありません。ブラウザの保存データを削除した場合は復元できないため、必要な画像はPNGでもダウンロードしてください。

「画像をコピー」が使えません

画像コピーには対応ブラウザとHTTPSなどの安全な接続が必要です。「PNGをダウンロード」でダウンロードし、貼り付け先に画像を添付してください。

用紙を小さくすると図形は消えますか?

図形は保持されますが、用紙の外にはみ出した部分は画面やPNGに表示されません。「戻す」でサイズ変更を取り消すか、用紙を広げて確認してください。

新しいラフ画を描き始めるには?

作業画面上部の「新規作成」で空の用紙に戻ります。空にした状態も自動保存されるので、残したい画像は先にPNGでダウンロードしてください。新規作成の直後は「戻す」で前の図に戻せますが、再読み込みすると操作履歴は消えます。

安全性とプライバシー

描画内容は端末内で処理し、このツールから処理サーバーへ送信しません。用紙サイズと確定した図形・文字は、このブラウザの保存領域(IndexedDB)に保存します。入力途中の文字や操作履歴を、再読み込み後に復元することはできません。

PNGはブラウザのダウンロード先へ、コピーした画像はクリップボードへ渡します。AIのチャットに貼り付けた画像は、そのAIサービスへ渡ります。また、AIによる画面の読み取りや、対応環境の読み取り用ツールで取得した図形データは、利用するAIクライアントに渡ります。

編集に戻る ↑

新しいラフ画を作成しますか?

現在のラフ画を空にし、1200 × 800pxの用紙で始めます。必要な画像は先にPNGでダウンロードしてください。

この操作は「戻す」で取り消せます。

このツールを共有

Roughpadのページへのリンクです。入力した内容や作業中のデータは含まれません。

SNSで共有