Better Co-Beingアプリは、
2025年関西万博のシグネチャーパビリオン「Better Co-Being」来場者の共鳴体験をサポートするウェブアプリです。
万博会場での体験を共有し、他の来場者と自分自身の価値観とのつながりを発見することを提供します。
また、AR技術を活用して、会場内の様々な場所で他の来場者の想いや感動に出会い、
共鳴のきっかけを生み出すことを目指しています。
Better Co-Beingアプリでは、アプリのデザイン提案をはじめ、
ページの展開、様々なアイコン作成、操作の検証、UIのアニメーション、
デザインに関わるもの全て担当しました。
2023年後半から数ヶ月にかけて
クリエイティブディレクターとディレクターの3人がUXを考えてワイヤーを描きました。
株式会社STARRYWORKSのデザイナーとしてワイヤーを考えたり触れたりする機会がほとんどないですが、
操作の検証のお願いがあった場合、一つの方法を考えるのではなく、
バリエーションを考え出し、ユーザー的に一番直感的な方法をみんなでの判断の上決めます。
また、デザイン作る際ワイヤー通りに行かず変更が必要な場合も色々検証し、ディレクターとやりとりします。
Better Co-Beingアプリのデザインに関わる全てのものを考えたり作ったりする担当者でした。
タイムラインがTOP画面になり、上部にアイコンで作ったタブ切り替えがあります。
タブからドロップレンズに移動します。
ドロップレンズから写真を撮って、ドロップス作成画面に飛びます。
タイムライン、ドロップレンズ、ドロップス作成の3つの画面がメインの画面になります。
また、ユーザープロフィールや設定画面など、
一般的なアプリの基本的なUI画面も作りました。
複雑なアプリですので、シンプルなアイコンを作成し、UIを分かりやすくします。
Figmaのコンポーネントの力を活用し、
アイコンサイズS、M、Lの3つをコンポーネント化にすることで、画面を通して一貫性を作ることができます。
コンポーネントのお陰で、修正の場合自動的に全画面に反映されます。
また、アイコンだけではなく、
ボタンやヘッダー、タイトル、本文、全てのパーツをコンポーネントにします。
Better Co-Beingアプリは万博会場内でドロップスを作ることができますが、
Better Co-Beingパビリオン内の場合、アプリでどの作品を見たのか分かる機能があります。
また、作品の説明を確認することができ、いいと思った作品にいいねを付けることができます。
その上、他の14人の体験者とのつながりを確認することができます。
その4つの機能を表す共鳴マップを作りました。
2週間にかけてかっこいいけど実装的にあり得る見た目を検証し、色々試行錯誤し、下記のようになりました。
作品を確認する機能として、メモリーバーを下に作りました。
見た目と操作的に右側の縦のバーか画面の上部も検証しましたが、
ユーザー的に親指の動きを減らすために下に配置することが正解でした。
プロフィール作成時に選択するユーザーアイコンを作成しました。
Procreateを使って修正しやすい手書きでラフを描き、
クリエイティブディレクターとディレクターとやりとりしながら形を確定しました。
フィグマで描き込んで、コンポーネント化にしました。
万博で観光客も多いため、英語対応は当然でした。
楽な実装になるように基本的なUIは日本語と同じNoto Sansを使用しています。
ドロップスのフレーズに関しては、
日本語はGoogle Fontのしっぽりを使用し、
雰囲気が似ている英語のGoogle FontのPlayfairを使用しました。
デザインがFIXになった後、実装連携をします。
できるだけ実装の修正を避けるために丁寧に実装指示を書いたりします。
また、一番小さい端末の見た目の検証も行います。
