体系性ある、アカデミックな空気が全体を包む
東京大学ウェブサイト
「アマテラス石」発見特別企画：共同研究者所属 3大学の分析 Vol.1
アマテラス石：東京大学物性研究所の浜根大輔技術専門職員、山口大学大学院創成科学研究科の永嶌真理子若手先進教授、高輝度光科学研究センターの森祐紀研究員、京都大学大学院理学研究科の下林典正教授、リガク・ホールディングスのグループ会社である株式会社リガクの松本崇グループマネージャー、アマチュア鉱物研究家の大西政之氏と田邊満雄氏からなる研究チームは、日本の「国石」に選定されている「ヒスイ」の中から、新種の鉱物（新鉱物）を発見し、日本神話に登場する天照大神の名を冠し、「アマテラス石（学名：Amaterasuite）」と命名しました。
1 東京大学ウェブサイトの概要
東京大学は、日本を代表する国立総合大学であり、学部・大学院、附置研究所などを備え、教育、研究、国際活動、社会貢献において広範な領域に展開する拠点です。
東京大学公式ウェブサイトは、白ベースですっきりした中にこそ、「東京大学らしさ」が自然に滲んでいるような、アカデミックな空気感をまとっています。
歴史的重みと静謐さを両立させ、公式性・知的興味・開かれた社会性をバランスよく融合させた印象です。
2 サイトのターゲット
- 受験生・在学生・大学院志望者：入学案内や教育・学生生活の情報を提供
- 研究者・教職員：研究活動、研究組織・制度などの専門情報を掲載
- 社会一般・支援者・企業など：社会連携、公開講座、支援情報などを通じて広く発信
3 トップページの印象
東京大学ウェブサイトのトップページは、大学の風格と知的な空気、そして大学生が活動する「キャンパス」の雰囲気を静かに伝える視覚構成です。
大きなメインビジュアルには、大学生の活動状況、学術成果、そして創立150周年を知らせる画像がフェード効果のスライドで表示されていきます。ビジュアルが表現するものが多岐にわたることで、このサイトの内容も様々な分野に広がったものだとわかります。
東京大学といえば、日本の教育機関の最高峰とも言われますが、ここに映される学生は他の大学の学生と変わらぬ笑顔を浮かべており、生き生きとキャンパスライフを送っているようです。
学生が映る部分だけは、このサイトの整然とした、格式あるイメージを少しゆるめ、リラックスした共感につながる効果を生んでいるように感じます。
このメインビジュアルは、それぞれが意味する項目へのリンクボタンとなっており、興味に応じて進む導線となっています。
背景
トップページの背景は、白ベースに、薄く線画が描かれています。鉛筆の素描画と表現しても良いでしょうか。サッと走る線が描くのは、東京大学のシンボルとも言える「安田講堂（正式名称：大講堂）」です。下部には建物の前を行き交う人も描かれ、活発な感じを与えています。
4 特徴
サイトは、真面目できっちりとした、整然とした構成で、大学というよりは、専門性ある「学術研究機関らしい」といった印象を受けます。
- 構造化されたナビゲーション：主要カテゴリが見やすく整理されており、そのカテゴリの中も細かく分類されている為、目的別に情報へ直行できる構成です。内容の濃さを思うと、ナビゲーションの充実は大変有効に働いています。
- 視覚と文章のバランス：ビジュアルは情感に頼らず現実的な実在感を持つものですが、かといって重厚すぎず、文章コンテンツとの調和が保たれている印象です。
- 整然さと信頼感：品格あるかっちりと整ったデザインにより、サイト全体から「知性」「品位」が感じられます。トーンが確立され、信頼感を高めています。
東京大学のロゴマーク
東京大学のロゴマークは、２枚のイチョウの葉が組み合って円を描く構成です。
１枚は「蒼」。歴史ある大学のイメージから少し離れた若々しさを感じます。現在も新たな知識の獲得へ挑む、研究の勢いある活動を表しているのでしょうか。
もう一枚は、山吹色。イチョウなので、銀杏色と表現すべきでしょう。銀杏は長年東京大学のシンボルとして扱われているようです。
私は、赤門の朱色や煉瓦建築物の印象が強く、東京大学のイメージカラーとしてなんとなく赤系統を想像していました。しかし、実際は落ち着いた「淡青」がスクールカラーとされています。
サイトの色彩
サイトは白やグレーを主として構成しながら、ロゴに使用される「碧」およびスクールカラーの「淡青」を、落ち着いた方向に展開したブルー系をメインカラーとして使用し、銀杏色をアクセントカラーとしてポイント使用して、信頼性と静謐さを崩すことなく整えています。
5 ユーザーインターフェース
東京大学ウェブサイトは、多くの情報をまとめ、さらに研究を後押しし成果を広める効果を取り入れた、優れたインターフェースを構築しています。
ナビゲーション
メニューは階層的に整理され、ホバーやドロップダウンなどもわかりやすい設計です。細分化された項目により、動線が短く配慮が行き届いています。
レスポンシブ対応
スマホ表示にも対応し、快適な使用環境です。
SNSとの連携
「ソーシャルメディアアカウント一覧」ページが設けられ、広報室はもちろん、各組織により運用されている公式アカウントがずらりと並び、圧巻です。外部との接点について、現代的にしっかりとした対応が取られています。
多言語対応
「English」への切り替えボタンが明確に設置され、日本語以外のユーザーにも配慮されています。
サイト内検索
多くの情報の中から、ユーザーが目的の情報へピンポイントでたどり着く配慮がしっかりと取られています。
まとめ
東京大学公式ウェブサイトは、静謐で知的な世界観を保ちながら、教育・研究・社会貢献といった多面的な機能をしなやかに統合しています。
ターゲット毎に明確な導線を設け、膨大な情報を持つ学術機関のサイトとして、しっかりとした情報提供窓口になっています。
使いやすさに配慮しながらも、大学の品格を失わない「アカデミック」な印象を終始保っている、シンプルさが上品とさえ言えるようなデザイン設計だという印象です。
トップページの学生の笑顔や、背景に取り入れられた線画、こういったキャンパスらしさが他のページにはあまり見られないのは、東京大学が学術機関として「求められるもの」、専門性や体系性を示す必要があるからなのかと感じました。
国立大学組織として期待される事に応える形で、専門性・体系性を、サイト内でも表現している「東京大学」らしいサイトでした。