POTOFU（ポトフ）

WORK 1

新機能『投稿』の開発

POTOFUは、簡単にプロフィールページを作成できるWebサービスです。
元々POTOFUには、XやInstagramのタイムラインをプロフィールページに表示できる機能がありましたが、API連携の終了により利用できない状態になっていました。そこで、POTOFU上で作品を直接表示できる『投稿機能』の開発を行いました。

課題

結果

結果として、趣味のデザインを副業にしようとしている方や、結成間もないアイドルグループなど、これから活動を始めるフェーズのユーザーに、POTOFUの新規登録および投稿機能を使っていただいています。これらは、後述するペルソナに当てはまるユーザー層であり、ペルソナのニーズを満たす機能を開発することができました。
また、既存ユーザーの方も投稿機能を積極的に利用してくださり、リレーション向上にも繋げることができました。

実際のユーザーのプロフィールページ活用事例 その①

実際のユーザーのプロフィールページ活用事例 その②

※活用事例として、実際に公開されているユーザーのプロフィールページを参考にさせていただいています。

投稿機能 作品ページのUI

プロフィールに表示される作品の詳細ページです。
POTOFUの1枚のプロフィールページで構成されるという特性を活かすため、モーダルダイアログを採用しました。結果として、前後の作品を簡単に行き来できるなど、閲覧ユーザーにとって気軽に作品を楽しめるUIとなりました。

投稿機能 投稿管理ページのUI

投稿した作品を管理するページです。
一般に作品は「見た目」で識別していることが多いと考えられ、作品によってはタイトルがない(無題)ものもあり得るため、画像を大きく見せられるグリッドUIを採用しています。 一方、モバイル環境ではリストUIを採用しました。
グリッドUIだと、モバイル環境において視線が左右に動くのは負担が大きく、一覧性が下がりスクロール量も多くなるため、リストUIを採用しています。

投稿機能 投稿作成ページのUI

投稿の作成・編集ページです。
複雑な操作の印象を避けるため、ページ遷移のない全画面モーダルや、入力項目の最小化など、なるべくシンプルな構造にしています。
また、実際の作品ページに近いレイアウトにすることで、ユーザーが投稿後のイメージを持ちやすいようにしています。

開発プロセス

投稿機能は、UXの5段階モデルに基づいて開発を行いました。

WORK 2

UI/UX改善施策

POTOFUのユーザー体験の向上を目的とした、UI/UXの改善施策の立案・実行を行いました。

プレビュー機能の改善

プレビュー機能のUXに改善余地があったため、改善施策の立案・実行を行いました。
元々の仕様では、プレビューするためにプレビューページへの遷移が必要だったため、編集内容を保存してからでないとプレビューできない構造となっていました。一般にプレビューのユースケースは、編集内容が問題ないかをチェックする時ですが、この構造ではその要求を満たすことができませんでした。
そこで、プレビューボタンを各ページに固定し、モーダルダイアログでプレビューできるように変更しました。
これにより、プレビュー機能としてのユーザビリティの向上と、元の仕様により発生していた課題を軽減することができました。

公開設定機能の改善

公開設定機能のアクセシビリティに課題があったため、改善施策の立案・実行を行いました。 元々、本機能は『プロフィール編集ページ』の最下部に配置されており、直感的に見つけづらい構造であったことから、ユーザーより操作に関する問い合わせが発生していました。 急な非公開対応や、久しぶりに利用を再開する際のユースケースを想定したとき、頻度こそ低いものの、機能へのアクセス性は重要であると考えました。そこで、独立した『公開設定ページ』を新設し、サイドメニューへ配置する設計へと改善しました。 その結果、公開設定に関する問い合わせを軽減することができました。また、設定変更時にプロフィールURLのコピーダイアログを表示し、コピー漏れの防止や設定完了のフィードバックを強化するなど、細かなUXの向上も図っています。

WORK 3

Figmaデータの整理およびデザインシステムの構築

デザイン管理改善施策として、デザイントークンの構築やデザインのリバースエンジニアリングなどを行い、Figmaのデータ整理を進めました。

デザイン管理においての課題

OFUSEの事例と同様 に、デザイントークンやComponent等のデザインシステムの未構築およびデザインのレスポンシブ未対応による、Figmaのデザインと実装との乖離やステークホルダー間の認識齟齬が生じていました。
そこで、以下の改善施策を行い、Figmaのデータ整理やデザインシステムの構築を進めました。

デザイントークンの構築

デザイントークンを構築することで、作業効率の向上及びAIによるUI再現性の向上に繋げました。

コンポーネントの設計

再利用可能なUIのコンポーネントを構築することで、作業効率や状態差分管理の運用の改善、認識齟齬の減少に繋げました。