あやね
AxureのプロトタイプをPixsoで使うには、Axureでローカル公開したファイル一式をパスワード保護のないZIPにまとめ、Pixsoのワークスペースから「ファイルをインポート」→「Axure」を選びます。取り込む前に、画面を編集したいのか、元の操作を見せながらレビューしたいのかを決めてください。編集可能な形式とHTML形式の表示用ファイルでは、取り込み後にできることが異なります。
画面を編集してチームで設計を進めるなら編集可能な形式を選び、Pixsoのプロトタイプ制作機能で次の作業につなげます。Axureで作った操作の流れをそのまま確認してもらいたいなら、HTML形式を選びます。ただし、HTML形式の内容はPixso上で編集できません。
AxureからPixsoへ取り込む手順
1. Axureでローカル公開する
元のプロジェクトをAxureで開き、「Publish」から「Publish Locally」を選びます。空のフォルダを出力先に指定し、処理が終わったらHTMLファイルだけでなく画像やスクリプトなどのフォルダも生成されたことを確認します。元のAxureプロジェクトは別に保管してください。
2. 出力ファイル一式をZIPにする
生成されたファイル構成を崩さずにZIPへ圧縮します。HTMLだけを抜き出したり、ZIPにパスワードを設定したりしないでください。アップロード前にZIPを開き、必要なページや画像が含まれているかを確かめます。
3. Pixsoで形式を選んでインポートする
Pixsoのワークスペースで「ファイルをインポート」からAxureを選び、ZIPを指定します。ダイアログに選択肢が表示されたら、画面を編集する目的には編集可能な形式、既存の操作を共有・確認する目的にはHTML形式を選びます。後者は元のインタラクションを確認するための表示用ファイルであり、Pixso内で内容を編集する形式ではありません。
共有前に確認すること
取り込みが終わったら、代表的な画面をいくつか開き、文字、画像、重なり、長いページのレイアウトを比較します。編集可能な形式ではレイヤーを選んで小さな変更を試し、HTML形式では重要な操作を最初から最後までたどります。条件分岐や例外状態も確認してください。差があれば、Axureの元データを参照しながら調整するか、レビュー資料に差分を明記します。
Axure自体にもチームプロジェクトの共同作業機能があります。Pixsoへの移行は、編集・共有・レビューをどの環境で進めたいかという選択です。「Axureでは共同作業ができない」という意味ではありません。
うまく取り込めないとき
- 画像や装飾が欠ける：ローカル公開したファイル一式がZIPに入っているか確認します。
- ZIPが受け付けられない：暗号化を外し、一般的なZIP形式で作り直します。
- 操作が想定と異なる：編集可能な形式とHTML形式のどちらを選んだか確認します。
- 画面が崩れる：元のプロトタイプと代表画面を見比べ、編集可能なファイルで調整するか、HTML形式を参照用に残します。
取り込み後に画像を書き出す
元の記事で紹介していたスライス機能も、デザイン素材を渡すときに役立ちます。編集可能なPixsoファイルでツールバーのスライス機能を使い、必要な領域を指定します。右側の書き出し設定で形式と倍率を選びます。これはAxureの取り込みに必須の手順ではありません。
複数の倍率が必要なら書き出し設定を追加し、用途に合わせてファイル名を整理しましょう。
まずはPixsoで代表的な1画面を取り込んで、編集とレビューのどちらに使うかを判断してください。
