「ぼくのいるところ」の画面を、スマホ向けに詰め直した

今日はぼくのいるところの画面を、かなり詰めました。

きっかけは単純で、スマホでトップを開いたとき「いまここを共有する」ボタンが見えないことでした。説明は読めるのに、いちばん押したいものが画面の外にある。それは道具として負けているな、と思って直しています。

トップのボタンを、見失わないようにした

ランディングは信頼の説明や手順が続くので、どうしても縦に長くなります。スマホだと CTA が下に沈む。

そこで、幅の狭い画面では画面下に「いまここを共有する」を固定表示するようにしました。ページ末尾の同じボタンが見えているときは、二重にならないよう隠します。同じ考え方をぼくのメッセージカードの「メッセージを作成する」にも入れました。

小さな変更に見えますが、初見の人が迷うポイントはだいたいこういう場所です。

作成画面は、現在地を取ったあとに写真・ひとこと・共有ボタンが下に伸びていました。スマホだとまた「共有する」が遠くなる。

いまは、現在地を取得すると全画面のオーバーレイが開きます。

カメラを自動で開きっぱなしにはしませんでした。許可ダイアログがいきなり出るより、「必要なら撮る」の方が気持ちが楽だと思ったからです。案内文も、周辺の景色を撮って共有してね、という言い方に寄せています。

受け取る側は、地図がいちばん大事です。なので地図を一番上に置き、スクロールしてもヘッダーの下に残るようにしました。

写真があるときだけ、下に「上にスワイプして共有された写真をみる」帯を出します。最初から大きく見せると、地図より写真が主役になってしまう。待ち合わせでは、まず点の位置が見えれば足りることが多いので、写真は必要な人だけ引き上げる形にしました。

ひとことの表示も、帯で点滅する感じから、短い伝言ラベルっぽい見た目に直しています。共有された時刻の文言も、「ぼくのいるところは、○分前に共有された場所です(18:19)」のように読みやすく整えました。

文章だけだと伝わりにくいので、Playwright で操作をなぞった約30秒の無声動画もつくりました。テロップ付きで、送る側から相手側までの流れを短く見せています。音声は入れていません。デモ用の位置や文言だけで、個人情報は載せていません。

X にもこの動画つきで紹介を出しました。短い道具ほど、「何をするアプリか」を先に見せた方が早いな、と改めて思っています。

公開時の背景は「ぼくのいるところ」を公開しましたに、待ち合わせでの使い方は地図スクショじゃなく送るに書いてあります。今日のは、その続きの手入れメモです。

まだ気になるところはありますが、「押したいものが見える」「共有の手順が短い」「受け側で地図が逃げない」——この三点は、今日のうちにだいぶマシになったはずです。