このエントリーをはてなブックマークに追加
X
Bluesky

ウェブサイトやアプリの画面を画像に変換して保存する方法

更新:

運営しているブログ等でウェブサイトやアプリケーションの説明をする際、表示されている画面の状態を画像に変換して保存したいことがよくある。 キャプチャ、スクリーンショットなどとも呼ばれている。

スクリーンショット

まずは、単に画面に表示されている部分だけを画像にして保存する方法を記す。

Windows

Windows 11の場合で説明する。 Windows 10などはメニューの配置などが異なる場合がある。

Windows はキーボード上の「Print Screen(プリントスクリーン)」キーを押すと、パソコンの画面に表示されている映像を画像としてクリップボードにコピーできる。 その後、グラフィックソフトやワードなどのアプリケーションで「貼り付け」を行うと、プリントスクリーンした画像を貼り付けることができる。 また、便利な技としてキーボードの「Alt」キーを押しながら「Print Screen」キーを押すとアクティブウィンドウだけキャプチャできる。

Windows標準アプリで「Snipping Tool」という便利なツールがある。 Windows 11ではスタートメニューなどから起動できる。 Snipping Tool のメニューから「新規作成」でキャプチャを開始し、切り取りモードを選択して切り取る。 モードは「四角形」、「ウィンドウ」、「全画面表示」、「フリーフォーム」がある。 画像は PNG、JPEG、GIF 形式を選択して保存できる。 テレビ視聴アプリはキャプチャできないようにプリントスクリーンが無効になっているものもあるが、Snipping Tool では可能。

ちなみにキーボードの「Windows」+「Shift」+「s」キーを同時に押すと Snipping Tool を簡単に起動できる。

Mac

Mac は[shift + command + 3]でデスクトップ全体、[shift + command + 4]で範囲を指定してキャプチャできる。 プレビューというアプリが使われている。

スマホ

Androidは電源ボタンと音量ボタンマイナス(ー)を同時に少し長めに押す。

iPhone、iPad(iOS、iPadOS)などは、ホームボタンがない最近の機種は電源ボタン(スリープボタン、サイドボタン、トップボタンなどとも言う)と音量ボタンプラス(+)を同時に押す。 ホームボタンがある古い機種はホームボタンと電源ボタンを同時に押す。 ホームボタンを押すとSiriが起動するので、スリープボタンを少し先に押した方が撮りやすい。

縦に長いホームページを画像に変換する方法

前述のOSのスクリーンショット機能は、ホームページのようにスクロールしないと見えない部分はキャプチャできない。 長いページ全体を画像に変換したい場合はフリーソフトなどを使う。

Firefox

ウェブブラウザのFirefoxは、標準でホームページ全体を簡単にキャプチャできる機能がある。 WindowsだけでなくMacなど他のOSでも使えるので便利。

手順は以下のとおり。

  1. Firefoxでウェブページを表示した後、ページ上で右クリックし、「スクリーンショットを撮影」を選択する。
  2. 右上に表示された「ページ全体を保存」または「表示範囲を保存」を選択する。
  3. 「ダウンロード」をクリックして保存する。

また、ページの必要な部分だけマウスでドラッグして範囲を選択すると、その部分だけキャプチャできる。 マウスカーソルを動かすとHTMLの要素ごとに点線で囲まれた領域が表示され、その部分をクリックするとその部分だけキャプチャできる。

Edge

Microsoft Windows標準のウェブブラウザEdgeにもキャプチャー機能が追加された。

手順は以下のとおり。

  1. Edgeでウェブページを表示した後、ページ上で右クリックし、「スクリーンショット」を選択する。
  2. ページ上部に表示された「エリアをキャプチャする」または「ページ全体をキャプチャ」を選択する。
  3. キャプチャした画面が表示されるので「💾 保存」をクリックして保存する。

Chrome

Google Chromeは、今のところ標準でスクリーンショット機能がない。 よって拡張機能(アドオン)を利用する。 個人的に使えそうだと思えるのは「FireShot」というアドオン。 Chromeウェブストアにある。

FireShotをインストールすると右クリックのメニューに「選択範囲をキャプチャ」が追加される。

また、FireShotの設定にて「ツールバーに固定する」をオンにした後、ツールバーに表示されたFireShotのアイコンをクリックすると「ページ全体をキャプチャ」や「表示部分をキャプチャ」などが選択できるようになる。

PHARMACY

PHARMACYは、ホームページなどをキャプチャできるWindows用フリーソフト。 ホームページのスクロールしないと見えない部分も画像に変換して保存できる。 PHARMACY(Vector) からダウンロードできる。 ただ、このソフトは2004年から更新されていない。 昔はよく使っていたが、現在はウェブブラウザの機能やアドオンが充実しているため使わなくなった。


はてなブックマーク
X
Bluesky
Facebook
Pocket