Pawandeep-prog/Snapframe

これは何？

主な機能

• 01アプリ画面を実際の利用イメージで見せるための、iPhoneモックアップなどのデバイスフレーム。
• 02スライド単位またはプロジェクト全体に適用できるテーマ設定と、用意されたスタイルやカスタムスタイル。
• 03書体や配置を調整できるテキストブロック。
• 04Undo/Redo履歴に対応したリアルタイムプレビュー。
• 05PNG、JPG、またはすべての解像度をまとめたZIPアーカイブへのエクスポート。
• 06スライドセットをプログラムで作成できる、ライブプレビュー付きJSONエディター。

ユースケース

• 新しいアプリのリリースに向けて、Play StoreやApp Store用のスクリーンショット一式を準備する。
• 専用のデザインツールを使わずに、アプリのマーケティング画像を作成する。
• AIアシスタントでスライドセットを生成し、見た目を調整する。

クイックスタート

1. 1

   リポジトリをクローンします

   git clone https://github.com/Pawandeep-prog/Snapframe.git
2. 2

   プロジェクトフォルダーに移動します

   cd Snapframe
3. 3

   依存関係をインストールします

   npm install
4. 4

   開発サーバーを起動し、http://localhost:5173 を開きます

   npm run dev

使う前に知っておきたいこと

• !Firefox では既知の表示上の問題があるため、サポート対象のブラウザーは Chrome です。

トピック

よくある質問

Snapframe とは？

アプリのスクリーンショットにデバイスフレームやテキストを加え、Play StoreやApp Store向けの画像を作れるWebベースのツール。 Snapframeは、アプリストア掲載用のスクリーンショットを作成するブラウザベースのエディターです。開発者やデザイナーは、iPhoneのフレームなどのデバイスモックアップにアプリ画面を配置し、テキストブロックを追加したり、スライド全体にテンプレートやカスタムスタイルを適用したりできます。

Snapframe は無料で使えますか？ライセンスは？

Snapframe は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

Snapframe は今もメンテナンスされていますか？

半年以内に更新あり。Snapframe の最終コミットは 2026年7月1日 です。

Snapframe は何に使えますか？

新しいアプリのリリースに向けて、Play StoreやApp Store用のスクリーンショット一式を準備する。 専用のデザインツールを使わずに、アプリのマーケティング画像を作成する。 AIアシスタントでスライドセットを生成し、見た目を調整する。

Snapframe のインストール方法は？

リポジトリをクローンします: git clone https://github.com/Pawandeep-prog/Snapframe.git プロジェクトフォルダーに移動します: cd Snapframe 依存関係をインストールします: npm install 開発サーバーを起動し、http://localhost:5173 を開きます: npm run dev

Snapframe はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Pawandeep-prog/Snapframe