# 画面設計作るくん (ScreenDesigner) — 完全版

> スクリーンショットからUI設計書をAIで自動生成するmacOS向けデスクトップアプリ。

このファイルはAI/LLMクローラー向けに、画面設計作るくんの全機能・FAQ・更新履歴をテキスト形式で提供します。

---

## 製品概要

- 製品名: 画面設計作るくん（ScreenDesigner）
- 開発者: s.makino（Astra Business Consulting）
- カテゴリ: 開発者向けデスクトップアプリ / UI設計ツール
- 公式サイト: https://screen-kun.astra-bc.co.jp/
- 対応OS: macOS 12 (Monterey) 以降 / Apple Silicon（M1/M2/M3/M4）
- 最新バージョン: v1.1.0（リリース日: 2026-05-13）
- 料金: 無料（オープンベータ版、メールアドレスでのライセンス申請制）
- 配布形態: DMG（コード署名・公証済み）

## 製品の課題感とコンセプト

PowerPoint や Excel での画面設計書作成は、入力が煩雑でフォーマットに制約があり、項番付けなど設計とは関係ない作業に時間を取られる。キャプチャ画像からUI要素を目視で確認して手打ち入力する作業はミスも多い。

画面設計作るくんは、スクリーンショットを取り込んで画像上に要素をマッピングし、AIで要素を自動検出することでこれらの課題を解決する。1ページあたりの作業時間は従来60分 → 約20分（66%削減）。

## 機能一覧

### 編集

- スクリーンショットの取り込み（ドラッグ&ドロップ、URL指定キャプチャ、一括アップロード）
- 画像上へのアイテム/グループのドラッグ配置
- スナップ機能（7色対応ガイドライン）
- 8方向の整列、等間隔配置
- ロック、アンドゥ/リドゥ
- 自動採番、スクリーンID管理
- キーボードショートカット完備

### AI自動要素検出

- AIプロバイダー: Anthropic Claude / OpenAI
- 範囲を選択するだけで、ボタン・入力欄・テキスト・画像・アイコンなどのUI要素をAIが自動認識
- 要素の種類と表示テキストを推定し、一括でアイテムを配置
- 検出後の微調整も簡単

### 仕様定義

- UI種別: テキスト / ラベル / ボタン / リンク / 画像 / アイコン / input text / textarea / select / checkbox / radio など14種
- 入力フォーマット: 12種類（メール、電話、URL、日付、数値、半角英数等）
- データソース: DBマッピング（テーブル名.カラム名）
- API連携: エンドポイント + HTTPメソッド（GET/POST/PUT/DELETE）
- 画面遷移先: ページID または 外部URL
- プレースホルダ、デフォルト値、選択肢の定義
- バリデーション: 名称の未入力、フォーマット未設定、データソース不備の自動チェック

### エクスポート（出力形式）

| 形式 | 用途 |
| --- | --- |
| PDF | 印刷・レビュー提出にそのまま使える設計書 |
| HTML | ブラウザで即閲覧 |
| CSV | Excel・スプレッドシート連携 |
| Markdown | Gitリポジトリ・Wiki統合（画像付き） |
| JSON | データ連携・バックアップ |
| PowerPoint (PPTX) | スライス分割・オーバーレイ焼き込み・項目定義テーブル対応 |

### プロジェクト管理

- ページ / パーツ / レイアウトの3カテゴリ
- ステータス管理（作成中 → レビュー → 完了）
- 自動採番 & スクリーンID管理
- コメント機能、操作履歴

## プラグイン

アプリ内のメニュー「プラグイン」→「プラグイン管理」からインストール・管理できる。

### kintone フィールド設定

kintoneアプリの画面設計に特化したフィールド定義プラグイン。

- フォーム / 一覧 / グラフ の3カテゴリ
- 全38種の要素タイプに対応
  - 文字列・数値・計算
  - 選択系・日付
  - ルックアップ
  - 関連レコード
  - プロセス管理
  - サブテーブル

### 結合試験項目生成

画面設計書のデータから、結合試験（IT）の項目書を CSV で自動生成するプラグイン。

- CSV出力（22列フォーマット）
- 6カテゴリを自動で網羅
  - 表示確認
  - 入力操作
  - バリデーション
  - 画面遷移
  - データ連携
  - 権限確認

## 使い方（4ステップ）

1. **画像を取り込む**: スクリーンショットをドラッグ&ドロップ。URL指定でのキャプチャや一括アップロードにも対応。
2. **要素を配置する**: 画像上にアイテムやグループを描画。AIによる自動検出も活用できる。
3. **仕様を定義する**: UI種別、入力フォーマット、データソース、遷移先などをアイテムごとに入力。
4. **設計書を出力する**: PDF・HTML・CSV・Markdownなど、用途に合った形式でエクスポート。

## インストール手順（macOS）

1. 公式サイトからDMGファイルをダウンロード
2. ダウンロードしたDMGファイルをダブルクリックして開く（マウントされる）
3. ScreenDesigner.app を Applications フォルダにドラッグ&ドロップ
4. Applicationsフォルダから ScreenDesigner.app をダブルクリックして起動

DMGはコード署名・公証（notarization）済みのため、Gatekeeperの警告なしに起動できる。

## ライセンスについて

オープンベータ版のため無料で利用できるが、利用にはライセンスキーが必要。公式サイトのフォームからメールアドレスを入力すると、確認メール → ライセンスキーが届く。

1. メールアドレスを入力
2. 確認リンクをクリック
3. 届いたキーをアプリに入力

## データの取り扱い

- プロジェクトのファイル、設定、画像などのデータは**すべてお使いのPC内にのみ保存**される
- 開発サーバーへの送信・保管は一切行わない
- AI機能を利用する場合のみ、画像データが選択したAIサービスプロバイダー（OpenAI / Anthropic）に送信される
- 品質改善のため、エラー発生時にエラー情報（エラーメッセージ・発生箇所・ユーザー名・アプリバージョン）が開発サーバーに自動送信される（個人特定情報やプロジェクトデータは含まれない）

## よくある質問（FAQ）

**Q. 料金はかかりますか？**
A. オープンベータ版として無料で提供しています。利用にはメールアドレスでのライセンス申請が必要です。

**Q. Windows / Linux 版はありますか？**
A. 現時点ではmacOS（Apple Silicon）のみの対応です。platform抽象層リファクタリング済みで、将来的にWeb版対応を検討中です。

**Q. データは外部に送信されますか？**
A. プロジェクトデータはローカルPC内のみに保存されます。AI機能利用時のみ、画像データが選択したAIプロバイダーに送信されます。

**Q. どんなAIプロバイダーに対応していますか？**
A. Anthropic Claude / OpenAI に対応しています（v1.0.4以降は Claude API を中心に運用）。

**Q. kintoneアプリの設計にも使えますか？**
A. はい、標準搭載の「kintone フィールド設定」プラグインで38種のkintone要素タイプに対応した設計書を作成できます。

**Q. 結合試験（IT）の項目書も作れますか？**
A. はい、「結合試験項目生成」プラグインで、画面設計書のデータから6カテゴリ・22列のCSV試験項目書を自動生成できます。

**Q. 商用利用は可能ですか？**
A. 利用規約をご確認ください: https://screen-kun.astra-bc.co.jp/terms.html

## 更新履歴（Changelog）

### v1.1.1（2026-05-13）
- NEW: アプリ内自動更新（electron-updater）を導入。起動時に新バージョンをバックグラウンドDL、ダイアログで「今すぐ再起動／後で」を選択可能。ヘルプメニューから手動チェックも可能
- 修正: 既存プロジェクトを開く際に `nodePath is not defined` でエラーが発生する不具合を修正

### v1.1.0（2026-05-13）
- 改善: コード署名・公証対応

### v1.0.7（2026-04-17）
- NEW: プラグイン機構を導入（プラグインの着脱でフィールド定義・ページカテゴリを拡張可能に）
- NEW: kintoneプラグイン（フォーム・一覧・グラフの3カテゴリ、全38種の要素タイプ対応）
- NEW: 結合試験項目生成プラグイン（22列のCSV試験項目書を自動生成）
- 改善: 全エクスポート（CSV/Markdown/PDF/PPTX/HTMLプレビュー）のプラグインデータ出力対応
- 改善: platform抽象層リファクタリング（将来のWeb版対応準備）

### v1.0.6（2026-04-16）
- 修正: tailwind.jsがパッケージ版に含まれずSyntaxErrorが発生する問題を修正

### v1.0.5（2026-04-15）
- NEW: ライセンス認証機能を追加（メール申請 → キー発行 → アプリ内認証）
- NEW: ライセンス管理ダッシュボード（発行・無効化・法人管理・利用ログ）
- 改善: セキュリティ強化（reCAPTCHA・ボット検出・レート制限）

### v1.0.4（2026-04-13）
- NEW: PowerPoint（PPTX）出力機能を追加（画像スライス分割・オーバーレイ焼き込み・項目定義テーブル対応）
- NEW: AI設定にAPIキー接続テストボタンを追加
- 改善: AI連携をClaude API専用に変更（OpenAIプロバイダー廃止）
- 改善: 起動時にプロジェクト選択画面を表示するように変更
- 修正: ツールバー・プレビューヘッダーの改行崩れを修正

### v1.0.3（2026-04-10）
- 修正: URLキャプチャがRetina環境で2倍サイズになる問題を修正
- 修正: ブラウザプレビューが空白になる問題を修正
- NEW: ツールバーにブラウザプレビューボタンを追加

### v1.0.2（2026-04-10）
- NEW: UI種別を14種に拡充・日本語化
- NEW: 種別に応じた動的フィールド表示
- 改善: ブラウザプレビューにズーム機能、左右分割リサイザー、列幅可変
- 修正: 画像ファイル名をUUIDベースに変更（ページ入れ違い防止）

### v1.0.1（2026-04-08）
- 修正: AI設定画面が開けない不具合
- 改善: モーダルの閉じるボタンのデザインを統一
- 改善: APIキー未設定時はAI検出ボタンを無効化
- 修正: パッケージ版でプロジェクトが開けない不具合

### v1.0.0（2026-04-08）
- NEW: 利用規約・ユーザー名登録・ヘルプメニュー追加
- NEW: ヘルプドキュメント（使い方ガイド・機能一覧・用語集）
- 改善/性能: パフォーマンス改善（RAF制御、キャッシュ最適化、DOM参照キャッシュ）
- 修正: セキュリティ修正（XSS脆弱性対応）

## 関連リンク

- 公式サイト: https://screen-kun.astra-bc.co.jp/
- ダウンロード（DMG）: https://screen-kun.astra-bc.co.jp/ScreenDesigner-1.1.0-arm64.dmg
- お問い合わせ: https://screen-kun.astra-bc.co.jp/contact-page.html
- 利用規約: https://screen-kun.astra-bc.co.jp/terms.html
- プライバシーポリシー: https://screen-kun.astra-bc.co.jp/privacy.html
- 運営: Astra Business Consulting（https://www.astra-bc.co.jp/）