みなさん初めまして、チームラボソリューションカタリストチームに2022年中途入社した雪下です。

成田国際空港公式Webサイト リニューアルにおいて、企画・UI/UX設計・デザイン・開発を、チームラボとして手掛けました。

リニューアルにおける命題は、「すべての人の快適な空港体験」。

空港という場所は、出発・到着・見送りといった利用シーンはもちろん、利用者の国籍や年齢、身体的特性なども幅広く、前提条件がひとつに定まりません。

その中で、すべての人の快適な空港体験を実現するために、情報設計やアクセシビリティへの配慮など、細部に至るまで工夫を重ねました。

今回は、その制作背景やプロセスについてご紹介します。

成田国際空港WEBサイトリニューアル

成田国際空港は、言わずと知れた日本最大級の国際拠点空港です。首都圏の空の玄関口として、世界各国と日本を結ぶ重要な役割を担っています。

そんな成田国際空港の公式Webサイトをチームラボが手掛けるのは、今回で2度目です。

コンペ形式でベンダーが選定され、前回に引き続きチームラボがリニューアルを担当することになりました。前回の知見を活かしつつ、さらに高いクオリティを目指し、プロジェクトが動き出し始めます。

リニューアルに求められていたこと

期待されていたことは、大きく以下の3つでした。これらの要件を念頭に置きつつ、当時のWebサイトの利用状況や課題を改めて棚卸しし、あるべき姿を提案・実装していく形で進めていくことになります。

1. 情報の再整理によって、さらに使いやすいサイトへ
2. 主に使われるコンテンツ（フライト、マップなど）の利便性向上
3. ユニバーサルデザインに優れたアクセシビリティの確保

チームラボの体制

チームラボでは、カタリスト・デザイナー・エンジニアで構成される約45名のチーム体制（社外のステークホルダーを含めると約100名）で、約1年半の期間をかけてプロジェクトを推進しました。

私はその中でカタリストとして参画し、企画設計からUI/UXの要件定義、プロジェクトマネジメント、クライアントとのコミュニケーションなど、幅広く担当していました。

チームラボの体制（※ 掲載用の概要版）

すべての人の快適な空港体験 ── デザインの指針

まず取り組んだのは、プロジェクト全体の判断軸となる至上命題を定めることでした。今回掲げた至上命題は、「すべての人に快適な空港体験」です。

空港は公共性の高い施設であり、利用者が空港内で果たしたい目的は多種多様です。

海外から来る方、障がいのある方、子連れの方など、前提条件もさまざまな中で、誰もがそれぞれの目的を達成できる状態をつくらなければなりません。

加えて、空港体験はWebだけで完結するものではありません。Web上で情報が見つかっても、現地で迷ってしまえば意味がない。つまりWebサイトは、リアルの空港体験の一部として機能する必要があります。

成田国際空港に訪れた人が、何をしたくて、何に困り、何が分かれば前に進めるのか。そうした流れを丁寧に捉え、迷わず目的を果たせるようにすることが、今回のリニューアルのゴールに置かれていました。

コンセプト : ハブ・アンド・スポーク

ゴールを実現するために定めたコンセプトは、「ハブ・アンド・スポーク」です。

ユーザーが空港のWebサイトに求めるのは、情報が体系的に整理されていて、自分の状況に合わせて目的の情報へ迷わず辿り着けることです。

以前のWebサイトは情報を網羅的に掲載していた一方で、目的の情報への辿り着きやすさには課題がありました。ただし、リンクを増やすだけでは、情報の関係性がかえって分かりづらくなり、経路が複雑化して迷いやすくなってしまいます。

そこで、情報を体系化したうえで、カテゴリを横断して情報を集約・連携させる「ハブ」を設ける構造を採用しました。フライトやフロアマップといった、ユーザーの行動の起点となる情報をハブとして位置づけ、そこから各詳細情報へと連携していく「スポーク」を設計する。

これにより、目的も前提も異なるさまざまなユーザーが、自分に必要な情報へ着実に辿り着けるサイト構造を実現したいと考えました。

この方向性に向けてサイトリニューアルを進める中で、取り組んでいたことをいくつか紹介します。

多種多様なユースケースを想定した要件定義

初期の要件定義フェーズでは、空港を訪れる方々の多種多様なユースケースを想定したうえで、現状の課題、あるべき姿を整理していきました。

ユースケースはエクセルベースで管理しており、以下の項目をできる限り具体的に書き出しています。

• ユーザー
• 利用シーン
• 空港サイトを利用するタイミング
• サイト訪問の目的
• 最も知りたい情報
• 検索ワード
• etc…

ユースケース整理のまとめ方例

次に、洗い出したユースケースと、現状サイトに掲載されている情報を照らし合わせ、「どこで迷うのか」「どの情報が見つけづらいのか」「何が足りないのか」を一つずつ抽出し、改善案を洗い出していきました。

ここで重要になるのは、ユースケースへの解像度をどこまで高められるかです。

空港の利用者は状況も目的も極めて多様で、自分の経験だけでは想像しきれないケース（海外から来る方や、目の見えない方、車椅子を利用される方など）が多くあります。

そのため、足りない観点は、成田空港UD推進委員会の方々や、社内の海外メンバーなどに何度も話を聞きながら補完していきました。

さらにユースケースごとに、その人になりきって検索からページ閲覧までの一連の行動を追体験し、どこで迷い、何に困るのかを細かく検証していきました。

サイト全体の共通ルールで「迷わない」を作る

次に、サイト全体の構造設計やワイヤーフレーム作成を行います。

その際に工夫したのは、サイト全体で「トップ ＞ 一覧 ＞ 詳細」で構成される一貫した階層ルールを設定することです。

以前の公式サイトでは、フライト、交通アクセス、レストランなど、メニューごとに階層ルールが異なっていました。そこで、どの入口から入っても同じ感覚で情報を辿れるように階層ルールを統一し、ユーザーがどのページにいても迷わない状態を目指しました。

トップ ＞ 一覧 ＞ 詳細で構成される、一貫した階層ルールを設定

トップ ＞ 一覧 ＞ 詳細で構成された、実際のページ例

この階層ルールと、ユースケース起点で整理した課題・改善案を照らし合わせながら、詳細な情報設計を詰めていきます。

まずは大まかな情報群と、それに紐づくコンテンツを整理し、ユースケースに基づいて「あるべき情報の流れ」を具体化します。さらに、前述のハブ・アンド・スポークのコンセプトに沿って、カテゴリをまたいだ情報同士の関連付けも整理していく、というイメージです。

デザインフェーズでも、デザイナー中心に、情報の分かりやすさを高めるための指針を定義しています。UIコンセプトとして以下の2つを定義しており、カラーやタイポグラフィ、コンポーネント、レイアウトなど、あらゆる要素に反映されています。

1. デザインで情報をナビゲートする
2. 「読む」ことを前提としたデザイン

成田国際空港WebサイトにおけるUIコンセプト例

ページ数もコンテンツ量も多く、最適な情報設計を模索するのは大変ではありましたが、プロジェクトチーム全体で試行錯誤を重ねたことで、使いやすいサイトにつながったと思っています。

徹底したアクセシビリティの設計

「すべての人の快適な空港体験」を実現するために、アクセシビリティ改善にも注力しました。

従来のサイトで行き届かなかった、スクリーンリーダーで読みやすいコンテンツの構造化、読み上げ対応の設計、カラーコントラスト比、色覚対応、altタグ設定、Tabキーでのフォーカス移動など、細部に至るまで改善を行っています。 企画・情報設計の段階からチーム内でアクセシビリティのインプットを徹底し、たとえばワイヤーフレームを議論する際も、必ずアクセシビリティ観点でレビューを入れるようにしていました。

また、デザインや実装、コンテンツライティングなど、各パートでもアクセシビリティ品質を担保するためのガイドライン整備・運用を行っていました。

テストフェーズでは、チームメンバーで何度もサイトを触り込み、キーボード操作だけで全体を回遊できるか、読み上げが分かりにくい箇所がないかを丁寧に確認。不具合が見つかったら、すぐに対応するというサイクルを繰り返しました。

さらに、成田空港UD推進委員会の委員にご協力いただき、ユーザーテストも実施。そこでも改善点が見えると同時に、「ここまで丁寧に整理され、読み上げまで配慮されたサイトは他にないのではないか」といった声をいただいたことも印象に残っています。

その結果、JIS X 8341-3:2016のレベルAA準拠など、高水準なアクセシビリティ品質を実現できました。

継続的な改善を行うための分析基盤と体制構築

今回のリニューアルでは、初期の要件定義段階からKPIの設定と計測・分析基盤の構築をしっかり行い、公開後もPDCAサイクルを回し続けられる体制を整えました。

KPIを設計するうえでは、まず「すべての人に快適な空港体験」を実現するために、Webサイトという1チャネルが担うべき役割は何かを整理しました。

成田国際空港のWebサイトにおいては、「サイト上で迷わない」「問題が解決する」「空港で迷わない」の3つを設定しています。さらにこの理想状態を約35の指標へ分解し、継続的に計測・分析できる基盤を構築していきました。

また、基盤を整えるだけでなく、成田国際空港とチームラボのメンバーに加え、データサイエンティストなどのスペシャリストも含めたチームを組成し、分析から改善提案・施策実行までを繰り返し回していくフローも設計しました。

引き続き、サイト内の改善にとどまらず、空港を利用するユーザー行動の理解やインサイトの発見を通じて、「すべての人に快適な空港体験」の実現を目指していきます。

公式Webサイトリニューアルを経て

約1年半の期間を経てリニューアルした成田国際空港公式Webサイトは、2024年2月から運用が始まっています。今回詳細には触れていませんが、移動をスムーズにするデジタルフロアマップの構築や、CMS基盤のアップデートなど、サイト全体として大きく進化しています。

日本の空の玄関口として知られる成田国際空港において、多くの方が利用する公式Webサイトの設計に関われたことは、個人的にもとても貴重な経験でした。もし成田国際空港をご利用の際は、ぜひ公式サイトも使ってみてください。

掲げたゴールを、超具体レベルの意思決定でもぶらさない

リニューアルを通じて改めて実感したのは、明確なゴールを定めること、そしてそのゴールを超具体の意思決定レベルでもぶらさないことの重要性です。

例えば、今回特に注力した情報設計やアクセシビリティは、いざ取り組むとなると、読み上げ文言や配色、コントラスト、フォーカス状態、情報の粒度、ページの分け方、導線のルールなど、細部まで徹底して実装する必要があります。さらにチーム全体で「本当に使いやすいか？」を細かく検証し、何度も作り直していきます。

その過程は正直かなり大変です。それでも、ここをやりきれなければ、誰かが使えないままになってしまう。だからこそ、常にゴールに立ち返り、意思決定をぶらさないことが必要でした。

言葉ざわりの良いコンセプトを掲げること自体は、難しくありません。本当に難しいのは、それを具体の体験に変えるところです。

これからもチームラボとして、掲げたゴールをぶらさず、細部までこだわる姿勢を大切にしながら、高いクオリティのものづくりを目指していきたいと思います。

私の所属するソリューションカタリストチームでは一緒に働いて頂けるメンバーを募集しています！ぜひ求人情報を確認してみて頂けると嬉しいです！