movo

movo は、映画を見つける・整理する・共有するという体験を、より自然で楽しいものにすることを目的としたアプリです。

「観たい」「観た」「お気に入り」といった映画の管理をシンプルに行えるほか、ユーザーの好みや視聴履歴に基づいたおすすめ機能を設計しました。

本プロジェクトでは、情報設計の最適化を目的に カードソーティング と ツリーテスト を実施し、その後 ヒューリスティック評価、UXハニカム分析、ユーザビリティテスト を通して、継続的にデザインの改善を行いました。

ユーザー中心の情報設計と、検証・改善を繰り返すし、UXを重視したプロジェクトです。

Duration

2 months

Duration

2 months

Tool

Figma, UX tweak

Tool

Figma, UX tweak

Type

App, Website - Desktop, Tablet

Type

App, Website - Desktop, Tablet

Link

Figma

Link

Figma

Yellow Flower

Process

Week 1

リサーチ

Week 2

初期デザイン

Week 3

レスポンシブデザイン作成

Week 4

ユーザビリティテスト

Week 1

リサーチ

Week 2

初期デザイン

Week 3

レスポンシブデザイン作成

Week 4

ユーザビリティテスト

Week 1

リサーチ

Week 2

初期デザイン

Week 3

レスポンシブデザイン作成

Week 4

ユーザビリティテスト

Challenge & Goal

Research & Insights

Research & Insights

カードソーティング

Tool

UX Tweak

Target

target

Paticipants

27

検索欄の設計を明確にするため、UXtweak を用いて
オープンカードソーティングテストを実施しました。
参加者には、ジャンル、国、監督、俳優、受賞歴などの要素を自由に分類してもらい、
映画情報がどのように認識・整理されるかを可視化しました。

その結果、「監督」と「俳優」は多くの参加者によって同じグループにまとめられ、
映画の要素として自然に関連付けられていることが分かりました。
一方で、「Future」や「Last Chance」といった曖昧なラベルは理解されにくく、
混乱を招いていました。また、国別カテゴリー（韓国、アメリカなど）がジャンルと
混在して分類されるケースも多く見られました。

Insights

01

ユーザーは、ジャンルや国別といった分類よりも、 「監督・俳優・あらすじ」など、1本の映画に関する情報をまとめて見たいという傾向がある

02

「Future」や「Last Chance」のように意味が曖昧なラベルがあると、 ユーザーへの混乱を招く

03

地域情報とジャンル情報は、明確に分けて整理する必要がある

Design Refrection

これらの結果を踏まえ、直感的で馴染みのある表現を用いてカテゴリを再定義しました
（例：「Future」→「Upcoming」）。
また、混乱を防ぎ発見しやすさを高めるため、ジャンルと国別の構造を分離する
ことにしました。

カードソーティング

Tool

UX Tweak

Target

target

Paticipants

27

検索欄の設計を明確にするため、UXtweak を用いて
オープンカードソーティングテストを実施しました。
参加者には、ジャンル、国、監督、俳優、受賞歴などの要素を自由に分類してもらい、
映画情報がどのように認識・整理されるかを可視化しました。

その結果、「監督」と「俳優」は多くの参加者によって同じグループにまとめられ、
映画の要素として自然に関連付けられていることが分かりました。
一方で、「Future」や「Last Chance」といった曖昧なラベルは理解されにくく、
混乱を招いていました。また、国別カテゴリー（韓国、アメリカなど）がジャンルと
混在して分類されるケースも多く見られました。

Insights

01

ユーザーは、ジャンルや国別といった分類よりも、 「監督・俳優・あらすじ」など、1本の映画に関する情報をまとめて見たいという傾向がある

02

「Future」や「Last Chance」のように意味が曖昧なラベルがあると、 ユーザーへの混乱を招く

03

地域情報とジャンル情報は、明確に分けて整理する必要がある

Design Refrection

これらの結果を踏まえ、直感的で馴染みのある表現を用いてカテゴリを再定義しました
（例：「Future」→「Upcoming」）。
また、混乱を防ぎ発見しやすさを高めるため、ジャンルと国別の構造を分離する
ことにしました。

ツリーテスト

Tool

UX Teask

Paticipants

25

新しく整理したアプリ構成が本当に分かりやすいかを確認するため、
「韓国のアクション映画を探す」「これから公開される映画を見る」といった
6つのタスクを用意してツリーテストを行いました。

その結果、情報が多すぎたり、似たカテゴリが並んでいると、
ユーザーにとってはどこを見ればいいのか分からなくなり、迷ってしまうことが
分かりました。

Insights

01

情報が多すぎると、ユーザーは迷ってしまう。

02

似たカテゴリは統合することで、分かりやすさと操作のしやすさが向上

Design Refrection

不要なページや階層をなくし、ユーザーが2回の操作だけで目的の情報に
たどり着ける構成にしました。

その結果、ユーザーの混乱を減らし分かりやすい構造によって、
目的の操作を完了しやすくなりました。

ツリーテスト

Tool

UX Teask

Paticipants

25

新しく整理したアプリ構成が本当に分かりやすいかを確認するため、
「韓国のアクション映画を探す」「これから公開される映画を見る」といった
6つのタスクを用意してツリーテストを行いました。

その結果、情報が多すぎたり、似たカテゴリが並んでいると、
ユーザーにとってはどこを見ればいいのか分からなくなり、迷ってしまうことが
分かりました。

Insights

01

情報が多すぎると、ユーザーは迷ってしまう。

02

似たカテゴリは統合することで、分かりやすさと操作のしやすさが向上

Design Refrection

不要なページや階層をなくし、ユーザーが2回の操作だけで目的の情報に
たどり着ける構成にしました。

その結果、ユーザーの混乱を減らし分かりやすい構造によって、
目的の操作を完了しやすくなりました。

Site map

アプリの情報構造を見直すため、カードソーティングとツリーテストの結果をもとに サイトマップを作成しました。 カードソーティングでは、ユーザーが情報を感覚的にまとめる傾向があることが 分かりました。 たとえば、「監督」と「俳優」は別々に分けられるのではなく、映画の詳細情報として 一緒に捉えられていることが多く、また、専門的な言葉よりもシンプルで 分かりやすいラベルが好まれる傾向が見られました。 さらにツリーテストでは、関連する情報が目的別にまとめられている場合、 より早く、迷わず目的の情報にたどり着けることが確認できました。 これらの結果を踏まえ、情報の階層を整理し、 Home / Explore / My List / My Page / Movie Detail の 5つの主要セクションに再構成しました。

Persona

woman wearing black zip-up jacket leaning on wall
Olivia

UI/UX デザイナー

Pain points

  • ラベルやメニュー名が分かりにくいと、どの機能を使えばいいのか判断しづらい

  • 画面内の情報量が多すぎると、読み取りにくく、内容の理解にも時間がかかる

  • UIの意味が直感的に伝わらない場合、操作に迷いが生じ、行動をためらってしまう

  • リスト管理の自由度が低いと、保存した映画やお気に入りを整理しにくい

Opportunity

  • できるだけ迷わず操作したい

  • 情報は多すぎず、ちゃんと理解できる量がいい

  • 押せる・操作できる場所は見てすぐ分かってほしい

  • 自分なりに整理できる仕組みがほしい

woman wearing black zip-up jacket leaning on wall
Olivia

UI/UX デザイナー

Pain points

  • ラベルやメニュー名が分かりにくいと、どの機能を使えばいいのか判断しづらい

  • 画面内の情報量が多すぎると、読み取りにくく、内容の理解にも時間がかかる

  • UIの意味が直感的に伝わらない場合、操作に迷いが生じ、行動をためらってしまう

  • リスト管理の自由度が低いと、保存した映画やお気に入りを整理しにくい

Opportunity

  • できるだけ迷わず操作したい

  • 情報は多すぎず、ちゃんと理解できる量がいい

  • 押せる・操作できる場所は見てすぐ分かってほしい

  • 自分なりに整理できる仕組みがほしい

Design system

Research & Insights

Research & Insights

ヒューリスティック評価

検索欄の設計を明確にするため、UXtweak を用いて
オープンカードソーティングテストを実施しました。
参加者には、ジャンル、国、監督、俳優、受賞歴などの要素を自由に分類してもらい、
映画情報がどのように認識・整理されるかを可視化しました。

その結果、「監督」と「俳優」は多くの参加者によって同じグループにまとめられ、
映画の要素として自然に関連付けられていることが分かりました。
一方で、「Future」や「Last Chance」といった曖昧なラベルは理解されにくく、
混乱を招いていました。また、国別カテゴリー（韓国、アメリカなど）がジャンルと
混在して分類されるケースも多く見られました。

02

Match Between System and Real World
Issue

映画をどこで視聴できるのかという情報の不足

Improvement

映画詳細ページに、視聴可能な配信先・視聴方法の情報の追加

04

Consistency and Standards
Issue

ページごとのカードデザインの一貫性の欠如

Improvement

すべての画面でカードデザインを統一

06

Recognition rather than Recall
Issue

ナビゲーション内のアイコンが分かりにくい

Improvement

アイコン下にテキストラベルの追加

08

Aesthetic and Minimalist Design
Issue

カード内の情報量が多く、視覚的に詰まりすぎている

Improvement

読みやすさ向上のため、余白や間隔の調整

Design Refrection

操作状態がひと目で分かるよう、インターフェースを再設計しました。
あわせて、余白、情報構造、配色ルールを整理・統一し、使いやすく一貫性のあるデザインシステムを構築しました。

ヒューリスティック評価

検索欄の設計を明確にするため、UXtweak を用いて
オープンカードソーティングテストを実施しました。
参加者には、ジャンル、国、監督、俳優、受賞歴などの要素を自由に分類してもらい、
映画情報がどのように認識・整理されるかを可視化しました。

その結果、「監督」と「俳優」は多くの参加者によって同じグループにまとめられ、
映画の要素として自然に関連付けられていることが分かりました。
一方で、「Future」や「Last Chance」といった曖昧なラベルは理解されにくく、
混乱を招いていました。また、国別カテゴリー（韓国、アメリカなど）がジャンルと
混在して分類されるケースも多く見られました。

02

Match Between System and Real World
Issue

映画をどこで視聴できるのかという情報の不足

Improvement

映画詳細ページに、視聴可能な配信先・視聴方法の情報の追加

04

Consistency and Standards
Issue

ページごとのカードデザインの一貫性の欠如

Improvement

すべての画面でカードデザインを統一

Design Refrection

操作状態がひと目で分かるよう、インターフェースを再設計しました。
あわせて、余白、情報構造、配色ルールを整理・統一し、使いやすく一貫性のあるデザインシステムを構築しました。

プリファレンステスト

Tool

UX Tweak

Paticipants

22

ヒューリスティック評価の結果をもとに、タイトルデザインとカードUIの案を比較する
プリファレンステストを実施しました。
どのレイアウトがより親しみやすく、視覚的にバランスよく感じられるかを
確認することを目的としています。

実際の映画検索アプリやウェブを参考にしながら、3種類のカードレイアウト案を
作成しました。
回答者には、それぞれを比較してもらい、最も使いやすく、見やすいと感じた
デザインを選んでもらいました。

その結果、読みやすさ、情報の整理、操作状態の分かりやすさのバランスが
最も取れているデザインを最終案として採用しました。

タイトル表記については、Netflix や Disney+ などの主要な
動画配信サービスを参考にしながら、「Saved」「My List」「Watch List」と
いった複数の案を比較しました。

その結果、ユーザーからは 「My List」 が最も馴染みやすく、直感的に
理解できる表現として選ばれました。
この表現には、自分のリストという個人的なページだと感じられる点も
評価されていました。

Design Refrection

このプリファレンステストを通して、言葉選びやレイアウトのわずかな違いが、
ユーザーの親しみやすさや安心感に大きく影響することを実感しました。

全体のデザインシステムが統一されていても、ユーザーは日常的な体験に近いと
感じられる表現や構成に、自然と惹かれる傾向があることが分かりました。

プリファレンステスト

Tool

UX Tweak

Paticipants

22

ヒューリスティック評価の結果をもとに、タイトルデザインとカードUIの案を比較する
プリファレンステストを実施しました。
どのレイアウトがより親しみやすく、視覚的にバランスよく感じられるかを
確認することを目的としています。

実際の映画検索アプリやウェブを参考にしながら、3種類のカードレイアウト案を
作成しました。
回答者には、それぞれを比較してもらい、最も使いやすく、見やすいと感じた
デザインを選んでもらいました。

その結果、読みやすさ、情報の整理、操作状態の分かりやすさのバランスが
最も取れているデザインを最終案として採用しました。

タイトル表記については、Netflix や Disney+ などの主要な
動画配信サービスを参考にしながら、「Saved」「My List」「Watch List」と
いった複数の案を比較しました。

その結果、ユーザーからは 「My List」 が最も馴染みやすく、直感的に
理解できる表現として選ばれました。
この表現には、自分のリストという個人的なページだと感じられる点も
評価されていました。

Design Refrection

このプリファレンステストを通して、言葉選びやレイアウトのわずかな違いが、
ユーザーの親しみやすさや安心感に大きく影響することを実感しました。

全体のデザインシステムが統一されていても、ユーザーは日常的な体験に近いと
感じられる表現や構成に、自然と惹かれる傾向があることが分かりました。

Final design

複数のカードレイアウトを比較するプリファレンステストを行い、
最も使いやすいと評価されたデザインを全ページに採用しました。

カードデザインの統一により、操作のしやすさが向上するとともに、
画面全体の見た目にも一貫性が生まれました。

タブレット版ではレスポンシブ対応を最適化し、さまざまな画面サイズでも
快適に操作できるよう調整しました。

また、検索バーに加えて、ジャンル・タイトル・配信プラットフォームからも
映画を探せる検索オプションを追加し、目的に応じた探しやすさを向上させています。

デスクトップ版では、タブレット版と同じ構成をベースにしつつ、余白を広く取り、
グリッドを最適化することで読みやすさを高めています。

一度に複数の映画カードを一覧できるため、目的のコンテンツへ素早く、
直感的に移動できる設計としています。

Prototype