WordPressで自動ウェブサイトスクリーンショットを作成する方法

ウェブサイトのスクリーンショットを手動で更新するのは、多くの時間を無駄にします。ポートフォリオを作成している場合でも、ディレクトリを作成している場合でも、ソフトウェアをレビューしている場合でも、常にキャプチャ、トリミング、アップロードを行うことは、コンテンツ作成を著しく遅くする可能性があります。

詳細なチュートリアルのスクリーンショットにはまだ個人的なタッチが必要ですが、自動化は簡単なウェブサイトプレビューの時間を大幅に節約できることに気づきました。これは、終わりのない手作業なしでサイトを新鮮に保つための鍵です。

このガイドでは、WordPressで自動ウェブサイトスクリーンショットを簡単に撮るための3つの信頼できる方法を紹介します。

任意のウェブサイトのスクリーンショットを表示したい場合でも、ポートフォリオのサムネイルを自動生成したい場合でも、これらの方法はプロフェッショナルで最新の状態に保たれたサイトを維持するのに役立ちます。

WordPressで自動ウェブサイトスクリーンショットを作成する理由

WordPressウェブサイトをお持ちの場合、投稿にスクリーンショットを追加すると、読者はコンテンツが何についてであるかをすばやく視覚的に確認できます。ただし、多数のリンクのこれらの画像を個別にキャプチャしてトリミングするには、時間がかかる場合があります。

自動スクリーンショットは、次のものに最適なソリューションです。

• ウェブデザインポートフォリオの構築
• テーマディレクトリの作成
• ソフトウェアレビューの作成
• 自身のサイトでの視覚テストの実行

自動化は時間を節約し、画像サイズが完全に一貫していることを保証します。さらに、これらのツールの多くを使用すると、手動キャプチャを組み合わせるのではなく、フルページスクリーンショットを簡単に自動キャプチャできます。

このプロフェッショナルな一貫性は、ユーザーエンゲージメントを高め、ウェブサイトのSEOに貢献します。関連性の高い高品質の画像は、訪問者をページに長く留めるため、検索エンジンに肯定的なシグナルを送信します。

同様に、自動ウェブサイトスクリーンショットを使用して、テーマを更新する前や、大規模なデザイン変更を行う前に、サイトの視覚的なバックアップを作成できます。これにより、ウェブサイトの新しいスタイルと古いスタイルを簡単に並べて比較できます。

手動スクリーンショットに固執する場合

さて、自動化を使用しない場合を知ることが重要です。段階的なチュートリアルを作成している場合は、手動でスクリーンショットを撮る必要があります。

自動化ツールは、WordPress管理ダッシュボードにログインしたり、非表示のドロップダウンメニューを開いたり、ユーザーにクリックする場所を正確に示すために正確な赤いボックスや矢印を追加したりすることはできません。

たとえば、WPBeginnerでは、すべてのバックエンドチュートリアルのスクリーンショットを手動で撮っています。その後、Adobe PhotoshopやAffinity Studioなどの専用グラフィックアプリを使用して、画像をクリーンアップし、機密データをぼかし、署名の注釈を追加します。

しかし、公開ウェブサイトのプレビューに関しては、自動化が絶対に最善の方法です。

次に、WordPressで自動ウェブサイトスクリーンショットを簡単に作成する方法を見てみましょう。

方法1：Captureプラグインを使用してスクリーンショットとPDFを作成する

カスタムコードを扱わずに動的に更新されるウェブサイトプレビューを表示したい場合は、これが最も簡単な方法です。

Captureのような専用プラグインを使用すると、スクリーンショットはバックグラウンドで自動的に生成されます。ターゲットのウェブサイトのデザインが変更された場合、スクリーンショットは新しい外観に合わせて自動的に更新されます。

さらに、プラグインが画像ファイルを処理するため、WordPressサーバーのストレージ容量を消費しません。

古いスクリーンショットプラグインは数多くありますが、ほとんどは放棄されています。そのため、このプロフェッショナルなプレビューを簡単なショートコードで確実に生成するために、積極的にメンテナンスされているCaptureプラグインの使用を強くお勧めします。

ステップ1：Captureプラグインのインストールと設定

まず、Captureプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。

プラグインを有効化した後、設定 » Captureに移動する必要があります。ここで、「Capture Console」リンクをクリックして無料アカウントを作成し、APIキーを取得します。

これには追加のサインアップ手順が必要ですが、古い放棄されたプラグインと比較して、サービスが安定して信頼性が保たれることを保証します。

その下には、 デフォルト設定 セクションがあります。デフォルトのビューポート幅と高さ（1200×800）は、標準のデスクトップスクリーンショットに最適です。

ただし、 デフォルト遅延（秒） を2〜3秒に変更することをお勧めします。多くの最新ウェブサイトには、ローディング画面、カスタムフォント、またはアニメーションがあります。わずかな遅延を追加することで、プラグインが画像をキャプチャする前にターゲットウェブサイトが完全に読み込まれるのに十分な時間が与えられます。

セットアップに満足したら、必ず 「変更を保存」 ボタンをクリックしてください。

その後、 「接続をテスト」 ボタンをクリックすることを強くお勧めします。これにより、キーが正しく機能しているかどうかがすばやく検証され、後でエラーが発生するのを防ぐことができます。

ステップ2：ショートコードを使用してスクリーンショットを作成する

これで、簡単なショートコードを使用して、任意の投稿またはページにスクリーンショットを簡単に追加できます。ブロックエディターでショートコードブロックを検索し、次のようなコードを貼り付けるだけです。

[capture_screenshot url="https://wpbeginner.com" vw=1200 vh=800 full=true]

スクリーンショットはどのように表示されますか？

メディアライブラリにアップロードする標準の画像とは異なり、これらの自動生成されたスクリーンショットは、訪問者があなたのページを読み込んだときに即座に生成されます。

ターゲットウェブサイトへの「ライブウィンドウ」として機能するため、テーマディレクトリ、ウェブデザインポートフォリオ、またはソフトウェアレビューブログを運営している場合に、このアプローチは非常に役立ちます。

古い画像を置き換えるためにあなたが指一本動かす必要なしに、読者が常にターゲットウェブサイトの最新バージョンを見ていることを保証できます。

スクリーンショットのカスタマイズ

Captureプラグインは非常に柔軟です。ショートコードにパラメータを追加して、スクリーンショットの外観を変更できます。

• 全ページ: full=true を使用して、ページの全長をキャプチャします。
• ダークモード: darkMode=true を使用して、ウェブサイトのダークバージョンをキャプチャします。
• 広告ブロック: blockAds=true を使用して、スクリーンショットから迷惑な広告を非表示にします。
• 画像フォーマット: type="webp" を使用して、画像を軽量でモダンなフォーマットにし、読み込みを高速化します。

たとえば、ダークモードの全ページスクリーンショットをWebPフォーマットで取得したい場合、ショートコードは次のようになります。

[capture_screenshot url="https://example.com" full=true darkMode=true type="webp"]

この方法は、基本的な無料ツールよりもはるかに多くの制御を提供します。プロフェッショナルなレビューサイトやポートフォリオに最適です。

方法2：WPCode + mShotsを使用する（無料オプション）

方法1と同じダイナミックで省スペースなメリットを享受したいが、追加のアカウントを作成せずに完全に無料のソリューションを好む場合は、この方法が最適です。

カスタムショートコードをサイトに追加することで、WordPress.com mShots APIを利用できます。Captureプラグインと同様に、mShotsはページ読み込み時にライブ画像を即座に生成し、外部でホストするため、サーバーのストレージスペースを節約できます。

ステップ1：WPCodeを使用してコードスニペットを追加する

このコードを安全に追加するには、WPCodeの使用を強くお勧めします。これは市場で最高のWordPressコードスニペットプラグインです。テーマのfunctions.phpファイルを直接編集することなく、カスタムコードを追加できます。

まず、無料のWPCodeプラグインをインストールしてアクティブ化します。次に、WordPressダッシュボードでCode Snippets » + Add Snippetに移動します。

「カスタムコードを追加（新規スニペット）」を選択します。スニペットに「自動スクリーンショット」のような名前を付け、「コードタイプ」ドロップダウンが「PHPスニペット」に設定されていることを確認してください。

次に、次のセキュアコードをコードプレビューボックスにコピー＆ペーストします。

function wpb_automated_screenshots($atts) {
    $a = shortcode_atts( array(
        'url' => 'https://www.wpbeginner.com',
        'alt' => 'Website screenshot',
        'w'   => '600',
        'h'   => '450'
    ), $atts );

    $mshots_api = 'https://s.wordpress.com/mshots/v1/';
    $target_url = urlencode( $a['url'] );
    $width      = intval( $a['w'] );
    $height     = intval( $a['h'] );
    $alt_text   = esc_attr( $a['alt'] );

    $img_src = $mshots_api . $target_url . '?w=' . $width . '&h=' . $height;

    return '<img src="' . esc_url( $img_src ) . '" alt="' . $alt_text . '" />';
}
add_shortcode('automated_shot', 'wpb_automated_screenshots');

「挿入」セクションまでスクロールダウンし、「自動挿入」に設定されていることを確認してください。

次に、画面上部のスイッチを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックします。

ステップ2：ショートコードを使用してスクリーンショットを作成する

これで、WordPressの投稿やページに自動スクリーンショットを表示するには、コンテンツエディタにショートコードブロックを追加し、次のショートコードを貼り付けるだけです。

[automated_shot url="https://example.com" alt="Example Website" w="800" h="600"]

https://example.com をキャプチャしたい実際のウェブサイトURLに置き換えてください。ショートコード内でaltテキスト、幅、高さを簡単に変更することもできます。

ターゲットウェブサイトのデザインが更新されてもスクリーンショットに古いバージョンが表示される場合は、mShots APIが画像をキャッシュしている可能性があります。URLの末尾にランダムな数字を追加することで、新しいスクリーンショットを簡単に強制的に取得できます。例：url="https://example.com/?v=1"。

方法3：Browse AI + Zapierを使用してハンズオフ自動化を行う

最初の2つの方法が外部でホストされているライブプレビューを表示するのとは異なり、この方法はファイルをWordPressサイトに直接物理的に保存することで、真のハンズオフ自動化を提供します。

Browse AIを使用してスクリーンショットを自動的にキャプチャし、Zapierを使用してそれらを直接メディアライブラリに送信します。これにより、画像に対する完全な制御が可能になります。

スクリーンショットは独自のサーバーに保存されるため、ターゲットウェブサイトがオフラインになったり、デザインが完全に変更されたりしても、瞬時に読み込まれ、サイトに永続的に表示されます。

ステップ1：Browse AIでスクリーンショットロボットを作成する

まず、Browse AIにアクセスし、無料アカウントを作成します。

ログインしたら、「新しいロボットを作成」ボタンをクリックし、「サイト変更の監視」オプションを選択します。

キャプチャしたいウェブサイトのURLを入力するように求められます。

リンクを入力したら、「ロボットのトレーニングを開始」ボタンをクリックする必要があります。

次に、Browse AIがそのライブウェブサイトを表示する新しいウィンドウを開きます。

画面上のロボットアイコンをクリックしてメニューを開き、「スクリーンショットをキャプチャ」を選択するだけです。

小さなメニューが表示され、ページのどの部分をキャプチャしたいか尋ねられます。ページ全体を最初から最後までスクリーンショットしたい場合は「ページ全体」、ウェブサイトの上の部分だけをキャプチャしたい場合は「表示部分」を選択できます。

次に、Browse AI がスクリーンショットの名前を付けるように求めてきます。「ホームページのスクリーンショット」や「競合他社の価格設定」など、覚えやすいものを入力して Enter キーを押します。

完了したら、左側のパネルの下部にある紫色の「完了」ボタンをクリックして録画を終了します。

次に、Browse AI が新しいロボットに名前を付けるように求めてきます。

認識しやすいものを入力し、「保存」ボタンをクリックします。

保存後、スケジュールを設定できます。

たとえば、ロボットに毎週または毎月自動的にサイトにアクセスして新しいスクリーンショットを撮るように指示できます。

完了したら、「保存」ボタンをクリックしてください。

ステップ 2: WordPress ウェブサイトの準備

自動化を構築する前に、Zapier がウェブサイトのメディアライブラリと安全に通信できるようにする必要があります。

別のタブで WordPress ダッシュボードにアクセスし、無料の Zapier for WordPress プラグインをインストールして有効化します。ヘルプが必要な場合は、WordPress プラグインのインストール方法 ガイドを参照してください。

プラグインがサイトで有効になったら、Zapier を WordPress サイトに接続する準備が整いました。

ステップ 3: Zapier で Zap を作成する

次に、Zapier を使用してロボットを WordPress に接続する必要があります。

まず、Zapier アカウントにログインする必要があります。メインダッシュボードから、左上のメニューにある「+ 作成」ボタンをクリックし、ドロップダウンメニューから「Zap」を選択します。

ビルダーを開くと、Zapier はワークフローを説明するように求めるテキストボックスを表示し、AI を使用して構築します。これを正確に設定したいので、このプロンプトは無視できます。

代わりに、「または」の区切り線のすぐ下を見て、「トリガー」ボックスを直接クリックして、手動で自動化を構築します。

メニューが表示されます。

Browse AI を検索して選択します。

サイドバーの「アカウント」セクションを探し、「サインイン」ボタンをクリックして Browse AI アカウントを安全に接続します。

アカウントがリンクされたら、「トリガーイベント」ボックスをクリックします。ここに入力する必要はありません！検索バーのすぐ下を見て、「新しいタスク – 即時」オプションをクリックするだけです。

これにより、トリガーイベントが自動的に入力されます。次に、「続行」ボタンをクリックして次のセットアップ画面に進みます。ここでは、Zapier がいくつかの詳細を尋ねます。

まず、「チーム」ドロップダウンでアカウントを選択します。それが完了すると、新しいフィールドが表示され、以前に作成した特定の「ロボット」を選択できます。

最後に、「イベントタイプ」を「タスクが正常に完了」に設定して、良好なスクリーンショットが撮られた場合にのみ Zapier が実行されるようにします。

「続行」をクリックし、次に「トリガーをテスト」ボタンをクリックしてください。これは、最近のテストスクリーンショットを Zapier に取り込み、WordPress が後で使用できるようにするため、必要な手順です。

テストが成功したら、ワークフローの2番目のボックス（アクションステップ）をクリックし、アプリとして「WordPress」を検索します。

ステップ2でプラグインをすでにインストールしているため、サイトをZapierに接続するのは簡単です。

アカウントセクションの「サインイン」ボタンをクリックし、ポップアップウィンドウが表示されたらWordPressのログイン認証情報を入力するだけです。

ウェブサイトがリンクされたら、「アクションイベント」ドロップダウンメニューをクリックします。

「メディアをアップロード」オプションを検索して選択し、ページ下部にある「続行」ボタンをクリックします。

次に、WordPressにどのファイルをアップロードするかを指示する必要があります。「ファイル」ボックスの右側にある「+」（データを挿入）ボタンをクリックします。これにより、ZapierがBrowse AIから取得した非常に長いテストデータのリストが表示されるポップアップが開きます。

リストが非常に長いため、適切なファイルを見つける最も簡単な方法は、ポップアップ上部にある検索バーを使用することです。「src」と入力してオプションを絞り込みます。

「Screenshot Src」で終わるオプションを探して選択します。オプションの完全な名前を表示するには、「もっと見る」リンクをクリックする必要がある場合があります。

必要に応じて「タイトル」と「代替テキスト」フィールドに入力することもできますが、「キャプション」や「作成者」などの他のオプションフィールドは空白のままにしても安全です。

完了したら、「続行」をクリックし、次に「ステップをテスト」ボタンをクリックします。

ZapierはBrowse AIからスクリーンショットを魔法のように取得し、WordPressメディアライブラリに直接アップロードします。

テストが成功したら、公開ボタンをクリックして新しいZapがバックグラウンドで自動的に実行されるようにすることを忘れないでください。

これでプロセスは完全に自動化されました。Browse AIが新しい画像をキャプチャするたびに、WordPressのメディア » ライブラリに自動的に表示され、投稿やページで使用できるようになります。

ボーナス：スクリーンショットサイズの整合性を保つ方法

上記のどの方法を選択した場合でも、自動化された画像の幅と高さを設定する必要があります。ブログをクリーンでプロフェッショナルに見せるために、標準的なワイドスクリーンの16:9アスペクト比の使用を強くお勧めします。

ほとんどのWordPressテーマには、ブログ投稿の最大幅が固定されています（例：800ピクセル）。16:9の比率を使用してすべてのスクリーンショットをこの幅に合わせると、すべての高さが自動的にまったく同じになります。

これにより、ユーザーが記事をスクロールする際に、美しく均一な外観が作成されます。

スクリーンショットツールに入力する数値を把握するには、この簡単な計算を使用できます。

• ターゲットの幅がわかっている場合：幅に9を掛け、16で割ると、最適な高さが得られます。
• ターゲットの高さを知っている場合：高さに16を掛け、9で割ると、対応する幅が得られます。

たとえば、ブログのコンテンツエリアの幅が800ピクセルである場合、800に9を掛け、16で割ります。これにより、完全にスケーリングされた高さ450が得られます。

したがって、新しい数値をショートコードパラメータに簡単に入力できます。たとえば、w="800" h="450"のようになります。

よくある質問

ウェブサイト画像の自動化について、かなりの質問に答えました。ここでは、自動化されたウェブサイトのスクリーンショットを作成することについて、人々が最もよく尋ねる質問をいくつか紹介します。

1. WordPressでウェブサイトのフルページスクリーンショットを自動的に撮るにはどうすればよいですか？

WordPressで自動スクリーンショットを撮るには、Captureのような専用のWordPressスクリーンショットプラグインを使用するか、WordPress.com mShotsのような無料の画像APIを統合するか、Browse AIやZapierのようなツールを使用して自動化ワークフローを構築できます。

これらのツールは、ターゲットウェブサイトの公開URLを自動的に取得します。選択した方法に応じて、ライブプレビューが即座に表示されるか、実際の画像ファイルがWordPressメディアライブラリに直接アップロードされます。

2. WordPressで自動化されたウェブサイトのスクリーンショットを作成するために支払う必要がありますか？

いいえ、自動化されたスクリーンショットを生成するために支払う必要はありません。無料のWPCodeプラグインを介してカスタムPHPスニペットを追加して無料のWordPress.com mShots APIに接続するなど、完全に無料の方法を使用できます。

さらに、Browse AIやZapierのようなサードパーティの自動化プラットフォームには無料プランがあり、ウェブサイト所有者は毎月少数のスクリーンショットを無料でキャプチャできます。

3. ローカル、ステージング、またはプライベートWordPressサイトで自動スクリーンショットツールを使用できますか？

いいえ、mShotsやCaptureプラグインのような自動スクリーンショットAPIは、機能するためにライブで公開からアクセス可能なウェブサイトURLを必要とします。これらの外部スクリーンショットツールは、個人用コンピュータ（localhost）でホストされているウェブサイトにアクセスできません。

さらに、自動スクリーンショットツールは、パスワード、メンテナンスモードプラグイン、またはファイアウォールによって隠されているWordPressステージング環境にアクセスできません。

4. サードパーティAPIを使用してウェブサイトのスクリーンショットを自動化することは安全ですか？

はい、WordPress.com mShotsやCaptureプラグインのような評判の良いスクリーンショットAPIを使用することは、公開コンテンツに対して一般的に安全です。これらのサードパーティサービスは、公開ウェブサイトURLにアクセスし、インターネット上で公開されているものの写真を撮るだけです。

しかし、ウェブサイトの所有者は、プライベートなログイン状態のWordPressダッシュボードページや、機密性の高い個人データを含むウェブページをキャプチャするために、サードパーティのスクリーンショット自動化ツールを絶対に使用しないでください。

5. WordPress.com mShotsの自動スクリーンショットが空白のページを表示するのはなぜですか？

WordPress.com mShots APIでは、特定のウェブサイトURLが初めてリクエストされたときに、一時的に空白のスペースが表示されることがあります。

これは、mShots APIが最初の画像を生成するのに数秒かかるためです。自動スクリーンショットが空白の場合は、WordPressページを更新するだけで問題が解決することがよくあります。

mShotsは画像をキャッシュするため、WordPressのショートコードでターゲットURLの末尾にランダムなバージョン文字列を追加することで、APIに新しいウェブサイトスクリーンショットを強制的に取得させることができます。

ビジュアルコンテンツを強化するための追加リソース

この記事で、WordPressで自動ウェブサイトスクリーンショットを簡単に作成する方法を学んでいただけたなら幸いです。ウェブサイトの画像とメディアのパフォーマンスを次のレベルに引き上げたい場合は、これらの追加リソースも参照することをお勧めします。

• 画像SEOの初心者ガイド – 検索エンジンのための画像を最適化する – スクリーンショットの適切な名前付けとタグ付け方法を学び、サイトへのオーガニック検索トラフィックを増やしましょう。
• ブログ記事の画像をより良く作成するためのツール – チュートリアル用の魅力的なグラフィック、注釈、ビジュアルコンテンツを作成するための、専門家が選んだ最高のツールを発見してください。
• 品質を損なうことなくウェブパフォーマンスのために画像を最適化する方法 – スクリーンショットや写真を適切に圧縮して、ウェブサイトが引き続き驚くほど速く読み込まれるようにする方法を見つけてください。
• デザイナー＆フォトグラファー向けの最高のWordPressポートフォリオプラグイン – 自動スクリーンショットを使用してウェブデザインの作品を披露している場合、これらのプラグインは潜在的なクライアントに美しく表示するのに役立ちます。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。