【ぷろとたいぴんぐつーる】
プロトタイピングツール とは？
💡 作る前に「触れる設計図」を描く魔法の道具
📌 このページのポイント
- コードなしで画面遷移やボタン操作を再現できるツールの総称
- Figma、Adobe XD、Sketch、InVisionなどが代表的
- デザイナーとエンジニア、クライアント間のコミュニケーションを円滑にする
- ユーザーテストを早期に実施でき、手戻りコストを大幅に削減できる
ひよこ プロトタイピングツールって、お絵かきソフトと何が違うの？
ペンギン先生 一番の違いは「動く」ことだよ。ボタンを押したら次の画面に遷移するとか、メニューが開くとか、実際のアプリのような操作感を体験できるんだ。静止画じゃ伝わらない使い勝手を確認できるのが強みだね
ひよこ それならもうコードで作っちゃえばよくない？
ペンギン先生 コードで作ると変更に時間がかかるでしょ？プロトタイプなら「このボタンはやっぱり右に移動しよう」がドラッグ一発だよ。開発前に50回修正しても数時間で済むけど、コードだと何日もかかっちゃう
ひよこ どんなツールが人気なの？
ひよこ プロトタイプって完成品とどのくらい違うものなの？
ペンギン先生 忠実度（Fidelity）によって段階があるよ。紙に手書きするペーパープロトタイプ、グレーの四角だけのワイヤーフレーム、本物そっくりのハイファイプロトタイプと3段階くらいに分けられるね
ひよこ エンジニアにとっても便利なの？
ペンギン先生 めちゃくちゃ便利だよ。Figmaだとデザインからマージン、フォントサイズ、カラーコードが自動で取得できるし、最近はデザインからコードを自動生成する機能も進化してる。「デザインと実装のズレ」が減るのが一番のメリットだね
まとめ：ざっくりこれだけ覚えればOK！
「プロトタイピングツール」って出てきたら「コードなしでアプリの試作品が作れるソフト」と思えればだいたいOK！
📖 おまけ：英語の意味
「Prototyping Tool」 ＝ 試作ツール
💬 protoはギリシャ語の「最初の」という意味で、最初に作る型＝試作品という意味だよ