【TOHOシネマズ】映画予約体験を再設計するUXデザインの実践ガイド「ワイヤーフレーム・デザイン編」
「かってにUX」では、どんな方でもユーザビリティを意識したデザイン改善のフローをご理解いただけるよう、具体的な事例をもとに解説しています。
今回は「TOHOシネマズ」のUX改善を「分析・情報設計編」「ワイヤーフレーム・デザイン編」の2つの手順に分けて説明します。前回の「分析・情報設計編」に続き、本記事は「ワイヤーフレーム・デザイン編」です。
ワイヤーフレームとは
ワイヤーフレームとは、ワイヤー（線）とフレーム（枠）を使って、シンプルに要素や情報を配置する「設計図」のようなものです。どうすればユーザーにわかりやすく伝えられるかを考え、コンテンツの優先順位を可視化しページを構成する要素を配置していきます。
ワイヤーフレームはUXの具体化と詳細化を進める重要なプロセスであり、評価を繰り返しながら進めます。
ワイヤーフレーム作成手順
情報設計で整理した要素を配置します。作成したペルソナをもとに、劇場サイト利用者の行動特性を考慮し、画面のワイヤーフレームを作成していきます。
今回は「映画選びのワクワク感を高め、ストレスフリーでスムーズな予約体験を実現する」というコンセプトをもとに、TOHOシネマズ劇場トップページを改善しています。
まずは大まかな設計を見てみましょう。以下は情報設計編までの過程で挙がった新機能の主な変更要素です。
- ナビゲーションの最適化
- 映画選択の視覚的な訴求力強化
- パーソナライズ機能の強化
ユーザーの行動パターンや目的に合わせて、情報の優先順位を明確にし、直感的に映画選び・予約が可能な設計を採用しています。
特に大きな変更点として、ファーストビューの構成見直しを行いました。従来は情報が文字で羅列されていましたが、改善後は映画のポスター画像を大きく表示することで視覚的な魅力を高め、映画選びへの期待感を演出しています。
ワイヤーフレームの詳細設計
-
ヘッダーのナビゲーション改善
ヘッダーのナビゲーションは、予約行動への集中力を維持するため、予約に直接関わる項目のみに整理しています。採用情報など予約とは関係性が薄い情報を排除し、ユーザーが目的の情報へ迷わず到達できるように最適化しました。また、予約のアクションボタンの視認性を向上させるため、配色やボタンデザインも再考しています。
-
映画選択の視覚的な訴求力強化
映画選択のセクションでは、映画カードのデザインを大幅に刷新し、ユーザーが映画を選ぶ楽しさを感じられるようにしています。映画ポスターを大きく表示することで視覚的なインパクトを高め、映画選びへの期待感を演出しています。また、予約率や上映フォーマットなどの情報も明示することで、ユーザーがどの映画が人気なのかを一目で把握できるように工夫しています。
-
パーソナライズ機能の強化
ユーザーの映画鑑賞体験をパーソナライズ化するため、ユーザーの視聴履歴や関心を分析したレコメンド機能を導入しました。これにより、映画選びの際の迷いを軽減し、次回予約への動機付けを強化しています。さらにログインユーザー向けに「マイリスト」を新設しました。鑑賞済みの映画や興味を持った映画を個人的に蓄積・管理できることで、映画館サイトを自分だけの映画本棚のような存在にしています。
UIとは
ユーザーインターフェース（UI）は、ユーザーがデジタル製品や技術と対話するための接点です。UIデザインは、視覚的な要素とユーザビリティの原則を駆使して、製品の全体的な見た目や操作感を向上させ、ユーザーと製品の間に感情的なつながりを築くことを目指します。
UIデザイナーは、ボタンやアイコン、メニュー、ナビゲーションといったインタラクティブな要素を用いて、ユーザーとシステムが効率的にコミュニケーションできるようにデザインします。
UIデザインには、主に以下のような3つのタイプがあります。
-
グラフィカルユーザーインターフェース（GUI）
画像やアイコンを基にしたシステムで、ユーザーが視覚的に操作するもの。デスクトップやスマートフォンの画面が典型的な例。
-
音声制御インターフェース（VUI）
ユーザーの声を使って操作するシステムで、SiriやAlexaなどが代表例。
-
ジェスチャーベースのインターフェース
ARやVRの空間でユーザーの動きをコマンドに変換するシステム。
UIデザインは、ユーザーが直感的に操作できるようにするだけでなく、楽しくストレスのない体験を提供することも重要です。
ユーザーのニーズを予測し、パーソナライズされた体験を提供することで、ユーザーの満足度を高めることができます。また、UIはブランドの価値を伝え、ユーザーの信頼を強化する役割も担っています。
UIデザインの作成
ワイヤーフレームまでで検討したコンセプトを基に配色やフォントなどの細部デザインを調整し、映画館らしい高揚感を演出するデザインを作成します。既存のTOHOシネマズのブランドカラーや雰囲気を尊重しつつ、落ち着いたベースカラーとのコントラストを取り入れることで、ポスターやビジュアル要素が引き立つようにしました。
映画カードやボタンは同じ角丸・シャドウのルールで統一し、操作感に一貫性をもたせています。TOHOシネマズ特有のエンタメ性を損なわないよう、色やアイコンのトーンにも注意を払いながら、閲覧や操作に集中できるUIを意識し、ユーザーが自然と映画を選び、スムーズに予約へ進めるよう設計しました。
また、一貫したデザインスタイルやカラーパレット、アイコンイメージを統一することで、ユーザーがサイト内で迷うことなく必要な情報を取得できるようになっています。
結論 / まとめ
今回はUX改善のプロセスを分析からデザインまで、各段階でユーザー視点を徹底的に取り入れました。劇場サイトの改善を通じて、ユーザーは映画を選ぶ楽しさや予約までのスムーズな導線を実感できるようになります。また、パーソナライズ機能による個別体験の蓄積が、映画館サイトを単なる予約ツールから、継続的に訪れる価値のある空間へと変化させています。
今回の分析〜デザインプロセスを通して、ユーザー目線でのUX設計の重要性を改めて理解していただけたでしょうか？
UXの改善とは、単なるデザインの変更ではなく、ユーザーのニーズや感情に寄り添ったサービス価値を引き出すものです。みなさんもぜひ、自身のプロジェクトやサービスにおいてユーザー中心設計の意識を高め、より質の高い成果を目指してください。