この記事は仕様書をもとに、Chat GPT-5.5 Thinkingに生成してもらってます。
でも、アプリ自体はVibe Codingではないので、そこはご安心を...
以前、再編集できるプロフィールカードメーカー 「VRCardMaker」 の β0.1.0、β0.2.0、β0.3.0 について書きました。
β0.1.0 では、まず「プロフィールカードを作って、保存して、あとから再編集できる」ことを中心に整えました。
β0.2.0 では、ホーム、About、更新履歴、お問い合わせなど、公開中のWebアプリとして必要な導線を追加しました。
β0.3.0 では、旧サイトからの移行、X共有、SEO、カード削除、表示改善など、運用していくうえで必要な部分に対応しました。
今回はその続きとして、β0.4.0 で行ったアップデート内容 をまとめます。
今回のアップデートについて
β0.4.0 では、大きな新機能を増やすというより、初めて使う人が迷いにくくなること を中心に改善しました。
VRCardMaker は、VRChat向けのプロフィールカードをブラウザ上で作成できるWebアプリです。
作成したカードはPNGとして保存でき、カードデータはブラウザの IndexedDB に保存されるため、ログインなしであとから再編集できます。
この仕組み自体はこれまでと変わりません。
ただ、実際に触ってもらうことを考えると、まだいくつか気になる点がありました。
- 最初にエディタを開いたとき、何を入力すればよいか分かりにくい
- 入力欄が空のままだと、完成イメージを想像しづらい
- Xに投稿するまでの流れが少し分かりにくい
- PNG出力時に、未入力時の案内文が画像に入ると困る
- Safari / iOS Safari でPNG出力が崩れるケースがある
- 今後改善するために、どの導線が使われているかを見たい
そこで今回は、初見UX、PNG出力、X投稿導線、Safari対応、計測まわり を中心に整えました。
β0.4.0 の主な更新内容
今回追加・改善した主な内容は以下です。
- サンプルデータを反映できるボタンを追加
- エディタの入力欄に、入力例が分かるプレースホルダーを追加
- PNG出力時に未入力プレースホルダーが画像へ写り込まないよう改善
- X投稿導線を、PNGを保存してから投稿画面を開く二段階の流れに変更
- カード一覧が空のときの案内を初回ユーザー向けに改善
- ヘッダーのロゴ遷移先をトップページに変更し、新規作成導線を整理
- 自動保存・復元・保存まわりの通知表示を整理
- Safari / iOS Safari でPNG出力時に影が崩れたり画像が縮小されたりする問題を修正
- 入力内容をマスクしたうえで Microsoft Clarity のイベント計測を追加
- 旧URLからのデータ移行ページへの導線を追加
サンプルデータを反映できるようにした
今回まず入れたのが、サンプルデータを反映できるボタンです。
プロフィールカード作成ツールは、最初に入力欄が空だと少し迷いやすいです。
「表示名」「肩書き」「自己紹介」「好きなもの」「SNSリンク」など、入力できる項目はそれなりにあります。
すでに書きたい内容が決まっている人なら問題ありませんが、初めて触る人にとっては、いきなり空欄が並ぶと少し重く感じるかもしれません。
そこで、サンプルデータを入れて、完成イメージを見ながら試せるようにしました。
ただし、サンプルは勝手には入りません。
ユーザーが明示的にボタンを押したときだけフォームに反映されます。
また、すでに入力済みの項目がある場合は、確認してから上書きする形にしています。
サンプルは「最初に触るための補助」であって、通常の保存値に混ざるものではない、という扱いです。
入力欄にプレースホルダーを追加
エディタの入力欄には、入力例が分かるプレースホルダーを追加しました。
たとえば、自己紹介やSNSリンクなどは、何を書けばよいかが少し分かるだけでも触りやすさが変わります。
一方で、プレースホルダーはあくまで表示上の案内です。
フォームの値ではないため、IndexedDBに保存されるカードデータや .vrcard には入りません。
このあたりは地味ですが、プロフィールカードのように「入力した内容がそのまま成果物になる」ツールでは大事な境界だと思っています。
PNG出力時に案内文が焼き込まれないようにした
エディタ上では、未入力の項目に案内文が見えていた方が分かりやすいです。
たとえば、
- 名前が未入力なら「ユーザー名を入力してね」
- 自己紹介が未入力なら「自己紹介を入力してください」
- リンクがなければ「リンクなし」
- タグがなければ「タグなし」
のような表示です。
ただ、PNGとして保存する画像にこれらが入ると、投稿用の画像としては少し困ります。
そこで、通常プレビューとPNG出力用の表示を分けました。
通常のエディタ上では案内文を表示しつつ、PNG出力時には未入力時の案内文が焼き込まれないようにしています。
「編集中に分かりやすいこと」と「完成画像として自然なこと」は別なので、ここは分けて扱うようにしました。
X投稿導線を二段階にした
X投稿まわりも見直しました。
ブラウザ上で生成したPNGを、Xの投稿画面に自動添付するわけではありません。
Xの投稿画面には投稿文やハッシュタグを渡せますが、ローカルで生成した画像をそのまま添付することはできません。
そのため、今回の導線は次のようにしています。
- PNGを保存する
- X投稿画面を開く
- 保存した画像をユーザーが手動で添付する
少し手順は残りますが、実際の挙動とUI文言がズレないようにしました。
便利そうに見せすぎるよりも、「何が自動で行われて、何は手動なのか」が分かる方が安心だと考えています。
Safari / iOS Safari のPNG出力を改善
Safari / iOS Safari では、PNG出力時に影が崩れたり、画像が縮小されたりする問題がありました。
Web上の見た目を画像化する処理は、ブラウザ差が出やすい部分です。
特に影やフィルター、フォント読み込み、描画タイミングまわりは環境によって挙動が変わりやすいです。
今回の修正では、PNG出力時だけ影やフィルター表現を抑えるモードを用意し、少し描画タイミングを待ってから画像化するようにしました。
完全にすべての環境で同じ見た目を保証できるわけではありませんが、Safari / iOS Safari でもPNG保存しやすい状態に近づけています。
Microsoft Clarity を導入した
今回、Microsoft Clarity のイベント計測も追加しました。
目的は、ユーザーの入力内容を見ることではありません。
VRCardMaker はプロフィール情報を扱うエディタなので、入力内容そのものを見る必要はありませんし、見ないようにしたいです。
そのため、カード一覧のタイル全体、エディタの入力欄、プレビュー上のユーザー入力(名前・自己紹介・リンク・タグ・言語・性別・プラットフォーム・好み/苦手など)に data-clarity-mask を付けています。
計測するのは、たとえば次のような操作単位です。
- サンプルデータを反映した
- PNGを保存した
- X投稿画面を開いた
-
.vrcardを書き出した -
.vrcardを読み込んだ - 新規作成を開始した
入力値ではなく、「どの導線が使われているか」を見るための計測です。
なお、.vrcard 書き出しなどの成功イベントは、実際に書き出しが成功したときだけ送るようにしています。バリデーションエラーや例外で処理が中断したときに、誤って成功イベントが送られないようにするためです。
β版として改善を続けるには、どこが使われていて、どこが使われていないのかを知る必要があります。
ただし、プロフィール内容を収集したいわけではないので、そこは分けて扱うようにしています。
旧URLからの移行導線を追加
旧URLで作成したカードがある人向けに、データ移行ページへの導線も追加しました。
VRCardMaker は IndexedDB を使ってカードデータを保存しています。
ログインなしで使える一方、IndexedDB はドメインごとに保存領域が分かれます。
そのため、旧URLで保存したカードを新しいURLから直接読むことはできません。
移行ページでは、旧URL側で .vrcard や移行用zipを書き出し、新しいURL側で読み込む形にしています。
今回の更新では、トップページ、カード一覧の空状態、フッターなどから移行ページに気づきやすくしました。
今回のアップデートで意識したこと
β0.4.0 では、目立つ大きな機能を増やすよりも、最初に触ったときの迷いを減らすこと を意識しました。
具体的には、
- サンプルを入れて試せる
- 入力例が分かる
- カード一覧が空でも次の行動が分かる
- 保存とカード一覧の関係が少し分かりやすい
- PNG保存からX投稿までの流れが自然
- Safari / iOS Safari でもPNG出力しやすい
- 改善のための計測はするが、入力内容は見ない
という状態に近づけています。
まだβ版なので完成品として言い切れる段階ではありませんが、使い始めの引っかかりは少し減らせたと思います。
今後について
今後も、保存・再編集・PNG出力・SNS投稿まわりを中心に、実際に使ってもらいながら少しずつ整えていきたいです。ログインなしで安心して作れて、あとから直せて、必要に応じて投稿できる状態を固めるのが目標です。
興味があれば、ぜひ触ってみてもらえると嬉しいです。