Beautiful Kingston

情報アーキテクチャ
ウェブサイトの再設計
UX/UIデザイン
BeautifulKingston.ca は、カナダ・オンタリオ州キングストン市の観光情報を提供するウェブサイトです。旅行を計画する観光客や、潜在的な顧客とつながりたい地元のビジネスにとって、重要なリソースとなっています。
UIと情報アーキテクチャの再設計を実施し、情報検索機能の向上と、観光客・地元ビジネスの双方にとってより直感的で効率的なユーザー体験の提供を目指しました。その結果、タスク成功率が30%から90%以上に向上し、多様なユーザーへのサービス提供における効果が大幅に改善されました。

タイムライン

12週間（2022年）

ツール

Figma, Figjam, Miro, Optimal Workshop

役割

• 情報アーキテクチャアナリスト
• 中〜高忠実度プロトタイピング

チーム

Julia Gil, Joyce Ng, Yisu Hu, Min Lin, Myself

00 - 背景

ウェブサイト概要

BeautifulKingston.ca は2008年に初めて作成され、2012年に更新されました。このウェブサイトは、観光客がキングストンの歴史と文化を発見・学び、街への基本的な理解を深め、訪問への関心を高めるために活用されています。また、地元のビジネスが自社を宣伝するためのプラットフォームとしても機能しています。

課題

観光客を誘致し、関連情報を提供することはキングストン市の収入にとって重要ですが、現在のウェブサイトは雑然として過密な情報や信頼性の低い情報を表示しており、その目標を妨げています。現在の情報アーキテクチャとインターフェースデザインは、観光客がキングストンを理解し訪問する意欲を削いでいます。BeautifulKingston.caのUX改善を通じて、キングストンの観光産業を活性化する機会が生まれる可能性があります。

解決策

ユーザーがキングストンへの旅行計画に必要な情報を見つけ、街の基本情報や地元ビジネスについて学べるよう、効率的で明確な情報アーキテクチャとシンプルで簡潔なインターフェースデザインを提供するためにウェブサイトを再設計しました。

デザインアプローチ

この課題には反復的なアプローチで取り組み、デザインの意思決定はリサーチデータを主な根拠としました。

01 - コンテキスト分析

コンテキスト

ウェブサイトの目標を特定した後、プライマリーリサーチ、ユーザビリティテスト、および後続のデザイン意思決定を導くために、ステークホルダーを定義することが不可欠でした。
ステークホルダーは以下の通りです：

1. キングストンの地元ビジネス
2. キングストン市議会
3. 政府および地域機関

観光業は、収益の増加、地元製造業の支援、そして重要なサービス業の雇用創出を通じて、都市経済において重要な役割を果たしています。これを念頭に置き、ウェブサイトのナビゲーションを予測可能で信頼性が高く、一貫性のあるものにしてユーザー体験を向上させることを目標としました。

コンテンツ監査

Content AuditorとScreaming Frog SEO Spiderを使用したBeautifulKingston.caのコンテンツ監査により、画像とテキストを主体とした構造が明らかになりました。サイトには224枚の画像（65.50%）、114のHTMLファイル（33.33%）、わずかなCSSとJavaScript（各0.58%）が含まれています。GIFは装飾や見出しに使用されており、不要な負荷、アクセシビリティの問題、ページ読み込み時間の増加を招いています。
テキストコンテンツについては、On Point Content Auditorのクロール結果によると、リーディンググレードスコアはわずか14.6であり、サイト上のコンテンツが理解しにくい可能性を示しています。
また、平均コンテンツ年齢は3084日であり、このウェブサイトのコンテンツが約8年前のものであることを意味します。古いコンテンツは、ユーザーに最新の観光情報を提供するという目的を損なう可能性があります。

ナビゲーションシステム

コンテンツ監査に加え、ユーザーが必要な情報をどのように見つけるかをより深く理解するために、ナビゲーションシステムの簡易分析を実施しました。
2つの主な問題が発見されました：
1. ナビゲーションメニューのフラットな情報階層
ウェブサイトには30以上のリンクを含むスクロール可能なグローバルナビゲーションバーが設けられています。カテゴリ分けや階層的なグループ化がないため、ナビゲーションが困難となり、情報過多を招いています。
2. フッターの重複
ウェブサイトのグローバルフッターには30以上のリンクが含まれており、その多くはグローバルナビゲーションバーと重複しています。その結果、プライバシーポリシーや法的通知などの重要度の低いページへのセカンダリナビゲーションを提供するというフッター本来の目的が果たされていません。

02 - リサーチ

セカンダリーユーザーリサーチ

文献レビューとデスクトップリサーチをもとに、ウェブサイトのターゲットオーディエンスに関する以下の洞察が得られました：

プライマリーユーザーリサーチ

プライマリーユーザーリサーチを通じて、以下の点を明らかにすることを目指しました：

1. 旅行者のウェブサイト上でのタスク完了状況と課題
2. 中小企業オーナーがオンラインで広告を掲載する際のニーズ

プライマリーユーザーリサーチは、3つの異なるユーザーグループを対象に実施しました：
• キングストンへの旅行を計画している大学生。シンクアラウドセッションを実施し、フェリーの時刻表とキングストンの観光スポットをウェブサイト上で探してもらいました。
• 美しい風景の撮影を好むトラベルフォトグラファー。観察セッションを実施し、ウェブサイトを自由に閲覧してもらいながらフィードバックを収集しました。
• オンラインでの集客経験を持つ地元のビジネスオーナー。15分間の半構造化インタビューを実施し、具体的なニーズを把握しました。

主な洞察

ほぼすべてのユーザビリティテストでタスク完了の失敗が発生しました。

1. ウェブサイト全体にわたる安全性の警告メッセージと頻繁なエラー。
2. ユーザーの情報検索を妨げる機能不全の検索エンジン。
3. 混乱を招く整理されていない不適切な情報。
4. ナビゲーションを困難にする分かりにくいラベリング。

" 毎秒、ウェブサイトを閉じてGoogle マップに行きたくなる。 "

— インタビュー参加者

03 - 再設計

カードソーティング

カードソーティングは、ユーザーが情報をどのように整理するかを理解するための手法です。参加者はカードを自分で選んだカテゴリに分類します。現在のウェブサイトにおける問題のあるラベリングと情報のカテゴリ化を踏まえ、このエクササイズは新しい情報アーキテクチャスキーマのデザインを裏付けるために活用されます。
Optimal Workshop カードソーティングツールを使用し、反復的なアプローチで3回のカードソーティングを実施しました。各ラウンドの結果をもとに、次のセッションに向けてカードとカテゴリの修正を行いました。
↓ 第1回カードソーティング結果のスニペット ↓
第1回カードソーティングテストでは20枚のカードと8つのカテゴリを使用。
類似度マトリックスを用いて、異なるカードの潜在的なグループ分けを分析しました。

情報アーキテクチャスキーマ

カードソーティングのデータをもとに、新しい情報アーキテクチャ（IA）スキーマを作成しました。以下は改善前後のスキーマの比較です。
＊改善前
❌ グローバルナビゲーションメニューに30以上のカテゴリリンク
❌ グローバルフッターとグローバルナビゲーションメニューの重複リンク
❌ 「Visitor Guide 2012」などの曖昧なラベル
❌ 階層構造とセカンダリナビゲーションの欠如
❌ 無関係な外部リンクが多すぎる
↓ 改善前のIAスキーマをご覧ください (View the full IA diagram here)
＊改善後
✅ グローバルナビゲーションメニューを5つのカテゴリに整理
✅ 古いまたは無関係なコンテンツを削除
✅ 外部リンクを削除
✅ より明確なラベルの文言
✅ 重要度の低いリンクのセカンダリナビゲーションとしてグローバルフッターを活用
↓ 改善後のIAスキーマをご覧ください (View the full IA diagram here)

04 - イテレーション

ツリーテスト

IAスキーマ再設計の第1イテレーション後、新しい構造を検証するためにツリーテストを実施しました。ツリーテストは、参加者に構造内の特定の情報を見つけてもらうことで情報アーキテクチャを評価する手法です。
Optimal Workshop Treejackツールを使用して7つのツリーテストタスクを作成しました。ツリーテストのデータをもとに、IAスキーマの第2イテレーションが必要かどうかを判断しました。
7つのタスクの内容：
タスク1：ウルフ島のフェリー時刻表を見つける。
タスク2：キングストンの博物館に関する情報を見つける。
タスク3：駐車場に関する情報を見つける。
タスク4：キングストンの博物館に関する情報を見つける。
タスク5：キングストンの公園に関する情報を見つける。
タスク6：キングストンの交通機関に関する情報を見つける。
タスク7：キングストンの写真を見つける。
↓ ツリーテストの実施方法の例を以下に示します

主な洞察

1. 高い成功率
すべてのタスクの成功率が80%を超えており、ラベリング・階層構造・カテゴリ分けが効果的であることを示しています。
2. 直接的成功と間接的成功:
タスク4と5では、高い成功率にもかかわらず、間接的成功が目立ちました。これは、約半数の参加者が情報を見つけるために戻る操作が必要だったことを意味します。最初のクリック結果から、「ウォーキングツアー」が「Things to Do」と「Getting Around Kingston」のどちらに属するか、また「Museums」が「About Kingston」と「Things to Do」のどちらに分類されるかについて、ユーザーが迷っていたことが分かりました。
3. 次のステップ
ウェブサイトの主な目的がキングストン市について観光客に教育・情報提供することである点を踏まえると、間接的成功率が高くても、サイトの目的には貢献しています。訪問者が偶然情報に辿り着いた場合でも、体験を豊かにし、有益な情報を提供できます。ただし、特定のエリアでの混乱を減らし、全体的なナビゲーション体験を向上させるために、グローバルナビゲーションメニューのラベリングを見直すことが有益です。
↓ 直接的・間接的成功率を示すツリーテスト結果

情報アーキテクチャスキーマの第2イテレーション

ツリーテストの結果、間接的成功データから「About Kingston」と「Things to do」というラベル間で参加者が混乱していることが判明しました。「About Kingston」は街に関する一般情報を、「Things to do」は具体的な観光スポットの情報を含むものであることをより明確に伝えたいと考えています。

05 - 中忠実度プロトタイプ

ストーリーボーディング

新しい情報アーキテクチャスキーマをもとに、3つのタスクをストーリーボードに落とし込みました。このステップにより、スキーマがページレイアウトと画面デザインへと具体化されました。

06 - 高忠実度プロトタイプ

ビジュアルデザインガイドとプロトタイピング

個人プロジェクトの一環として、「キングストンのアートミュージアムを探す」というユーザーフローに焦点を当て、ウェブサイト再設計プロトタイプを高忠実度まで仕上げました。デザインはオンタリオ州キングストンの公式カラーに合わせたスタイルガイドに従っています。

07 - 振り返り

学んだこと

1. データ分析におけるターゲットオーディエンスの理解
間接的成功は必ずしもネガティブな結果ではありません。重要なのは、ターゲットオーディエンスとウェブサイトの目標を理解することです。例えば観光サイトでは、ウェブサイトが簡潔で関連性の高いコンテンツを提供している限り、ユーザーが街に関する情報を収集するための探索行動は有益となり得ます。
2. 情報アーキテクチャとUXの学際的な性質
情報アーキテクチャとUXデザインはどちらもユーザー体験の向上に焦点を当てた密接に関連する分野です。ウェブサイト上のウェイファインディングの改善は、物理的な空間でユーザーを案内することに似ており、ユーザーが簡単にナビゲートし、探しているものを見つけられるようにすることが求められます。ユーザーフローとナビゲーションへのこの理解は、シームレスで直感的なユーザー体験を生み出すために不可欠です。

興味があればぜひ話しましょう！

ming.ym.design@gmail.com
ナビゲーション
ホーム遊び自己紹介
デザイン作品
PolanowaWorkorbUber HealthFlockBeautiful KingstonParkedIn
YUETMING WONG
© YuetMingWong 2026.