2018年10月25日

デザイン

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

目次

  1. はじめに
  2. overframeとは
  3. デモ
  4. overframeの仕組み
  5. 使い方
  6. overframeを使ってできるもの
  7. 値段
  8. まとめ

はじめに

今日ご紹介するのは、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 Ruslioverframe以外にもいくつかのプロダクトを発表しているので、興味がある方は下記リンクよりどうぞ。

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

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

デモ

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

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円ほどと比較的安いので、一度試してみてはいかがでしょうか?

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP