開発初期のチームでFigmaをおすすめする理由

こんにちは、ZERO TO ONEの石井です。

今回は、現在のnori-na開発チームで使っているデザインツールに関するお話。

開発チームというよりは、私が好んで個人的に利用しているツールになりますが。

新サービス立ち上げやプロダクト開発初期チームのPMで、まだパワポでワイヤーフレーム作成している方には参考になるかと思います。

プロジェクトチームの背景・開発体制

おすすめ理由説明の前に、まずは現在のノリーナチーム開発体制をご紹介。

エンジニアは委託メンバー中心でリモートでの作業がメインのため、Slack上でのやりとりが多いです。

エンジニア4人（現在は6人）とPM1人で専属のデザイナーはいません。

このような体制の中で、ノリーナチームは開発スピードを意識して進めてきました。

（Firebaseでサーバーレスにチャレンジしているのもミニマムですばやく作って検証を重ねたいから）

1週間のスプリントで回していて、UIデザインの作成・修正等のタスクも多く発生するので、PMである私がモックアップを作成してきました。

（技術力の高いデザインやWEBまわりの案件は都度デザイナーに依頼するかたち）

このような体制で進めているため、「なにか良いデザインツールはないか」と探しているときに見つけたのがFigmaでした。

前置きが長くなりましたが、以下にFigmaおすすめ理由を紹介していきます。

①使いやすさ

■windowsでもMacでもOK

会社によるとは思いますが、ビジネスサイドと開発サイドで利用しているPCの種類が異なるということも多いのではないでしょうか。

もともと私はWindowsを利用していたため、仕様やUIイメージを伝えるときは、紙ベースもしくはパワポで資料をつくってPDFやスクリーンショットで共有していました。

■画面レイヤーが表示される

パワポでワイヤーフレームを作成する場合に苦労するのが、レイヤーの変更。

Figmaの場合は画面左側にワイヤーの上下関係が表示されるので、レイヤーの上下修正も行いやすいです。

図形やサイズの変更・デフォルトでフレームサイズが揃っているなど使いやすい点は多々あります。

②はやさ

■作成・共有・修正がはやい

FigmaはSketchのような操作でサクサクと素材を作成して共有することができます。

ソフトのインストールが不要で、WEBブラウザでも利用できるため、URLリンクを送信するだけでエンジニアにワイヤーフレームの内容を伝えることができます。

そしてFigmaには共同編集機能とコメント機能がついています。

この２つにより、デザインの修正も簡単にすばやく実施できるのです。

■プロトタイプの作成も早い

Figmaではプロトタイプ機能もついています。

ワイヤーフレームで作成したデザインを、そのままプロトタイプのように遷移先画面と表示アクションを設定して作成可能です。

これまでのパワポ作成の場合は、デザイナーに依頼してデザインに落としてもらい、ProttやMarvelなど別のプロトタイプツールを利用する必要がありました。

プロトタイプツールも無料版の場合はプロジェクト数が限られており、複数仕様案を検討したい場合は使いにくかったです。

Figmaの場合は件数も制限がないので、仮説検証の時点でプロトタイプ案のA/Bテストもプロジェクト数を気にすることなく実施できました。

　

③安さ

サービス初期のおいてはツールにあまりお金をかけないように取り組むことも必要になるかと思います。

スケッチやプロトタイプツールは有料になってしまうケースが多いのですが、Figmaで運用するとどちらも無料で運用することができます。

※無料版はエディターの数やプロジェクト数に制限がありますが、少人数チームであれば問題ないはず。

無料のため、導入してみて合わなければやめるという判断もとりやすいと思います。

オススメ理由まとめると

イマイチなところ

■日本語フォントが少ない

　➡デスクトップ版をインストールすれば使える

その他はほとんど使っていないからわからないのが正直な所です。

■決定版の管理がしにくい

共有したリンクの内容をすぐに変更できるのはメリットですが、一方で変更前の状況に戻すのは面倒です。

（Ctr＋Yが効かなければやり直すしかない？）

上記であげたイマイチなところもありますが、それを補うほどのメリットあるツールだと感じています！

まだまだ使いこなせてない部分もありますが、パワポでのワイヤーフレーム作成と比べて驚くほどスピードがあがりました。

まだパワポで作ってますという方、ぜひFigmaを利用してみてはいかがでしょうか。

----------------------------------------------------

▼エンジニア向け勉強会のお知らせ▼

ノリーナのサービス開発についてご興味持っていただけた方はぜひ！

nori-na Tech Night