プロトタイプをフレーム付きで簡単に撮影! Overframe

はじめに

今日ご紹介するのは、Sketch, Principle, Invision Studio, Framerなどでプロトタイプを作成した後にフレーム付きで撮影をすることができるoverframeです。

どんなソフトで作ったプロトタイプでも、フレームを被せて撮影するだけなので、iOS Simulatorをいちいち立ち上げて撮影したり、動画編集ツールなどで編集をしなくても簡単にプロトタイプの撮影ができます。

今回は、このプラグインでできることをご紹介します。

overframeとは

デジタルプロダクトデザイナーのGaddafi Rusliが作ったプロトタイプの撮影ツールです。

関連リンク
公式サイト: Overframe
Product Hunt: Overframe – Record your prototype & app with device frame overlay | Product Hunt
Gaddafi Rusli: Gaddafi Rusli
Twitter: @gaddafirusli

Gaddafi Rusliはoverframe以外にもいくつかのプロダクトを発表しているので、興味がある方は下記リンクよりどうぞ。

• Coaster Unsplashの写真をMacやWindowsから検索するアプリ
• shotsnap アプリやサイトのデザインのモックアップを簡単に作ることができるオンラインサービス
  (shotsnapは基本機能は無料で使えます)
• ManualIcons 写真や動画に関するアイコンセット

では、新しく発表されたGaddafi Rusliのoverframeを見ていきましょう。

デモ

まずは、デモを見てみましょう。

overframeの仕組み

overframeは自分が作ったプロトタイプをそのままそのソフトで再生します。

ソフトの上に、overframeの背景色とデバイスの枠を被せ、あとは撮影ボタンを押すことであたかも、ソフト上で操作しているプロトタイプが本物のデバイスの中で動いているもののように見せることができるのです。

とにかく自分がどんなソフトを使っていてもoverframeを立ち上げるだけで、素早く撮影ができるので便利です！

使い方

Overframeを立ち上げると、Phone model, Phone scale, Phone orientation, Frame ratio, frame color, Autol-lock frame while recording, Translucent frameといくつか設定できます。

特にスマホのモデルや縮尺、フレームの背景色などを選べるのが便利です。

実際にoverframeを使って出来上がったもの

公式サイトのデモはInVision Studioのプレビューウィンドウの上にフレームを置き、撮影されたもので、overframe以外の動画編集ソフトなどは一切使っていないのですが、スムーズに動いていて、とても良い感じです。

値段

最後にoverframeの値段を見てみます。
overframeはUSD5 (560円ほど) で販売しています。

一度購入すれば、アップデートやバグ修正などがされても無料で最新版を手に入れられるようです。

まとめ

以上、今日はSketch, Principle, Invision Studio, Framerなどでプロトタイプを作成した後にフレーム付きで撮影をすることができるoverframeをご紹介しました。

プロトタイプの撮影は意外と面倒だったりするので、とにかく手軽に撮りたい！という場合はとても良さそうです。

値段も560円ほどと比較的安いので、一度試してみてはいかがでしょうか？