クローム 画面 キャプチャ。 【知ってた? Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法(拡張機能も不要!)

WEBサイト全体を丸ごとキャプチャできるブラウザアドオン4選

クローム 画面 キャプチャ

Headline• PCのスクリーンショット機能とキャプチャツールの違い PCにはスクリーンショット機能がありますが、WEBサイトをキャプチャするとこんな感じになります。 ウィンドウを最大化しても、モニタ解像度以内の範囲(見えている部分)しか撮影できません。 Windowsだと自動保存されないので、いったん編集ソフトに貼り付けてから保存する必要があります。 面倒ですねー。 できればこんな感じでサイト全体を丸ごとキャプチャして、 時には選択範囲のみキャプチャして、 たまに簡単な編集もして、 指定した場所に保存したり、時にはそのままTwitterに流したりしたいですよね。 これを簡単に実現できる方法があるんです。 ブラウザ拡張機能(アドオン)を勧める理由 サイト全体画像を撮る方法は4つあります。 一画面ずつスクリーンショットを撮ってつなぎ合わせる• 専用アプリを使う• オンラインサービスを使う• ブラウザ拡張機能を使う スクリーンショットをつなぎ合わせるのは面倒だし、専用アプリをわざわざ立ち上げるのもまた面倒。 オンラインサービスは日本語文字化け・編集機能不備・変換に時間がかかることが多いのでパス。 ということで、一番のおすすめはブラウザ拡張機能です。 ブログを書きながらさくっと一発で撮れて、そのまま簡単な加工までできちゃいますから。 では、各アドオンの特徴を交えながらご紹介していきます。 スクリーンショット撮影方法 と、その前に、パソコンやスマホにあらかじめ搭載されている機能だけでスクリーンショットを撮る方法を整理しておきます。 0以降で標準装備になっています。 ちなみにXperiaは電源ボタン長押しでスクリーンショットが選択できます。 加工編集は専用ソフトを使うから、WEBサイト全体のキャプチャ画像だけほしい!という場合におすすめ。 Pearl Crescent Page Saverの使い方 使い方は簡単で、ブラウザのツールバーにカメラアイコン「Page Saver」から撮影方法を選択するだけ。 オプションから保存名や形式(PNG or JPEG)を設定できます。 シンプルゆえ軽量です。 下の画像はChrome版ですが、キャプチャ範囲は3種類指定できます。 「local image」を選択すると、PCに保存してある画像をブラウザ上で簡易編集することができます。 あまり使わないと思いますが、キャプチャ画像を再編集したい時は便利かもしれませんね。 Awesome Screenshotの使い方 今回は選択した部分をキャプチャしてみます。 キャプチャしたい範囲を選択したら、右下の「Capture」ボタンをクリック。 続いて編集画面に移るので、上部のツールバーから加工ツールを選んで編集します。 ポインタを乗せれば日本語説明が出てきますし、見ただけで何となくわかりますね。 ひととおり終わったら、右上の「完了」ボタンを押して保存方法選択画面へ。 Google Driveに保存できたり、ローカルに保存・クリップボードにコピー・そのまま印刷などが選べます。 オプションを開くと保存形式(JPEG or PNG)、ショートカットキー割当、保存先指定ができます。 かなりシンプルで、ブログで使うというより画像メモを残しておきたい時に使うほうが向いていると思います。 (追記)Awesome Screenshot がデータを外部送信? Cherome 版において、このアドオンはユーザーが見たページのURLをどこかに送信している疑いがある、という情報が出てきました。 真偽のほどは定かではありませんが、気になる方は他のアドオンに変更することをオススメします。 もし本当であれば、Firefox 版も同じような仕様になっていると思われます。 参考 「Awesome Screenshot」より機能が充実しているのは、「Webpage Screenshot」というアドオン。 キャプチャ範囲は2種類指定でき、日本語なのでわかりやすいです。 特筆すべき点は保存方法。 なんとローカルに保存するだけでなく、そのままSNSでシェアできたり、DropboxやEvernoteなどのクラウドサービス、さらにはWordPressに直接保存することができます。 いったんダウンロードして再びアップロード、という手間が省けますね。 Webpage Screenshotの使い方 「ページ全てをスクリーンショット」でブログ全体をキャプチャしてみましょう。 編集画面にはサイトが丸ごとコピーされて出てきます。 左上に編集ツールがあり、ここから長方形ツールやテキストを挿入できます。 スプレーや塗りつぶしなんかもあり、カラーパレットも「Awesome Screenshot」より充実しています。 編集が終わったら、右上のボックスで保存先を指定。 サイト全体をキャプチャすると容量がかなり大きくなるので、必要な部分だけ切り抜きしたほうが良いかも。 こんな感じでブログ全体がキャプチャされます。 こうして見ると、ブログって意外に長い… テキスト挿入じゃなく、テキストそのものを変更できる 「Webpage Screenshot」には面白い機能があり、なんとWEBサイトのテキストを別のものに置換することができるのです。 いたずらしたい ページを表示して、「Edit content」を選択します。 すると、こんなダイアログが出てくるので「OK」をクリック。 書き換えたいテキストを選択して、消しちゃいます。 で、こんな風に好きなテキストを入れられます。 テキストを入れ替えて他サイトを紹介するときは、一応許可取ったほうが良いと思います。 いたずら以外に有効活用法が思い浮かばないんですが、デザイン参考メモとかにいいかも。 ツールバーやコンテキストメニューから撮影範囲と保存方法を指定できます。 「外部エディタ」にPhotoShop等を指定しておけば、キャプチャ後すぐに編集ソフトで加工することもできます。 いちいち保存する必要がないので楽ちん。 「アップロード」を選択すると、TwitterやFacebookにそのまま流すことができます。 編集画面は別ウィンドウが開き、上部にツールバーが並んでいます。 真ん中あたりにある「Select」は長方形 or 丸形の選択ツールになります。 範囲を指定すると、右側にツールバーが表示され、「切り抜き」や「塗りつぶし」などが選べます。 「ぼかし」や「反転」もあり、必要なものは揃っている感じ。 「Shape」を選択すると、長方形 or 丸形シェイプで加工できます。 右側のツールバーでフォントサイズや種類、塗りつぶし色や枠色など細かい設定ができます。 右下の「Number」にチェックを入れると自動的にナンバリングされるので、WEBサービスの説明などに使えますね。 ローカルの画像を挿入することもでき、最終的にこんな感じで仕上がります。 「Set style」からテーマを選択すると統一感が出ますよ! 設定画面からキャプチャする画像のサイズを予め指定しておけるので、ブログ記事で使うことが多いなら記事幅に合わせて設定しておきましょう。 まとめ 本日ご紹介したキャプチャツール(アドオン)4つをまとめておきます。

次の

[N Air]よくあるご質問

クローム 画面 キャプチャ

概要 ここではIEで使えるSnapCrab for IEやchrome、firefoxなどブラウザのキャプチャ方法、さらに画面どこでもキャプチャできるwinshotの使い方をご紹介します。 ホームページ・ブラウザのキャプチャ ホームページは縦に長く、1枚の画像にしようと何回もキャプチャし、貼り付けて繋げるということをしているかたもいるかと思います。 そんなかたはのアドオンがおすすめです。 InternetExplorerで画面キャプチャする方法 「SnapCrab for IE」というアドオンがおすすめです。 インストール方法• SnapCrab for IEは以下のページからダウンロードできます。 (提供元:Vector様)• 「ダウンロードページへ」をクリックします。 「このソフトを今すぐダウンロード」をクリックすると、ダウンロードとインストールができます。 IEを再起動します。 「SnapCrabアドオンが使えるようになりました。 」と表示されましたら「有効にする」をクリックします。 アイコン表示方法 IEの右上に アイコンがでているかと思います。 本来複数のアイコンがあるのですが、カメラアイコンしか表示されていないようでしたら以下の操作をします。 カメラアイコンの左側に縦の点線が表示されます。 これを左にドラッグすると他のアイコンが表示されます。 必要に応じて再度ツールバーを固定します。 SnapCrab for IEの使い方 設定を行います。 画像の保存先を設定するとよいでしょう。 ブラウザに表示されている範囲をキャプチャします。 ページ全体をキャプチャします。 縦は最後までですが、幅はウィンドウ幅に依存します。 そのためウィンドウ幅を調整しておきます。 範囲を指定してキャプチャします。 カーソルが変わらないため少しわかりづらいのですが、マウスをドラッグした範囲となります。 特定のウィンドウの表示されている範囲をカーソルを含めてキャプチャします。 ブラウザに限らず別のウィンドウのキャプチャをとることができます。 クリックしてからカーソルを任意の場所に合わせます。 Ctrlキーを押すとキャプチャされます。 上記とほぼ同じ機能です。 デスクトップ全体をキャプチャします。 Ctrlキーを押すとキャプチャされます。 デスクトップ全体をカーソルを含めてキャプチャします。 Ctrlキーを押すとキャプチャされます。 キャプチャではなく、カーソルの位置の色がわかります。 ブラウザに限らずデスクトップ内どこでもわかります。 もう一度アイコンをクリックすると終了します。 Chromeで画面キャプチャする方法 「FireShot」という拡張機能がおすすめです。 インストール方法• FireShotは以下のページからダウンロードできます。 (提供元:Chromeウェブストア様)• 「CHROMEに追加」をクリックするとインストールできます。 FireShotの使い方 インストールすると画面右上に アイコンが表示されます。 これをクリックすると次のように表示されます。 「ページ全体をキャプチャ」は2つありますがどちらも同じ機能です。 縦は最後までですが、幅はウィンドウ幅に依存します。 そのためウィンドウ幅を調整しておきます。 「目に見える部分をキャプチャ」はブラウザのウィンドウを調整し、キャプチャしたい箇所をスクロールで表示しておきます。 そのウィンドウ内に表示されている箇所がキャプチャされます。 「キャプチャ選択」はブラウザ内のキャプチャしたい箇所を範囲選択できます。 キャプチャをすると別タブにキャプチャ結果が表示されます。 画像を右クリックから保存したり、クリップボードに保存できます。 「設定」では保存形式をPNGかJPGかに設定したり、ホットキー(ショートカットキー)を設定することができます。 ブラウザに限らず、画面全体のキャプチャ キャプチャの基本ですが、キーボードEnterキーの右上あたりにある「PrtScn(プリントスクリーン)」を押します。 これでクリップボードに保存されます。 「クリップボードに保存」とはコピーペーストのコピーにあたります。 次に「ペイント」を開きます。 ペイントはWindowsパソコンであれば最初からインストールされている画像編集ソフトです。 あとは必要に応じてトリミングやサイズ変更、保存をしていきます。 ブラウザに限らず画面一部分のキャプチャ WinShotというフリーソフトが便利です。 さまざまな機能がありますが、主に「クリップボードへコピー(短形範囲指定)」「JPEGで保存(短形範囲指定)」を使います。 WinShotは以下のページからインストールできます。 (提供元:窓の杜様) 右上の緑色の「ダウンロード」と書かれたボタンからダウンロードと、インストールができます。 WinShotを設定する WinShotを起動するとタスクに常駐します。 ディスプレイの右下、時計や日にちの隣に表示されている場合が多いかと思います。 ここで WinShotアイコンを右クリックし、環境設定をクリックします。 「基本設定」タブの「保存設定」から保存場所を指定します。 必要に応じて「マウスカーソルをキャプチャする」をチェックします。 「ホットキー」タブを開きます。 「クリップボードへコピー(短径範囲指定)」と「JPEGで保存(短径範囲指定)」のホットキー(ショートカットキー)をわかりやすいものにしましょう。 「OK」をクリックします。 WinShotの使い方 WinShotが常駐している状態で先ほど設定したホットキーを押します。 範囲指定のカーソルになるので、クリックまたはEnterキーで範囲を指定します。 十字キーで1ピクセル単位で動かすことができます。 拡大されたウィンドウを見ながら調整するといいでしょう。 このとき十字内に入っているピクセルはキャプチャ画像に含まれます。 PowerPointなどソフトに貼り付けるときは「クリップボードへコピー」を、ホームページに掲載するには「JPEGで保存」を使います。 「JPEGで保存」した場合は標準で「WS000000. JPG」という形式で名前がつきます。 名前を変える事をおすすめします。 まとめ パソコンに表示されている内容やブラウザのページ全体のキャプチャ方法いかがでしたでしょうか。 を組み合わせるとパソコン上でスマホ版のキャプチャをとることもできますね。 以上、どんどんキャプチャして資料作成やホームページの掲載にご活用ください。

次の

OBS Studioキャプチャできない対処法〜真っ黒で画面が映らない、OBSスタジオ録画できない問題を解決

クローム 画面 キャプチャ

続いて詳細機能を呼び出します。 そのまま「full」と入力すると候補が絞られ、フルスクリーンショット機能だけが表示されるので、そのままEnter(return)。 数秒で保存されます。 (上記手順のようにショートカットキーでも可) iPhoneなど任意のデバイスを選択した上で、いったんリフレッシュ(ページを更新)します。 あとの工程は全く一緒。 ショートカットキーで詳細機能を呼び出し、「full」と入力してEnter。 数秒で保存されます。 Chromeでフルスクリーンショット機能を使う際のコツと注意点 スクロールエフェクトを実装しているページのキャプチャー 「スクロールするにつれてコンテンツが表示されるページ」では、そのままスクリーンショット機能を発動してもうまくいきません。 例えば画像の遅延読み込みを行うLazyload系のスクリプトを実装しているページでは、空白の部分や、読み込み中のスピナーなどがキャプチャーされてしまうのです。 その場合は、いったんページ最下部までスクロールし、 すべてのコンテンツを表示させてからキャプチャーすると、うまくいくことが多いです。 「左右の余白」を含めるコツ ラップトップなど画面の狭いデバイスでは基本的に、「左右の余白」が切り詰めて表示されています。 Chromeの場合、その状態でフルスクリーンショット機能を使うと、さらに左右の余白がカットされた状態で画像が生成されます。 用途によってはこれでもいいんですが、もう少しリアリティーが欲しい場合もあるでしょう。 そんな時は、あらかじめブラウザの表示をズームアウトしておきます。 余白ぐらいなら、後で画像編集ソフトで追加できるんちゃう? ・・・と、最初は私も思っていました。 たしかに今回の例では、ヘッダー部分はなんとかなりそうに見えます。 しかしサイトレイアウトによっては簡単にいかないことも多いのです。 フッターのビフォア・アフターも見てみましょう。 【フッター】Before/After フッターには、デスクトップ表示でも左右いっぱいに広がる部分がありました。 このあたりの画像修正に時間をかけるくらいなら・・・やっぱりズームアウトしたほうがラクそうですよね。 なお、デバイスによっては「ディスプレイ自体の表示設定を変更する」という手もあります。 解像度を変更してスペースを拡大する ブラウザでズームアウトしすぎると、一部の文字が潰れてしまったりすることがあります。 「ディスプレイ自体の表示変更」ができる場合はそちらがベター。 より自然に仕上がります。 現状は「full」と入力するだけですぐに呼び出せますが、今後のアップデートによってデベロッパーツール内の機能が拡張されることもあるでしょう。 すると「full」でサジェストされる選択肢が増える可能性があります。 その場合の対策にもなるはずです。 (機能名自体が変わる可能性もありますが・・・) スニペットツール ChromeとFirefoxのキャプチャー機能比較 Google Chrome Chromeの場合、ショートカットキーが使えるとはいえ、デベロッパーツールを立ち上げて機能検索をする必要があります。 いくつかの手順を踏まないといけないため、慣れるまでは少々面倒に感じるかもしれません。 またラップトップ環境では左右の余白が切り詰められたりと、勘に頼りがちな調整が必要です。 Firefox 一方、Firefoxでの作業はとにかく直感的です。 ショートカットキーを忘れてもフルスクリーンショット機能にたどり着きやすい。 そして閲覧デバイスのディスプレイサイズのまま、「今見えている状態の余白感」を出力するのも分かりやすい。 モバイル表示を比較的正確にキャプチャーしてくれるのも大きな強みです。 ただし場合によっては不要な要素が写り込んだり、パララックスエフェクトを実装したページなどをうまくキャプチャーできないことがあるので、その場合は都度対処が必要になります。 Firefox版詳細.

次の