今回はWEBディレクターが「figma」を使うメリットを紹介したいと思います。
まず、「figma（フィグマ）」とは何かということなんですが、WEBデザイン専門のデザインツールになります。
たくさんのデザインツールがある昨今ですが、一世代前はフォトショップ、イラストレーターが主流だったかと思いますが、最近では、色々とWEB専門のデザインツールがあって、主要なところで言うと「Sketch」「Adobe XD」「Figma」といったところです。
WEBディレクターはデザインしないでしょう、という話もあるのですが、このfigmaにはWEBディレクターが利用するメリットがいくつかあります。
私が思う、figmaを使う代表的なメリットを3つご紹介させていただきます。
ブラウザで使用できる
figmaはアプリをPCにインストールしていなくてもブラウザ上で操作することができます。
これはすごいメリットで、全てのデザインデータはクラウド上に保存されていて、インターネット環境があれば、デバイスに関わらずデザイン作業をすることが可能となるのです。
「このPCにはイラレが入ってないからデザインできないやー」ということがないのです。
これはすごいメリットで、デザイナーができない部分は非デザイナーがどんどん作業を同時並行で作業を進めていくことが可能となるのです。
デザインコラボレーションができる
例えば、ページ構成やコピーライトなどはディレクターやコピーライターの作業かと思います。
ディレクターがワイヤーを切ってダミーでテキストを入れておくことはよくあることかと思います。
通常の作業の流れでいけば、ディレクターがワイヤーを切ってデザイナーに渡します。
この際まだコピーはできていないんだけど先にデザイン作業に入りたい、後からコピーが入るのだけど、コピーライターからはワードのファイルとかチャットでテキストが送られてくる、デザイナーは場所を確認してコピーアンドペースト、、、これがめちゃくちゃめんどくさいですよね。
であれば、デザイン処理がされている元々ダミーテキストだったところに直接コピーライターがテキストを入力すれば、いちいちデザイナーにテキストを投げるということをしなくても済むのです。
これが同時で作業ができる、デザインコラボレーショができるfigmaのメリットなのです。
- ディレクターがワイヤーフレームを切る
- コピーライターがコピーを書く
- デザイナーがデザインをする
これが一気通関でfigmaの同じデータで行うことが可能なのです。
当然、デザイナーとデザイナーが同時作業することも可能です。
複数ページ機能もあるので、使用する画像を格納しておく画像アセットページや、ワイヤーフレームのページ、仕様を示したページなど、1ファイルで複数のページを作れるので、複数の作業者が1つのファイルで作業が完結しやすい構造となっているのです。
紙ベースのアートボードが用意されている
これはめちゃくちゃメリットです。
結論から言うと、figmaで企画書が作れると言うことなんです。
私はこれまで企画書をXDで作ってきました。いろいろ選択肢がある中でXDを選んでいた理由としては、デザイン処理がしやすいという理由です。他にはPowerPointが苦手というのもあります。苦手というのは、つまりはデザイン処理がしにくいからです。
XDはイラレほどではないけど企画書で使用するようなデザイン処理は十分と言っていいほどできます。
「企画書はデザインじゃなくて、企画の内容でしょ！？」という反論はいったん無視します。
ですが、このXD、紙の出力には向いていないのです。
当然、紙サイズの数値をプリセットとして使用すれば問題ないのですが、XDのデザインファイルからPDF出力したときに、画像ファイルが反転していたり、画像がスケールアウトしていたり、よくわからない現象が起こるのです。
このXDからのPDF出力が曲者で、自分のmacで見れば問題ないのですが、、、
- 別のmacで問題あり
- WindowsOSで問題あり
- チャットワークのプレビューで問題あり 等
クライアントさんに、画像のひっくり返った訳のわからない資料を知らず知らずの間に提出していたら最悪ですよね。
これがコンペの提案書だったらって考えると、何百時間という時間が水の泡です。
何が原因でそうなっているのか全くわからないのです。調べてみてもこれに関係する情報はほとんどなく、本当に早くAdobeさんには対応して欲しいものです。これさえ問題なければXDでもいいんだけどなー、、、
それはおいておいて、
この問題はfigmaには全くないのです。
なんなら、figmaにはちゃんと紙サイズのアートボードも用意されていて、いちいち紙サイズをカスタムサイズでアートボードを設定する必要がないのです。
本当にfigmaは優秀です。
もちろん、企画書も、企画骨子、デザイン、企画提案書というかたちでそれぞれの担当者が同時並行で作業を進めることができるので、効率的に企画書の作成が可能となります。なんならWEBの提案であればプロトタイプも作れてしまうので、プレゼンでデザインを見てもらうときにも便利ですよね。なんなら企画書をプロトタイプ機能を使ってスライドみたいにしてもいいですね。
まとめ
figmaは本当に色なことができるので、WEBディレクターであれば一度は触っておいていただきたいものです。私もまだまだ勉強中なので、いい機能や使い方があればまた共有できればと思います。
