PIXSO · プロトタイピング

アプリ・Webのプロトタイプ作成ツール

アプリやWebサイトの画面を、コードを書かずに操作できるプロトタイプへ。画面遷移、オーバーレイ、動きを設計し、同じデザインファイルからチームに体験を共有できます。

コーディングは不要。画面、インタラクション、フィードバックが一つにつながります。

Pixso上の展覧会予約アプリ。青いプロトタイプ接続線が、展覧会の閲覧、予約、予約完了の画面をつないでいる
静止画では伝わらない操作感まで、チームが試せる体験に。画像を拡大して見る
プロトタイピングのデモ動画を見る
Pixsoのインタラクションを紹介する製品デモ動画です。動画内のインターフェースは英語です。

次のデザインレビューに

チームで確認したいフローをプロトタイプに

アプリ内の操作経路、Webサイトの動作、チームで話し合う体験を具体化し、デザインの判断材料にできます。

  • アプリの操作フロー

    初回利用、予約、購入の各画面をつなぎ、前の画面への戻り方や確認画面まで含めて体験できます。

  • Webサイトのインタラクション

    ナビゲーションメニュー、ダイアログ、アニメーション付きの画面遷移、スクロールするコンテンツを操作できる形で示せます。

  • チームでのレビュー

    プロダクト、デザイン、開発のメンバーが同じフローを試し、実装前に具体的な画面について話し合えます。

操作したときの反応まで伝える

画面遷移、オーバーレイ、動きをUIに

メニューが開く様子、ダイアログが閉じる動作、画面の反応を表現。開発が始まる前に、見た目の先にある操作感をレビューできます。

クリック以外の操作にも対応

クリック、ホバー、ドラッグ、時間経過をトリガーに、さまざまな反応を表現できます。オーバーレイの表示、切り替え、終了で、背景の画面との関係を保ちながらメニューやダイアログを見せられます。

画面に合った動きとスクロール

トランジションの種類、時間、緩急を調整して、意図した動きを伝えられます。長いページには縦スクロール、横並びのコンテンツには横スクロール、地図のような画面には縦横両方向のスクロールを設定できます。

プロトタイプのトリガーとアクションを見る
Pixsoのプロトタイプエディター。Webサイトの画面遷移にSingle-clickの操作とカスタムSmart animate設定が表示されている
デザインを見ながら、その画面の操作と動きを調整できます。

デザインとプロトタイプを一緒に

デザインもプロトタイプも、一つのファイルで

Pixsoファイル内のフレームに操作を加えて、体験できる形へ。別のプレゼンテーション用に画面を作り直すことなく、画面同士の接続とともにレイアウトや表示状態を調整できます。

制作中の画面をそのまま活用

同じ画面とコンポーネントを使いながら、デザインを発展させられます。プロトタイプと、それを構成するレイアウト、ラベル、表示状態をまとめて扱えます。

ワイヤーフレームから詳細なUIまで

初期のワイヤーフレームで簡単なフローを試し、仕上がった画面にも操作を追加できます。キャンバス上で、開始位置から最後の状態まで、操作経路の全体像を確認できます。

Pixsoエディターに表示された旅行アプリ。4つのモバイル画面がデザインキャンバス上でプロトタイプ接続線につながっている
アプリの画面とその操作経路を、同じデザインキャンバスで扱えます。

体験をチームで共有

操作できるプロトタイプを共有し、画面を見ながらレビュー

デザイナー、プロダクトマネージャー、開発者が同じフローを試せます。プレゼンテーションのリンクと該当画面へのコメントで、どのデザインへの意見なのかが明確になります。

レビューごとに明確な開始位置を

フローの開始画面から共有すれば、レビューする人が意図した操作経路をたどれます。たとえば予約フローなら、選択、確認、前の画面に戻る動作まで試せます。

画面と結び付いたフィードバック

コメントで質問や提案を、レビュー中のデザインに結び付けられます。画面やインタラクションを調整するときに、その文脈を振り返れます。

Pixsoのプレゼンテーションモードで開いたBooksyのモバイルアプリプロトタイプ。画面の横にフロー一覧とチームのコメントが表示されている
操作できるプレゼンテーションと画面に紐づくコメントで、デザインについて話し合いやすくなります。

設計の意図を開発までつなぐ

プロトタイプの動作と開発用の仕様を一緒に

操作できるフローと、その裏にあるデザイン情報を一緒に共有。Pixsoは画面、プロトタイプ、開発者ビューを同じワークスペースにまとめ、見た目と動作の両方を伝えます。

意図した動作を見せる

画面のデザインに加え、プロトタイプでナビゲーションやトランジションを表現。実装について話し合う際の共通の参照先になります。

実装に必要な情報をすぐそばに

開発者モードでデザインのプロパティや寸法を確認し、アセットを書き出せます。プロトタイプで体験を、デザインで細部を伝えられます。

Pixsoの開発者モード。選択したデザイン、ボックスモデルの寸法、CSS参照情報、書き出し関連のタブが表示されている
体験のイメージと、実装に必要な寸法やアセットをまとめて共有できます。

製品デザインを一つのワークスペースで

最初のアイデアから、実装の細部まで

体験を構想する

詳細な画面を作る前に、ユーザーの経路を整理し、さまざまな案を検討できます。

PixsoのUXデザインを見る

画面をデザインする

プロトタイプの基になるレイアウトと、再利用できるコンポーネントを作成できます。

PixsoのUIデザインを見る

開発への引き継ぎを支える

デザインのプロパティや寸法、書き出せるアセットを開発者が参照できます。

開発者モードを見る

Pixsoでのプロトタイプ作成について

コーディングの知識は必要ですか?
いいえ。プロトタイプモードでは、フレーム、トリガー、アクション、トランジションを使って、画面上で操作を設定できます。結果はPixsoでそのままプレビューできます。
アプリとWebサイトの両方のプロトタイプを作れますか?
はい。初回利用や予約などのモバイルアプリの画面をつないだり、Webサイトのナビゲーション、ダイアログ、長いページを表現したりできます。クリック、ホバー、ドラッグ、時間経過のトリガーに、オーバーレイ、スクロール、アニメーション付きの画面遷移を組み合わせて、意図した動作を伝えられます。
ワイヤーフレームや既存のUIデザインを使えますか?
はい。シンプルなフレームから始めることも、Pixsoファイル内の詳細なUIに操作を追加することもできます。アイデアの進展に合わせて、デザインとプロトタイプを一緒に磨いていけます。
チームでプロトタイプをレビューできますか?
はい。プレゼンテーションのリンクを共有すると、チームメンバーがフローを試し、コメントでデザインについて意見を交わせます。アクセスにはファイルの共有権限が適用されます。
チームのプランを選ぶときは何を比較すればよいですか?
デザインファイルを編集する人、開発用の情報を確認する人、レビューする人を整理しましょう。料金ページで、それぞれの役割に必要なシートの権限、共同作業機能、ワークスペースの上限を比較できます。チームがプロトタイプを作成・レビューする方法に合う構成を選んでください。

初めてのプロトタイプを作ってみませんか?

プロトタイピングを始める フローの開始位置を設定