ワイヤーフレームをつくらずに実装に着手すると、デザインを考えながらコーディングすることになるので効率が悪く、手戻りも起こりやすい。モチベーションも萎えてくる。
・・・ということで、最近『Figma』というデザインツールを少々触っている。その所感を書く。
https://www.figma.com/www.figma.com
調べてみると、デザインツールというのは世の中に山程あるらしい。が、有名どころはやはり『Sketch』のようだ。情報が多いのに越したことはないので『Sketch』を使ってみようと思ったのだが、どうやら無料プランに日数制限がある模様。僕はデザイナーではないし、たまにやる個人開発でしか使わない想定なので、無料でずっと使えるツールが良い。
で、良さそうだと思ったのが『Figma』。（XDにも無料プランあるっぽいけど、Figmaを先に触ったらこれでいいやとなったので、XDは触ってない。）
個人で使用する分には無料プランで全く問題ないと感じた。作成できるプロジェクトの数に制限があるが、同時並行してプロジェクトを走らせる予定はないので問題ない。有料プランにすると共同編集者数やプロジェクト数の上限が無制限になるようだ。
『Figma』はブラウザ上で利用でき、デスクトップアプリもある。「リアルタイム共有機能による共同編集」がFigmaの強みのひとつのようだけど、今回は個人で使うためあまり関係ない。
デザインツールを使うこと自体が初めてで、『Figma』が使いやすいのかどうかは判断がつかない。なんの知識もない状態で使ってみたけど、ひとつのデザインを完成させるところまでは至らなかった。（というか、使い方を調べつつ取り組んだ方が効率がいいな、と思ったので早々に使い方を調べた）
ある程度肝を押さえてしまえば直感的に操作できるようになるが、最初は先人のありがたい記事を参考に操作方法を覚えるのが良いと思う。まあ『Figma』に限ったことではないが。
デザインツールの世界では「コンポーネント」という、デザインの一部を部品化する概念があり（『Sketch』ではsymbolというらしい）、最低限コンポーネントの使い方を覚えたらデザイン制作が格段にラクになった。デザイナーとしてやっていくならもっと細かいところまで覚える必要があると思うが、僕のように個人でたまに使うくらいの人はとりあえずコンポーネントだけ覚えておけば良いかな・・・。
しかし、そのコンポーネントの使い方は自分で触っているだけでは分かりづらいので、やはり先人の記事を参考にすべし。このあたりの記事が参考になった。
- Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
- https://note.com/sixa_nao/n/n7603a9bc7580
- 細かすぎて伝わらないかもしれない、Figmaの良いところ - Qiita
- 【初心者向け】Atomic Design っぽい、Figma の使い方 - Qiita
ちなみにいまは、昨年リリースした『ポケモンしりとり』にランキング機能を追加すべく、『Figma』を使って画面デザインを制作中である。ランキング機能のリリースにこぎつけたら、「デザインツールを使ってワイヤーフレームを作っておいたら、開発が捗ったのかどうか」振り返りをしたいと思う。
ただまあ、めちゃくちゃのんびりやっているので、リリースはいつになることやら・・・。
