無料で立体的なスマホのモックアップが作れる！threed.io

はじめに

今回は無料で立体的なスマホのモックアップが作れる、threed.ioというモックアップサービスをご紹介します！

スマートフォンやmacなどのlaptopにUIを当て込んだモックアップサービスはいくつかあります。

しかし、作った後にダウンロードをしようとすると有料だと言われたり、watermarkが入っていたりと、「free」と書いてあるものの、作ったものを実際にダウンロードし、使用しようとすると無料ではないものも多いです。

また、基本的なモックアップで良いのに、テンプレートがありすぎたりなど機能過多のものも多いです。

そこで、今回はシンプルなモックアップを無料で簡単に作れるwebサービス、threed.ioをご紹介します！

threed.ioとは

threed.ioはsansho studioというドイツのベルリンで活動している制作会社とinvisible roomというこちらもドイツのベルリンのUXデザインスタジオが共同開発したベータ版もモックアップツールです。

トップ画面はこんな感じです。

「Start the generator」でモックアップジェネレーターを起動するとこんな感じの画面が表示されます。

下のメニューから、スマホの向きを変えたり、背景色を変えたりすることができます。

デモ

ツイッターに本モックアップジェネレーターのデモが載っていたので、まずはこちらをご覧ください。

We just launched https://t.co/9N0lBbkX2M beta with our friends from @invisible_room. Generate custom 3D device mockups with your designs right in your browser! 🚀🚀🚀 pic.twitter.com/5L8mqcfJbw

— sansho (@studio_sansho) November 16, 2017

使い方

具体的にthreed.ioの立ち上げ方や使い方を見ていきます。

今回ご紹介する使い方はあくまで一例ですが、特に最初の2ステップや後半のダウンロードのステップは必須になるので、参考にしてください。

STEP1. ジェネレーターの立ち上げ (必須)

まずは、ジェネレーターを立ち上げてください。
threed.io

STEP2. モックアップ画像の選択 (必須)

画面下部のメニュー左下の「Upload」ボタンからモックアップの中に入れるUI画像を選択してください。

今回はベーグリーのUIのモックアップを作っていきます。

STEP3. モックアップのカスタマイズ

threed.ioでは、モックアップの拡大具合、背景色、デバイスの向き、角度、影など様々なカスタマイズをすることが可能です。

細かいカスタマイズが必要ない方はSTEP 4へどうぞ。

カスタマイズをされたい方は、下記を参考にしてください。

モックアップの拡大具合

マウスのスクロールを使えば、モックアップを拡大したり、縮小したりすることができます。

モックアップの背景色

画面下部のメニューバーの左から２つ目のセクション部分から背景色を選ぶことができます。

モックアップのデバイス角度、グレア、色、シャドウ

画面下部のメニューバーの左から3つ目のセクション部分からモックアップのデバイス角度、グレア、色、シャドウを選ぶことができます。

モックアップのボードのリサイズ

画面下部のメニューバーの左から3つ目のセクション部分の最後の「resize」というところからモックアップのボードのリサイズができます。

ただし、両側からリサイズしないと、モックアップが左や右に寄ってしまうので、注意です！

モックアップのカスタマイズに関しては以上です！

STEP4. モックアップをダウンロード

UIを当てはめ、カスタマイズが終わったら、右下のボタンからダウンロードできます。

実際にダウンロードしたものがこちらです。

その他オススメの無料モックアップサービス

threed.io以外にも一部の機能やテンプレートが無料で使えるモックアップサービスがあります。

特に、threed.ioはスマートフォンのモックアップにしか対応していないため、PCサイズのモックアップサービスを使い方もいらっしゃるかもしれません。

そんな方にオススメなのは、こちらです。

MockUPhone

MockUPhoneは細かいカスタマイズ機能はありませんが、iOS, Android, Laptop & Desktop, Windows Phone, TVなどの幅広いデバイスのモックアップを無料で作ることができます。画像を選択したあとの少しだけ作成時間が少し長い気がします。

実際にモックアップを作ってみたときの画面です。
こちらのサイトからモックアップをダウンロードするには、メールアドレスの登録していただき、メールアドレス内のリンクからモックアップ画像がダウンロードできます。

モックアップ自体は背景がきちんと透過された状態のものが出るので、いろんなところに使いやすい形になっていると思います。

MockUPhone

shotsnapp

shotsnappは無料と有料のテンプレートがあるので、全ての機能が使えるというわけではないのですが、無料のテンプレートであればある程度のカスタマイズが可能です。iPhone, macbookなどデバイスだけではなく、ブラウザ画面のモックアップなどもあります。

また、こちらのモックアップサービスはある程度のカスタマイズも可能です。

ブラウザのテンプレートであれば、ブラウザのバーの部分をchrome, safariなどとカスタマイズできたり、背景色も変更することが可能です。

shotsnapp

まとめ

以上、今回は無料で立体的なスマホのモックアップが作れる！threed.ioをご紹介しました。

サービスのプレゼンテーションに欠かせないモックアップですが、手軽にとにかく簡単に無料でつくりたい！と思った時に、意外とちょうど良いサービスがないことが多いです。

今回ご紹介したthreed.ioに加え、後半でご紹介したMockUPhoneやshotsnappの中からも使いやすいものを選んで、活用いただければと思います！