実は難しい？Webサイトの正しいキャプチャ方法

ギャラリーサイトからWebサイトを正しくキャプチャしていますか？MacのディスプレイやFIgma、ブラウザの仕様をきちんと理解していないと、実は正しくキャプチャすることはできません。

この記事では、正しいキャプチャの仕方をPCとSPに分けて説明していきます。MacのGoogle Chromeを利用して、Figmaにアップロードすることを前提にして話します。

PCのキャプチャ方法

1. 動きがあるサイトはまず下までスクロールしておく

動きがあるWebサイトだとうまくキャプチャできないことが多いですよね。完璧に綺麗にキャプチャすることは難しいですが、まずWebサイトを下までスクロールしてアニメーションを完了させておくと、ある程度は綺麗にキャプチャできます。

2. ブラウザサイズを指定する

PCは幅1440pxにしましょう。STUDIOでのベースサイズになっているので、1440pxでデザインしていると実装がスムーズです。
Chromeの拡張機能、Window Resizerを使うといいです。

2. キャプチャする

キャプチャしましょう。方法は2つあります。1つはChromeの拡張機能を仕様する方法。拡張機能はたくさんありますが、私がよく使うのはAwesome Scrennshotです。ただし、デベロッパーツールを表示している場合はこの拡張機能を使うのは止めましょう。キャプチャサイズが変わってしまいます。

2つ目はChromeのデベロッパーツールを利用する方法です。ブラウザの幅や縦のサイズを指定したい時に利用します。方法は簡単で以下の3ステップを入力するだけで、キャプチャをダウンロードできます。

1. ChromeでCommand + Option + iを押す

2. デベロッパーツールが起動するので、Command + Shift + pを押す

3. fullと入力してEnter

もしくは

1. ChromeでCommand + Option + iを押す

2. デベロッパーツールが起動するので、右上の3つの点を押す

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と同じです。

まとめ

お疲れさまでした！これで正しくWebサイトをキャプチャできたはずです。
え？動きが多いWebサイトだとちゃんとキャプチャできていない箇所がある？

それは、どうしようもないので表示エリアだけをキャプチャしましょう。Awesome Scrennshotで表示エリアだけをキャプチャしてもいいですし、「command+shift+4」などのスクリーンショット機能を利用してもいいです。そして、Figma上で地道に切り貼りします。

目的はキャプチャすることではなく、ブラウザで表示されているデザインをFigma上で完璧に再現することです。
地道な作業でが大事です。迷ったら目的に立ち返って、何か方法がないか考えましょう。