ブラウザのツール「PSD Viewer」の30秒紹介動画

PSD Viewer（PSD確認ツール）は、PSDを読み込んでレイヤーの確認・表示の切り替え・並べ替えができるブラウザのツールです。差分のレイヤーを口・目・眉などの項目に仕分け、差分をまとめてPNGで書き出せるほか、PNG・JPEG・PSDでの保存やランダムなGIFの作成にも対応しています。インストールは要らず、ZIPを展開してHTMLを開くだけで使え、パソコンを想定しつつiPhoneでも動作が確かめられています。

0〜2秒　「PSD確認ツール」の名前とPSD VIEWERの札が出て、レイヤーの札が1枚落ちて目が消えます。

2〜6秒　レイヤーの札が落ちて積もり、目が点滅して、差分のたびに表示を切り替えて確かめることを示します。

6〜10秒　「〜.png 保存」のカードが降り積もって画面を埋め、「保存が終わらない」と出ます。

10〜12秒　製品の画面の窓が落ちてきて山が崩れ、インストールなしで開くだけと示します。

12〜16.5秒　商品画像のレイヤーツリーに寄って囲み、レイヤーの確認と並べ替えと表示の切り替えを示します。

16.5〜20.5秒　仕分けの項目に寄って「選択レイヤーを仕訳け」を押し、差分を口・目・眉に振り分けます。

20.5〜25秒　「差分を全部ZIP」を囲んで押すと、PNGのタイルが整然と積もり、ほかの保存形式とランダムGIFも示します。

25〜30秒　製品名と商品画像の縮小、BOOTHのショップのURLで締めます。

背景にPSDの透明を表す市松を敷き、黒の太枠と硬い影で組みました。色はアプリの背景色の見本にあるクロマキーの緑、製品のボタンの紫、保存カードのピンクです。製品の画面は商品画像と告知の画像の画素をそのまま使い、寄って緑の枠で囲みカーソルで押す動きだけを足しました。場面のつなぎも層が持ち上がって外れ、次の層が落ちて重なる形にしています。

製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。