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 "メイン見出し" x=621 y=300 align=center

8. 上級者向け JavaScript 描画

JS描画の使い方（上級者）

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

※テンプレートによっては、この欄に初期コードが自動入力されます。

利用可能変数:

ctx, canvasWidth, canvasHeight, state, helpers

使える helper:

helpers.text / badge / rect / line / circle

AI（LLM）への依頼例:

このツール用のCanvas描画JavaScriptを生成してください。使えるのは ctx, canvasWidth, canvasHeight, state, helpers だけです。HTML/CSSは使わず、JSコード本体のみ出力してください。

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

9. 保存・出力

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

  • ブラウザ完結・ローカル処理: プライバシーに配慮し、画像処理はすべてクライアントサイドで行われます。サーバーへの通信は発生しません。
  • 日本市場に最適化したデザイン（NEW）: 日本のApp Storeやブログ記事でそのまま使える34種類の高品質なテンプレートを搭載。自然な日本語のフォントバランスと、目に優しい配色をプリセットしました。
  • 直感的なレイアウト選択（NEW）: 「左説明＋右スクショ」「3ステップ紹介」など、用途に合わせた名前からテンプレートを選べるようになりました。
  • マルチ画像レイヤー: 背景画像、スクリーンショット、追加画像（前面）の3層構造で、自由度の高い合成が可能です。
  • カスタム描画スクリプト: 自由なCanvas命令やJavaScriptを入力して、デザインを無限に拡張できます。サンプルやヘルプも完全に日本語化されています。
  • プレビューズーム機能: 大きなキャンバスも全体像を把握しながら作業できます。初期表示は作業しやすい20%ズームに設定されています。
  • PNG保存 & 設定一括コピー: 生成した画像をフル解像度で保存できるほか、現在のデザイン設定をJSON形式などで書き出せます。

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

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

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

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