モバイル時代のWebサイトデザ-インにAdobe XDを活用するパシフィック大学 | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

学生にとって、大学への出願は負荷のかかる体験です。なにしろ、収集するべき情報は多岐にわたります。各大学のサイト内から学部情報を見つけ出し、受験資格を理解して、更には学費の心配もしなければなりません。

大学の立場から見れば、多様なユーザーを対象に、さまざまな情報を、ひとつのサイトから提供することになります。志願者、学部生、院生、卒業生といった異なるレベルの学生たちが、特定の学部について、各々の状況に適合する情報を求めてサイトを訪問します。大学のようなアカデミックなWebサイトには、膨大な量の情報が含まれているものです。それを、一貫性と効率性を持たせる方向に最適化するのは容易なことではありません。時代に合わなくなったWebサイトであれば、なおさらです。

アレックスベルと彼女のチームがパシフィック大学のWebサイトのデザインの見直しを任されたとき、ポートランド在住のデザイナーの頭にはある考えがありました。志願者にとって使いやすいサイトにすることです。

アレックスは、大学にとって最も重要な訪問者ともいえる志願者にアピールし、同時に他のユーザー、すなわち在学生、教職員などのニーズを邪魔しないデザインを実現したいと考えました。その解決手段は、デザインの完全な見直しと、新しいアプローチによる情報設計でした。結果、Webサイトはシンプル化され、マーケティング効果の強化も実現ざれました。

最新の状況に対応する見た目と機能性を兼ね備えたWebサイトを構築するため、アレックスと彼女のチームはAdobe XDを選択しました。

新しいパシフィック大学のWebサイトのモバイル版モックアップ

モバイルファーストの時代への対応

「以前のサイトの問題のひとつは、モバイルを考慮してつくられていなかった点です」とアレックスは指摘しました。前のサイトは、まずデスクトップ向けにデザインされ、後からレスポンシブ対応が追加されたものでした。リニューアルを行うことが決定したとき、モバイルファーストの採用は当然の選択でした。

他にも主要な目的として、見た目をモダンにすること、視覚的な魅力を高めること、そして、メニューやナビゲーション構造を改善することがありました。

「以前のサイトには、多様なユーザーに対応するために、あまりにも多くのメニュー項目がありました。私たちは、これを単純化して、すべてのユーザーに対して、明確な道筋を提示したいと真剣に考えていました」とはアレックスの言葉です。「志願者の多くは、初めて私達のサイトを訪問することになるでしょう。ですから、彼らのための道筋は、特に分かりやすいものであるべきです」

数十もあったメニュー項目はわずか5つの主要な項目に集約され、学部と出願関連の情報が優先的に配置されました。アレックスが最も満足しているのはこの点です。「モバイル環境では特にそうですが、なかなか良い仕上がりだと感じています。とても読みやすくて、それにかなりうまく機能します」

リニューアル前のメニュー構成と、学生に提示される選択肢の複雑さがわかるスクリーンショット。新サイトは大幅にシンプルになっている

アレックスのバックグラウンドはグラフィックデザインです。以前の彼女の仕事は、マーケティング部門に所属して、パンフレットの作成やグラフィックアセットの制作などの、どちらかといえば伝統的なデザイナーの役割でした。今回のプロジェクトで初めて彼女はAdobe XDを使い、UXデザインへの最初の一歩を踏み出しました。

「すでにPhotoshop、Illustrator、InDesignを使っていた私には、ツールの習得はとても容易でした」とアレックスは言います。「いまではXDが私のメインツールです。作業によってはIllustratorやPhotoshopが必要になりますが、ツール同士がとてもうまく連携するので、例えば、Illustratorでアイコンを作ってXDに持ち込むのは本当に簡単な作業です」

デザイン作業の期間は数ヶ月にわたり、その間、彼女の部門は、彼女が地元のカレッジでUXの授業を受講できるよう支援したそうです。「サイトリニューアルの後も、キオスク向けのデザインをXDを使って行いました。私は、UXデザインにより多く関わりを持つようになりましたが、それは自然な成長だと思います」

デザインと開発のギャップを埋める

パシフィック大学のWebサイトのリニューアルは大規模なプロジェクトでした。アレックスのチームは4名から構成されていました。彼女のほかには、開発者が1人、Webコーディネーター（ユーザーや関係者からのフィードバックを集めて記録する役割）が1人、そしてコミュニケーションマネージャー（関係者から適切な支持を得て、全員と情報の共有ができていることを確認する役割）が1人です。その他にはサイトのコンテンツ更新に関わった数百人のエディタがいます。

新しいWebサイトの最初のバージョンが公開されたのは昨年の夏でした。以来継続的に更新が繰り替えされ、最新のバージョンは今月公開の予定です。XDを選択して、チームが最もメリットを感じている点のひとつは協業のしやすさです。

「XDを利用することで、小さな修正や更新を滞りなく行うことができます。例えば、ミーティングのときに私がコンピューターを開いて他の3人を後ろに立たせ、『ここは代わりにこうしたらどうだろう？』と言います。そして、その場で、私が新しいレイアウトをアートボード上に素早くつくりあげます。それはごく短時間の作業です。皆でそれを見て判断をします。そして、次の作業に移ります」

デザイナー1人開発者1人の小さなチームでは、XDを使い、何が実現可能かを素早く議論することができます。また、XDのコラボレーション機能は、チームメンバーだけが恩恵を受けているわけではありません。

「キャンパス内のコラボレーションにとても役立っています。様々な関係者のところにプレゼンテーションに出向き、プロトタイプを体験してもらいます。実際にクリックして操作できるため、人々は本物のような印象を受け、一連の静的なワイヤーフレームを見せるよりも、ずっと深く理解してもらうことができました。ページ間のインタラクションも、実際に示せました」

「nursing（看護）」というキーワード検索の結果には、関連するプログラムのリストが表示される。実際には、看護学部は存在しないにもかかわらず

リニューアルの目的には、サイトの競争力の向上も含まれていました。そのためUIだけにとどまらず、ユーザージャーニー全体にわたるユーザー体験も検討されました。志願者への訴求を強化するためにチームが着目したのは、学部検索の機能でした。

「例えば検索フィールドに”看護”を入力したとします。私たちの大学で看護学の学位を取得することはできませんが、いくつもの看護に関連した学位や、医学進学課程の学位が用意されています。提供されていない何かが検索欄に入力された場合に、志望者にとって有用な可能性があるあらゆる情報をリストすれば、その中のどれか、専攻か副専攻をクリックして関連するコンテンツを表示して、大学が提供する学位の全容を見ることができます」

チームが発見したのは、他大学のサイトで看護学部を探す学生は、パシフィック大学のサイトでも看護学部を探そうとすることでした。強化された検索機能は、パシフィック大学から提供されるものについて、学生により多くの情報を提供します。

「これにより、特にリベラルアーツ教育に関心がある志願者には、探している学部はもちろん、他にも総合的な視野を持った学生としての学びを支援する多様なリソースがあることを訴求できます。たとえ何か特定の学科が無い場合でも、希望するキャリア形成に役立つ他の教育課程がこれだけ提供されていると伝えられます」

「UXデザインに終わりはない」という学び

伝統的なデザインの世界から来たアレックスは、デザインへのアプローチを進化させる必要がありました。これまで、彼女がパンフレットを手掛けた時は、印刷が終わればプロジェクトは完了でした。しかし、Webサイトはまるで生き物のようだと彼女は言います。

「サイトは常にアップデートされます。私たちは、次のプランやユーザーからのフィードバックへの対応に常に追われています。さらに、必要なアクセシビリティの改善点も確認しなければなりません。私にとっての最も重要な学びのひとつは、これが継続するプロセスであるということです」

この記事はPacific University Uses Adobe XD to Redesign its Website for a Mobile-First World（著者:Sheena Lyonnais）の抄訳です