東京大学のサイトは、落ち着いた雰囲気でした。「大学のサイトってみんなこういう感じなのかな」と思いながら開いたのですが、情報の多さと整理の丁寧さが気になって、じっくり見てみることにしました。
はじめに
この記事でわかること
- 受験生・在学生・研究者・卒業生と、たくさんの人に向けた情報の整理
- 学生向けの手続きを別のシステムに分けている作り
- 研究の記事を、一枚の画像で興味を持たせる見せ方
- 情報の優先順位について、私が考えたこと
結論
東京大学公式サイトは、受験生・在学生・研究者・一般の人など多くの人に向けた大量の情報を、案内メニューと余白で読みやすく整理したサイトです。学生向けの手続きは別のシステムに分け、本体は研究や大学の考え方を伝える「知識の図書館」のような役割を持っています。
サイトの基本情報
- サイト名：東京大学公式サイト
- 運営：東京大学
- 目的：大学の情報や研究成果の発信、受験生や在学生への案内
- 基礎知識：東京大学は1877年設立の、日本で最も歴史の古い国立大学です。
たくさんの人に向けた情報を、どう整理するか
大学のサイトを見に来る人は、受験生、在学生、研究者、卒業生、一般の人、国内外の関係者と、とても幅広いです。特定の人だけに向けるのではなく、それぞれが目的の情報にたどり着けるように整理しなければいけません。
東京大学のサイトでは、教育・研究・入試などの主なカテゴリへの入り口がはっきり分けられ、今どこにいるかが分かる案内メニューになっていました。白い土台に、背景と文字の色の差をしっかりとった文字で、たくさんの情報でも読みやすさが保たれています。
学生向けの手続きは別のシステムに
トップページには「UTokyo Compass」という大学の方針や考え方を示すものや、総長自らが発信する「総長航海日誌」が並んでいました。一方で、休講のお知らせや履修の手続きなど、在学生向けの細かい情報は、別のシステム（UTASなど）に分けられています。
公式サイトの本体は、学内の事務連絡ではなく、大学の考え方や研究を外に向けて伝える役割に集中しているのだと感じました。役割の違う情報を分けることで、それぞれが見やすくなっています。
研究を「一枚の画像」で伝える
最初の画面では大事なお知らせや最新の情報を見せ、その下に研究成果やニュースが次々と並びます。ニュースサイトや情報のポータルサイトに近い作りです。
印象に残ったのは、科学や研究の記事が、それぞれ一枚の小さな画像で紹介されていたことです。難しい研究の内容を、画像一枚で「気になる」と思わせるのは簡単ではありません。でも、その工夫があるからこそ、専門家でなくても思わずクリックしたくなる記事がたくさんありました。
このサイトから取り入れたいこと
- 見に来る人の種類ごとに入り口を分ける：だれでも自分に関係する情報にたどり着けます。
- 役割の違う情報は、別の場所に分ける：外向けの発信と、内向けの手続きを分けると、どちらも見やすくなります。
- 難しい内容は、画像一枚で興味を持たせる：最初の「気になる」が、記事を読むきっかけになります。
自分のサイトでまねするなら、ブログの記事一覧で、画像（アイキャッチ）だけを見ても内容が想像できるように作りたいと思います。文字を読まなくても「何の記事か」が伝われば、気になる記事を選んでもらいやすくなるはずです。
ほかのサイトと比べると
同じ「学び・科学」のベネッセ（「No.023 ベネッセのデザイン分析」）も、子どもの教育から介護まで、幅広い人に向けた情報を整理していました。ベネッセは事業のつながりを一枚の図でまとめ、東京大学は見に来る人ごとに入り口を分け、学生向けの手続きを別のシステムにしています。たくさんの人に向けたサイトでは、「何でまとめ、何で分けるか」を決めることが大切なのだと感じました。
東京大学公式サイトを見て、私が気づいたこと
このサイトから学んだこと
科学や研究の記事を、一枚の小さな画像で分かりやすく表すことの難しさと大切さを、改めて感じました。私は科学の分野に興味があることもあり、画像を見ただけで内容が気になり、思わずクリックしたくなる記事がたくさんありました。
また、大学の内部向けの情報だけでなく、一般の人でも興味を持てる話題がトップページに載っているので、何度も訪れたくなる魅力があります。ただの大学紹介のサイトではなく、一つの「知識の図書館」のような役割も持っている点が印象的でした。
自分ならこう作る
トップページには多くの情報がバランスよく載っていますが、そのぶん、すべての情報が同じ重要さに見える場面もあるように感じました。色や配置で優先度にメリハリをつける方法も考えられます。ただ、大学としての色や統一感を保つ必要もあるので、色以外の方法、たとえば大きさや並べる順番で整理する工夫も考えてみたいと思いました。
これから学ぶ人へ
Webサイトは、商品やサービスを紹介するだけでなく、図書館のように知識をため、多くの人に届ける役割も持てることを学びました。ただの会社案内ではなく、見る人にとって価値のある情報を届けることが大切になっています。「情報を探しに来てもらうサイト」という視点を持つと、新しいサイトの作り方のヒントが見つかるかもしれません。
※本記事はWebデザイン学習の一環として、実際の公開サイトを観察・分析した記録です。
同じ「学び・科学」のサイトとして、「No.023 ベネッセ公式サイトのデザイン分析」も分析しています。見比べると、それぞれの工夫の違いがよく分かります。
この記事のまとめ
東京大学公式サイトは、たくさんの人に向けた大量の情報を、案内メニューと余白、はっきりした文字で読みやすく整理したサイトです。学生向けの手続きは別のシステムに分け、本体は大学の考え方や研究を伝える「知識の図書館」のような役割に集中しています。研究を一枚の画像で伝える工夫は、ブログ作りにも生かせそうです。
よくある質問（FAQ）
Q. 大学のサイトはなぜ落ち着いたデザインが多いのですか？
A. 学問の場としての信頼を伝えるために、派手な演出を避けているのだと思います。たくさんの情報を、正確に読んでもらうことも大切だからです。
Q. 東京大学のサイトで参考になる情報の整理は何ですか？
A. 受験生・在学生・研究者など、見に来る人ごとに入り口を分けている点と、学生向けの手続きを別のシステムに分けている点が参考になりました。
Q. 研究の記事を読んでもらうには、どんな工夫がありますか？
A. 一枚の画像で「気になる」と思わせることだと思います。東京大学のサイトでは、研究の記事がそれぞれ画像つきで並んでいました。実際の画面は東京大学公式サイトで見られます。
