1. アプリ紹介画像、作るの面倒じゃないですか？

App Store や Google Play への提出用画像、あるいはブログ紹介用のモックアップ画像。これらを作るためにわざわざ重い画像編集ソフトを立ち上げるのは、意外と手間がかかる作業です。

そこで、ブラウザにスクショをドロップするだけで、数秒でそれっぽい画像が作れるツールを開発しました。現在、初期ベータ版として公開しています。

2. スクショ・モックアップ合成ツール（Beta）

以下のツールは、すべてあなたのブラウザ上で動作します。画像がサーバーに送信されることはありません。 広い画面で作業したい場合は、ツール右上の「拡大表示」ボタンをご利用ください。

1. スクリーンショット

画像をドロップ、またはクリック

2. 背景画像レイヤー

画像をドロップ、またはクリック

3. 背景・フレーム

4. プレビュー設定

20%

5. テキスト編集

6. 追加画像レイヤー

画像をドロップ、またはクリック

7. カスタム描画スクリプト (DSL)

スクリプト(DSL)のヘルプ

1行1命令で描画します（# はコメント）。

  • text "文" x=.. y=.. : 文字描画
  • badge "文" x=.. y=.. : 角丸バッジ
  • rect x=.. y=.. w=.. h=.. : 四角形
  • line x1=.. y1=.. x2=.. y2=.. : 直線
  • circle x=.. y=.. r=.. : 円

text "Title" x=621 y=300 align=center

8. 上級者向け JavaScript 描画

JS描画のヘルプ（上級者）

Canvas描画用のJavaScriptを記述できます。

利用可能変数:

ctx, canvasWidth, canvasHeight, state, helpers

使える helper:

helpers.text / badge / rect / line / circle

LLM（AI）への依頼例:

このツール用のCanvas描画JavaScriptを生成してください。使えるのは ctx, canvasWidth, canvasHeight, state, helpers だけです。HTML/CSSは使わず、JSコード本体のみ出力してください。上部に赤いNEWバッジ、その下に大きな見出し、最後に区切り線を入れてください。

※無限ループやDOM操作は避けてください。

9. 保存・出力

3. このツールの特徴（初期ベータ版）

  • ブラウザ完結・ローカル処理: プライバシーに配慮し、画像処理はすべてクライアントサイドで行われます。サーバーへの通信は発生しません。
  • 豊富なデザインテンプレート（NEW）: 全16種類のテンプレートを搭載。バッジ付き、端末2台構成、iPad向けなど、目的のレイアウトをワンクリックで適用できます。
  • マルチ画像レイヤー: 背景画像、スクリーンショット、追加画像（前面）の3層構造で、自由度の高い合成が可能です。
  • カスタム描画スクリプト: 自由なCanvas命令やJavaScriptを入力して、デザインを無限に拡張できます。
  • プレビューズーム機能: 大きなキャンバスも全体像を把握しながら作業できます。
  • 主要デバイスサイズに対応: iPhone 6.9" / 6.5"、iPad 13" などの主要サイズプリセットを選択可能です。
  • PNG保存 & 設定一括コピー: 生成した画像をフル解像度で保存できるほか、現在のデザイン設定をJSON形式などで書き出せます。

4. 今後のアップデート予定

本ツールは現在「初期ベータ版」です。今後、以下のような機能強化を予定しています。

  • デバイスフレームのバリエーション拡充（Android、各種タブレット等）
  • 背景デザインの強化（複雑なグラデーション、高度なぼかし背景）
  • 複数解像度の一括書き出し機能（ZIP保存）
  • UIおよびドラッグ操作のさらなる改善

ぜひ実際に触ってみて、改善のアイディアやフィードバックをいただけると嬉しいです！