Share

画面仕様書の採番を楽に。Figmaプラグイン「NUMBA」を開発。

1 suki 4 suki
読み込み中...
こんにちは、UXデザイナーの福井です。この度、Monstarlabから初となるFigmaプラグインツール「NUMBA」を公開しました。このツール開発は、実はデザインラインが主体となって行った取り組みです。

本記事では、前半でNUMBAの紹介、後半では開発過程で学んだことや今後の抱負など、プロジェクトを一緒に担当したUIデザイナーの川上さんと一緒にインタビュー形式で振り返りました。

「NUMBA」とは

「NUMBA」は、画面仕様書に貼り付ける画面イメージに番号を簡単に付与できるFigmaプラグインです。
エクセル上でオブジェクトを挿入して番号を記入して配置するような従来の作業は必要なく、クリックで番号付与が簡単に行えます。

(画面仕様書については、こちらの記事をどうぞ)

これまで、Figmaにおける画面仕様書の作成には以下のような課題がありました。
  • 画面項目の採番はエクセル上で手作業一つずつ行っており、単純作業でありながら膨大な時間を費やしている
  • 番号の抜け漏れや仕様変更による採番のふり直しにより管理がしづらい
  • エクセルやスプレッドシートの仕様から画面イメージと採番がずれることがあり閲覧しづらいファイルになる。

  • NUMBAでは、以下のような機能でこれらの課題を解決します。
  • ワンクリック採番
  • 自動番号管理
  • 番号付与画面検索
  • 画像ファイル出力
  • プロジェクトの誕生経緯

    2022年、デザインラインでは各メンバーが組織貢献のミッションを持って、各自が活動を行うことになりました。
    最初は、私と川上さんでどのような活動をしていくのか?というところから会話し、「画面仕様書作成をなんとかしよう」というところに二人の意見が合致しました。
    取り組む題材が決まってからは、「この活動は組織にどのようなメリットを生むのか」が伝わるような、より具体的な企画書を作成して提案しました。

    プロジェクトの流れ

    企画が通ってからは、課題をより具体的にするため、画面仕様書の作成者を対象に困りごとのアンケートを取りました。そして、仕様書作成作業を時系列に並べ、得られた回答をマッピングして整理しました。
    アンケートでは、仕様書のあるべき姿から再定義が必要という意見や、モンスターラボの特徴の一つであるオフショア連携フローの整理が必要という意見など、デザインラインだけの取り組みでは解決できないようなものが多く見受けられました。その中で、番号採番というピンポイントの課題を発見しました。
    課題の大きさとしてもコンパクトで、番号付与の煩わしさを経験した身からすると「わかる!!」と思わず共感する内容で、課題の規模は小さくても確実に誰かの役に立つ番号付与の作業に絞ることになりました
    進め方は通常の開発と同様に、要件が大まかに固まったところで、エンジニアにも参画してもらい、Figmaプラグインで実現できることを把握するためにプロトタイプを作りつつ仕様を検討する流れを繰り返しました。詳細仕様が概ね固まってから新しいエンジニアが加入し4名体制で本開発を進めました。
    本来は2022年中にリリース予定だったのですが、諸事情により2023年3月にリリース完了となりました!
    活動を開始して約1年が経っていました。

    NUMBA開発の振り返り

    ここからは、プロジェクト発足から一緒に取り組んできたUIデザイナーの川上さんと一緒にNUMBAの開発過程について振り返っていきたいと思います。

    Guest

    kwkm

    Daiki Kawakami

    デザイン学科グラフィックデザイン研究室で大学を卒業。2013年モンスターラボ入社後、Webサービスや業務システム、スマートフォンゲームまで幅広くのUIデザインに携わる。主に要件定義からプロジェクトに参加し、開発連携・運用を考慮したデザインシステムやプロセス構築を実行・監督。

    Yuka Fukui

    外資系SIerでSEとしてクライアントワークや自社パッケージ開発に従事する。エンジニア業務をしながらデザイン思考に興味をもち大学院に進学。デザイン思考とシステムズエンジニアリングを基盤としたイノベーション創出や課題解決方法を学び、モンスターラボに入社。UXデザインやディレクターを担当。

    ──当時どういう気持ちで始めた? モチベーションは?


    川上

    長年クライアントワークをする中で、「自分たちの業務上での課題解決はできているのか」という疑問がずっとありました。しかし状況や優先度の変化、モチベーションの持続など、なかなかクライアントワークとの両立が難しく実現まで届かないことがよくあります。
    今回は、デザインラインのミッションとして、メリット・目標を整理し、社内活動のアサインを確保できたことから実現の可能性を感じ、「ぜひやりたい」と思いました。またデザイナー主導のプロダクト開発も魅力に感じ、どんな形であれ小規模でも必ずリリースや結果を残したいと思っていました。

    画面仕様書は普段のプロジェクトでも触れる機会があり、さまざまなメンバーがアクセスするものなのに、無駄に時間のかかる手作業で更新が行われていることにとても煩わしさを感じていました。プロジェクト開始時は、デザイナーと仕様書作成者がそれぞれの作業フェーズでワイヤーフレームや仕様を同時に更新できるようなツールを作れたらなと、思っていました。


    福井

    私のモチベーションは2つあって、「自発的な想いでモノづくりをしてみたいこと」と、「仕様書をなんとかしたかったこと」です。

    まず1つ目の理由が、当時、社内ハッカソンで自分たちで要件定義を行い全員で取り組むプロセスが楽しく、そういった取り組みを業務でも実現したいと思っていました。そういった心境の時に、「ミッションに繋がることなら何かしていいよ、ただし説明がつくならね」という環境になったので、ここぞとばかりに取り組んでみました。

    2つ目の「画面仕様書をなんとかしたい」については、私は前職がSEだったこともありモンスターラボ入社後も仕様書作成にも携わっています。「こんなにも時代は進むのになぜこの作業は手作業なのか……」と思っていて、「自分が今後も担当するかもしれない作業をできるだけ楽にしたい!」という自分本位な気持ちから、仕様書に関することに取り組みたいと思いました。

    ですので、この取り組みは自分のやりたいことができて、取り扱う課題も自分にとってメリットのあるもので、私は1年間この活動意義を疑うことなく取り組むことができて幸せ者でした。(笑)

    課題整理の画像

    ──プロジェクト進行中楽しかったことや印象に残ったことは?


    川上

    定例がゆるくて楽しかった印象です。(笑)
    メンバーがそれぞれ状況把握しながら能動的に動けるプロフェッショナルなので、タスクはしっかり遂行しつつも雑談を交えながらもしっかり決めていく雰囲気を福井さんに作っていただきました。


    福井

    楽しかったことは、定例の雑談や時折発生するメンバーいじりですね。あと、全体的に良いチームであった印象が強く、何事もみんなで「ここどうする?」と言いながら進めたり、「こうしたいと思うけどどう?」「それだとXXXなリスクがありそう」など、みんなで忖度なしに意見を出し合うことができました。

    会議の様子

    ──プロジェクト進行中に大変だったことはありますか?


    川上

    作りたいものは何となくイメージとしてありましたが、実現する上での各部署調整、ツール間の互換性や影響範囲から、少数メンバーでリリースを目指す上でどこまでをスコープとするかの決定が大変でした。
    結果的にコストや実現可能性などを考慮し、Figmaのプラグインという形に落ち着きました。
    また今回社内で初めてのFigmaプラグイン開発だったので調査を行いながらの仕様検討も大変でした。
    プラグイン側での操作なのかFigma側での操作なのかが曖昧になることがありましたが、都度マトリクスで整理したり、イメージを作成しながら認識合わせをして解決を目指しました。


    福井

    Figmaがややこしいこと。(笑)
    FigmaではプラグインUI以外からも操作可能なので、考慮範囲が意外と多かったです。
    ただ、細かい点は、川上さんが挙動を整理して詰めてくれました。
    あとは、社内活動とプロジェクト業務のバランスです。
    プロジェクト業務が忙しくなると、どうしても社内活動は後回しにしがちになり、手が回っていないときは、申し訳ないなという気持ちになりました。

    ──進行中に意識していたことは何ですか?


    川上

    普段からFigmaには触れて使い勝手を知っていた事もあるので、無駄にプラグインの機能を増やさないようにFigmaで出来ることは極力Figmaで行い、出来ないことをプラグインで機能化するよう心がけました。
    またFigmaでの操作とプラグイン側での操作の間でちょっとした操作フィードバックやタイミングなど一連の作業をスムーズに実現できるよう経験を踏まえて意識しました。


    福井

    2つあって、まず1つ目はプロジェクトがスムーズに進むように、次のアクションを考えることです。
    プロダクト周りは川上さんが品質担保してくれるので(笑)、開発に必要なことや社内調整、公開に至るまで必要な準備を開拓していました。
    Figmaに問い合わせたり、MLグローバル拠点とも連携したりという場面もありました。

    2つ目は、定例は楽しくふざけることです。こちらは結構意識していたかも。
    どうしてもクライアント業務優先になるため、正直NUMBA開発の進捗が芳しくない状況がチームとしてもありました。
    誰しもがタスクを進められなかったことに罪悪感を感じると思いますが、そういった感情はそのうち「社内活動なんてしなければよかった……めんどくさい……」とモチベーションの低下に繋がっていくと思います。

    でも、せっかく一緒にやるならそういう感情は持ってほしくないから、進捗がよくなくても「大丈夫。リカバリーどうします?」って、相手が気負わないように明るく言うように意識していました。……けど……できてた?川上さん、どう思いますか?(笑)

    ──社内活動の醍醐味は失敗を恐れず新しいことに挑戦できることではないでしょうか。プロジェクト進行中、何か新しいことに挑戦したり、よかった経験などありますか?


    川上

    まさにプロジェクト初期にメンバーで活動三(?)か条を定めて、自領域から越境したことに挑戦してみようとしていました。
    ・楽しくやること
    ・参加者が何かに挑戦してみること
    ・諦めないこと、逃げ出さないこと、投げ出さないこと
    私は福井さんの方でまとめていただいた画面仕様を元にテストケースの作成と実施を社内のQA勉強会に参加したり、過去のプロジェクトのテストケースを参考にしながら行いました。
    またChromaticを用いたデザインチェックをエンジニアの方と密に行わせてもらえ、詳細なデザインにこだわる事が出来たかと思います。具体的な開発にも携わってみたかったですが、出来なかったのが心残りです。
    体制としてもプロジェクトマネージャーを明確に定めず、各自が主体性を持ってプロジェクトにコミット出来たことも大きな挑戦だったと思います。


    福井

    プロジェクト進行で挑戦したことは、バックログ作成ですね。
    クライアントワークでも丁度バックログを作る必要があり、先に予習ができてよかったです!
    本当は開発もしたかったのですが、結局できなかったので悔しいです。

    あとは、マネージャーにこの活動の意義を説く経験もよかったと思います。
    この活動を通じた会社にとってのメリットをロジカルに説明すれば良いのだ、という感覚が掴めました。
    NUMBA開発ではマネージャー判断が優しめで、本来はもっと厳しい実行基準が求められると思います。
    でも、MLはマネージャーと壁打ちできる環境があるので、そういったことを活用して、その都度求められる精度の内容を準備していけばよいと考えています。
    自分の覚悟さえあれば、意思を通すことは怖くないなと思えましたし、マネージャーの判断ポイントが分かるのでクライアントワークにも生きそうです。

    ──今後どのような取り組みがしたいですか?


    川上

    NUMBAによってどのくらい作業効率が変化したかを測定してみたいです。
    そのためにもまだ日本の社員向けにしか使い方の説明なども行えていないので、他の拠点にも展開して利用者も増えると良いなと思います。
    また今のNUMBAで解決するであろう画面仕様書の課題は一部分のみなので、いつか全体の課題を捉えつつより良い画面仕様書作成に向けたソリューションに着手出来たらなと思います。


    福井

    NUMBAの効果測定をしつつですが、社内でタスクフォースを作って別の課題を改善する活動がしたいですね。
    NUMBAに関しては、ユーザーからの要望を受けて改善したいと思っていますが、自発的な追加機能は個人的にはあまり考えていません。NUMBAを進化させ続けても、効果が頭打ちになるのではと思うからです。

    なので、縁があればまた画面仕様書に戻って来るだろうと思い、小さくてクイックに開始できて確実に良くなると実感できることから取り組み、ポジティブな効果を出す他の活動をしたいですね。

    終わりに…

    最初はデザイナー2名だけだったこの活動も、今ではエンジニア含む4人体制となり、さまざまな方の協力を得て約一年かけてようやく完成しました。

    マネージャー、サポートしてくださった皆さま、ヒアリングに協力してくださった方々、どんな状況でも諦めずに取り組んだメンバーに感謝しています。

    画面仕様書は開発時の一番重要ともいえるドキュメントですが、手間が本当に多いのです。
    そんな作業を「NUMBA」が少しでも簡単にできれば、開発チームはとても幸いです!!
    興味が沸いた方は是非使ってみてください!

    Monstarlabで一緒に働きませんか。

    採用情報を見る

    UI/UXデザインに関するご相談や、
    案件のご依頼はこちら

    お問い合わせ

    by Yuka Fukui

    外資系SIerでSEとしてクライアントワークや自社パッケージ開発に従事する。エンジニア業務をしながらデザイン思考に興味をもち大学院に進学。デザイン思考とシステムズエンジニアリングを基盤としたイノベーション創出や課題解決方法を学び、モンスターラボに入社。UXデザインやディレクターを担当。

    View articles

    • Share this article:

    How can we help?

    お悩みのことがあれば、お気軽にお問い合わせください。

    お問い合わせ