iOSでスクリーンショットを撮ると、デバイスの枠がないので若干寂しいです。雰囲気を把握するためには、やはりデバイスの枠があったほうが分かりやすいでしょう。Xcodeをインストールしてシミュレータがあったとしても任意の画像に枠が追加できる訳ではありません。 そこで使ってみたいのがdeviceframeです。ごく簡単に、好きなデバイスの枠が追加できます。

deviceframeの使い方

deviceframeは画像を引数に渡すだけで使えます。

その際、デバイスをインタラクティブに指定できます。これは複数指定できます。

$ dframe IMG_3328.PNG 
? Add the frames you want to use (ESC to complete) (Use arrow keys or type to se
arch)
❯ apple iphone 5c blue 
  apple iphone 5c green 
  apple iphone 5c red 
  apple iphone 5c white 
  apple iphone 5c yellow 
  apple iphone 5c blue [shadow] 
  apple iphone 5c green [shadow] 
(Move up and down to reveal more choices)

終わったらEscキーを押します。

? Add the frames you want to use (ESC to complete) (Use arrow keys or type to se
arch)
❯ apple iphone 5c blue 
  apple iphone 5c green 
  apple iphone 5c red 
  apple iphone 5c white 
  apple iphone 5c yellow 
  apple iphone 5c blue [shadow] 
  apple iphone 5c green [shadow] 
(Move up and down to reveal more choices)

Downloading frame [====================] 67/bps 100% 0.0s
Downloading frame [====================] 60/bps 100% 0.0s
> Wrote: IMG_3328-Apple iPhone 5c Red.png
> Wrote: IMG_3328-Apple iPhone 7 Gold.png

元画像はこちら。

iPhone 7 Goldを追加した画像はこちら。

さらにiPhone 5c赤を指定した場合。

Webサイトの指定もできますが、デスクトップ用の表示になってしまうようです。

deviceframeを使えば任意の画像やWebサイトのスクリーンショットに対してデバイスの枠が適用できます。これだけでずいぶんイメージが変わるでしょう。アプリやWebサイト開発時に使うと良さそうです。

deviceframeはnode/JavaScript製のオープンソース・ソフトウェア（GPL v3）です。

c0bra/deviceframe: Put device frames around your mobile/web/progressive app screenshots.