Pages Navigation Menu

For Creative Communication

ジョンズ・ホプキンス大学に学ぶ、米国式大学Webサイトデザインの王道とは?

米国メリーランド州ボルチモアの私立大学「ジョンズ・ホプキンス大学 Johns Hopkins University」のWebサイトがすごくよくできています。本当に驚くべき品質です。私大らしい 「マーケティングサイト」 としての徹底的なコンテンツづくりに、最新のWebデザイントレンドをこれでもかと取り込んだサイトで、非常に勉強になります。情報構造的にも「王道」と言えそうな jhu.edu の作り方について、所感を書いていきます。

「知ってもらうこと」に絞り込んだトップページ

ジョンズ・ホプキンス大学(以下JHU)のWebサイトリニューアルは、大学のアイデンティティ(企業で言うCI、ロゴの刷新と統一)を契機に行われたようで、いくつか関連するニュース記事が挙がっています。

2014年7月の「プレビュー」記事では、 「JHUを知らない人(受験生含む)に、JHUのことを知ってもらうこと」 が目的だとクリアに語られており、トップページの構成もこの目的にフォーカスしたものになっています。

トップページ 動画敷き

トップページ 動画敷き

まずは開いて早々、流行りの動画敷き。やはり「雰囲気」を伝える上で、高品質な動画を撮って敷くのはパワーがありますね。(こうした動画はYouTubeの埋め込みだったりするので読み込みも遅くならない)。タグラインも別になく、右サイドに6項目のメニューボタンがあるだけのきわめてシンプルな構成です。

下にスクロールすると、ビジネスサイトのようなメッセージ訴求エリアが続きます。
最初のブロックでは “We’re America’s first research university.(全米で最初の研究)” というコピーで立ち位置を鮮明化。4つのイラストで高い専門性をアピールしています。Wikipediaによれば、JHUは医学・国際関係学の研究で著名な最難関校の一つとのこと。

03_topcopy

その下、多様な学部(School)構成を表現するエリアに続いては、「グローバルさ」を訴求する地図が登場。赤丸は海外留学の実績(ヨーロッパはもちろん南米、中国、日本も多いですね)、緑丸は研究プロジェクトの場所をプロットしています。データを加工したビジュアルは説得力があります。

05_global

トップページの構成として印象的なのは、所々にパララックス(視差効果)を伴って差し込まれる「煽り文句」。在学生や卒業生、教職員のセリフという体で、「JHUにどんな人がいて、どんなことを考えているか」を多面的に見せようとしています。

04_agitatingquote

このメッセージ形式による「JHUの人々」は、サイト内のさまざまなページにランダムに差し込まれ、いろいろな人の写真と言葉を見ることができます。

11_meether

「ひと」という視点は、昨今のWebコミュニケーション上外せないコンセプトです。前述した2014年秋の記事についている「プレビュー」の動画では、「初期デザイン」のトップページが紹介されているのですが、最初の動画敷き箇所以外はかなり大幅に変わっていて興味深いです。「人々」のコンテンツも、当初はよくある「写真をちりばめる&モーダルウィンドウで詳細表示」レイアウトだったのが伺えますが、現実装の方がはるかにオリジナリティとインパクトが強く、さすがだなという感じです。(それにしても2014年秋にトップがここまでできていたのに、2015年4月末のローンチまで半年以上かかっているとは。。。)

19_people_old

右に格納されたグローバルメニューと下層ページレイアウト

トップページの非常にシンプルなレイアウトを可能にしているのは、グローバルメニューを上部固定にせず、PCビューでも「ハンバーガーメニュー」に格納したことが大きいです。主なメニュー項目は以下の6つ(カッコ内は典型的な日本の大学のメニュー項目ですが、こうしてみるとそんなに変わらない)。

  • About Us(大学紹介)
  • Academics(教育)
  • Schools & Divisions(学部)
  • Admissions & Aid(入試情報)
  • Research & Faculty(研究)
  • Campus Life(学生生活)

02_menu

アクセス、問合せ、学内サイト、ターゲット別扉ページなどの「ユーティリティナビ」は、右サイドナビの下部にスタイルを変えて配置しています。キャプチャはMacbook Air 13inchで見た時のものですが、タブレットを考慮しても標準的な高さに対して、この項目数はけっこうバランスが良いです。「+」ボタンで展開するパネルの中も一列でシンプル。

大メニュー項目をクリックした先の「第2階層トップ」では、PCレイアウトの場合「左サイドバー」が出現し、3カラムレイアウトの中央に本文が配置されます。上部「タイトル」+「パンくず」+背景画像でかなりの高さを取っていますが、本文の頭に余計なタイトルエリアがない分、スムーズに読める気がします。

08_2nd

さらに進んだ第3階層でもレイアウトは同一!これだけ大きな画像とタイトルを使って、どのページでも違和感を感じさせない調整は本当に大変だと思います(早稲田もけっこうタイトルエリアが大きかった…)

12_3rdtop

Academics?

ところで、このメニューの中でひときわ個性的なのが「Academics」というメニュー。ここは他のメニューとレイアウトも異なり、専用の「教育内容検索」機能が提供されています。

09_academics

これは学部を横断して「学べる内容」が検索できるページ。たとえば私が専攻した “Civil Engineering” を検索してみると、ドンピシャの項目と関連する項目が表示され、カードをクリックすると右から詳細情報が出てきて、各学部ページへと誘導されます。

10_swipein

各学部のサイトは、大学本体とは必ずしもデザインを共通化しない「独自運用」の模様。これは早稲田もそうでしたが、教授が主導する学部のコミュニケーションは、大学広報と必ずしも同期していない(立ち位置的に学部の方が「上」で、手が出しにくいことが多そう)ことと、コンテンツ量がはんぱないことから、フルリニューアルの範囲に各学部サイトを含めるのは現実的に難しいのかもしれません。その中で、各学部のサイトを別々に巡ることなく、詳しい教育内容を探せる interactive program explorer 機能は有用そうです。

ニュース&イベントの切り離し

さて、大学Webサイトといえば「メディアサイト」としての側面も強く、ハーバードオックスフォードなどの超大手は、Webマガジンのようなレイアウトを採用しています。一方JHUは、先述の通りトップは「マーケティングサイト」的に作っていて、「News」は右メニューをクリックして出現するパネル内に一覧を表示するにとどまっています。

15_news

実は、JHUのニュース・イベント情報は、別サイト hub.jhu.edu として切り離して運用されており、こちらのサイトトップは完全なるメディアサイトになっています。

18_hubtop

上図のように多岐に亘るカテゴリー構成と高頻度な情報発信。個別ページも関連記事への導線など、白ベースの読みやすいデザインです。

16_hub

イベント詳細はカレンダー・Facebook連携・連絡先・地図情報など、必要十分な機能を埋め込んだテンプレート。

17_eventinfo

本体サイトがビジュアル大きめでインパクト重視のデザインなのに対し、ニュースメディアサイトHubはあくまで情報量と読みやすさにフォーカスした別デザイン。この分担は非常に効率的だと感じました。

デメリットは、やはり「総合TOP」における最新情報の打ち出しが弱いこと。日本の大学サイトでは、オープンキャンパスやイベント告知、メディア掲載などの「広告」的機能を「ファーストビュー」に盛り込みまくることが往々にして求められるため、JHUのような綺麗な割り切りはしにくいケースが多いと思います。

ほかにも…

細かいところを見ていくと、本当に細部まで色々工夫していることが見て取れます。最新のSSL事情に合わせた「全ページhttps化」(本体サイト)、SEOを考慮したcanonical URLの設定、4つ以上のブレイクポイントを採用したレスポンシブWebデザイン(36em,54em,81em,108em?px指定じゃないmin-widthの当て方は初めて見ました…)。あとこれ本体WordPressですよね…(どうしてそう思ったかは秘密…)

個人的に好きなディテールのデザインは、トップ最下部にある「ボーダー線の太さが2種類あるボタン」とか。

07_border

IE8で見ると、一応それなりに表示された上で、最上部にブラウザアップデートを促す”Brosehappy”の案内が表示されます。

13_ie8

14_browsehappy

こういったディテールまで徹底した品質を確保するには、デザイナーとフロントエンドエンジニアがすごい時間をかけて調整をせねばならず、加えてこれだけのページ数をリデザインの対象とするのは品質担保が非常に大変なので、本当に大変な仕事だっただろうなと想像します。

2012年のアイデンティティ刷新のストーリーもけっこう面白いです。大元のエンブレムをどのようにリデザインし、今の統一ロゴを生み出したのか。
http://hub.jhu.edu/2013/05/15/johns-hopkins-new-identity

ちなみに、2013年秋の記事を見るとリリースは「2014春」のつもりでやっていたようで、ここからさらに1年かかったということだよな… と想像して青くなったりしています。

おわりに

大規模リニューアルにあたり綿密なリサーチとコンセプトの検討、コンテンツの作り込みを重ねたJHUの新Webデザインは、本当に品質の高いものだと思います。大学サイトに限らず、マルチデバイスに対応した昨今のWebデザインの「王道」として、多くのことを学ぶことができました。

さらなる関連情報

コメントを残す