Pages Navigation Menu

For Creative Communication

早稲田大学のサイトリニューアルはなぜスゴイのか?

2014年11月5日(水)、早稲田大学公式サイトが、株式会社CINRAの手により、見事なリニューアルを遂げました。

wasedatop

プレスリリースに書かれた彼らの目論見通り、「国内外の大学と一線を画す、最新のグローバルサイト」と言えると思いますが、なぜ、国内屈指の大規模校である早稲田の公式が、ここまで個性的なサイトになっていると感じるのでしょうか。

日々大学サイトの構築に向き合うWebディレクターの立場から、その「スゴイ」理由を、少し考えてみました。

1 – 「メディアサイト」として尖らせたから

一般的に大学サイトは、ある程度メニュー内容も共通化され、情報公開に重きを置いた「ポータルサイト」として位置づけられることが多いと思います。

しかし、新しい早稲田のサイトは、細かいコンテンツは「別サイト」に任せ、新着記事とリンク集で構成される「メディアサイト」に大きく振ってきました。

海外大学サイトでは「News」の扱いが進化

実は、海外の最先端の大学では、同様の「メディアサイト化」傾向が顕著です。

ハーバード大学や…

Harvard

ケンブリッジ大学など。

cambridge

主に研究内容や受賞暦などを中心に、非常にしっかりした内容の記事が数多く発信されています。

早稲田でも、運用が難しい「サムネイル画像」もちゃんと設定し(画像がない場合の「デフォルト画像」ももちろん配置)、高い更新頻度で記事を挙げています。
一方、いわゆる「事務連絡」は、ほとんど見当たりません。

細かいコンテンツは外部サイトにある

下層ページを見ていくと、詳細は「別窓マーク」=waseda.jp以外の「他サイト」に飛ばすものばかり、という印象を受けます。学部や研究機構、各種施設など、細かい情報は、それぞれの組織が独自に運用する現行サイトに任せる、というスタンスのようです。

学部ページ。法学部だけ揃えてあるが他は独立サイト

学部ページ。法学部だけ揃えてあるが他は独立サイト

特に、「ターゲット別ナビゲーション」を見ると、受験生向け(入試センター)・卒業生向け(同窓会サイト)・在校生向け(在学生ポータル)を完全に分離し、一般・企業・保護者に向けたサイトであることを印象づけています。

targetnav

「新着情報」の整理上も、これは非常に大きくて、入試関係と在学生向けのお知らせが混ざった途端に、「メディアサイト」としての運用は実質不可能になります(多くの大学サイトでは、逆にこの事務連絡機能が重要視される)。

多数の衛星サイトが存在することは、逆に統一性と情報ガバナンスの面で大きな課題でもあり、「(順次)全学共通デザインでリニューアルしていく」とあります(これが超大変そう。。80サイトも。。)が、明確な役割分担によって、「表玄関」をシンプルにすることに成功していると思います。いわゆる「普通の構成」を期待して情報を探している人にとっては不親切(特にキャンパスライフの階層が深い)ですが、「一般」向けの発信に絞るとこうなる、という実例かもしれません。

だから、WordPressでできる

なんとこれ、WordPressで構築されていました。

wasedawp

(うっかりログインURLも見つけちゃったけど、すぐ.htaccess設定した模様です)

WordPressは「記事投稿」型のサイトに適したツールなので、ニュース記事中心の更新・管理にはもってこいで、「うまく合わせたな」という印象です。それなりにページ数の多い「固定ページ」も、中身は見出し+本文+リンクブロックの繰り返しでシンプルに構成されていて、更新もしやすそう。どうしても大規模なサイト構築となると「WordPressより大量のページ管理がしやすいCMSを入れないと…」と思ってしまいますが、WPでここまでできるというのも脱帽です。

ちなみにURLも本家 waseda.ac.jp の差し替えではなく waseda.jp/top/ にリダイレクトをかけているので、いざとなったら切り戻せる安心感もありますね。


2 – 今ふうのデザインと実装を徹底したから

デザインと実装(マークアップ)の面では、2014年秋のリリースらしい、近年のデザイントレンドと技術を盛り盛りにした、欲張りなサイトという印象です。

色使い、書体、構成

書体は、Androidのシステムフォントである Robotoと、OS X MavericksとWin8.1に同梱されている 游ゴシック が優先指定されていて、MacBook Airで見ると本文も恐ろしくキレイ。

フラット風な色使いと細い線のピクトグラム、時折カテゴリー別の見出し画像で構成された「ビルボード」部分は、下層の記事ページに行っても破綻しない。

billboard

newslist

キーカラーの臙脂色に対して、左メニューとフッターでは白系統ではなく濃い黒(#222222)を使っているのもインパクトが強いです。

動画敷き、アニメーション、細かなデバイス分岐

最近は、どんどん進化するjavascript(特にjQuery)を使って、小気味よい動きが色々つけやすくなりました。

  • ロゴを触るとくるんと回る
  • HEADLINEの画像がちょっと拡大する
  • 背景動画敷き(YouTubeに3:31尺の動画を上げて再生している。これもなぜか元画像のURLを見つけたけど書きません…)

Unable to display content. Adobe Flash is required.

また、スマホやタブレット端末に対応させるレスポンシブウェブデザインですが、ウィンドウ幅に対して、非常に細かくブレイクポイント(切り替えタイミング)が設定されています。たぶん5個(480,725,765,1000,1250px)。ものすごく調整大変そうですが、「左サイドバー」をグローバルナビとして機能させるパターンとしては、まさにお手本となる実装だと思います。

だから、「IE10以上限定」が必要だった

browser

なんとIE8を切り捨ててきました。IE8(9以下)で見ると…

対応してませんって怒られる

対応してませんって怒られる

こういうやつ納品してみたいな…w

実際のところ、一般家庭や情報システムの縛りのない企業で普通にWin7/8を使っている分には、普通はIE10以上に勝手にアップデートされるはず(IE8が強制されるのは一部の官公庁と企業。これたぶん社内システムの事情とかだと思います。この制約があるから、通常案件ではほぼ外せないのですが…)。これだけ仕掛けの多い実装でIE8を考慮するのは実質不可能で、大学側が「IE8を切る」英断をしたことに驚くばかりです。


3 – プレスリリースでちゃんと発信したから

雑誌に電通や博報堂のクレジットが載りまくる広告制作と比べ、コーポレート系のWeb構築は、あまり制作者の名前が表に出ることはないように思います。しかし早稲田の場合、公開当日のプレスリリースの中で、「共同制作」として株式会社CINRAがクレジットされました。

「公式」による丁寧な意図開き

release

公式プレスリリースでは、AからNまでの項目に分けて、非常に細かく「ここのパーツはこういうことを考えてこういうデザインにしました」という説明書きが続いています。これだけ「こだわりポイント」を細かく言語化できることもすごいし、こだわっていることを伝える姿勢からも、ブランディングメッセージが滲み出ているような気がします。「はっきり言う」「繰り返し言う」ことはとても重要だと思います。

CINRA、KAI-YOU、livedoor News

カルチャーニュースサイト CINRA.net を運営する株式会社CINRAの企業サイトにもプレスリリースが転載されていますが、ここからポップポータルメディア KAI-YOU に紹介記事が載り(11/6 23:30時点で129いいね・71ツイート)、そこからlivedoor NEWSに配信(こちらはほとんど反応がないですが…)。

ldnews

この段取り、ソーシャルメディアで初動シェアされやすいので、見習いたいと思いました。メディア運営に強いCINRAとのコラボレーションは、早稲田側にも訴求メリットがあったのではないかと思います。強固な信頼関係あってこそのスムーズな連携。こうやってタイムリーな共同リリースを出すのは、いいですね。

CINRAの人々(知り合いは、執筆時はいなかったのですが、この記事をきっかけにご縁が!!)

CINRAの人々(知り合いは、執筆時はいなかったのですが、この記事をきっかけにご縁が!!)


これだけ「飛ばし」たデザインにすると、当然賛否両論あると思います(twitterなどでも「探しにくい」という声はちらほら)が、ブランディングのために思い切った変革をしたいというニーズに対して、ここまで細部にこだわったクリエイティブで応えられるというのは、同業者として嬉しくもあり、悔しくもあります。

これからも負けずにUNIQUE・IMPACT・MAGICな制作プロジェクトをがんばっていきます。

loftwork.jp

※本記事内容は個人の見解です。念のため。

No Comments

Trackbacks/Pingbacks

  1. Nihongo Utemasen. | mocomono.com - […] 早稲田大学のサイトリニューアルはなぜスゴイのか? 昨日見たけどかっこよくなってたしいいと思う。IE を切り捨てってのも爽快。 […]
  2. サイトレビュー旅 10日目 – WEB's travel - […] 引用:早稲田大学のサイトリニューアルはなぜスゴイのか?(http://irritantis.info/2014/11/waseda_website_renewal_study/) 海外大学サイトでは「News」の扱いが進化 実は、海外の最先端の大学では、同様の「メディアサイト化」傾向が顕著です。 […]

コメントを残す