スマホページの画像数を多く表示するためのキャプチャ画像の製作方法について

Question

お世話になっております。

スマホ商品ページの画像を２０枚近く使いたいため、PCページの縦長の複数画像と説明文をキャプチャーし、１つの画像としてスマホページにアップしたいのですが、
長いPCページのキャプチャーがうまくいきません。

Full page screen capture  を使いましたが、ページ全体のキャプチャは取れるのですが、中途半端な位置で分割されたり、部分的に切れてしまいうまくいきませんでした。
検索で案内ページを見ての作業で詳しいわけではないので、使い方が誤っている可能性もありますが
できればページ全体ではなく必要な画像部分だけを選択して縦長にキャプチャしたいです。

マックを使っており、表示している画面のみでは
「Command」「Shift」「４」でキャプチャしてJPG画像として使うこともありますが
表示していない部分まではできないため、同じような簡単な作業でキャプチャーできる簡単な方法があればご教授をお願いいたします。

Answer

ECマスターズの中野です。

お世話になっております。

> 同じような簡単な作業でキャプチャーできる簡単な方法があればご教授をお願いいたします。

キャプチャーの撮影でしたらGyazoのご利用はいかがでしょうか。

https://gyazo.com/ja

事務局スタッフも利用しておりますが、
シンプルな操作で任意のサイズで
キャプチャーを撮影いただけます。

無料トライアル期間がございますので、
一度お試しいただきぜひご判断くださいませ。

Answer

ECマスターズの中野です。

度々のご連絡失礼いたします。
先程ご紹介したGyazoの他におすすめのツールがございますので、
追ってご連絡させていただきました。

Gyazoよりも広範囲のキャプチャー撮影可能な拡張機能が
ございますので以下ご紹介させていただきます。

ウェブページ全体をスクリーンショット - FireShot
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg/related?hl=ja


操作イメージ：
https://ec-masters.gyazo.com/581225d1482bc3b22910633c5ad72680

キャプチャー撮影されたいサイズに応じて、
GyazoやFireShotを使い分けてお試しくださいませ。
よろしくお願いいたします。

Answer

お世話になります。

中野さん、早々にありがとうございます。
FireShotを使って簡単にできた！と喜んでいたのですが、画像を開いてみると楽天ページの「Rakuten 検索窓,買い物かご、お知らせ・・・・・」の最上部の赤い部分がボーダーのように同感覚で画像の上にいくつも張り付いて邪魔をしています。
オプションでJPG保存にはしたのですが、何か設定で解決できるかお分かりになりますか？
宜しくお願いいたします。

Answer

ECマスターズの中野です。

早速ご返信ありがとうございます。
恐れ入りますが、現状のスクリーンショットを一度拝見したく、添付いただけますでしょうか。

お手数おかけしますがよろしくお願いいたします。

Answer

お世話になります。
スクショを添付可能ですがお恥ずかしいので公開されないようにお願いできますか？
ただし添付できるものは、実際に表示したいものよりはかなり短いです。
８MBまででしたので、、。
希望の全画像の場合４４MBになりますが、添付できるか心配です。
ちなみに参考店舗の以下のページはかなり長いスクリーンショットを画像として使われているようです。
https://item.rakuten.co.jp/teddyshop/kids313/?iasid=07rpp_10095___ey-l1biifip-1gag4-14faf7a9-3616-4ccd-95af-0c928ca529bf

Answer

ECマスターズの中野です。

ご返信いただきありがとうございます。

> スクショを添付可能ですがお恥ずかしいので公開されないようにお願いできますか？

「投稿内容について報告」するより添付いただいたデータは
事務局以外の他の会員様には公開されませんのでご安心いただき、
お送りいただきますようよろしくお願いいたします。

以下のスクリーンショットを参考にご投稿くださいませ。
https://ec-masters.gyazo.com/4a012cc796df78e550673efd90e75b1b

また、スクリーンショットを撮ろうとされている
元のページもあわせてご教示くださいませ。

Answer

ECマスターズの中野です。

ご返信ありがとうございます。

スクリーンショットは確認させていただきましたが、
製作途中のテストページはこちらから拝見できませんので、
まずは操作確認をさせていただきます。

しばらくお待ちいただきますよう
よろしくお願いいたします。

Answer

ECマスターズの中野です。

お時間いただいておりありがとうございます。

スクリーンショットに使用している機能は問題ございませんが、
RMSにアップしたページを撮ろうとするとJavaScriptの関係で
添付いただいたように同感覚で検索窓が入ってしまっているようです。

Macをご利用かと存じますので、画像のHTMLタグを一度、
CotEditorに記載し（コピーアンドペーストで問題ございません）、
htmlファイルとして保存し、保存後はドラッグアンドドロップで
表示させてスクリーンショットを撮ってみてくださいませ。

操作の動画は以下ご参照いただきお試しくださいませ。
https://ec-masters.gyazo.com/25f01516f7eee8a8f572b7acd5b42a27

Answer

早々にありがとうございました！
ご教授いただいた通りに進めて無事に希望通りに長いキャプチャーを画像として表示することができました。
また別件でお願いすることも多々あるかと思いますが今後ともどうぞよろしくお願いいたします。