見出し画像

備忘録:『お絵描きツール』の『figma』でモックアップを作る意味

figmaで作ったワイヤーフレームを見ながら、STUDIOで最終課題のためのモックアップを作っていた。

私も、figmaを『お絵描きツール』だと思っていた。
印刷データは作れないし、互換性が良い開発ツールもあまりなさそうだし、作りたいものの『画面』は決まっているから、後工程がラクで課題が終わった後の自由度が高そうなツールで、プロトタイプも見越したモックアップをいきなり作ってしまおうと考えた。

STUDIOはnotionとAPI連携できることもあり、データベースの値が変わったら『画面』に自動的に反映させることもできそうと思ったのだ。

API連携がいろいろできる。

でも、そもそも私が作りたい『行ったり来たりできる画面の集合体』が、『WEBアプリ』なのか『WEBサイト』なのかすら分かっていなかった。
そして、ノーコードツールである『STUDIO』は、WEBサイトに特化したツールなのだそうだ。

そこで初めて、figmaでモックアップを作り、併せてこの段階で機能の定義をまとめた表を作る理由が分かった。
私の場合、スライドにすでに画面イメージはまとめてあったから、すぐにツールに進んで良いと思ってしまった。

でも、文章で、しかも言葉の意味が整理できていない私が遠隔で、「こういうものを作りたくて」と書いても、うまく伝わるわけがない。
ノーコードツール、ローコードツールを使うことになる今回は特に、それぞれのツールに得意不得意がありできることが限られる。
だからツールに進む前に、視覚的に分かり共同作業もできるfigmaでモックアップを作ることが大事だと思った。

後で追記します。
以下、自分のためのリンクです。



よろしければサポートお願いします! 頂いたサポートは書籍代にします。 より良い情報をお届けするため、学びます。