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

デザインのお仕事に関するご相談

Bageleeの運営会社、palanではデザインに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

sasakki デザイナー

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

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

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

Miu マーケター

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

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

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

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP