masaca（@masaca_dApps）です。
Webデザイナーは、日頃から素敵なWebデザインのサイトは保存して、後で参考にしたり勉強のため模写に使ったりしますよね。
特にキャンペーンサイトなどは期間限定なので、ブックマークだけではなく画像として保存しておく必要があると思います。
ページ全体のスクリーンショットを保存できる便利なツールのご紹介と、ボタンなどパーツごとに保存するときに私がいつも使っている小技をご紹介します。
masaca
目次
ページ全体のスクリーンショットを保存する方法
Webサイトのページ全体のデザインを保存するには、chromeの拡張機能の「full page screen capture」が便利です。
以下のリンクからインストールが可能です。
右上の「CHROMEに追加」ボタンでインストール完了です。
full page screen captureの使い方
インストールが完了したらブラウザの右上にカメラのアイコンが追加されていますので、保存したいWebサイトでクリックしてください。
ページ全体のキャプチャー画像がpngやpdfで保存できます。
パーツごとにデザインを保存する場合
ページ全体のデザインはいらないけど、メインビジュアルやボタン、バナー画像だけが保存したいというときがあると思います。
その場合は個別にやり方を変えて保存します。
masaca
ドラッグ、もしくは右クリックで保存する
メインビジュアルやバナーのデザインが保存したい場合は右クリックで保存可能です。
右クリックで保存できる場合はドラッグでフォルダの中に直接移動させることで保存も可能です。
右クリックで保存できないものに関しては次の方法を試してください。
デベロッパーツールから画像を保存する
右クリックで保存できないものに関しては、デベロッパーツールを使います。
この「Lunch Pick Up」の見出し画像は右クリックで保存ができません。
こういう画像を保存する場合は、画像にカーソルを合わせてで右クリック→検証をします。
デベロッパーツールのウインドウが開き、コードが表示されます。
h2タグにに背景画像として「Lunch Pick Up」がCSSで指定されていることがわかります。
画像のURLを右クリックして「Open in new tab」を選択。
背景が黒なので見えづらいですがタイトル画像が保存できます
画像が別タブで表示されますので、右クリック保存かドラッグで保存をすることができます。
masaca
スクリーンショットを撮る
簡易的にデザインを保存する場合や、どのやり方でも画像が保存できない場合はスクリーンショットを使いましょう。
Macでは「command + shif + 4」でスクリーンショットを撮ることができます。
上記のショートカットキーを押すと十字のアイコンが表示されるので、保存したい範囲を選択して部分的に保存することが可能です。
スクリーンショットはデスクトップに保存されています。
集めたデザインの整理
私は集めたデザインをジャンルごとにこのようにフォルダにわけて保存しています。
自分のわかりやすい方法で管理しておくと参考にしたい時に便利です。
まとめ
Webサイトのデザインを集めるために便利なツール「full page screen capture」を使って効率的にデザインを集めましょう。
部分的にデザインパーツを保存したい場合は、直接保存するかデベロッパーツールを使って保存、簡易的に保存したい場合はスクリーンショットを使いましょう。
masaca
Webデザインのフォント選びに迷ったときに便利なサイト「wordmark.it」 
【メインビジュアル参考】「チラシミュージアム」で全国のアート系チラシが簡単に集まる！
コミュニティではWebデザイン勉強中のあなたにもっと役立つ情報を発信中！
SPONSORED LINK
コメントを残す