PIXSO · ユーザー体験をデザイン

ユーザーフローとプロトタイプを作るUXデザインツール

ホワイトボードで構想を整理し、画面をつないで操作できるプロトタイプへ。フィードバックもデザインのそばに残せます。開発に進む前に、チームが見て、試して、判断できる形にしましょう。

Pixsoホワイトボードで構想を整理。デザインファイルで画面の制作、プロトタイプ作成、レビューを。

Pixsoで展覧会予約アプリの画面をつないだプロトタイプフロー
編集可能な画面とプロトタイプの接続で、検討中の体験を具体的な形に。画像を拡大して見る
インタラクションのデモ動画を見る
Pixsoでインタラクションをどのように表現するかを紹介する製品デモ動画です。画面は英語で表示されます。

01 · 構想の可視化

複雑な導線も、話し合いやすく

Pixsoホワイトボードなら、手順、判断の分岐、関連メモを共有キャンバスにまとめられます。画面を細かく作り込む前に、基本の経路と別の選択肢をチームで検討できます。

配置を変えても、つながりを維持

図形やメモを矢印とラベル付きの線で接続。ボード上の要素を動かすと接続線も追従するので、要件の変更に合わせて分岐のあるフローを見直しやすくなります。

導線と、その判断の理由を一緒に

調査メモや製品要件を、関連する手順のそばに配置できます。情報の不足、キャンセル、操作のやり直しも含め、デザイナーと関係者が同じ図を見ながら検討できます。

Pixsoホワイトボードを見る
Pixsoホワイトボードに表示された、検証と在庫確認の分岐を含む注文処理フロー図
条件付きの分岐と接続線で、注文処理の流れを見える形に。

02 · 編集可能なワイヤーフレーム

作り直さずに、画面構成を磨く

Pixsoのデザインエディターで、編集できるフレーム、テキスト、図形からワイヤーフレームを作成。変更しやすい段階でレイアウトを比較し、方向性が固まったら同じ画面に視覚的な詳細を加えられます。

作った要素を生かして、構成を調整

内容、操作部品、情報の優先順位をレイヤー単位で編集できます。フォーム、ナビゲーション、データがない状態の画面も、画像から描き直すことなく、そのまま改善できます。

必要な段階で、UIを仕上げる

コンポーネント、文字組み、視覚的な状態を同じデザインファイルで整えられます。初期レビューにはシンプルな画面を、完成形の検討には詳細な画面を用意できます。

Pixsoのワイヤーフレーム作成を見る(英語)
Pixsoのデザインエディターに表示されたアプリのローファイワイヤーフレームと編集可能なレイヤー
編集できるレイヤーだから、設計に合わせて画面構成を変えられます。

03 · 操作してレビュー

画面の先にある体験まで伝える

デザインファイル内の画面をつなぎ、操作できるプロトタイプに。画面遷移、オーバーレイ、トランジションを使えば、静止画から想像するだけでなく、提案する動きをチームが試せます。

確認したい操作を、実際に見せる

トリガーをアクションと遷移先に接続します。クリック、ホバー、ドラッグ、遅延で画面の反応を表し、トランジションで状態のつながりを示せます。

同じ開始位置から、体験を共有

フローの開始フレームを設定し、ブラウザで再生できるプロトタイプを共有できます。レビューする人が同じ入口から進めるため、開発前に導線、応答、やり直しの経路を検討しやすくなります。

プロトタイプの操作と設定を見る
Single-clickトリガー、遷移先、アニメーションの選択肢が表示されたPixsoのプロトタイプ設定
トリガー、遷移先、トランジションを設定パネルで明確に。

04 · チームのフィードバック

コメントを、対象のデザインに結び付ける

対象の画面や領域にフィードバックを固定。返信、メンション、解決済みの管理もデザインのそばで行えるので、別々のメッセージとスクリーンショットを照合する手間を減らせます。

対応が必要な箇所を見失わない

コメントの位置から、話題になっているデザインの箇所がわかります。同じスレッドで返信し、対応後は解決済みにすることで、未対応の意見と完了した議論を区別できます。

レビューの共有範囲と節目を管理

役割に合わせて閲覧権限や編集権限を設定できます。名前を付けたバージョンはレビュー時点の参照先に。バージョン機能の利用条件と保存期間はプランによって異なります。

デザインへのコメント機能を見る
PixsoでBooksyアプリの画面上に位置を指定して添えられたコメント
位置を指定したコメントと返信で、対象の画面に沿って意見を共有。

PIXSOの活用シーン

チームの設計判断を支えるUXワークスペース

初期の構想にも、既存製品の改善にも。構想の可視化、編集できる画面、操作して確かめるレビューを組み合わせ、次の判断に必要な具体性を持たせられます。

  • 新しいアプリやWebサイトの構想

    ホワイトボードで導線を検討し、デザインファイルに少数のワイヤーフレームを作成。クリックできるプロトタイプがあれば、詳細なUI制作に進む前に、関係者が具体的にアイデアを話し合えます。

  • 複雑なサービスや承認フロー

    ラベル付きの分岐で判断条件を整理し、関連する画面と状態をプロトタイプで表現。未入力、キャンセル、申請の差し戻しが起きた後も、タスクをどう続けられるか確認できます。

  • 既存製品の改善

    編集可能な画面に変更案を反映し、フローにつないで、該当箇所にコメントを集められます。設計を進めながら、名前を付けたバージョンをレビュー時点の参照先として残せます。

これまでの作業を生かす

UXの方向性が決まったら、その先へ

同じデザインファイルでUIを仕上げる

コンポーネント、オートレイアウト、テキストとカラーのスタイルを使って、合意した画面構成を具体化。別の描画ツールで作り直さずに、ワイヤーフレームを詳細なインターフェースへ育てられます。

PixsoのUIデザインを見る

開発者にデザインの背景も伝える

画面、プロトタイプの開始位置、関連する議論を共有できます。必要な権限を持つ開発者は、デザインファイルで寸法、余白、文字組み、書き出せる素材を確認できます。

共有と権限を確認

既存のプロジェクトを引き継ぐ

対応するFigma、Sketch、Adobe XDファイルをインポートし、レイヤーの編集を続けられます。レビューで使う前に、インポート後のフォント、コンポーネント、プロトタイプの接続を確認してください。

対応するインポート形式を見る

UXデザインにPixsoを選ぶ前に

PixsoはUXデザインにどのように役立ちますか?
Pixsoホワイトボードで構想を可視化し、デザインファイルでは編集可能なワイヤーフレーム、UI、操作できるプロトタイプを作成して、画面に沿ったフィードバックを集められます。アイデアの話し合いから画面と動きのレビューへ進み、その後もデザインを編集し続けたいチームに適しています。
Pixsoホワイトボードとデザインエディターは同じファイルを使いますか?
ファイルの種類は異なります。手順や判断の分岐はホワイトボードで整理し、画面制作、プロトタイプの接続、インターフェースのレビューはデザインファイルで行います。それぞれのファイルをチームに共有できます。フロー図が自動で接続済みの画面に変わるわけではありません。
Pixsoのプロトタイプをユーザビリティテストに使えますか?
はい。操作できるプロトタイプを共有し、参加者にタスクを進めてもらえます。観察や記録には、選んだ調査ツールを使用してください。プロトタイプの共有に、参加者の自動募集や行動分析は含まれません。
チームでも無料で始められますか?
はい。無料プランでデザインを作成し、レビューできます。利用が広がったら、チームの規模、共有リソース、バージョンの保存期間に応じてプランを比較してください。

操作できるプロトタイプで、次のUXを判断

編集できる画面、操作して確かめるレビュー、対象の箇所に残るフィードバック。Pixsoでデザインを始めましょう。

無料でデザインを始める