皆さんはWebサイトのワイヤーフレームを制作する際、どのようなデザインツールを使用していますか？
私は主にPhotoshopで制作することが多いのですが、それに変わるデザインツールとして今回「Figma」を使ったことで作業時間が短縮できた経験を共有しようと思います。

Figmaとはブラウザ上で動作するデザインツールです。
私は今まで使ったことが無かったのですが、調べた際に他のデザインツールであるPhotoshop、Sketch、AdobeXDを使っている人からの「Figmaを使うとより作業がスムーズになった」という記事が多く見られたことから実際にスムーズなのか作業時間を検証したいと考えました。

検証するにあたり、レンタル会社のランディングページを想定したワイヤーフレームをFigmaで制作しました。
そして「Figmaを使ったことが無い人に向けて、今まで使ってこなかった私が使うとどれくらいの作業の効率化に繋がるのか」を実践した結果、どんな場面で、どのような機能で時間短縮に繋がったのかを紹介したいと思います。

時間短縮に繋がった機能について

スピード感があるコンポーネント

コンポーネントは、同じ文章の形式を使う際に使用しました。
上部の[Create Component]から形式を揃えたいもののコンポーネントを作り、そこからコンテンツをコピーすると、コピーしたものにも変更が反映されます。

＜同じ形式の文章をいっぺんに変更したい時に便利です＞

コンポーネントは他のデザインツール（AdobeXDなど）にもありますが、Figmaはレイヤー上のコンポーネントからの編集で、コピーに反映される所がスピード感がありました。
後から色を変えたい時、テキストを追加したい時などには特に重宝する機能だと思います。

作業の復元

今回の制作の中で作業していた際に違うボタンを押してしまい、全体が結合されてしまうことがありました。
ここでFigmaの時間を遡って復元できる[Show Version History]機能が役に立ちました。

＜画面上部の[Show Version History]を選択すると、今までの変更履歴が表示されます。＞

復元したい時間を選び、[Restore This Version]をクリックすると履歴が復元されます。
解除の方法を調べる前に自動保存から復元し、そのまま作業を進められたのでかなりの時間短縮になりました。

機能の表示、操作が直感的

細かい所ではありますが、シェイプの下に図形のサイズが大きく表示されるので、画像挿入部分などの調整がし易かったです。
テキストは標準で折り返し表示されるようになっており、文字を流し込んで幅を合わせるという作業がスムーズでした。
また、使うツールはシンプルに上部にまとめられ、UIの制作に特化した作りになっています。
他にも右側に選択中のコンテンツの詳細変更があり、そこから図形などに適用できる効果がすぐに判別できます。効果の削除もワンクリックで、操作が直感的にできる印象を受けました。

Figmaのリアルタイム共有

今回使用する機会はありませんでしたが、ブラウザで動作するFigmaでは、編集画面をリアルタイムで共有、編集できます。
この機能を活用すれば、情報共有が今までよりもスムーズにできると思います。特に細かい色のイメージで打ち合わせする際に役立つのではないでしょうか。
Figmaに登録していればUIデザインツールを持っていない人とも画面の共有ができるので、デザイナーではない人に説明をしたい時も使えると思います。

結果

例として、レンタル会社のランディングページを想定したワイヤーフレームをFigmaで制作しましたが、結果以前似たものを制作した際にはPhotoshopで通常約50分掛かった所、Figmaでは約30分で行うことができました。

＜今回検証のためにFigmaで制作したワイヤーフレーム＞
・備品会社のレンタルサービスのWebページを想定。
（上から、レンタル商品＞こだわり＞レンタルする流れ）
・PC版のメインページのみの作成。

※手でラフスケッチを書いたものを用意してからの画面作成になります。
　機能については簡単に確認済みの状態からスタートしました。

終わりに

今回はランディングページを想定したワイヤーフレームを制作する上で実際に時間短縮に繋がった機能について紹介させていただきました。
図形、テキストの調整がスムーズに行え、構成のラフデザインがあれば約20分で作成できました。Figma自体のUIがシンプルなこと、登録すれば誰でも無料で使用できることから、始めるハードルは低いのではないかと思います。

バージョンアップにより次々と機能が追加されており、より便利なツールになると期待できますので、今まで他のデザインツールを使っていた人も是非Figmaを試してみてください。