2019年6月26日

デザイン

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

目次

  1. はじめに
  2. threed.ioとは
  3. デモ
  4. 使い方
  5. その他オススメの無料モックアップサービス
  6. まとめ

はじめに

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

1.png (470.6 kB)

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

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

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

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

threed.ioとは

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

2.png (838.7 kB)

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

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

3.png (107.1 kB)

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

デモ

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

使い方

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

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

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

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

3.png (107.1 kB)

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

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

4

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

5.png (129.2 kB)

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

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

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

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

モックアップの拡大具合

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

6.gif (1.9 MB)

モックアップの背景色

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

7.gif (1.3 MB)

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

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

8.gif (2.0 MB)

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

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

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

9.gif (1.6 MB)

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

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

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

10.png (41.2 kB)

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

threed_mockup (1).png (1.3 MB)

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

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

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

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

MockUPhone

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

12.png (1.8 MB)

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

13.png (602.8 kB)

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

MockUPhone

shotsnapp

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

14.png (676.4 kB)

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

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

15.gif (1.6 MB)

shotsnapp

まとめ

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

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

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

2

0

AUTHOR

sasakki デザイナー

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

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

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

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

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

話を聞いてみたい

運営メンバー

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でのアプリ開発をしています。

kobori

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

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

sasai

ささい エンジニア

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

CONTACT PAGE TOP