PIXSO · ユーザー体験をデザイン
ユーザーフローとプロトタイプを作るUXデザインツール
ホワイトボードで構想を整理し、画面をつないで操作できるプロトタイプへ。フィードバックもデザインのそばに残せます。開発に進む前に、チームが見て、試して、判断できる形にしましょう。
Pixsoホワイトボードで構想を整理。デザインファイルで画面の制作、プロトタイプ作成、レビューを。
インタラクションのデモ動画を見る
01 · 構想の可視化
複雑な導線も、話し合いやすく
Pixsoホワイトボードなら、手順、判断の分岐、関連メモを共有キャンバスにまとめられます。画面を細かく作り込む前に、基本の経路と別の選択肢をチームで検討できます。
配置を変えても、つながりを維持
図形やメモを矢印とラベル付きの線で接続。ボード上の要素を動かすと接続線も追従するので、要件の変更に合わせて分岐のあるフローを見直しやすくなります。
導線と、その判断の理由を一緒に
調査メモや製品要件を、関連する手順のそばに配置できます。情報の不足、キャンセル、操作のやり直しも含め、デザイナーと関係者が同じ図を見ながら検討できます。

02 · 編集可能なワイヤーフレーム
作り直さずに、画面構成を磨く
Pixsoのデザインエディターで、編集できるフレーム、テキスト、図形からワイヤーフレームを作成。変更しやすい段階でレイアウトを比較し、方向性が固まったら同じ画面に視覚的な詳細を加えられます。
作った要素を生かして、構成を調整
内容、操作部品、情報の優先順位をレイヤー単位で編集できます。フォーム、ナビゲーション、データがない状態の画面も、画像から描き直すことなく、そのまま改善できます。
必要な段階で、UIを仕上げる
コンポーネント、文字組み、視覚的な状態を同じデザインファイルで整えられます。初期レビューにはシンプルな画面を、完成形の検討には詳細な画面を用意できます。

03 · 操作してレビュー
画面の先にある体験まで伝える
デザインファイル内の画面をつなぎ、操作できるプロトタイプに。画面遷移、オーバーレイ、トランジションを使えば、静止画から想像するだけでなく、提案する動きをチームが試せます。
確認したい操作を、実際に見せる
トリガーをアクションと遷移先に接続します。クリック、ホバー、ドラッグ、遅延で画面の反応を表し、トランジションで状態のつながりを示せます。
同じ開始位置から、体験を共有
フローの開始フレームを設定し、ブラウザで再生できるプロトタイプを共有できます。レビューする人が同じ入口から進めるため、開発前に導線、応答、やり直しの経路を検討しやすくなります。

04 · チームのフィードバック
コメントを、対象のデザインに結び付ける
対象の画面や領域にフィードバックを固定。返信、メンション、解決済みの管理もデザインのそばで行えるので、別々のメッセージとスクリーンショットを照合する手間を減らせます。
対応が必要な箇所を見失わない
コメントの位置から、話題になっているデザインの箇所がわかります。同じスレッドで返信し、対応後は解決済みにすることで、未対応の意見と完了した議論を区別できます。
レビューの共有範囲と節目を管理
役割に合わせて閲覧権限や編集権限を設定できます。名前を付けたバージョンはレビュー時点の参照先に。バージョン機能の利用条件と保存期間はプランによって異なります。

PIXSOの活用シーン
チームの設計判断を支えるUXワークスペース
初期の構想にも、既存製品の改善にも。構想の可視化、編集できる画面、操作して確かめるレビューを組み合わせ、次の判断に必要な具体性を持たせられます。
新しいアプリやWebサイトの構想
ホワイトボードで導線を検討し、デザインファイルに少数のワイヤーフレームを作成。クリックできるプロトタイプがあれば、詳細なUI制作に進む前に、関係者が具体的にアイデアを話し合えます。
複雑なサービスや承認フロー
ラベル付きの分岐で判断条件を整理し、関連する画面と状態をプロトタイプで表現。未入力、キャンセル、申請の差し戻しが起きた後も、タスクをどう続けられるか確認できます。
既存製品の改善
編集可能な画面に変更案を反映し、フローにつないで、該当箇所にコメントを集められます。設計を進めながら、名前を付けたバージョンをレビュー時点の参照先として残せます。
これまでの作業を生かす
UXの方向性が決まったら、その先へ
同じデザインファイルでUIを仕上げる
コンポーネント、オートレイアウト、テキストとカラーのスタイルを使って、合意した画面構成を具体化。別の描画ツールで作り直さずに、ワイヤーフレームを詳細なインターフェースへ育てられます。
PixsoのUIデザインを見る開発者にデザインの背景も伝える
画面、プロトタイプの開始位置、関連する議論を共有できます。必要な権限を持つ開発者は、デザインファイルで寸法、余白、文字組み、書き出せる素材を確認できます。
共有と権限を確認既存のプロジェクトを引き継ぐ
対応するFigma、Sketch、Adobe XDファイルをインポートし、レイヤーの編集を続けられます。レビューで使う前に、インポート後のフォント、コンポーネント、プロトタイプの接続を確認してください。
対応するインポート形式を見る