[2026/10/3]

[DESKTOP App] Frameshot v1.0 — 固定サイズの枠にWebページを入れて、静止画・動画（音声つき）を撮る撮影ツール使い方ガイド

[DESKTOP App] Frameshot v1.0 — 固定サイズの枠にWebページを入れて、静止画・動画（音声つき）を撮る撮影ツール使い方ガイド

概要

Frameshot は、固定サイズの枠の中に Web ページを表示して、静止画と動画をボタン一つで撮るデスクトップアプリです。URL を入れて、枠の大きさを決めて、📷 を押すだけで、そのサイズの画像が保存されます。⏺ を押せば録画が始まり、もう一度押すと MP4 に保存されます。

画面（モニター）より大きい枠でも、欠けずに撮れるのが特徴です。たとえば縦 1320px の枠を、高さ 800px の画面で撮っても、下まで全部写ります。画面に入らないときは、表示だけを縮小して見せて、撮影は実寸で行います。動画も同じで、枠が画面からはみ出していても、全体が録れます。

外部のサイトもそのまま枠に入れられます。iframe を使わないので、相手サイトの埋め込み拒否（X-Frame-Options など）に引っかかりません。

ギャラリーのサムネや、作品紹介の動画を撮るために作りました。

Electron で作られたデスクトップアプリで、Windows・macOS・Linux に対応しています。

開発の経緯と実装の詳細は、技術記事にまとめています。

Download（GitHub）

スクリーンショット

Frameshot // 固定サイズの枠にWebページを入れて撮る

動画の設定

⏺ の隣の ▾ から、フレームレート・画質・最大録画時間・枠の音声を設定します。

Frameshot // 動画の設定メニュー

録画中

録画中は、枠の見える範囲だけが画面に出ます（録画されるのは枠の全体です）。

Frameshot // 録画中の画面

撮れる画像の例

画面より大きい枠（880×1320）を、下まで欠けずに撮った画像です。

Frameshot // 880×1320 で撮った静止画の例

アプリの特徴

  • 外部サイトをそのまま枠に入れる: iframe ではなく、アプリの中のブラウザ（Chromium）でページを開くので、埋め込みを拒否するサイトも入れられます。枠の中のスクロール・クリック・入力は、そのまま操作できます。
  • 画面より大きい枠でも欠けない: ページ自体を撮影サイズでレンダリングして撮るので、モニターの大きさに関係なく、縦長でも欠けません。画面に入らないときは、表示だけを縮小します。
  • 解像度倍率 1x / 2x / 3x（静止画）: 同じレイアウトを高い解像度で描き直して撮るので、文字や線がくっきりします。
  • 静止画は PNG / JPG / WebP: 画質を数値で指定できます。WebP は可逆圧縮（ロスレス）も選べます。
  • クリップボードにコピー: 撮った画像を、そのままほかのアプリに貼り付けられます。
  • 動画は MP4: ⏺ で録画、もう一度押して停止すると保存されます。フレームレートは 10 / 15 / 24 / 30 fps、画質は 3 段階、最大録画時間は 30 秒〜10 分から選べます。
  • 枠の音声も録れる: 設定で ON にすると、枠のページの音が動画に入ります（既定は OFF）。システム全体の音ではないので、ほかのアプリの音や通知音は入りません。
  • サイズプリセット: ギャラリー縦、フルHD、OGP、iPhone、iPad などを標準で用意しています。自分用のサイズも登録できます。
  • ブックマークと最近開いた URL: ★ で登録して、📚 から開けます。フォルダ分けはなく、並べ替えと削除ができます。
  • ファイル名テンプレート: {host}_{date}_{time}_{w}x{h} の形で、サイトのドメイン・日時・サイズが入ります。
  • ショートカット: 撮影・コピー・録画の開始と停止をキーボードで操作できます。
  • ログイン状態の保持: 枠の中でログインしたサイトは、次に起動したときもログインしたままです（通常のブラウザと同じです）。
  • ffmpeg を同梱: 録画に使う ffmpeg を同梱しているので、別に入れなくても動きます。自分の ffmpeg に切り替えることもできます。

ダウンロードと対応パッケージ

最新版は GitHub の Releases ページからダウンロードできます。

OSパッケージファイル名備考
Windowsframeshot-x.x.x-setup.exeWindows 10 / 11 向けインストーラー（おすすめ）
Windowsframeshot-x.x.x-portable.exeインストール不要のポータブル版
macOSframeshot-x.x.x-mac-arm64.dmgApple Silicon（M1 / M2 / M3 / M4）
macOSframeshot-x.x.x-mac-x64.dmgIntel Mac
Linuxframeshot-x.x.x-linux-x86_64.AppImageディストリビューションを問わず動く単体実行ファイル
Linuxframeshot-x.x.x-linux-amd64.debDebian / Ubuntu 系

各OSのインストール方法

Windows の場合

  1. Releases ページから -setup.exe（またはインストール不要の -portable.exe）をダウンロードします。どちらか一つで大丈夫です。
  2. ダウンロードしたファイルをダブルクリックし、画面の指示に従ってインストールします。ポータブル版は、置いた場所でそのまま動きます。
  3. ※注意: 署名していないアプリのため、Windows Defender（SmartScreen）の「Windows によって PC が保護されました」という青い警告画面が出ることがあります。その場合は「詳細情報」をクリックし、「実行」を選択してください。

macOS の場合

  1. Releases ページから、お使いの Mac に合った .dmg をダウンロードします（Apple Silicon は arm64、Intel は x64）。
  2. .dmg をダブルクリックしてマウントし、中の Frameshot.app を「アプリケーション（Applications）」フォルダにドラッグ＆ドロップします。
  3. ※注意: 署名・公証していないため、初回起動時は「開発元を検証できないため開けません」という警告が出ます。
    • macOS 15 (Sequoia) 以降: 警告を「完了」で閉じたあと、「システム設定」→「プライバシーとセキュリティ」を開き、一番下の「“Frameshot”は…ブロックされました」の横にある「このまま開く」をクリックします。認証後、もう一度起動して「開く」を選びます。
    • macOS 14 以前: アプリアイコンを「右クリック（Control+クリック）」して「開く」を選択し、確認ダイアログでもう一度「開く」をクリックします。
    • 「壊れているため開けません」と表示される場合は、ターミナルで次のコマンドを実行してから起動してください。
xattr -cr "/Applications/Frameshot.app"

※ macOS では、枠がウィンドウに収まらない大きさだと、動画の録画を始められないことがあります（静止画は問題なく撮れます）。ウィンドウを大きくして枠が全部入るようにするか、枠を小さくしてください。

Linux の場合

deb 版（Debian / Ubuntu 系）は、ダウンロードしたフォルダで次のコマンドを実行します。

sudo apt install ./frameshot-x.x.x-linux-amd64.deb

AppImage 版は、実行権限を付けてから起動します。

chmod +x frameshot-x.x.x-linux-x86_64.AppImage
./frameshot-x.x.x-linux-x86_64.AppImage

起動しない環境では、次の2点を試してください。

  • Ubuntu 22.04 以降で AppImage が動かないときは、FUSE が入っていない可能性があります。sudo apt install libfuse2 で入れてください。
  • サンドボックスのエラーが出るときは、--no-sandbox を付けて起動してください。

※ GPU の無い環境（リモートデスクトップ・仮想マシンなど）では、環境変数 FRAMESHOT_SOFTWARE_GL=1 を付けて起動すると、ソフトウェア描画で動きます。動作確認は Debian 12 + XFCE で行っています。

使い方

  1. 上の URL バーにアドレスを入れて Enter を押します（lain-lab.com のように、https:// なしでも大丈夫です）。
  2. 「W × H」の数字、または「プリセット」で、枠の大きさを決めます。
  3. ページを撮りたい状態にして、📷 撮影（静止画）か、⏺（録画。もう一度押すと停止して保存）を押します。

画面の見かた

場所内容
◀ ▶ ⟳戻る・進む・再読み込み
URL バーアドレスを入力して Enter。javascript: などの危険な URL は開きません
☆ / 📚ブックマークの登録（☆）と、ブックマーク・最近開いた URL の一覧（📚）
W / H / ⇄枠の幅と高さ（px）。⇄ で幅と高さを入れ替えます
プリセット / ＋ / －サイズのプリセットを選びます。＋で今のサイズを自分用に登録、－で自分用のプリセットを削除します
倍率静止画の解像度倍率（1x / 2x / 3x）
形式静止画の形式（PNG / JPG / WebP）
画質JPG / WebP の画質（1〜100。PNG では使いません）
ロスレスWebP を可逆圧縮にします
コピーも保存するときに、クリップボードにもコピーします
⏺ / ▾録画の開始・停止と、動画の設定
📋 コピークリップボードにコピーします（ファイルには保存しません）
📷 撮影静止画をファイルに保存します
画面の下ステータス、撮影サイズ、保存先（「開く」で保存先を開く、「変更…」で保存先を変える）

サイズとプリセット

標準のプリセットは次のとおりです。

プリセットサイズ
ギャラリー縦880×1320
ギャラリー縦1024×1536
デスクトップ1280×720
フルHD1920×1080
OGP1200×630
iPhone390×844
iPad820×1180

自分のサイズを登録するときは、W と H を入れてから「＋」を押し、名前を入れて Enter で登録します。登録したものは、自分用のプリセットとして一覧に出ます。

枠がウィンドウに収まらないときは、表示だけが縮小されます（画面の下に「表示 95%」のように出ます）。撮影は縮小せずに、設定したサイズで行われます。

静止画の撮り方

  1. 形式（PNG / JPG / WebP）、倍率、画質を選びます。
  2. 📷 撮影（または Ctrl+Shift+S）を押します。
  3. 保存先のフォルダに、画像が保存されます。

撮る瞬間だけ、画面の表示が一瞬ふくらんで見えることがあります。撮影用の設定に切り替えて、また戻しているためで、撮れる画像には影響しません。

倍率

倍率は「ズーム」ではありません。1 CSS ピクセルを何ピクセルで描くかを決める設定です。880×1320 の枠を 2x で撮ると、レイアウトはそのままで、1760×2640 の画像になります。ページを拡大して撮るのではなく、同じレイアウトを高い解像度で描き直すので、文字や線がくっきりします。

出力の片辺は 16384px までです（WebP は 16383px まで）。大きすぎるときは、撮る前にその旨が表示されます。

形式

形式内容
PNG劣化なし。画質の設定は使いません
JPG画質を指定できます。透明な部分は白で埋めます
WebP画質を指定できます。「ロスレス」にすると可逆圧縮になります

動画の撮り方

  1. ⏺（または Ctrl+Shift+R）を押すと、録画が始まります。
  2. ページを操作したり、スクロールしたりします。
  3. もう一度 ⏺ を押すと、停止して MP4 に保存されます。

録画の設定は、⏺ の隣の ▾ から変えます。

設定内容
フレームレート10 / 15 / 24 / 30 fps（既定は 15）
画質軽量（ギャラリー向け）／標準／高画質（既定は軽量）
最大録画時間30 秒・1 分・2 分・5 分・10 分（既定は 2 分）。時間になると自動で止まります
枠の音声を録る枠のページの音を、動画に入れます（既定は OFF）

録画中は、次のようになります。

  • 枠の見える範囲だけが画面に出ます（表示は左上の切り抜きです）。録画されるのは枠の全体です。
  • サイズ・倍率の変更と、静止画の撮影はできません。
  • 録画中にウィンドウを閉じようとすると、録画を仕上げてから閉じます。
  • 保存が終わるまで、書きかけのファイルは .mp4.part という名前です。

動画は等倍（1x）のみです。倍率を 2x や 3x にしても、動画の大きさは枠の大きさのままです。

音声

「枠の音声を録る」を ON にすると、枠のページの音が動画に入ります。

  • 入るのは、枠の中のページの音だけです。システム全体の音（ほかのアプリの音、通知音）は入りません。
  • 録っている間も、枠の音は普段どおり聞こえます。
  • 音楽や効果音が不自然にならないように、ステレオで、音声の自動調整（エコー除去・ノイズ抑制・自動音量）は切って録っています。
  • 音声がうまく録れなかったときは、録画自体は失敗にせず、映像だけを保存して、画面の下に警告を出します。

ブックマークと最近開いた URL

  • ☆ を押すと、今のページをブックマークに登録します（登録済みなら★で表示され、もう一度押すと外れます）。
  • 📚 を押すと、ブックマークと、最近開いた URL の一覧が出ます。選ぶと、その URL を開きます。
  • 「並べ替え・削除」から、ブックマークの順番を変えたり、削除したりできます。
  • 「履歴を消去」で、最近開いた URL を消せます。

ショートカット

操作ショートカット（macOS は Ctrl の代わりに Cmd）
静止画を保存Ctrl+Shift+S
クリップボードにコピーCtrl+Shift+C
録画の開始 / 停止Ctrl+Shift+R
URL バーへ移動Ctrl+L
再読み込みF5 / Ctrl+R
戻る・進むAlt+← / Alt+→
ページの開発者ツールF12
Frameshot 自身の開発者ツールCtrl+Shift+F12

保存先とファイル名

保存先の既定は、「ピクチャ」フォルダの中の Frameshot です。画面の下の「変更…」で変えられて、「開く」で、保存先のフォルダを開けます。

ファイル名は、{host}_{date}_{time}_{w}x{h} の形で付きます。

部分内容
{host}開いているページのドメイン
{date} / {time}撮影した日付と時刻
{w}x{h}撮影サイズ（px）
末尾の @2x / @3x静止画で倍率が 2x 以上のときだけ付きます

例: lain-lab.com_20261003_112935_1024x1536.webp

動画は、同じ名前で拡張子が .mp4 になります。

設定ファイル

設定、ブックマーク、最近開いた URL は、ユーザーデータのフォルダの settings.json に保存されます。

OS保存先
Windows%APPDATA%\Frameshot\settings.json
macOS~/Library/Application Support/Frameshot/settings.json
Linux~/.config/Frameshot/settings.json

ffmpeg について

録画には、別プロセスとして ffmpeg を使います。ffmpeg は、次の順番で探します。

  1. settings.json の ffmpegPath に書いたもの
  2. アプリに同梱のもの
  3. PATH 上の ffmpeg

同梱の ffmpeg で動くので、通常は何もしなくて大丈夫です。自分で入れた ffmpeg を使いたいときだけ、settings.json の ffmpegPath に実行ファイルの場所を書いてください（アプリを閉じてから編集します）。▾ のメニューの下のほうに、今使っている ffmpeg の種類（同梱／システム／指定）が出ます。

注意事項

  • DRM（著作権保護）がかかった映像（配信サービスなど）は、再生も撮影もできません。保護を回避する機能はありません。
  • 動画は等倍（1x）のみです。2x や 3x の動画は撮れません。
  • 録れる音は、枠のページの音だけです。システム全体の音は録れません。
  • Three.js など、描画の重いページの動画は、PC の性能によってはカクつきます。ページの描画と録画のエンコードを同じ PC でやるためです。フレームレートを下げる、枠のサイズを小さくする、ほかのアプリを閉じる、といった方法で軽くなります。ページから届く映像が指定のフレームレートに間に合わなかったときは、録画のあとに警告が出ます。
  • macOS では、枠がウィンドウに収まらない大きさだと、録画を始められないことがあります（静止画は問題ありません）。
  • 署名していないアプリのため、初回起動時に OS の警告が表示されます（インストール方法を参照）。
  • 枠の中のページは、外部サイトを開くため、アプリの本体から隔離（サンドボックス）されています。ページから、パソコンのファイルや、アプリの設定に触れることはできません。
  • 通信は、枠に表示するページの読み込みだけです。撮った画像や動画が、外部に送信されることはありません。
  • 動画のエンコードには H.264 を使っています。H.264 には特許の問題があるため、気になる場合は、ご自身で確認してください。

よくある質問 (FAQ)

Q. 縦長の枠を撮っても、下が切れませんか
A. 切れません。ページ自体を撮影サイズでレンダリングして撮るので、画面の高さに関係なく、枠の全体が撮れます。画面に入らないときは、表示だけが縮小されます。

Q. 撮影の瞬間に、画面が一瞬拡大されます
A. 撮影用の設定（倍率）に切り替えて、また戻しているためです。撮れる画像には影響しません。

Q. 倍率とは何ですか。ズームですか
A. ズームではありません。同じレイアウトを、高い解像度で描き直す設定です。2x なら、880×1320 の枠から 1760×2640 の画像が撮れます。

Q. 動画を 2x で撮れません
A. 動画は等倍のみです。ページから届く映像が、等倍の大きさでしか取れないためです。高解像度が必要なときは、静止画（2x / 3x）を使ってください。

Q. 動画がカクつきます
A. ページの描画が重いと、映像が間に合わずにカクつきます。特に Three.js などの 3D のページが重いです。▾ からフレームレートを 15 に下げる、枠を小さくする、ほかのアプリを閉じる、を試してください。軽いページなら、問題なく録れます。録画のあとに「映像は約 N fps でしか届きませんでした」と出たときは、ページの描画が追いついていません。

Q. macOS で「録画のフレームが撮影サイズと違います」と出て、録画が始まりません
A. 枠がウィンドウに収まらず、縮小表示になっているときに出ます。ウィンドウを大きくして枠が全部入るようにするか、枠を小さくしてください。静止画は、縮小表示のままでも撮れます。

Q. 動画に音が入りません
A. ▾ のメニューの「枠の音声を録る」にチェックが入っているか確認してください（既定は OFF です）。入るのは枠のページの音だけなので、ページが音を出していないと無音になります。音声を録れなかったときは、映像だけが保存されて、画面の下に警告が出ます。

Q. 動画の音が、なんだか変です
A. v1.0.0 から、音声の自動調整（エコー除去・ノイズ抑制・自動音量）を切って、ステレオで録るようにしています。古い版を使っているときは、最新版に更新してください。

Q. 配信サービスの映像を撮ろうとすると、真っ黒になります
A. DRM で保護された映像は、再生も撮影もできません。保護を回避する機能は、ありません。

Q. 枠の中のページで、ログインできますか
A. できます。枠の中は、通常のブラウザと同じように操作できて、ログイン状態は次に起動したときも残ります。ただし、サイトによっては、新しい環境からのログインが、追加の認証を求められることがあります。

Q. 録画した動画の長さが、短い／長い
A. 録画した時間どおりの長さで保存されます。最大録画時間（既定は 2 分）に達すると、自動で停止します。▾ から、30 秒〜10 分に変えられます。

Q. 「ffmpeg を起動できません」と出ます
A. 同梱の ffmpeg が起動できない環境です。自分で入れた ffmpeg を使うときは、settings.json の ffmpegPath に、実行ファイルの場所を書いてください。

Q. 保存先を変えたい
A. 画面の下の「変更…」から選べます。「開く」で、今の保存先をエクスプローラー（Finder）で開けます。

Q. SmartScreen の警告が出ます
A. 署名をしていないためです。「詳細情報」→「実行」で起動できます。

Q. Linux で AppImage が起動しません
A. sudo apt install libfuse2 を試してください。サンドボックスのエラーが出るときは、--no-sandbox を付けて起動します。GPU の無い環境では、FRAMESHOT_SOFTWARE_GL=1 も付けてください。

更新履歴

バージョン日付内容
v1.0.12026/10/3動画エンコードの負荷を下げた（x264 を veryfast に変更）。描画が重いページで、映像が間に合わなかったときに録画のあとに警告を出すように。macOS（Apple Silicon / Intel）と Linux（AppImage / deb）の配布物を追加
v1.0.02026/10/3初回公開（Windows）。静止画（PNG / JPG / WebP、倍率 1x〜3x）、動画（MP4、等倍）、枠のページの音声の録音、サイズプリセット、ブックマーク

クレジット

本アプリは以下のソフトウェアを利用して構築されています。

  • Electron — MIT License
  • sharp — Apache License 2.0
  • FFmpeg（ffmpeg-static 経由で同梱。別プロセスとして起動） — GPL
  • 本アプリのソースコード — MIT License

同梱物のライセンス文と、ソースコードの入手先は、リポジトリの THIRD_PARTY_LICENSES.md にあります。