やりたいこと・行きたい場所をためて、必要であれば周りの人と繋がることで話の種にできるSNSアプリ「Queue!」を、React Native（Expo）で個人開発しました。
僕は開発する際、使っていて楽しい、みていて楽しいをかなり重視したいと思っているのですが、ここでは、UI等、このアプリで個人的にこだわった点、いいなと思っている点を残したいと思います。
0. どういうアプリか
やりたいことを後から思い出すと、思いついたときの高揚感がよみがえって嬉しくなりますよね。
でも、思い出せるのはほんの一部です。Queue! は、その「思い出す瞬間」を取りこぼさないためのアプリです。
-
①やりたいと思ったらメモ：
単語だけのメモでも、AI が10秒ほどでタイトル/写真/参考サイト/地図リンクを揃えます。
-
②眺めていると思い出す：
やりたいことは、リストでなく、写真付きIconでランダムに並びます。
検索するときは、曖昧な言葉でも見つかります。AIの力でね。
-
③大切な人と見せ合う：
つながった人のやりたいことを見て、「気になる」「一緒に」を送れます。
次に会うときの話の種にもなります。
アプリは無料で、広告も課金もありません。（残念ながら今は iPhone だけです。。。。）
UI のこだわり
1. リストにしない
やりたいことをリストにすると、ToDo のように「片付けるもの」に見えてしまいます。
そこでホームは、縦横に動かせる 2D のキャンバスにしました。
- アイコンの大きさは、わざとバラバラにしています。
- カテゴリごとに固めません。固めると、管理している気分になるからです。
ランダムだからこそ、「あ、これもあった！」と自分で見つける楽しさがあると思うのです。
2. オブジェクト重なり時の演出
ロゴや「ならべる」などの文字の下にアイコンが潜ると、文字が読めなくなります。
文字に白い背景を敷くのではなく、文字のまわりの空間そのものを曲げて、アイコンがよけるようにしました。
- アイコンは1枚の Skia レイヤーに描き、上から歪みのシェーダーをかけています。
- 範囲の外側24pt より先は、歪みをちょうど0にしています。少しでも残ると、画面全体が揺れて見えるからです。
3. 「完了」で砂になって転がり落ちる
「完了」を押すと、文字が細かい粒に崩れて散り、続けてアイコンが重力で転がり落ちます。
- 反発係数は0.34です。0.76だと跳ねすぎて、軽く見えました。
- 崩れ始めた瞬間に元の文字は消します。粒と重ねてフェードさせるとボヤけるからです。
実は他にも隠れた仕掛けがありますが、ここでは割愛です。
4. ロゴ「Queue!」をなぞった時の演出
ロゴを Q→u→e→u→e となぞると、AI が並べ替えてくれます。隠し機能の一つですね。
- なぞった文字は、銀色に光ります。
- 最後の e に届いた時点で成功にしています。指を離すときに行き過ぎても、失敗にならないようにするためです。
5. 利き手を踏まえたボタン配置
People タブでは、人の写真を長押しすると、まわりに行動（話す/Queueを見る/予定等）が開きます。
- 行動は、その人の左上に並びます。右手の親指は右下から伸びるので、左上なら指で隠れません。
- 右下は、その人の SNS のために空けておきます。
- 設定で「左手」を選ぶと、左右が反転します。
6. ボタンを花びらのように展開する
行動は丸の形で飛び出し、止まる直前の一瞬だけ花びらの形になります。
花びらの先は、必ずその人のほうを向きます。行動が「その人から伸びている」ように見せるためです。
7. 「いいね」の数を公開しない
リアクションは「気になる」と「一緒に」の2つだけです。
届いたサインは、持ち主にだけ、誰からかと一緒に見えます。ほかの人には見えません。比べたり競ったりする場所にしたくなかったからです。
8. 人のやりたいことをレンズで覗く
人の Queue は、その人のアイコンから育つように広がる、ガラスのレンズの中に開きます。
- 縁から光がにじみ、2.6秒の周期でゆっくり呼吸するように明るさが変わります。
- 後ろの画面は暗く沈み、レンズの中だけでスクロールします。
9. いろんなSNS をまとめる
SNS ごとにバラバラになった自分を、もう一度ひとつにまとめる画面です。
- 自分が中心にいて、SNS はまわりに浮かぶ「かけら」です。かけらは糸でつながっています。
- かけらを引っぱると、糸がゴムのように伸びます。
- 開くたびに、Face ID かパスコードを求めます。
10. 人を手放すときの演出
つながりを手放すと、アイコンに足が生えて、ジグザグに走り去ります。ときどき転びます。
（続きは、アプリを使ってのお楽しみ！）
おわりに
UI の細かい数値は、実機で触っては直すのを何十回も繰り返して決めました。手で触ったときの気持ちよさは、数値を少し変えるだけで大きく変わります。
Queue! は無料です。気になったら、触ってみてください。