MacでDribbbleとBehanceのデザインポートフォリオをバックアップする方法

DribbbleやBehanceに公開したポートフォリオは、他社のサーバー上にあります。レイアウトの変更、アカウントのロック、リニューアル後の古いプロジェクトの見つけにくさが問題になることがあります。自分のプロジェクトページをローカルにアーカイブすると、作品、その見せ方、説明文を自分で管理できる1か所に残せます。PDF形式のポートフォリオを求める応募書類にも使えます。

ポートフォリオPDFが保存する内容

元のデザインファイルが本来のバックアップです。ポートフォリオPDFは別のものを記録します。各プロジェクトがどのように見せられていたかです。

• 画像の順序と画像の間隔
• プロジェクトのタイトル、説明文、ツールのクレジット
• カバー画像とページの視覚的なリズム
• 特定日時点の評価数とコメント（必要な場合）

ソースファイルは別途バックアップします。PDFは、その上に載せる見せ方の記録として扱います。

最初のアーカイブの範囲を決める

プロフィール全体には数百点の作品があり、一度にすべてキャプチャするとレビューに時間がかかります。範囲を決めて始めます。この記事の例では、プロダクトデザイナーが過去3年間のDribbbleショット24件と、Behanceのケーススタディ9件をアーカイブします。ショットは1〜4枚の画像を含む短いページです。ケーススタディは長く、デスクトップ幅で1件あたり8〜20画面あります。

1行に1つのURLを書き、メモ欄に各プロジェクトの制作年を記入したプレーンテキストファイルを先に作成します。このファイルがレビュー用のチェックリストになり、Bulk insertの入力にもなります。ファイルはアーカイブと同じ場所に保存し、翌年のキャプチャもこのファイルから始められるようにします。

キャプチャで記録できないもの

スクリーンショットはピクセルを記録します。アニメーションのあるショット、動画のケーススタディ、プロトタイプの埋め込みは1枚の静止画として表示され、ホバーの状態はまったく表示されません。モーションの作品では、元の動画ファイルをソースのバックアップと一緒に保存し、プレゼンテーションアーカイブ用には代表的なフレームを1枚キャプチャします。

Dribbbleプロジェクトをキャプチャする

Dribbbleのショットは、ほとんどが1枚の画像か、説明文付きの短い画像セットです。URLの一括処理に向いています。

1. URLを集める

   プロフィールを開き、各ショットのURLを1行ずつテキストファイルにコピーします。

2. Website Captureに貼り付ける

   Command+2を押し、Bulk insertを選択して、リストを貼り付け、Insert URLsを選択します。

3. キャプチャを設定する

   Desktopの1920×1080とFull pageを選択します。FormatはPNGに設定し、画像の細部を劣化なく保持します。

4. 画像の読み込みを待つ

   待機をNetwork idleに設定し、遅延を2〜3秒にします。ショットの画像は大きいためです。

5. 実行して書き出す

   Start Captureを選択し、セッションをPDFまたはImagesとして書き出します。

Website Captureは公開ページをサインインしていない訪問者として読み込みます。下書きや非公開のショットには、サインイン済みの自分のブラウザと、後述のAuto Captureの方法が必要です。

URLを漏れなく集める

プロフィールのグリッドは、スクロールに応じて作品を追加で読み込みます。そのため、最初の画面からコピーしたリストは不完全になりがちです。作品が表示されなくなるまでプロフィールの最下部までスクロールし、各ショットを開いてアドレスをコピーします。アーカイブでの並び順（新しい順か古い順か）に合わせて、テキストファイルに貼り付けます。Bulk insertは1行に1つのURLを受け付けます。Temposhotは、ドメインだけで始まる行にhttps://を付加します。http・https以外のスキームで始まる行には「Enter a valid HTTP or HTTPS URL.」と表示されるため、実行前の修正が必要です。

24件の実行時間

Concurrent browsersの初期値は4です。そのため24件のURLは、4件ずつ約6回の波に分けて読み込まれます。各ページは、ネットワークのアイドル状態を待ち、次に3秒の遅延を待ち、その後キャプチャを行います。一般的な回線では、バッチ全体は数分の範囲に収まります。値を下げるよう提案する表示が出た場合は、2に下げます。バッチの時間は長くなりますが、行の失敗は減ります。最大値の10は、ネットワークとメモリに余裕がある場合にのみ効果があります。

設定は一度決めて、上書きは最小限にする

URLの各行には個別のオプションがあり、その行だけ実行時の既定値を上書きします。ポートフォリオでは、行ごとの細かい調整よりも設定の統一が重要です。アーカイブ全体の見た目をそろえるためです。デバイス、領域、待機、遅延、形式は全行で同じ値にします。行ごとの上書きは例外的な場合に限ります。たとえば、Cookieバナーが消えない1ページです。問題が解消したら、その行でReset URL settingsを一度選択します。

Behanceプロジェクトをキャプチャする

Behanceのプロジェクトは、全幅の画像とテキストモジュールが数画面分続く、画像の多い長いページです。確認すべき設定は2つあります。

1つ目は、画像が遅延読み込みされることです。Network idleを選択し、遅延を5秒程度に長くします。本実行の前に、その行でRender previewを確認します。

2つ目は、非常に長いプロジェクトがWebsite Captureの1枚のフルページ画像の上限を超える場合があることです。その場合、ビューポートでのキャプチャを促すメッセージとともに行が失敗します。こうしたプロジェクトには、代わりにブラウザウィンドウでAuto Captureを使います。Stop conditionをScreenshotsに設定し、Key pressにPage Downを記録し、Intervalを2秒に設定して、Windowsでブラウザウィンドウを選択します。キー入力の自動化にはTemposhot Proが必要です。

実例: 14画面のケーススタディ

例のケーススタディの1つは、1440 × 900ポイントのブラウザウィンドウで約14画面分の高さです。Page Downは1画面よりわずかに少なく移動するため、16枚のスクリーンショットで少し重なりを持たせて全体をカバーできます。2秒の間隔により、各スクロールの後に遅延読み込みの画像が表示される時間を確保できます。実行には30秒強かかります。

実行前に、プロジェクトの先頭までスクロールし、重なっている場合はBehanceのヘッダーバーを閉じて、ポインタをウィンドウの端に移動します。実行後は、フレームをPNG画像として書き出します。1枚の縦長画像にまとめるには、Stitch Screenshotsを使います。このツールはスクリーンショットを上から下へ連結し、隣り合うフレーム同士の重なりを検出します。そのため、Page Downで重複した行が2回現れません。

注意が必要なモジュール

Behanceのプロジェクトは複数のモジュール種別を組み合わせており、キャプチャ時の挙動がそれぞれ異なります。全幅の画像はそもそもキャプチャする理由となるもので、最も長い待機時間が必要です。テキストモジュールはきれいにキャプチャされ、PDFの書き出し後に検索可能になります。埋め込み動画のモジュールは、動きではなくポスターフレームまたはプレーヤーの枠だけを表示します。小さな画像が多いグリッドモジュールは、スクロールの後に2回目の読み込みが行われることがあります。Auto Captureの手順で2秒の間隔を使うのはこのためです。実行後は、フレームを原寸で確認し、特にプロジェクトの最後の3分の1を見ます。遅延読み込みで灰色のプレースホルダーが残りやすいのが、この部分です。

サインイン済みの下書き

Auto Captureの手順は、下書きと非公開プロジェクトにも使えます。サインインしている自分のブラウザウィンドウをキャプチャするためです。Website Captureではこれができません。そのブラウザはCookieを保持せず、サインインしていない訪問者としてページを表示します。

デザイン作業のキャプチャ品質

項目	推奨	理由
形式	PNG	可逆圧縮で、グラデーションや文字に圧縮アーティファクトが出ない
デバイス	Desktop、レスポンシブ作業ではMobileも追加	プロジェクトが両方でどう読めるかを示す
領域	Full page	プロジェクトの一連の流れを保持する
待機	Network idleと遅延の組み合わせ	大きな画像の読み込みが完了する
ブロック	Block ads and Block trackersをオン	関係のないページ要素を取り除く

ピクセル密度については、Auto Captureがウィンドウと領域を、ポイント数の2倍のピクセル数で記録します。Retinaディスプレイの解像度に合わせた値です。Chrome用のTemposhot拡張機能も、Retina解像度でフルページを連結し、PNGを1枚保存します。クライアントから特定のサイズを求められた場合は、Screenshot Resolution Checkerで結果を確認します。

形式、サイズ、忠実度

PNGはすべてのピクセルを保持します。これは文字、細い線、グラデーションに重要です。代償はサイズです。写真の多い長いケーススタディを幅1920ピクセルでフルページのPNGにすると、数十MBになることがあります。JPEGとWebPは、行ごとに1から100までの品質値を受け付けます。90以上であれば、ほとんどの写真はPNGとほぼ同じに見えながら、サイズははるかに小さくなります。ただし、フラットなUIや小さな文字には、依然としてアーティファクトが出ます。

混在するポートフォリオの実用的な分け方は、UIやブランドアイデンティティのプロジェクトにはPNG、写真やイラストには品質90のJPEGです。形式は行ごとに設定されるため、1つのバッチに両方を含められます。

色とダークな背景

Website Captureで撮影したページは、macOSに組み込まれたエンジンであるWebKitで描画されるため、色はSafariで表示される色と一致します。ダークな背景や細かいグラデーションのあるプロジェクトでは、圧縮が強すぎると階調の段差（バンディング）が最初に現れます。JPEG書き出しでダークなプロジェクトがまだらに見える場合は、その行だけをPNGに切り替え、短い2回目の実行で再キャプチャします。両バージョンをCompare Imagesで並べて比較すると、通常の表示サイズで差が見えるかどうかが分かります。

ファイル名を付ける

書き出されたフレームは、セッションの順序で並びます。並べ替えられるように名前を変更します。

• 2026-09 Dribbble - Banking app onboarding.png
• 2024-03 Behance - Coffee brand identity.pdf

キャプチャ日ではなく、プロジェクトを公開した年月を使います。そうすると、アーカイブは作品が制作された順序で並びます。

FinderでまとめてRenameする

33件のファイルを1つずつ名前変更するのは時間がかかります。Finderで書き出したファイルを選択し、右クリックして複数項目の名前変更コマンドを選びます。Replace Textモードでは、各ファイル名の共通部分を置き換えられます。Add Textでは、2026-09 Dribbble - のような接頭辞をすべての名前の先頭に一度に付けられます。その後、古いプロジェクトの日付は1件ずつ調整します。プロジェクト名は短く、わかりやすくします。プラットフォーム、日付、プロジェクト名があれば、後から見つけるのに十分です。

キャプチャ日を別に記録する

ファイル名には公開日が入るため、キャプチャ日は別の場所に記録する必要があります。Capture Historyには各セッションの開始日時が記録され、セッションの詳細にはフレーム数と合計サイズが表示されます。キャプチャ日は、URLリストのファイルにも書き込みます。たとえば1行目にCaptured 2026-09-28と書きます。来年のアーカイブをこのアーカイブと比べるときは、両方の日付が必要です。

ポートフォリオアーカイブを整理する

• Portfolio/BehanceとPortfolio/Dribbble: プラットフォームごとのキャプチャ
• Portfolio/Case studies: クライアントに送るキュレーション済みPDF
• Portfolio/Source: 元のデザインファイルへのリンク

キュレーション済みPDFを作るには、Documentsでフレームを開き、ドラッグしてページの順序を変え、各プロジェクトに短いテキストメモを追加します。ドキュメントをPDFとして書き出します。ページサイズと画質はドキュメントの書き出しガイドで説明しています。既存のPDFを結合するには、Merge PDFを使います。

応募用のキュレーションPDFを作る

応募書類で33件のプロジェクトすべてが必要になることはほとんどありません。役割に合う5〜8件を選び、1つのDocumentにまとめます。

PDFの既定のレイアウトは、A4横向きで、Image sizeはFit without enlarging、Image qualityはHigh qualityです。幅の広いプロジェクト画像に適しています。非常に縦長のフルページキャプチャは、ページの高さに合わせて縮小されます。そのため、ケーススタディでは主要セクションのフレームを使います。エディタでAdjust framing…を開き、ModeをCustomにすると、元の画像を変更せずにページをトリミングできます。Letterへの切り替えや説明文の非表示など、PDF設定のカスタマイズにはTemposhot Proが必要です。

他のポートフォリオプラットフォーム

同じ方法は、公開されているポートフォリオページならどれにも使えます。ウェブサイトビルダー上の個人サイト、Adobe Portfolioのページ、自分のドメイン上のケーススタディ、アプリストアの掲載ページなどです。URLを1つのバッチに貼り付け、設定を揃えると、ページを並べたときに見た目がそろいます。

ページ遷移やスクロールアニメーションのあるサイトでは、遅延を長くするか、行をViewportに切り替えて主要な画面を個別にキャプチャします。

パスワード保護されたサイトとステージングサイト

Website Captureは、各ページをCookieも保存済みのサインイン情報もない非公開セッションで開きます。そのため、パスワードページの背後にあるポートフォリオは、パスワードページとしてキャプチャされます。そうしたサイトには、自分のブラウザにサインインし、ケーススタディを開いて、ブラウザウィンドウをソースとしたAuto Captureの手順を使います。Behanceの節で説明した手順です。ログインが必要なクライアントのレビューリンクも同様です。作品の権利がクライアントにある場合は、アーカイブする前にコピーを保持してよいか確認します。

レスポンシブなケーススタディ

両方のレイアウトを見せる必要がある作品では、同じURLリストを2回実行します。1回目はDesktop（1920 × 1080）、2回目はMobile（390 × 844）です。2つのセッションに分けると、レイアウトが混ざらず、比較が簡単になります。Mobileのフレームは縦長で幅が狭いため、Documentでは1ページに2枚ずつ配置するか、Desktopのフレームの横に一部をトリミングして並べます。

ポートフォリオのキャプチャを改善する

1. 1行だけ先にプレビューする。 バッチを実行する前に、最も長いプロジェクトでRender previewを選択します。
2. Cookieバナーを消す。 その行でReject bannersまたはHide onlyを選択します。
3. DesktopとMobileを別々に実行する。 1バッチにつき1デバイスにすると、セッションの比較が容易です。
4. メール送信用に圧縮する。 PNGベースのPDFは大きくなりがちです。応募書類に添付する前に、Compress PDFで縮小します。
5. 毎年繰り返す。 毎年キャプチャし直し、自分の見せ方がどう変わったかを記録します。

ポートフォリオの行のトラブルシューティング

行の結果	原因	対処
画像があるべき場所に灰色の箱が表示される	遅延読み込みの画像がまだ届いていない	Delayを5秒以上に上げる
長い待機の後にCapture failed	ページがポーリングを続けるため、Network idleに到達しない	Wait untilをLoadに変え、遅延を3秒にする
Cookieダイアログがカバー画像を覆う	独自の同意管理システム	Hide onlyを試すか、Auto Captureでキャプチャする
フレームにログインを求める表示が出る	プロジェクトが非公開または下書きである	サインイン済みのブラウザでAuto Captureを使う
同時実行数を10にすると一部の行が失敗する	メモリ不足	Concurrent browsersを2または4に下げ、Retryする

アーカイブを信頼する前に確認する

一度も開かれていないアーカイブは、1年間失敗を隠すことがあります。実行のたびにCapture Historyを開き、セッションの詳細を確認します。Framesの数はURLの件数と一致し、Failed URLsは空である必要があります。Partialの状態は、一部のページがキャプチャされなかったことを意味します。ランダムに選んだPNGを3枚原寸で開き、PDFを別のデバイスで開きます。その後で、不要になった下書きとテストセッションを削除します。Temposhotは既定で30セッションを保持し、上限を下げると古いものから削除します。

FAQ

元の画像ファイルはダウンロードされますか？

いいえ。ページをスクリーンショットとしてキャプチャします。元のデザインファイルは、別のバックアップに保存します。

非公開のプロジェクトや下書きをキャプチャできますか？

Website Captureが対象にするのは公開ページだけです。下書きには、サインイン済みのブラウザウィンドウでAuto Captureを使います。

長いBehanceプロジェクトが失敗したのはなぜですか？

非常に縦長のページは、1枚のフルページ画像に許容される安全なサイズを超えることがあります。その行をViewportに切り替えるか、Auto Captureでキャプチャします。

書き出したPDFは検索できますか？

結果ペインのPDF書き出しは、フレームにOCRを実行します。そのため、プロジェクトのタイトルと説明文は検索可能になります。ロゴの文字など画像内のテキストは、大きくはっきりしている場合にのみ認識されます。

PDFはどのくらいの大きさになりますか？

主にフォーマットとページの高さによります。写真の多いプロジェクトのフルページPNGから作ったPDFは、メールの添付上限を超えるほど大きくなることがあります。そうした行にはJPEGの品質90を使うか、完成したファイルをPDF圧縮ツールで縮小します。

公開しているポートフォリオのページを保存する

最も重要な5件のプロジェクトのURLをコピーし、Full pageとPNGの設定でWebsite Captureに貼り付け、セッションをPDFとして書き出します。設定に問題がないと確認できたら、残りを追加します。

5件のスターター実行

5件あれば、すべての設定を確認するのに十分です。短いDribbbleのショットを1件、長いBehanceのケーススタディを1件、Cookieバナーのあるページを1件、写真の多いプロジェクトを1件、小さなUI文字のあるプロジェクトを1件含めます。開始前に各行でRender previewを実行します。同じ設定で5件すべてがきれいにキャプチャされれば、残りの一覧も同様に動きます。1件でも失敗した場合は、その行の種類を今のうちに修正します。そうすれば、残りの28件は問題なく実行されます。

コードを書かずにウェブサイトのスクリーンショットを自動化する

Website Captureは、ポートフォリオのURLリストを、Mac上の画像フォルダまたは1つのPDFに変換します。詳細はウェブサイトのスクリーンショット自動化、またはキャプチャオプションのガイドを参照してください。