[2026/10/10]

[WEB Tool] PSD / PSB Viewer v1.0 — 超巨大ファイルもブラウザで開く、高速ストリーミング・ビューアの使い方ガイド

[WEB Tool] PSD / PSB Viewer v1.0 — 超巨大ファイルもブラウザで開く、高速ストリーミング・ビューアの使い方ガイド

概要

PSD / PSB Viewer は、Photoshop の標準形式（.psd）および超大型文書形式（.psb）を、ブラウザ上で高速に開いて確認・書き出しできる軽量WEBツールを公開しました。

通常、数ギガバイトに及ぶ巨大な画像ファイルをブラウザで読み込むと、メモリ枯渇（OOM）でクラッシュします。

本ツールでは、Blob.slice() を活用した自前のバイナキストリーミング解析（4MB 窓読み込み）と間引きデコードにより、ファイル全体をメモリに載せることなく、一瞬でプレビューを表示します。

Photoshop が保存した結合プレビュー画像の表示はもちろん、各レイヤーの構造解析、フォルダ階層ツリー表示、表示・非表示のリアルタイム切り替え、ブレンドモード・クリッピングマスク・ベクターマスクの合成描画、さらにレイヤー単体の PNG 保存や全レイヤーの一括 ZIP 書き出しにも対応しています。

データはすべてお使いの端末（ブラウザ内）で処理されます。サーバーへファイルをアップロードすることはないため、機密性の高いデザインファイルや巨大データも安心・安全に閲覧できます。

PSD / PSB Viewer

スタートメニューから起動

トップページのスタートメニューから起動できます。

PSD / PSB Viewer — スタートメニューから起動

スクリーンショット

PSD / PSB Viewer — 61 レイヤー + 15 グループの PSD

レイヤーツリーと、合成されたテクスチャが表示された PSD / PSB Viewer

2048×2048、12.12MB、61 レイヤー + 15 グループの PSD です。右にレイヤーツリー、左にファイル情報と、未対応の機能の注意書きが出ます。

※公開されているVketちゃんのデータをお借りしています。

『Vketちゃん1号』VRSNS向けアバター - バーチャルマーケット公式 - BOOTH

『Vketちゃん1号』VRSNS向けアバター - バーチャルマーケット公式 - BOOTH

バーチャルマーケット公式キャラクター「Vketちゃん1号」です。 バーチャルマーケット3開催時に、キャラクターデザイン投票で1位を獲得し、3D化しました。 キャラクターデザインは、深黎さん（https://x.com/@mirei_works） キャラクターモデリングは、春日部つくしさん（https://x.com/kasukaBe_nyoki） ◆アバターパフォーマンス OverallPerformance:VeryPoor PhysBoneComponents:16 SkinnedMeshRenderers:8 MaterialSlots:13

booth.pm

PSD / PSB Viewer — 20000×20000、1.13GB の PSB

20000×20000、1.13GB の PSB を表示した画面

ツールの特徴

  • 1GB 超の巨大 PSB を即座に閲覧: ファイル全体をロードせず、バイナリの窓読み込みでヘッダーと必要領域だけを取得
  • ブラウザ最大描画制限の回避: 16,384px を超えるキャンバス（20,000×20,000px 等）もダウンスケール・プレビューで安全描画
  • レイヤー階層構造の再現: フォルダ階層、不透明度、可視状態のトグル（👁マーク）、個別レイヤーインスペクタ
  • 高度な合成描画エンジン: ブレンドモード、クリッピングマスク、レイヤーマスク、ベクターマスク、べた塗り・グラデーションレイヤー、アートボードに対応
  • 各種圧縮・ビット深度サポート: Raw, RLE, ZIP, ZIP+Predict 圧縮、および 1/8/16/32bit、RGB/CMYK/Lab/Grayscale/Indexed モードに対応
  • 高速書き出し機能: 画面表示内容の PNG 保存、選んだレイヤー単体の PNG 保存、全レイヤーの一括 ZIP 保存（layers.json 付属）
  • 完全ローカル処理: 外部ライブラリ非依存、サーバー通信なしでブラウザ内のみで高速完結

まず試す：ファイルをドロップする

  1. 画面左の破線エリア（FILE INPUT）に、手持ちの .psd または .psb ファイルをドラッグ＆ドロップする。
  2. 数ミリ秒〜数秒でファイル情報（解像度、カラーモード、容量、レイヤー数）が読み込まれ、キャンバスにプレビューが表示されます。
  3. マウスホイールで拡大・縮小（ズーム）、ドラッグでキャンバスの移動（パン）ができます。
  4. 右側の LAYERS パネルでレイヤーの目のアイコン（👁）をクリックすると、表示/非表示をミリ秒単位で瞬時に切り替えられます。

使い方

1. FILE INFO（ファイル情報）の確認

ファイルを読み込み出すと、左パネルに以下の情報が表示されます。

項目内容
Nameファイル名
FormatPSD (Standard) または PSB (Photoshop Big)
Dimensions画像の解像度（幅 × 高さ px）
Color Depthビット深度（8-bit, 16-bit, 32-bit など）
Color Modeカラーモード（RGB, CMYK, Lab, Grayscale など）
Layers検出されたレイヤー数とグループ数
File Sizeファイル容量

また、未対応の機能（調整レイヤーや未反映のレイヤー効果など）が含まれる場合は、NOTES セクションに注意書きが自動表示されます。

2. VIEW OPTIONS（表示オプション）

キャンバスの描画方法をリアルタイムにカスタマイズできます。

  • Preview size: 1024px / 2048px / 4096px からプレビュー解像度を選択（巨大画像で拡大時により精細に見たい場合は 4096px を推奨）。
  • Background: キャンバス背景を市松模様（透過領域確認用）、白背景、黒背景などから切り替え。
  • Merged image only (exact, fast): チェックを入れると、Photoshop が保存時に作成した「結合済みプレビュー画像」を表示します。最速かつ正確な見た目を確認したい場合に便利です。
  • Blend modes / Clipping masks: レイヤー合成時の描画モードやクリッピング処理の有効/無効を切り替えます。

3. レイヤーツリー操作 (LAYERS)

右パネルでは、Photoshop のレイヤー構造がフォルダ階層付きで再現されます。

  • 表示・非表示トグル (👁 / 🕶): 目のアイコンを押すと、該当レイヤーの可視状態を切り替えます。初回ロード時にキャッシュを構築するため、以降は 0 秒で即座に再合成されます。
  • 検索欄 (Search layers…): レイヤー名でフィルタリングが可能です。
  • 一括操作ボタン (ALL): 全レイヤーの一括表示・非表示、フォルダの一括開閉を行えます。
  • ソロ表示 (Alt + クリック): 目のアイコンを Alt キーを押しながらクリックすると、そのレイヤーだけを単独表示します。

4. インスペクタと単体書き出し (INSPECTOR)

レイヤーツリーから任意のレイヤーを選択すると、画面右下にレイヤーの詳細情報（座標、幅・高さ、不透明度、ブレンドモード）が表示されます。

  • EXPORT LAYER AS PNG: 選択中のレイヤーのみを透明度を維持した PNG 画像としてダウンロード保存します。

5. 一括書き出し (EXPORT)

左パネル下部のボタンから、ファイル全体の書き出しが行えます。

  • EXPORT VIEW AS PNG: 現在キャンバスに描画されているプレビュー結果をそのまま PNG 保存します。
  • EXPORT LAYERS (ZIP): すべての個別レイヤー画像（PNG）と、レイヤー構造メタデータ（layers.json）をまとめた ZIP ファイルを生成・ダウンロードします。

注意事項

  • 本ツールはブラウザローカル環境でバイナリを直接ストリーミング解析します。データが外部サーバーへ送信されることは一切ありません。
  • 調整レイヤー（トーンカーブ、レベル補正等）や一部のレイヤー効果（ドロップシャドウ、境界線等）はラスタライズ結果を保持しないため、レイヤー合成モードでは適用されない場合があります。正確な見た目の確認には「Merged image only」を有効にしてください。
  • 20,000px を超える超巨大画像の場合、キャンバスのメモリ限界を回避するためプレビューはダウンスケール表示されます。

よくある質問 (FAQ)

Q. 10GB を超えるような超巨大な PSB ファイルでも開けますか？
A. 開けます。ファイル全体を読み込まず、Blob.slice() で 4MB ごとの窓読みを行うため、ブラウザのメモリ（RAM）を枯渇させずにプレビュー表示できます。

Q. 日本語のレイヤー名が文字化けしませんか？
A. 化けません。従来の Pascal 文字列だけでなく、Unicode 名タグ（luni）を優先してパースするため、日本語や特殊文字のレイヤー名も正確に表示されます。

Q. セキュリティ面で、デザインデータが外部に送信される心配はありませんか？
A. ありません。すべての解析・デコード・合成・ZIP生成処理は、お使いのブラウザ（JavaScript / Canvas API）内で完結しています。

技術記事

実装・バイナリストリーミング解析の詳細は、技術記事にまとめています。

更新履歴

バージョン日付内容
v1.0.02026/10/10初回公開（4MB 窓ストリーミング解析、PSB 64bit 対応、レイヤーツリー、ブレンド/マスク/クリッピング合成、PNG/ZIP書き出し）

クレジット

ライブラリ

  • 本ツールのバイナリ解析・デコード・合成・描画・ZIP書き出しロジックは、すべて外部ライブラリ非依存の純粋な JavaScript (Web API) で自作されています。