Works ／ Yappli
App design
Yappli
iOS ｜ Android ｜ Web (CMS)
主に自社プロダクト Yappli アプリのデザインを担当し、ガイドラインの作成・管理、および機能の刷新、新機能の起案からリリースまでの一連の品質管理を行った。利用体験向上の提案ではアクセシビリティや Haptic、マルチデバイス対応など、幅広いプロジェクトに携わった。
SECTION 01
APP ガイドラインの整備
複数のデザイナーと連携する際、フォントサイズや角丸、シャドウの使い方に統一ルールがないと、デザインの一貫性が保てない。既存アプリの要素を抽出し、項目を細分化したガイドラインを策定。デザイン品質の統一と維持につなげた。
ガイドラインの一例
- iOS / Android 共通ルール
- 画面サイズ、OS 標準のフォント指定
- フォントサイズ、アイコン、カラー、ボタン、角丸、シャドウ
- モーダル、ダイアログ、アラート、ポップアップ
- スナックバーとトースト、ワーニングとエラー、ローディング時の表示…など
SECTION 02
システムアイコンの刷新
過去に公開されていた機能のアイコンにばらつきがあったため、OS のガイドラインに沿ったスタイリングで統一した。
iOS は SF Symbols、Android は Material Symbols を基準に整理した。
SECTION 03
より快適に、使いやすくするための UX UPDATE
機能の刷新や部分的なアップデートを実施した。新たな動きやフィードバックを取り入れ、機能性と操作性を高めた。表現の幅が広がり、より快適なユーザー体験につながった。
タブバーのエフェクト追加と文字の非表示
タブバーメニューに細やかな演出を加え、タップ時に押した感覚が伝わるようにした。さらに文字の表示・非表示を選べるようにして、多様なニーズに対応し、デザイン表現の幅を広げた。
パーミッション表示時のストレスを減らす
初回アプリ起動時に複数の同意を求める負担を減らすため、パーミッションダイアログの表示タイミングを自由に設定できるようにした。プッシュ通知の魅力を伝えた後に承認を求めたり、位置情報やトラッキングの必要性を事前に説明したりできるため、誤設定を防ぎ、ユーザーのストレスを軽減した。
ボタンアニメーションの導入
より楽しく、豊かな表現にするためにボタンアニメーションを導入した。いいねボタンに押した感触の演出とフィードバックを加え、ユーザー体験と満足度の向上につなげた。
SECTION 04
機能の刷新
Yappli の中で利用頻度の高い機能を刷新し、新たな表現形式を導入した。使いやすさと魅力を高めたことで、ユーザーの利便性が上がり、より多くのシーンで活用できるようになった。
ボトムシート表示
ウェブビュー機能の新たな表示形式を提案した。既存の形式に加えてもう一つの選択肢を用意し、用途に応じて使い分けられるようにした。SNS ログインなど外部サービスの利用時に、ネイティブ画面との違いが明確になり、Web 画面へ遷移する意図を伝えやすくなった。
ビデオ機能の改修
CMS でクライアント側のみが設定できる一方向のビデオ機能に、切り替え可能なスイッチバーを導入した。アプリ利用者が好みに応じて表示形式を変更できるようになり、Yappli 初の利用者操作による画面切り替えを実現した。
電子書籍機能の刷新
電子書籍機能をネイティブ化し、縦横表示の切り替えや、ピンチイン・アウトによる拡大縮小表示、データのダウンロードに対応した。直感的に操作できるようになり、さらに多様なシーンで活用できるようになった。
SECTION 05
新機能開発
新機能の開発では、仕様検討の段階から参加し、UX 視点で提案を行った。ビジュアルだけでなく、直感的で快適な操作性を追求し、利便性と魅力を兼ね備えたアプリ体験を目指した。
ヘルスケア機能
スマートフォンで計測した「歩数」をアプリ内に表示する新機能を開発した。目標歩数の達成でインセンティブを獲得でき、スタンプ機能と連携して日常的な利用を促す。グラフやアニメーションで視覚的なインパクトを強め、直感的で魅力的な体験にした。
ショート動画機能
短い動画や画像を気軽に共有できる機能を開発した。最新情報やオフショットなど、多彩なシーンで活用できる。CMS で画像や動画を登録すれば、表示秒数の設定や予約投稿にも対応でき、アプリの運用がよりスムーズになる。