Excelから比較表をFigmaに自動生成するプラグインを作成!|誰がやっても同じ品質にする仕組みづくり

毎回同じ型のものを、毎回手作業で作っている。
1枚あたりはそこまでかからなくても、積み重なるとじわじわ効いてくる。そんな作業、ありませんか?

私の業務でも、色々なサービスのメリット・デメリットを比較する「比較表」の作成依頼が届きます。
毎回決まった型に手入力していて、1枚作るだけでも地味に時間がかかっていました。

そこで、依頼者からもらったExcelを読み込むだけで、Figma上に比較表を自動生成するプラグイン「比較表ジェネレーター」を作ってみました。
この記事では、作ろうと思った理由から、作り方の流れ、工夫したポイントまでを紹介します。
同じように定型作業でモヤモヤしている方の参考になればうれしいです。

制作に至った3つの理由

まずは制作しようと思った3つの理由です。

1. 毎回同じ型なのに、手作業で時間がかかっていた

比較表の依頼は、件数だけ見ればそれほど多くありません。でも、決まった型に情報をひとつずつ入れていく作業は、1枚でも思った以上に時間を食われる、、、

表の数が多いものだと、確認作業等も込みでほぼ一日中作業をしているなんてことも、、、

2. テンプレートがあっても、使い方の説明が大変だった

テンプレートは用意していたものの、使い方やルールが少しややこしくて。自分以外の人にお願いするときは、説明や確認に手間取ることがありました。

「誰がやっても、ブレずに同じくらいの工数で仕上がる仕組みがほしい」。これがいちばん大きなきっかけです。

3. 誤字脱字・表記ゆれのチェックがしんどかった

手作業だと、誤字・脱字や表記ゆれがどうしても起きてしまう、、、

作る時間に加えてチェックの時間もかかるので、自分の作業時間に加えて、ダブルチェックをお願いする方の時間も奪ってしまう。これが地味に大きな負担でした。

どう解決した?
自動化の前に、コンポーネント化とルール化

いきなりプラグインを作ったわけではありません。まずは次の2つを整えました。

表のパーツをコンポーネント化する

行、評価アイコン、ヘッダー、フッター、表紙・裏表紙など、表に使うパーツを全部コンポーネントにしました。部品が揃っていれば、誰が作っても同じ見た目になります。

作成時の注意点と内容のルールを明確化し文章にする

「何をどう書くか」「どこに気をつけるか」を言葉にして、ルールとして書き出しました。たとえば、こんなルールです。

  • 評価記号は「◎」「○」「△」「×」「ー」の5種類に統一する
  • 表の高さの最大値は870px。最大値を超えそうなら、カラム数の多いコンポーネントを活用
  • 文頭以外の「・」は「/」に変換する(会社名の中の「・」は残す)

基本的なことから細部まで徹底したルール化を意識して、安定したアウトプットを出せるようにしました

ルールが決まっているから、プログラムで再現できる。自動化できたのは、先にルールを決めたからだと感じています。

プラグインでできること

使い方はとってもシンプルです。

  1. Excelファイル(.xlsx)をプラグインに読み込む
  2. カテゴリ名を入力する
  3. プレビューで内容をチェックして、必要ならセルを直接編集する
  4. 「Figmaに比較表を生成」ボタンを押す

Excelは、「サービス名」の行に会社名を入れて、その下の行に項目名と値(◎○△×ー+説明文)を並べる形式です。読み込んだ内容は、既存の比較表と同じレイアウトで、表紙・ヘッダー・表本体・フッター・裏表紙まで一気に生成されます。

①Excelファイルをドロップし、微調整を加えて生成ボタンを押す

②完成✨

※表内に表記しているのは架空のサービスです。

工夫した点:「ミスを防ぐ」はプログラムにおまかせ

手作業のつらさだった「ミス」と「チェック」は、こんな仕組みで減らしています。

記号や表記のゆれを自動でそろえる

  • 「◯」は「○」に、見た目が似ているダッシュ類(「-」「―」「−」など)は「ー」にそろえる
  • 項目名の( )内の補足を外して照合する。だから「月額料金(または従業員単価)」のような書き方でも、固定の項目としてちゃんと認識できる
  • 文頭以外の「・」は「/」に変換する。ただし、会社名に含まれる「・」はそのまま

表の高さが収まるように、行のまとめ方を自動調整する

行コンポーネント自体のサイズは変えません。アイコンだけが続く行を横並びにまとめる段階(1〜4行)を調整して、表全体の高さを870px前後に収めます。レイアウトを崩さないことを最優先にした設計です。

長い文字が枠からはみ出さないようにする

表紙やフッターのタイトルが枠に収まらないときも、フォントサイズはいじりません。( )で囲まれた補足部分から優先して短くします。デザインの統一感を守るための判断です。

件数が増えてもだいじょうぶ

1ページに4社分を配置して、社数が増えたら自動で複数ページに分割します。最終ページの余りの列数に合わせて、裏表紙のサイズも自動で選ばれます。

まとめ

今回の取り組みで、「ルールを言葉にできる作業は、仕組みにできる」と実感しました。

今後は、サービス・ツール・業務内容を問わず、積極的にAIと一緒に考えながら、業務の効率化を進めていく予定です。

最初の段階で、しっかりと土台を固めることでAIとの対話数を減らせるので、コスト面でも大切です!毎回同じ型の資料を手作業で作っている方は、まず「ルールを書き出す」ところから始めてみてください。

この記事を気に入ったら

この記事を書いた人

コウ

コウ

この人が書いた記事を見る >>