XDのプレビューで限界を感じて、校正アプリをBase44で作ってみた

Adobe XDからFigmaに乗り換えせねばと感じつつも、ついついXDを使い続けています。 共有URLの機能はとても便利ですが、コメントが投稿されるたびにメールが飛ぶ仕様に馴染むことができず、基本コメントはオフで利用していたが、どうしてもコメントを利用したいという状況に。

久々にXDのコメントを使って確認作業をしたのだけど、コメントとステータスの仕様がやっぱり気に入らない。

ふと考えてみて、これBase44で代替アプリは作れないか？と思い自作してみることに。

XDのコメント機能をオフにしていた理由

弊社の場合、課題としてのやり取りはバックログを利用しています。 バックログでも窓口管理者という立場上、すべて受信としているので、そこにXDのコメント通知も加わると、受信トレイが惨いことになるのが辛かった。

アートボードを追加して運用する方法もあるけど、別名でファイルを作成することもあるので、こういう場合にコメントは維持できずXDで完結させるのは難しい。

指示をもらう立場としては、「対応中」とか「処理済み」「戻し済み」のようなステータスが欲しいところ。

デザインだけでなく文字校正などの指示をもらう場合、ピンだけでなく、マーカーや領域を囲った指示方法があると分かりやすいのに…と感じることも多かったのだが、初回の校正から2校・3校と回が増えたときにバージョン間の比較や対応状況の追跡が困難で、自分の知る範囲では使いやすいと思えるツールに出会えないままでした。

Base44で自作した

エンジニアの方ならプラグインの開発という手もあるでしょうが、わたしは非エンジニア。 そんな私でもBase44なら、こんな校正ツールをバイブコーディングで簡単に作ることができます。

設計で意識したのは3点。

通知はあえてしない。その代わりに各プロジェクトにバックログのリンクを配置して、社内・社外どちらのタスク管理ツールへの行き来を簡易にできるように配慮しました。

コメントは従来のピンに加えて、マーカー・四角形の3種類を組み合わせて付けられるようにしました。

範囲を示したい場合は四角形、特定箇所を強調したい場合はマーカーと使い分けができるようにして、配色も変更可能にしています。

ステータスの選択肢は、「未対応」「対応中」「処理済み」「完了」にしました。 ここまでは初期バージョンとして実装した機能となります。

そして、この機能は実際にお客様との運用を開始してから、初稿・2校の画像をひとつの画面で比較できるように機能を加えてみました。 コメントも含めて見比べることができるので対応状況の確認がより便利になったと感じています。

実運用して変わったこと

やはりコメントが投稿されるたびにメールが着信しなくなったのは、精神衛生上大変助かっています。

Base44ならSaaSにありがちな仕様を我慢をしなくて済む

先ほど書いたように初稿・2校の比較機能など、今も実案件で運用しながらチューニングしていて、「こういう機能があれば」と思ったことが、わたしのような非エンジニアでも実装できる。

これがBase44で自作することの最大のメリットだと感じる今日この頃です。

デモアプリ

このアプリの実際の画面をこちらのリンクから確認いただけます。
Pinpoint Design Demo

もしユーザーとしてアプリを操作して（画像をアップしたり、コメントを試して）みたい方はこちらからお問い合わせください。

紹介リンク

Base44を試してみたい方はこちらからどうぞ。このリンクから登録していただたくと、30ボーナスクレジットが付与されます。（最初のアプリを公開してメッセージを送信するとわたしにもクレジットが付与されますが現金価値はありません）
▶ Base44：（リファラルリンク）

▶ITmedia オルタナティブブログ：https://blogs.itmedia.co.jp/yasusasaki/base44/

▶Base44でできること完全ガイド｜公式パートナーが実際に使ってわかったこと