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