UIデザイン・プロトタイプ：ツールとアプリ

選び方のポイント

2〜3画面の小さなフローを作り、コンポーネントの作成、自動レイアウト、画面同士のリンクを試してスマートフォンでプロトタイプを開きます。同じファイルにチームメンバーとコメントを書き込み、開発者向け表示で寸法やカラーコードを読めるかも試しましょう。

無料プランでファイル数、ページ数、編集者数、バージョン履歴に制限があるかを公式の料金ページで確認してください。別のツールや公開形式への書き出し、オフラインでの作業、自社サーバーでの運用は、情報源で確認するまで可能とみなさないでください。

ワイヤーフレーム、モックアップ、プロトタイプの違いは？ワイヤーフレームはレイアウトを示す簡素な下書き、モックアップは色や画像を入れた完成時の見た目、プロトタイプは画面間をクリックで移動できる模型です。初期段階はワイヤーフレームから始めると修正の手間が少なく済みます。

デザインツールは自動でコードを作りますか？寸法、色、CSSの値を表示したり、コード片を生成したりするツールもありますが、そのまま本番に使えるアプリのコードとは限りません。使い方は開発者と一緒に判断しましょう。