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

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

PCのキャプチャ方法

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

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

2. キャプチャする

キャプチャしましょう。方法は2つあります。1つはChromeの拡張機能を仕様する方法。拡張機能はたくさんありますが、私がよく使うのはAwesome Scrennshotです。

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

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

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

3. fullと入力してEnter

3. Figmaにプラグインを使ってアップロードする

はい！ここ注意しましょう！
Figmaは大きな画像をアップロードすると、自動で画質を落とす仕様になっています。なので1400pxの画像をアップロードしても、834pxとか689pxとかに縮小されてアップロードされます。

そこで、Figmaのプラグイン「Insert Big Image 」を利用します。このプラグインで画像をアップロードすれば、画質を落とすことなくFigma上に表示できます。

4. Figma上でキャプチャ画像を1/2に縮小する

はい！Mac限定ですが、さらに一手間必要です。
Chromeの拡張機能やデベロッパーツールでキャプチャした画像は、ブラウザサイズの2倍のサイズでダウンロードされています。例えばブラウザの幅が1400pxでも、実際にダウンロードされた画像は幅2800pxになっています。

そのため、ダウンロードしたキャプチャをFigmaにアップロードしただけだと幅2800pxのキャプチャが表示されています。1/2のサイズにすることで、やっとFigmaで表示しているキャプチャとブラウザで見えているWebサイトが同じになります。

Macだと、、、ちゃんと言うとMacbookやiPhoneが利用しているRetinaディスプレイだと1/2にしなければならないのかを解説しようとすると、ピクセルや解像度の説明が必要になってくるので割愛します。
気になる方は、「Retinaディスプレイ」や「解像度」でググってみましょう。

よくやる落とし穴も書いておきます。
例えばFIgmaで幅3024pxとかで表示されているキャプチャを幅1400pxや幅1600pxなど適当に縮小した幅にしないこと！ブラウザで見えているWebサイトとは異なるサイズになってしまいます。幅3024pxでアップロードしたなら1/2の1512pxが正しいサイズです。

SPのキャプチャ方法

1. デベロッパーツールを起動する

SP表示の画面もPCからキャプチャ可能です。注意して欲しいのは、ブラウザの幅を縮小するだけではSP表示にならないことです。ぱっと見、スマホで見ている画面と同じように見えますが、フォントサイズなどが全く違うので気をつけましょう。

ではどうするのか？Chromeのデベロッパーツールを起動しましょう。覚えていますか？Command + Option + iです。Webサイトの上の方にデバイスの選択画面があるので、好きなスマホを選択しましょう。

これでスマホの実機と同じSP表示のWebサイトがキャプチャできます。キャプチャ方法やFigmaへのアップロードなどは、PCと同じです。

まとめ

お疲れさまでした！これで正しくWebサイトをキャプチャできたはずです。
え？動きが多いWebサイトだとちゃんとキャプチャできていない箇所がある？それは、、、どうしようもないので「command+shift+4」などのスクリーンショット機能を利用して修正していきましょう。

どうでしょう？MacやFIgma、ブラウザの知識がないとただのキャプチャでさえ難しくないですか？これが、Webデザイナーも最低限フロントエンドができるようになっておいた方がいい理由の一つです。

実装の経験があれば当たり前のことが気づけないのは大きなリスクですし、エンジニアとのコミュニケーションもままならないでしょう。
デザイナーは本当に幅広い知識とスキルが必要な職業です。初心者デザイナーさんは焦らずに着実にステップアップしていきましょう。