お手軽スクリーンショットアプリ、FrameShotを作った

Webサービスの紹介画像を撮るたびに、いろんなことが気になっていた。

• ブラウザ全体を撮ると、関係のないタブやお気に入りバーまで写る。
• 別日に撮るとウィンドウの幅が変わったりで、画像の大きさが揃わない。
• 手元のモニターとは違うFHDや4K解像度の出力サイズで撮りたい。
• スマートフォン表示にした画像も撮りたい。

どれも一度だけなら、切り抜いたり、幅を測ったり、ブラウザの開発者ツールを開いたりすれば済む。
README、リリースノート、SNS、紹介ページのために何度も撮るとなると、その小さな手間がだんだん気になってくる。

そこで作ったのが、Windows向けのスクリーンショット作成アプリ「FrameShot」である。 URLを開いて実際のページを操作し、サイズと見た目を選ぶと、背景や枠を含むPNGとして保存できる。

関係のないブラウザの表示を写さず、何枚撮っても寸法が揃い、手元のモニターとは違うFHDや4Kの出力サイズも選べるようにする。
スマートフォン風の画像も、同じアプリの中で作りたい。
せっかくなら、背景や影も足して、撮っただけの画像を少しおしゃれにしたい。
そんな感じのアプリ。

FrameShotの操作画面。URLを開き、出力サイズや端末、背景などを選んで保存する。

ほかのタブとお気に入りを写さない

ブラウザのウィンドウをそのまま撮ると、欲しいWebページの外側にタブ、お気に入りバー、ブラウザのボタンまで付いてくる。 撮影前に隠すか、撮影後に切り抜けばよいのだが、毎回やると面倒である。

FrameShotが撮影するのは、アプリ内で開いた対象ページの表示領域である。 完成画像のブラウザ枠はFrameShotが別に描画するため、普段使っているブラウザのタブやお気に入りバーは入らない。

ブラウザ枠にはURLを表示できる。 表示するのはホスト名、必要ならポート番号、パスだけで、クエリ文字列とハッシュは省く。 撮影対象ページの移動先は変えず、完成画像のアドレス欄だけをすっきり見せる。

欲しい部分だけを写せるので、撮影のたびにブラウザ上部をトリミングする作業が要らなくなる。

FrameShotが書き出した1280 × 720のDesktop画像。普段使っているブラウザのタブやお気に入りバーは入らない。

小さな画面でも4KのPNGを書き出せる

FrameShotは、アプリの画面に見えている範囲をそのまま切り取るものではない。 完成するPNGと同じ寸法のキャンバスを内部に作り、操作中はPCの画面へ収まるように縮小して表示している。

FrameShotでいう出力サイズは、背景、余白、ブラウザ枠を含むPNG全体の寸法である。

保存するときは、操作していたWebページを一時的な撮影用ウィンドウへ移し、指定したWebページの表示領域（ビューポート）と取得倍率で撮影する。 その画像を背景や枠と合成し、最後に指定した出力サイズへ揃える。

このため、4Kの画像を作るために、FrameShotのウィンドウを3840 × 2160まで広げる必要はない。 小さなノートPCで操作していても、次の出力サイズを選べる。

サイズプリセットで出力寸法を揃える

スクリーンショットを何枚か並べたときに気になるのは、解像感よりもサイズのばらつきだったりする。 片方だけ横に長い、ブラウザバーの高さが違う、余白が少し狭い。 一枚ずつ見ると小さな差でも、一覧ではよく目立つ。

FrameShotでは、Desktopのサイズプリセットを選ぶと、余白や枠を含む出力サイズが固定される。 同じFHDを選んで撮れば、別のページでも1920 × 1080のPNGになる。 プリセットにない寸法はCustomで指定できる。

モバイル向けには、Google Pixel 10、Samsung Galaxy S24、iPhone 17、iPhone 17 Pro Max、iPad、iPad Pro 12.9インチの選択肢を用意した。 こちらはWebページの表示領域を基準にし、端末フレームと余白を足して出力サイズを自動計算する。

たとえばiPhone 17の表示領域は402 × 874である。 FrameShotはこれを幅と高さがそれぞれ2倍になるように取得し、端末フレームと既定の余白を加えた924 × 1868のPNGへ仕上げる。

iPhone 17プリセットで書き出した924 × 1868の画像。端末フレーム、背景、余白を含む。

同じサービスの三つの機能を紹介するときも、毎回同じプリセットを選べば、画像の比率と外枠が揃う。 READMEやランディングページへ並べる前の調整がかなり少なくなる。

背景と枠を足すと紹介画像らしくなる

寸法が揃っても、Webページを切り抜いただけでは紹介画像として少し物足りない。 FrameShotでは、Webページの周囲へ次の要素を加えられる。

• 淡いグラデーション背景
• 余白と角丸
• ドロップシャドウ
• URLを表示できるブラウザ枠
• AndroidやiPhone風のスマートフォンフレーム
• iPad風のタブレットフレーム

背景には、Mint PearlやLavender Mintのような素直なグラデーションに加え、Sea Glass Flow、Orchid Tide、Rosewater Ink、Apricot Lilacという流体的な模様も用意した。 画像素材を貼っているのではなく、複数のCSSグラデーションを重ねて描いている。
それだけでも、Webページだけを切り抜いた画像より「紹介するために整えた一枚」に近づく。

凝った文字組みやロゴの配置までできるわけではない。 ただ、背景を敷いて枠を付ける程度なら、別のデザインツールを開かずに済む。

ログインして撮りたい状態まで動かせる

FrameShotの中央に表示されるページは、静止したプレビュー画像ではない。 ElectronのWebContentsViewで開いたChromiumのページなので、クリック、入力、スクロール、画面遷移をそのまま行える。

管理画面へログインし、メニューを開き、一覧を少しスクロールする。 その状態を作ってから「保存」を押せる。 URLを読み込んだ直後しか撮れないツールでは扱いにくい画面にも使いやすい。

OAuthで新しいウィンドウが必要な場合にも対応している。 ポップアップを開く前には移動先URLとPOSTの有無を確認し、許可した場合だけ対象ページと同じセッションで開く。

ローカル開発中のページにも使える。 localhost、LAN内のURL、公開URLを開けるほか、開発用HTTPSの証明書エラーをホスト単位で許可できる。 証明書の例外は、そのホストの期限切れやホスト名不一致を含む検証エラーすべてを受け入れるため、信頼できる開発環境だけで使う前提である。

かんたん撮影

使い方は、だいたい次の四段階で終わる。

1. 上部のURL欄へ撮影したいページを入力する。
2. 中央のページを操作し、撮りたい状態を作る。
3. DesktopまたはPhoneのサイズを選び、背景や余白、影を整える。
4. 「保存」または「コピー」を押す。

「保存」はPNGファイルを書き出し、「コピー」は画像をWindowsのクリップボードへ入れる。 READMEへ貼るなら保存、チャットや資料へすぐ貼るならコピーという使い分けができる。

ショートカットは、URL欄へ移動するCtrl + L、保存するCtrl + S、再読み込みするCtrl + Rに対応している。 対象ページ側へフォーカスが移っていても、FrameShotの操作として受け取る。

使う

配布対象は現在、Windows x64だけである。
Latest ReleaseからFrameShot-<version>-Windows-x64-Portable.exeをダウンロードし、インストーラーを使わずに起動できる。

※ ここでの「Portable」はインストーラーが不要という意味で、設定はWindowsのAppDataへ保存する。

EXEにはWindows Authenticodeの署名を設定していないため、ダウンロード時や初回起動時にMicrosoft Defender SmartScreenの警告が出る場合がある。 リポジトリと配布元を確認したうえで使ってほしい。

あくまでイメージ画像となるため、実機と完全に同じ見た目にならないことに留意。

ソースコードとダウンロードリンク

• FrameShotリポジトリ
• Latest ReleaseからFrameShot-<version>-Windows-x64-Portable.exe