string(4) "blog"

CONTENTS

2020.7.1

コロナとFigmaで劇的に加速したデザイン業務

written by 若鍋 善人

デザインは可逆的だが、デザインツールは不可逆的である。

突然ですが、生卵を熱湯で熱したらゆで卵になりますよね、当たり前ですが。
今の私は、ゆで卵の状態です。
何を言っているかというと、生卵には戻れないということです。

まだ、何を言っているかわかりませんよね。
不可逆的という小難しい言葉を使いたかったので、わかりやすく説明するためにゆで卵の喩えを用いてみました。

つまり今の私は、不可逆の状態です。
何が不可逆かというと、ふたつあります。

  • コロナの前の世界には戻らない。
  • Figmaを使い始めてから、デザインプロセスが劇的に進化して、以前使っていたsketchやさらにその前に使用していたAdobe IllustratorやPhotoshopでは、今のようなスピーディで効率のよいデザイン業務ができないということです。

Figmaとは?

Figma社が提供する、UI/UXデザイン、プロトタイピング、グラフィックデザイン、ワイヤーフレーム作成、ブレインストーミングが、すべてひとつのツールで完結するアプリケーションです。

つまり、Figmaがあれば、デザイン業務が回せてしまうアプリケーションです。
編集者2人、プロジェクトは3つまでなら無料ですので、いますぐに始められます。

Figma公式サイト

Figmaを導入した経緯

Figma公式サイトにある以下の言葉が全てを表しています。
Design together, even when you are apart
「一緒にデザインしましょう、たとえ離れていても」

フルリモートワークのFixelでは、複数のデザイナーでプロジェクトに取り組むことが多いため、共同でのデザイン作業に課題がありました。

「Figmaっていうデザインツールがあって、オンラインで同時編集できるらしいから、ちょっと試してみて、問題なさそうであればFixelのデザインツールとして考えてみましょう。」

数日後

「シンボルを持ったままsketchファイルも読み込めるし、オンラインで同時編集もできるし、Fixelのデザインツールとして導入しましょう。」

と、Fixelらしくスピーディな流れで導入が決まりましたが、この時は、その後に起こるリモートワークにおける多大なメリットは、まだ、知る由もありませんでした。

FixelでのFigmaの使い方

では、どんなデザインプロセスが劇的に進化したのかを具体的に説明していきます。

複数のデザイナーが同時編集できる

Fixelでは、業務システムのUI/UXデザインを専門にしているので、細かい分岐画面も含めると作成画面数が100ページを超えることが一般的です。その際、複数のデザイナーが同じデザインファイルで作業できることがとても便利なのです。

また、例えば、デザイナーAさんはユーザー画面、デザイナーBさんは管理画面みたいな感じで切り分けてデザインしても、お互いのデザインが同じファイルにあるので、確認が容易に行え、認識の相違が少なくなり一貫性のあるデザインをすることができます。

解決された課題

  • 共有フォルダにデザインファイルを格納し、同時に作業する時は、ファイルを複製して作業。あそのうちにファイルが大量に生成されて、どれが最新ファイルかわからなくなる。
  • デザイナーのローカルフォルダに入っているので、他の人には見られない。
  • デザインが属人的で、何かあった時に他の人が引き継げない。

同時編集ならではの便利な使い方

ライブペイントならぬ、ライブデザインのような使い方があります。打ち合わせ中にファシリテーター役のデザイナーが議論をすすめながら、もうひとりのデザイナーがその場でさっとデザインを修正するというものです。議論したものが、その場で形になって合意形成できるので、いわゆる「決め」がとても早くなります。

全てのステークホルダーがリアルタイムで進捗を確認できる

Fixelでは、クライアントにも制作中のデザインを共有していますので、誰もが常に最新状態のデザインを確認でき、デザイン・修正している様子がリアルタイムで確認できます。まさに「仕事の見える化」です。

デザインする側からすると、完成前にデザインが見えてしまうことが気になりましたが、進捗がリアルタイムで確認できることのメリットが重要なので、今では、まったく気にならなくなりました。

また、デザインの上にコメントやフィードバックがプロットされていくので、修正指示とデザイン画面を行き来することもなくなり、修正やブラッシュアップのサイクルが早く回るようになりました。

解決された課題

  • ステークホルダーのスケジュールを抑えて、一同に集まってオフライン、または、オフラインでのデザインの進捗を報告する。
  • 修正指摘のためにスクリーンショットを撮って、修正依頼資料を作成する。

ワイヤーフレーム、プロトタイピング、ビジュアルデザインの連携がスムーズ

Figmaを使い始める前までは、ワイヤーフレームとプロトタイピングはXD、デザインはsketchで作成していました。

ワイヤーフレーム・プロトタイピングから、ビジュアルデザインのやりとりには、編集可能なデータ引き継げないという分断があり、都度、ツールの乗り換え(データ載せ替え)コストが発生していました。それが、Figmaでは、ワイヤーフレームがプロトタイピングにもなりビジュアルデザインにもなるので、ツール間の移行がモードレスになり作業のスピードアップにつながりました。

解決された課題

  • 修正・変更が発生した際に、ワイヤーフレーム・プロトタイピングを修正した上で、デザインにも修正を反映するという手間がかかっていた。

エンジニアとの連携がスムーズ

エンジニアにとって嬉しい機能としては、「Code」モードです。オブジェクトを選択するとそのオブジェクトとその周りの寸法・マージンなどのスペック情報、そしてCSSプロパティが取得できます。

これはデザイナーにとっても嬉しい機能で、画面数が多い場合、デザイン指示書の作成にはデザインするのと同じくらい時間がかかっていたので、この機能のおかげでデザイン指示書作成時間の削減につながりました。

解決された課題

  • デザイナーが寸法を記入。
  • エンジニアがUIのピクセルをはかる。

共有がスムーズ

デザインしているものをそのまま共有するので、PDFなどに変換してまとめて送る手間が省略されました。

また、プレゼンしているデザイナーのアイコンをクリックすると、見ている画面がその人のカーソルの動きを追従するので、「ここがこうなって、これがこんなふうになる」というアバウトな説明でも実際にデザインを見ているので、議論しやくすくなり、認識の齟齬が少なくなりました。

FixelにおけるFigmaを使うことのメリット

デザインのプロセスがとにかく早く回せる

先ほども言いましたが、デザイナーとしてはやはり完成したものを見せたいですが、ステークホルダーからすると途中でもいいから方向性をチェックしたいとか、大枠のデザインが間違っていないか確認したい、ラフでもいいから現時点の仕様を確認したいと思います。

Fixelの場合は、プロジェクトがスタートした時点、つまりワイヤーフレームがやわらかい段階から全てを共有するので、社内関係者でもお客様でもオンラインで進捗と途中経過が確認できます。(もちろん「開示先限定」にすることもできます。)そうすることで、いざ出来上がってみて「これじゃないんだけどな、、」といったことが減りますし、ちょっと違っていたらすぐにピボットすることもできます。

コロナ禍でのクライアントワーク

緊急事態宣言によってお客様とのミーティングも全てオンラインになったのですが、Fixelはもともとフルリモートワークを採用している会社なので、普段通りそのままの形でお客様ともミーティングすることができました。ミーティング前後の移動がなくなったことで、クオリティ向上に費やす時間も増えました。

最後に 

成果物はデザインだけではありません

Fixelがお客様に提供する価値は、デザインの成果物だけではありません。Fixelは、常に自社の業務UX改善も行っていて、トライ&トライの繰り返しです。

そういったプラクティスの数々は、アリーアダプターの経験談としてお客様に提供できるものです。また、弊社は、お客様のUI/UXデザインを行う際に、Fixelの手法を参考にしてお客様自身でもUI/UXデザインを行ってもらえるようになることを目的として、お仕事させていただいております。

常に変化し続けるFixelのUI/UXデザインに興味がある方は、是非、今すぐお気軽にご相談・お問い合わせください。

一覧に戻る
お問合わせ