「iPhone 5s」と「iPhone 5c」でページを見ている画像をサクッと作る方法

自分で作成したサイトやブログなどをiPhoneやiPad、iPad mini、さらにGAMEBOYなどで見るとどんな風になるのかを確認できるウェブサービスが「iPhone Screenshot Maker」ですが、バージョンアップして、iPhone 5s・iPhone 5cにも対応しました。

iPhone Screenshot Maker
http://iphone-screenshot.com/

使い方は、まずステータスバーの加工方法を選択してから使用するフレームを選びます。「auto detect」を選択すれば、のちのちステータスバーの加工方法を選択可能なので「auto detect」をクリック。そして今回は新しく対応したiPhone 5sのフレームを使ってみることに。

次に複数ある端末のカラーや角度から好きな物を選択。

そしてオプションを設定。ここでは入力画像をディスプレイにフィットさせたり、入力画像を余白なく拡大したり、ディスプレイに反射エフェクトの有無や、ステータスバーの加工、背景色の設定、出力画像のサイズ、出力画像のクリッピングなども可能。

出力画像のサイズは複数選択が可能で、カスタムサイズからサイズを指定することもできます。

赤枠部分にフレームに選択した端末のディスプレイに表示させたい画像をドラッグ＆ドロップすればOK。

画像のアップロードが済んだら「Download」をクリックすれば画像の加工完了です。

作成した画像はこんな感じになります。

iPhone 5cはこんな感じ。

なおNexus SやMacではどう見えるかという画像も作成可能です。