画面設計書を、
もっと速く、もっと美しく。
スクリーンショットを取り込み、UI要素をマッピングし、
設計書としてPDF・HTML・CSV・Markdownで出力。
AIが要素を自動検出するから、作業時間を大幅に短縮できます。
設計書作成に必要なすべてを、ひとつに。
画像の取り込みから仕様の定義、出力まで。設計書作成の全工程をカバーします。
直感的なキャンバス編集
スクリーンショット上にアイテムやグループをドラッグで配置。スナップ・整列・ガイドラインで正確な設計が可能です。
AI自動要素検出
範囲を選択するだけでAIがUI要素を自動認識。ボタン、入力欄、テキストなどを即座にマッピングします。
詳細な仕様定義
UI種別、入力フォーマット、データソース、画面遷移先など、実装に必要な仕様情報をアイテムごとに定義できます。
5種類のエクスポート
PDF・HTML・CSV・Markdown・JSONの5形式で出力。チーム共有やドキュメント管理に最適な形式を選べます。
バリデーション
名称の未入力、フォーマット未設定、データソース不備などを自動チェック。設計書の品質を担保します。
ページ・カテゴリ管理
ページ・パーツ・レイアウトの3カテゴリで整理。ステータス管理、コメント機能でチームワークを支援します。
直感的な編集画面
スクリーンショット上にアイテムやグループを配置。右サイドバーでUI種別やデータソースなどの仕様をすぐに入力できます。AI検出で要素を自動認識することも可能です。
設計書としてすぐに確認
閲覧モードでは、画像と仕様テーブルを並べて設計書として確認。PDF・HTML・CSV・Markdownで出力し、チームに共有できます。
4ステップで設計書が完成。
直感的な操作で、画像から設計書までスムーズに仕上がります。
画像を取り込む
スクリーンショットをドラッグ&ドロップ。URL指定でのキャプチャや一括アップロードにも対応。
要素を配置する
画像上にアイテムやグループを描画。AIによる自動検出も活用できます。
仕様を定義する
UI種別、入力フォーマット、データソース、遷移先などをアイテムごとに入力。
設計書を出力する
PDF・HTML・CSV・Markdownなど、用途に合った形式でエクスポート。
様々な形式に出力できる。
チームの環境や用途に合わせて、最適な形式を選んで出力できます。
印刷・レビューに最適
HTML
ブラウザで即閲覧
CSV
Excel・スプレッドシート連携
Markdown
Git管理・Wiki統合
JSON
データ連携・バックアップ
出力イメージ
PDF出力
全ページを画像+仕様テーブルの形式でPDF出力。印刷やレビュー提出にそのまま使える設計書が完成します。
CSV出力
全ページの要素をCSV形式で一括出力。Excelやスプレッドシートで開いて、チーム全体で仕様を共有・管理できます。
Markdown出力
画像付きのMarkdown形式で出力。GitリポジトリやWikiにそのまま統合でき、コードレビューと設計レビューを一元管理できます。
AIが、面倒な作業を肩代わり。
画像を選択するだけで、AIがUI要素を自動検出。手作業を大幅に削減します。
AI自動要素検出
画面のスクリーンショットから、ボタン・入力欄・テキスト・画像などのUI要素をAIが自動で認識。要素の種類や表示テキストまで推定し、一括でアイテムを配置します。検出後の微調整も簡単です。
プロの設計書に必要な、細部まで。
入力フォーマットからAPI連携まで、実装に必要な仕様をアイテムごとに定義できます。
UI種別 & 入力フォーマット
- テキスト / ラベル / ボタン / リンク / 画像 / アイコン
- input text / textarea / select / checkbox / radio
- 12種類の入力フォーマット（メール、電話、URL、日付など）
- プレースホルダ、デフォルト値、選択肢の定義
データソース & API連携
- DBマッピング（テーブル名.カラム名）
- APIエンドポイント & HTTPメソッド（GET/POST/PUT/DELETE）
- 画面遷移先（ページID or 外部URL）
- 設計とバックエンド仕様をひとつのドキュメントで管理
編集サポート
- スナップ & ガイドライン（7色対応）
- 8方向の整列・等間隔配置
- ロック・アンドゥ/リドゥ
- キーボードショートカット完備
プロジェクト管理
- ページ / パーツ / レイアウトの3カテゴリ
- ステータス管理（作成中 → レビュー → 完了）
- 自動採番 & スクリーンID管理
- コメント機能 & 操作履歴
プラグインで機能を拡張
対象プラットフォームに合わせたフィールド定義や、試験項目の自動生成など。
必要な機能だけをインストールして使えます。
kintoneアプリの画面設計に特化したフィールド定義。フォーム・一覧・グラフの3カテゴリに対応し、ルックアップや関連レコード、プロセス管理など全38種の要素タイプをサポートします。
画面設計書のデータから結合試験（IT）の項目書をCSVで自動生成。表示確認・入力操作・バリデーション・画面遷移・データ連携・権限確認の6カテゴリを自動で網羅します。
プラグインはアプリ内のメニュー「プラグイン」→「プラグイン管理」からインストール・管理できます。
今後もプラットフォーム対応や出力機能を順次追加予定です。
開発者に聞く、画面設計作るくんが生まれた理由
なぜこのツールを作ったのか。開発者が語る、現場のリアルな課題と想い。
PowerPointやExcelでの設計書作成は、入力が煩雑でフォーマットに制約があり、設計効率がとても悪い。この課題をずっと感じていました。
項番を付けるという設計とは直接関係のない作業に時間を取られていました。要素が増減するたびに振り直す必要があり、非常にストレスでした。
キャプチャ画像から要素を目視で確認し、手打ちで入力する作業に無駄を感じていました。入力ミスも多く、AIによる自動検出でこの負担を大きく軽減したいと考えました。
設計書を作る時間がなく、作らないまま製造に入って後工程で苦労した方に。もちろんこれからUI設計を始める方にもおすすめです。
1ページあたりの作業時間比較
設計書作成を、次のレベルへ。
画面設計作るくんで、設計書作成の手間を最小限に。
今すぐ無料で始められます。
v1.2.3 • macOS 12 (Monterey) 以降 • Apple Silicon対応
次のステップ：ライセンスキーを取得
ダウンロード後、アプリを使うにはライセンスキーが必要です。メールアドレスを入力すると、確認メール→ライセンスキーが届きます。
メールを入力
確認リンクをクリック
キーをアプリに入力
更新方法
v1.1.1 以降はアプリ内で自動更新されます。古いバージョンをお使いの方は一度だけ手動更新が必要です。
新しいバージョンが公開されると、アプリが自動でダウンロードしてダイアログで通知します。操作は不要です。
- アプリを起動すると、バックグラウンドで新バージョンの有無を確認
- 新バージョンがあれば自動でDL（差分更新対応）
- DL完了後、「新しいバージョン v1.x.x がダウンロードされました [今すぐ再起動 / 後で]」ダイアログを表示
- 「今すぐ再起動」で即適用、「後で」を選んだ場合は次回アプリ終了時に自動適用
メニューバー →「ヘルプ」→「更新を確認...」
自動更新機能はv1.1.1で追加されました。それ以前のバージョンをお使いの方は1回だけ手動で上書きしてください。次回以降は自動更新されます。
- アプリを終了
- 上の「macOS版をダウンロード」から最新DMGをDL
- DMGを開いて ScreenDesigner.app を /Applications にドラッグ&上書き
- 「項目を置き換える」を選択
- Applications フォルダから起動
ご利用にあたって
オープンベータ版について
本ソフトウェアは現在オープンベータ版として提供しています。品質向上のため、アプリケーションでエラーが発生した際に、エラー情報（エラーメッセージ、発生箇所、ユーザー名、アプリバージョン）を開発サーバーに自動送信しています。
データの取り扱いについて
プロジェクトのファイル、設定、画像などのデータはすべてお使いのPC内にのみ保存されます。開発サーバーへの送信・保管は一切行っておりません。AI機能をご利用の場合のみ、画像データが各AIサービスプロバイダー（OpenAI / Anthropic）に送信されます。
更新履歴
- 改善 アプリアイコンを新デザインに刷新（HPのファビコンも同デザインに統一）
- NEW アイテム番号・グループ番号を左メニューで手動編集できるように
- 改善 自動採番OFF時は並び替え・ページ切替・再読込でも手動でつけた番号を保持
- NEW アイテムに「アクション」項目を追加（自由入力・仕様表/エクスポートに反映）
- NEW 画面IDを「接頭辞／グループ／番号」に分けて個別に編集できるように
- 改善 文字サイズの単位をpt表記に（既定12pt）
- 改善 自動採番を既定OFFに（手入力した画面IDが保持されます）
- 改善 ナビゲーター（ミニマップ）の表示枠が実際の表示範囲と一致するよう修正
- NEW モードを「画面設計／遷移図／閲覧」の3つに統一
- NEW 閲覧モードで画面遷移図をアートボードごとに閲覧できるように
- 改善 編集・遷移図のUI構造を統一（サイドバー／ナビゲーター／整列ツールを両モードで共通化）
- 改善 ロック画像の上の要素を範囲選択可能に。AI検出は重なった画像の最前面を対象に
- NEW 更新適用直後の起動で「🎉 更新が適用されました」通知を Google Chat に送信（旧→新バージョンを表示）
- 改善 通知の宛先を Slack から Google Chat に切替（アプリ内エラー通知・お問い合わせ通知の両方）
- 改善 DL完了後の再起動ダイアログにも「更新内容を見る」ボタンを追加（変更点をHPの更新履歴で確認可能）
- 改善 アプリのスタート画面（プロジェクト選択モーダル）のアイコンを新アイコンに差し替え＋バージョン番号を表示
- NEW 新しいアプリアイコンに更新（HPの favicon も同デザインに統一）
- 改善 自動更新の体験を改善: 起動チェックを5秒→1秒に短縮、検知時に「v1.x.x が利用可能 [今すぐ更新 / 更新内容を見る / スキップ]」ダイアログを表示してユーザーが選べるように
- 改善 更新ダウンロード中の進捗トースト表示（25%刻み）
-
修正
自動更新時の
ZIP file not providedエラーを修正（electron-builder の mac.target に zip 追加、release.sh / Dockerfile も zip 配信に対応） - 改善 HPの「インストール手順」セクションを削除し、「更新方法」（自動更新／手動更新）セクションに統合
-
修正
プロジェクト保存時の
nodePath.relative is not a functionエラーを修正（platform抽象層にpath.relativeを追加） -
修正
AI検出でAIが数値を文字列で返した際の
height.toFixed is not a functionエラーを修正（座標を Number 強制変換で正規化） - 改善 AI応答のJSONパース失敗時にエラーをスローせず、空配列＋トースト表示で安全にフォールバック
- NEW アプリ内自動更新（electron-updater）を導入。起動時に新バージョンをバックグラウンドDL、ダイアログで「今すぐ再起動／後で」を選択可能。ヘルプ→「更新を確認...」で手動チェックも可能
-
修正
既存プロジェクトを開く際に
nodePath is not definedでエラーが発生する不具合を修正
- 改善 コード署名・公証対応
- NEW プラグイン機構を導入（プラグインの着脱でフィールド定義・ページカテゴリを拡張可能に）
- NEW kintoneプラグイン: フォーム・一覧・グラフの3カテゴリ、全38種の要素タイプ対応
- NEW 結合試験項目生成プラグイン: 画面設計書から22列のCSV試験項目書を自動生成
- 改善 全エクスポート（CSV/Markdown/PDF/PPTX/HTMLプレビュー）のプラグインデータ出力対応
- 改善 platform抽象層リファクタリング（将来のWeb版対応準備）
- 修正 tailwind.jsがパッケージ版に含まれずSyntaxErrorが発生する問題を修正
- NEW ライセンス認証機能を追加（メール申請 → キー発行 → アプリ内認証）
- NEW ライセンス管理ダッシュボード（発行・無効化・法人管理・利用ログ）
- 改善 セキュリティ強化（reCAPTCHA・ボット検出・レート制限）
- NEW PowerPoint（PPTX）出力機能を追加（画像スライス分割・オーバーレイ焼き込み・項目定義テーブル対応）
- NEW AI設定にAPIキー接続テストボタンを追加
- 改善 AI連携をClaude API専用に変更（OpenAIプロバイダー廃止）
- 改善 起動時にプロジェクト選択画面を表示するように変更（前回プロジェクトの自動復元を廃止）
- 修正 ツールバー・プレビューヘッダーの改行崩れを修正
- 修正 URLキャプチャがRetina環境で2倍サイズになる問題を修正（等倍でキャプチャ）
- 修正 ブラウザプレビューが空白になる問題を修正（画像の外部ファイル化）
- NEW ツールバーにブラウザプレビューボタンを追加
- NEW UI種別を14種に拡充・日本語化（見出し、トグルスイッチ、画像、テーブル、アイコン追加）
- NEW 種別に応じた動的フィールド表示（見出しレベル、リンク先、ボタンアクション、入力形式等）
- 改善 ブラウザプレビュー: ズーム機能、左右分割リサイザー、列幅可変
- 修正 画像ファイル名をUUIDベースに変更（ページ入れ違い防止）
- 改善 URLキャプチャ: 30秒タイムアウト、エラー通知追加
- 改善 オフライン時AI検出ボタン非活性化
- 修正 AI設定画面が開けない不具合を修正
- 改善 モーダルの閉じるボタンのデザインを統一
- 改善 APIキー未設定時はAI検出ボタンを無効化
- 修正 パッケージ版でプロジェクトが開けない不具合を修正
- NEW 利用規約・ユーザー名登録・ヘルプメニュー追加
- NEW ヘルプドキュメント（使い方ガイド・機能一覧・用語集）
- 改善 UI改善: クリック即切替、削除モーダルフォーカス表示
- 改善 ページ並び替え時の自動採番、ツールチップ、ちらつき防止
- 改善 ガイド表示トグル、自動採番トグル、ツールバー拡大、ルーラー改善
- 性能 パフォーマンス改善: RAF制御、キャッシュ最適化、DOM参照キャッシュ
- 修正 セキュリティ修正: XSS脆弱性対応
- 改善 コード品質改善: マジックナンバー定数化、メモリ管理