この記事は仕様書をもとに、Chat GPT-5.5 Thinkingに生成してもらってます。
でも、アプリ自体はVibe Codingではないので、そこはご安心を...
以前、再編集できるプロフィールカードメーカー 「VRCardMaker」 の β0.1.0 と β0.2.0 について書きました。
β0.1.0 では、まず「プロフィールカードを作って、保存して、あとから再編集できる」ことを中心に整えました。
β0.2.0 では、ホーム、About、更新履歴、お問い合わせなど、公開中のWebアプリとして必要な導線を追加しました。
今回はその続きとして、β0.3.0 で行ったアップデート内容 をまとめます。
今回のアップデートについて
β0.3.0 では、カード編集機能そのものを大きく増やすというより、公開後に使い続けてもらうために必要な部分 を中心に整えました。
β0.2.0 までで、サービスの入口や問い合わせ先、更新履歴などの基本的な情報導線は用意できました。
ただ、実際に新しいドメインで運用していくにあたって、まだ足りない部分もありました。
たとえば、
- 旧サイトに保存されているカードを新サイトへ引き継ぎたい
- 作ったカードをSNSへ投稿しやすくしたい
- 検索やOGPでサービス内容が伝わるようにしたい
- 不要になったカードを整理できるようにしたい
- 長い自己紹介文でもカード表示が崩れないようにしたい
といった点です。
そこで今回は、移行・共有・検索性・データ整理・表示安定性 を中心に改善しました。
β0.3.0 の主な更新内容
今回追加・改善した主な内容は以下です。
- 旧サイトからの移行ページを追加
- X共有機能を追加
- SEO対策として OGP / sitemap.xml / robots.txt を追加
- カード削除機能を追加
- Web分析ツールを Umami に変更
- 自己紹介文の表示崩れを修正
それぞれの更新の意図
旧サイトからの移行ページを追加
今回いちばん大きい更新は、旧サイトから新サイトへ保存済みカードを移行するためのページです。
VRCardMaker は、カードデータをブラウザの IndexedDB に保存しています。
これはログインなしで使えるという点では便利ですが、保存領域はドメインごとに分かれます。
そのため、旧サイトから新サイトへドメインが変わると、新サイト側から旧サイトの IndexedDB を直接読むことはできません。
そこで今回は、旧サイト側でカードを .vrcard 形式として書き出し、新サイト側で読み込む形にしました。
流れとしては、次のようになります。
- 旧サイトの移行ページを開く
- 保存済みカードを
.vrcardまたはvrcard-migration.zipとしてダウンロードする - 新サイトの取り込みページを開く
- ダウンロードしたファイルを読み込む
既存の .vrcard エクスポート / インポート機能を使っているため、移行専用の別フォーマットを増やさずに済みました。
カード本体、プレビュー画像、画像アセットをまとめて引き継げるので、旧サイトで作ったカードも新サイト側で再編集しやすくなっています。
X共有機能を追加
カードを作ったあと、そのままXへ投稿しやすくするための共有導線を追加しました。
今回の共有機能は、公開リンクを発行するものではありません。
公開リンクを作る場合、サーバー側にカードデータを保存したり、アカウント登録や公開範囲の管理を考えたりする必要があります。
ただ、今回のバージョンではそこまでは広げず、まずは ローカルで作ったカードを投稿しやすくすること に絞りました。
エディタ上で投稿文とハッシュタグを用意し、Xの投稿画面を開けるようにしています。
カード画像は、これまで通りPNGとして書き出して投稿に添付する想定です。
派手な共有機能ではありませんが、作ったカードを外に出すまでの手間は少し減らせたと思います。
SEO / OGP / sitemap を追加
β0.2.0 でホームやAboutページを追加したので、今回は検索やSNS共有でサービス内容が伝わるように、SEOまわりも整えました。
具体的には、
- ページごとの title / description
- OGP画像
- Twitter Card
- canonical URL
- sitemap.xml
- robots.txt
- エディタ画面の noindex
を追加しています。
エディタ画面はユーザーが入力するページなので検索対象にせず、ホーム、About、更新履歴、お問い合わせなど、サービスとして見せたいページを中心に整えています。
カード削除機能を追加
カード一覧から、保存済みカードを削除できるようにしました。
これまではカードを作成して保存する導線はありましたが、不要になったカードを整理する導線が弱い状態でした。
今回の削除では、カード本体だけでなく、
- プレビュー画像
- 関連する画像アセット
- カードデータ
もまとめて削除するようにしています。
ローカル保存を中心にしている以上、保存したデータを利用者自身で整理できることも大事だと考えています。
Web分析ツールを Umami に変更
Web分析ツールを Umami に変更しました。
VRCardMaker はエディタとしての性質が強いため、細かく何でも計測するよりも、必要なイベントだけを見たいと考えています。
たとえば、
- PNGを書き出した
-
.vrcardを書き出した - X共有を開いた
といった、機能が使われたかどうかが分かるイベントです。
入力内容そのものを見る必要はないので、分析は最小限にしつつ、今後の改善判断に使える形にしています。
自己紹介文の表示崩れを修正
自己紹介文が長い場合に、カード上の表示が崩れる問題を修正しました。
自己紹介文は、単純な文字数だけでは見た目を制御しにくい項目です。
同じ文字数でも、日本語、英数字、改行の有無によってカード上の行数が変わります。
そのため今回は、実際のプレビュー表示に近い状態で行数を測り、表示が大きく崩れないように調整しました。
地味な修正ですが、プロフィールカードとしての見た目に直接関わる部分なので、かなり大事な改善だと思っています。
今回のアップデートで意識したこと
今回の β0.3.0 は、β0.2.0 と同じく、目立つ大型機能を増やすというより、公開中のサービスとして使いやすくするためのアップデート です。
特に今回は、
- 旧サイトから新サイトへ移行できる
- 作ったカードを投稿しやすい
- 検索やSNS共有で内容が伝わる
- 不要なカードを整理できる
- 入力した内容がカード上で破綻しにくい
という状態に近づけることを意識しました。
β0.1.0 で「作れる・保存できる・再編集できる」を作り、β0.2.0 で「サービスとしての情報導線」を整え、β0.3.0 では「運用と共有に必要な部分」を足した、という位置づけです。
今後について
今回X共有の導線は追加しましたが、公開リンクやクラウド保存まで含めた共有機能はまだ今後の課題です。
ただ、いきなり大きく広げるよりも、まずはローカルで安全に作れて、バックアップできて、必要に応じて投稿できる状態を固めていきたいと思っています。
おわりに
VRCardMaker は、作って終わりではなく、あとから直しやすいプロフィールカードメーカー を目指して開発しています。
β0.3.0 では、旧サイトからの移行、X共有、SEO、カード削除、表示改善など、公開して使い続けるうえで必要な部分を中心に整えました。
大きく見た目が変わるアップデートではありませんが、実際に使う人にとっては、少し安心して触れる状態に近づいたと思っています。
興味があれば、ぜひ触ってみてもらえると嬉しいです。