サブスクリプションやFigmaなしで美しいリリーススクリーンショットを作成する方法

記事を公开发布したりペットプロジェクトをリリースするたびに、同じルーティンが繰り返されます。生のままのインターフェーススクリーンショットを撮影し、グラフィックエディタを開き、角の丸みを調整し、影を加え、背景にグラデーションを選びます。20分後、コードではなくピクセル調整に時間を費やしていることに気づきます。

美しいモックアップを提供する有料サービスは、高品質なエクスポートに料金を請求するか、真ん中に透かしを配置するのが当たり前になっています。先日、この問題をブラウザ内で直接解決するオープンソースプロジェクトscreenshot-studioを見つけました。登録不要、サブスクリプション不要、隠れた制限もありません。

プロジェクトの中身

このリポジトリは開発者のKartik Labhshetwarによってメンテナンスされています。本質的には、画像やコードスニペットをドロップして、洗練されたプロモーションマテリアルに素早く変換できるWebエディターです。

このプロジェクトはローカル環境またはscreenshot-studio.comで直接動作します。すべての計算とレンダリングはクライアント側で実行されるため、画像が外部に送信されることはありません。スクリーンショットにテストデータやプライベートダッシュボードの断片が含まれている場合、これは多くの人にとって重要なポイントです。

このエディターでできること：

• カスタマイズ可能なアドレスバー付きで、Chrome、Safari、Arcブラウザのモックアップでスクリーンショットをラップ。
• 数百種類の готовых グラデーション、ぼかし、テクスチャ背景を適用。
• リアルなパースと影付きで、3D空間で画像を回転。
• 注釈、矢印、テキスト、機密情報を隠すためのぼかしゾーンを追加。
• MP4、WebM、GIF形式で動画とインターフェースアニメーションをレンダリング。
• 最大5倍までのスケーリングで静的グラフィックをPNGとJPGにエクスポート。

エディターの実践的な機能

コードとモックアップの操作

ソーシャルメディアの投稿やドキュメントを準備する場合、設定スニペットやコンポーネントを表示する必要があることが多いです。このエディターには組み込みのコードスニペットジェネレーターがあるため、Carbonのような外部ツールを開く必要がありません。

Webサービスのスクリーンショットには、洗練されたSafariとChromeのフレームがあります。ライトテーマとダークテーマを切り替えられ、ブラウザヘッダーのサイズを調整でき、アドレスバーに 원하는 URLを手動で入力できます。小さなディテールですが、投稿内のスクリーンショットが切り抜かれた矩形ではなく、動作中の製品のようにすぐに見えます。

3Dエフェクトとパースペクティブ

プロモーションマテリアル内の通常の平面画像は、フィード内で埋もれてしまうことが多いです。このエディターには約30の組み込みパースプレセットがあります。希望の角度で画像を回転させて傾け、調整可能な深度でソフトシャドウを追加できます。

キャンバス上でラグなしで高速に動作します。 эффектはCSSとWebGL変換で作成されるため、スライダー移動ごとにソースを再レンダリングする必要がありません。

アニメーションとビデオエクスポート

このようなオープンソースユーティリティにとって、これは本当に珍しい機能です。静的画像を保存できるだけでなく、要素出現アニメーションやスムーズズームを含む短い動画も作成できます。

内部にはキーフレームを持つ基本的なタイムラインと、数十のアニメーションプリセットがあります。動画エンコーディングはブラウザ内でFFmpeg WASMとWebCodecsライブラリで処理されます。つまり、エクスポートはブラウザがサポートしている場合、GPUハードウェアアクセラレーションを活用します。

技術スタック

このプロジェクトは、現代のReactフロントエンド開発を学ぶ人にとって良い例になれる、モダンなスタックを使用しています：

• ベースフレームワークとしてのNext.js 16とReact 19。
• エディター全体を型付けするためのTypeScript。
• コンポーネントインターフェースのためのTailwind CSS 4とRadix UI。
• キャンバスとレイヤーの状態を管理するためのZustand。
• インターフェースアニメーションのためのMotion（Framer Motion）。
• メディアファイルのエンコードのためのFFmpeg WASMとWebCodecs。

コードベースは整理されており、エディターの状態は予測可能なZustandストアに保存されているため、キャンバスロジックの理解が容易です。

プロジェクトをローカルで実行する方法

エディターをローカルにデプロイしたり、ソースコードを探索したい場合は、標準的なコマンドを実行するだけです：

git clone https://github.com/kartik-lab/screenshot-studio.git
cd screenshot-studio
npm install
npm run dev

ビルド後、アプリケーションはlocalhost:3000で起動します。このリポジトリは寛容なApache 2.0ライセンスの下で配布されているため、独自の社内ツールの基盤としてコードを自由に活用できます。

このプロジェクトが役立つ人

このユーティリティは、いくつかのシナリオで日常的なタスクを完璧に処理します：

• ペットプロジェクト開発者：READMEのリポジトリプレビューをフォーマットし、Product HuntやTelegram、Xでの投稿用のスクリーンショットを準備。
• 技術ライター：管理スクリーンショットのトークンやメールを迅速にぼかし、ガイド用の画像を優雅にパッケージ化。
• インディーハッカー：重い動画エディターを起動せずに、機能の動作を示すアニメーションGIFや短い動画を作成。

このプロジェクトは積極的にスターを獲得しており、Vercel OSSグランツプログラムのサポートを受けています。

重いエディターでのモックアップに時間を費やすことに疲れているなら、screenshot-studio.comをチェックするか、リポジトリをフォークしてください。このツールは多くの時間を節約し、期待通りのことを正確に実行します。