Orbit｜SVGモックアップ生成ツール

8機種・35色から、制作に合うモックアップを

iPhone・Androidでアプリ画面を、iPadやノートPCでWebサイトや資料を見せる。端末を切り替えても、色を選び、画像を貼り込み、構図を調整してSVGへ書き出す流れは共通です。デバイスの種類と見え方を、制作物に合わせて選べます。

できること	8機種・計35色の選択、画角・光の調整、画面画像の貼り込み、背景透過のSVG書き出し
想定する利用者	制作物に合うモックアップを自分で調整したいデザイナー・クリエイター
モデル	iPhone 4機種、Android 2機種、iPad Air 11、MacBook 13。いずれも実機とは細部が異なる参考モデルです。
制作範囲	利用場面の整理・操作設計・画面設計・3Dモデル制作・ブラウザ実装・出力検証
ツール	Orbitを開く

動かして、画角を確かめる

ドラッグで視点を変え、プリセットや光を調整しながら、見せたい構図を探る。各デバイスに共通する操作の雰囲気を、初期開発時の動画でご覧いただけます。

素材に合わせる前に、構図を決めたい

代表自身も、Photoshop用のモックアップ素材を大量にストックしていました。それでも、デザインにぴったり合うトリミング・角度・バランスの素材を見つけるのは難しく、手元にある素材を起点に考える場面がありました。

そのとき必要な見え方を、自分で作れたら。Orbitは、この不便から生まれました。スマートフォン・タブレット・ノートPCを選び、色や角度、位置、光を自分で調整する。デザイナーやクリエイターが欲しいトリミングとバランスを作り、制作に使える素材として持ち帰ることを目指しています。

Orbitでできること

• iPhone・Android・iPad・MacBookの8機種を、同じ画面で切り替える
• モデル名横の丸いカラーチップから、機種ごとの色を選ぶ（計35色）
• ドラッグで回転し、ズームや位置調整で構図を決める
• 正面・斜め・側面などのプリセットを起点に調整する
• 光の向きを変え、面の明暗を調整する
• PNG・JPG・WebPの画面画像を貼り込み、画面いっぱいの表示と全体表示を切り替える
• SVGプレビューで書き出す見た目を確認し、背景透過で保存する
• デバイスの筐体をベクター、貼り込んだ画面を埋め込み画像としてSVGに保存する

機種固有の調整として、MacBookは画面の開き具合を0〜140度で変更できます。

SVGの陰影は面の明暗で表現します。3Dプレビューの反射や色と完全には一致しないため、保存前にSVGプレビューで確認します。

読み込む画像はブラウザ内で処理し、サーバーへ送信しません。PNG・JPG・WebP、30MB・50メガピクセルまでに対応します。ページを再読み込みすると画像の指定は消えるため、必要なSVGは保存してください。

こんな制作への活用を想定しています

スマートフォンで、アプリやモバイルサイトを紹介する。
iPhoneやAndroidに画面画像を貼り込み、サービス紹介やポートフォリオに使うモックアップへ。筐体色と画角を、画面デザインや周囲の余白に合わせて調整します。

タブレットで、Webサイトや資料の見え方を伝える。
iPadにサイトや資料の画像を貼り込み、提案書やWebページに配置する素材へ。回転・ズーム・位置調整で、伝えたい内容が見える構図を作ります。

ノートPCで、デスクトップ画面のデザインを見せる。
Webサイトや業務画面を、説明文やほかのビジュアルと組み合わせる素材へ。どの機種でも、構図を決めたSVGをデザインソフトへ持ち込む流れで使えます。

使う場面に合わせて構図を調整し、いつものデザインソフトで仕上げる使い方を想定しています。

画角をつくり、仕上げへ渡す

1. 機種と色を選び、画面画像を貼り込む

   端末一覧とカラーチップで、使いたい機種と色を選びます。画像をドロップするか選択し、画面いっぱいに見せるか、画像全体を収めるかを選びます。画像を入れずに使うこともできます。

2. ブラウザで構図を調整する

   「見え方を調整する」パネルで、プリセット・画角・光を調整します。デバイスを回転し、ズームや位置を変えて、制作物に合う向きと余白を決めます。

3. SVGの見た目を確認する

   SVG Previewで実際に書き出す状態を確認。さらに調整すると、3Dプレビューへ戻ります。

4. SVGを書き出して仕上げる

   保存したSVGをデザインソフトへ持ち込み、制作物のレイアウトに組み合わせます。筐体のパスと画面の画像を含むSVGとして保存されます。

MacBookの画像なしSVGは、Adobe Illustrator 2024への取り込みとディテールを代表の実機で確認済みです。追加したスマートフォン・タブレットや画像入りSVGのIllustratorへの取り込み、個別の編集操作、Figmaでの取り込み・編集は未確認です。出力はその画角から見える面だけを含むため、取り込み後にパーツを動かしても隠れていた面は現れません。

実務の条件を、AIと一緒に道具へ落とし込む

制作は、AIにBlenderを操作させて3Dモデルを作るところから始まりました。代表が利用場面と必要な品質を示し、形状や見え方を調整。ブラウザで構図を作り、筐体をベクターとして書き出すところまで、一つの制作フローにつなげました。

ノートPCから始まった仕組みは、現在、スマートフォン・タブレットを含む8機種とカラー切替に対応しています。機種ごとに素材を探していた作業を、共通の操作で必要な見え方を作る流れへ広げました。

Orbitを公開する狙いは、実務の課題から使えるツールを作る、TOMLABの取り組みを伝えることです。代表自身が有用だと感じられるか、いつもの制作環境へ持ち帰れるかを基準に、AIによる実装と人による確認を重ねています。

対応デバイスとカラー

スマートフォン・タブレット・ノートPCを端末一覧から切り替え、共通のプレビューと調整パネルで操作できます。スマートフォンとタブレットは、画面側を向いた縦向きの表示から始められます。

幅に余裕のある画面では、左に端末一覧を固定して表示し、山形ボタンで格納できます。狭い画面では右端のメニューから選択。SVG出力は、その左のボタンから行えます。

iPhone	iPhone 17 / iPhone 17 Pro / iPhone 14 / iPhone SE（第3世代）
Android	Pixel 11 / Galaxy S26
タブレット	iPad Air 11（M4）
ノートPC	MacBook 13

機種ごとのカラーバリエーションを参考にした計35色を、モデル名横の丸いチップから選べます。選んだ筐体色は3D・SVGプレビュー・書き出しに反映され、画面画像やレンズ、キーの色は保持します。

モデルは実機とは細部が異なる参考形状です。色名はメーカーの公式資料を参照し、表示する色味は製品写真を参考にした近似値です。3Dの反射とSVGの面の陰影では、見え方が異なります。