実は難しい？Webサイトの正しいキャプチャ方法
ギャラリーサイトからWebサイトを正しくキャプチャしていますか？MacのディスプレイやFIgma、ブラウザの仕様をきちんと理解していないと、実は正しくキャプチャすることはできません。
この記事では、正しいキャプチャの仕方をPCとSPに分けて説明していきます。MacのGoogle Chromeを利用して、Figmaにアップロードすることを前提にして話します。
PCのキャプチャ方法
1. 動きがあるサイトはまず下までスクロールしておく
動きがあるWebサイトだとうまくキャプチャできないことが多いですよね。完璧に綺麗にキャプチャすることは難しいですが、まずWebサイトを下までスクロールしてアニメーションを完了させておくと、ある程度は綺麗にキャプチャできます。
2. ブラウザサイズを指定する
PCは幅1440pxにしましょう。STUDIOでのベースサイズになっているので、1440pxでデザインしていると実装がスムーズです。
Chromeの拡張機能、Window Resizerを使うといいです。
Windowsではウィンドウ枠・スクロールバーの厚み（約16px前後）が含まれてしまい、実際の表示幅が指定より狭くなるという現象がよく起こります。
→差分を足したウィンドウサイズ1456pxでキャプチャすると解決することがあります。
2. キャプチャする
キャプチャしましょう。方法は2つあります。1つはChromeの拡張機能を仕様する方法。拡張機能はたくさんありますが、私がよく使うのはAwesome Scrennshotです。ただし、デベロッパーツールを表示している場合はこの拡張機能を使うのは止めましょう。キャプチャサイズが変わってしまいます。
2つ目はChromeのデベロッパーツールを利用する方法です。ブラウザの幅や縦のサイズを指定したい時に利用します。方法は簡単で以下の3ステップを入力するだけで、キャプチャをダウンロードできます。
ChromeでCommand + Option + iを押す
デベロッパーツールが起動するので、Command + Shift + pを押す
fullと入力してEnter
もしくは
ChromeでCommand + Option + iを押す
デベロッパーツールが起動するので、右上の3つの点を押す
Capture full size screenshotを選択
3. Figmaにプラグインを使ってアップロードする
はい！ここ注意しましょう！
Figmaは大きな画像をアップロードすると、自動で画質を落とす仕様になっています。なので1440pxの画像をアップロードしても、834pxとか689pxとかに縮小されてアップロードされます。
そこで、Figmaのプラグイン「Insert Big Image 」を利用します。このプラグインで画像をアップロードすれば、画質を落とすことなくFigma上に表示できます。
4. Figma上でキャプチャ画像を1/2に縮小する
はい！Mac限定ですが、さらに一手間必要です。
Chromeの拡張機能やデベロッパーツールでキャプチャした画像は、ブラウザサイズの2倍のサイズでダウンロードされています。例えばブラウザの幅が1440pxでも、実際にダウンロードされた画像は幅2880pxになっています。
そのため、ダウンロードしたキャプチャをFigmaにアップロードしただけだと幅2880pxのキャプチャが表示されています。1/2のサイズにすることで、やっとFigmaで表示しているキャプチャとブラウザで見えているWebサイトが同じになります。
Macだと、、、ちゃんと言うとMacbookやiPhoneが利用しているRetinaディスプレイだと1/2にしなければならないのかを解説しようとすると、ピクセルや解像度の説明が必要になってくるので割愛します。
気になる方は、「Retinaディスプレイ」や「解像度」でググってみましょう。
よくやる落とし穴も書いておきます。
例えばFIgma上で幅3024pxとかで表示されているキャプチャを幅1440pxに縮小しないこと！ブラウザで見えているWebサイトとは異なるサイズになってしまいます。幅3024pxでアップロードしたなら1/2の1512pxが正しいサイズです。
SPのキャプチャ方法
1. デベロッパーツールを起動する
SP表示の画面もPCからキャプチャ可能です。
SPはデザインを必ず実機で確認するので、自分の持っているスマホのサイズ幅にしましょう。
注意して欲しいのは、ブラウザの幅を縮小するだけではSP表示にならないことです。ぱっと見、スマホで見ている画面と同じように見えますが、フォントサイズなどが全く違うので気をつけましょう。
ではどうするのか？Chromeのデベロッパーツールを起動しましょう。覚えていますか？Command + Option + iです。Webサイトの上の方にデバイスの選択画面があるので、好きなスマホを選択しましょう。
これでスマホの実機と同じSP表示のWebサイトがキャプチャできます。キャプチャ方法やFigmaへのアップロードなどは、PCと同じです。
WindowsはSPのキャプチャもサイズが合いません。「検証ツール × Fireshot」の組み合わせで解決した方がいるので試してみてください。
それでも出来ない場合は、実機から表示エリアを何枚もキャプチャしてPCに取り込み、Figmaではり合わせるのが確実です。
まとめ
お疲れさまでした！これで正しくWebサイトをキャプチャできたはずです。
え？動きが多いWebサイトだとちゃんとキャプチャできていない箇所がある？
それは、どうしようもないので表示エリアだけをキャプチャしましょう。Awesome Scrennshotで表示エリアだけをキャプチャしてもいいですし、「command+shift+4」などのスクリーンショット機能を利用してもいいです。そして、Figma上で地道に切り貼りします。
目的はキャプチャすることではなく、ブラウザで表示されているデザインをFigma上で完璧に再現することです。
地道な作業でが大事です。迷ったら目的に立ち返って、何か方法がないか考えましょう。
