Facebookがデザインしたスマホ・タブレット・スマートウォッチなどのデバイスモックアップ用PNG画像＆Sketch用素材集

数多くのプラットフォームで利用可能なFacebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとなっています。

Devices — Facebook Design Resources
http://facebook.github.io/design/devices

各種端末のモックアップを全てゲットするには、「Download All Devices」をクリック。「自分の作品」として再配布しなければ、無料で誰でも自由に利用可能です。

ダウンロードされたZIPファイルを解凍して開きます。

解凍したフォルダに入っている「Facebook Devices」をクリック。

ここに全てのスマートフォンのモックアップPNG画像とSketchファイルが入っています。用意されている端末はiPhone 5c・iPhone 5s・iPhone 6s・iPhone 6s Plus・HTC One A9・HTC One M8・Microsoft Lumia 950・Motorola Moto E・Nexus 4・Nexus 5X・Nexus 6P・Nokia 220・Nokia 230・Nokia Asha 230・Nokia C3-00・Samsung Galaxy Note 5・Samsung Galaxy S Duos・Samsung Galaxy Yの18種類。

例えば「Apple iPhone 6s」を開いてみると……

端末ごとのフォルダには、透過PNGファイル・シャドウ入り透過PNGファイルと、Mac用ソフト「Sketch」で編集可能な.sketchファイルの3種類のファイルは入ったフォルダがあり、それぞれ端末のカラーの数だけモックアップ画像が入っています。

Photoshopで透過PNGファイルを全色並べて開いてみるとこんな感じ。

こっちはシャドウ入り。一見すると同じに見えますが……

背景を白くすると、下辺に端末を置いているようなシャドウが入っていることがわかります。

なお、ダウンロードページを下にスクロールすると、端末ごとのダウンロードも設置されています。

記事作成時点では、「全てダウンロード」「個別ダウンロード」ともにスマートフォンのみが公開されており、タブレット・スマートウォッチ・スマートTVは近日公開予定となっています。