デザインがかっこいい大学研究室ホームページ事例10選 (web#008)
研究室のホームページを作成するときに悩む点の一つがWebデザイン。
大学研究室ホームページ作成サービス「ラボゼミCMS」を運営しているスパイスワークスが、デザインの参考になる大学研究室のホームページを10点ご紹介します。
【 目次 】
- デザインのかっこいい大学研究室サイトの事例を選定するにあたって
- 慶應義塾大学 牛場潤一研究室
- 早稲田大学 下川研究室
- 京都大学 大宮研究室
- 大阪大学 永井研究室
- 京都大学 緒方研究室
- 筑波大学 落合陽一 デジタルネイチャー研究室
- 東京大学 松尾・岩澤研究室
- 早稲田大学 古谷誠章研究室
- 明治大学 渡邊恵太研究室
- 大阪大学 茂呂研究室
- まとめ：研究室ホームページのデザインとは？
デザインのかっこいい大学研究室サイトの事例を選定するにあたって
株式会社スパイスワークスでは大学研究室に特化したホームページ作成サービス「ラボゼミCMS」を運営するにあたり、常に様々な大学研究室サイトを調査・分析しています。
先日も100件の大学研究室サイトを調査し、人気コンテンツトップ10や番外編、研究室のSNS活用、研究室ホームページの改善チェックポイントなどの記事を掲載してきました。
日頃このように研究室サイトを調査する中で、気になる研究室サイトについてはメモを残しおり、今回はその中で、デザイン的に優れていると感じられるサイトを、10点ピックアップしてご紹介します。
なお公平を期すために、スパイスワークスで制作させていただいたサイトは候補から除外しています。
研究室サイトの新規制作、サイトリニューアルの時などには、参考にしていただければ幸いです。
ホームページの作成をweb制作会社に依頼する際も、「このサイトの雰囲気が気に入っている」など、具体的な例をあげるとイメージが伝わりやすいので、是非活用してください。
ご紹介するポイントとしては、メインビジュアル、トップページの構成、第二階層以下、UI設計などを軸としています。
それではさっそく1サイトずつ見ていきましょう。
慶應義塾大学 牛場潤一研究室
◆メインビジュアル
脳をモチーフにしたアニメーションが印象的なサイトです。
脳の研究をしているということが分かるのはもちろん、さらに深いコンセプトである「脳のやわらかさ」に着目した研究を行っているということが、ページを開いてアニメーションを閲覧することで直感的に感じ取れます。
そのうえでサイトの中を閲覧してゆくと、トップページからのつながりが設計されており、「脳のやわらかさ」というコンセプトをより深く理解することができる構成が組まれています。
色は白と黒とグレーで統一され、デザインも必要な要素に絞り込まれており、ミニマルで洗練された印象を受けます。
◆トップページの構成
ページをスクロールする中で、 MISSION, APPROACH, TEAM, NEWS など、簡単な文章とグラフィックで概要がわかるようになっていて、そこから興味を持った内容をクリックすることで、深掘りできる設計になっています。
◆第二階層以下
文字組みはページの横幅いっぱいに使うのではなく、写真やイラストと半々になっていたり、「News」ページでも、ある程度の幅で折り返すようになっているので、読みやすい印象を受けます。
PC画面の横幅いっぱいに文字を広げてしまうと読みづらくなりがちです。こういった文字組みレイアウトは参考にしたいところです。
◆UI
左上の脳のアニメーションからトップページに戻れるようになっているところに、遊び心を感じます。
各ページへはヘッダのメニューから移動する、シンプルでわかりやすいUIです。
早稲田大学 下川研究室
◆メインビジュアル
まず、落ち着いたベージュの背景に、ビビッドな黄色の卵のイラストが出てくるところが印象に残ります。
その次に、同じくビビッドな赤色の肉のイラストが出てきます。
こういった背景とイラストのコントラストが、見る人の目を引きます。
目玉焼きの黄身の部分や、肉の赤身の部分のビビッドな色で目を引いた後は、その部分が街並みの写真に切り替わります。
このアニメーションによって、「食を通して社会を読み解く」という研究のコンセプトを強烈に印象付けています。
◆トップページの構成
メインビジュアル横に研究室の説明があり、スクロールすると、お知らせ、ブログなど更新頻度の高いコンテンツが最初に出てきます。
これによってサイトがしっかりと更新され、最新の情報が掲載されていることがうかがえます。
その下に研究内容の紹介が出ます。
「こんな研究をしています」という言葉から始まりますが、「研究内容」という一般的な見出しとは違い、やわらかい言葉を使うことで敷居が下がり、サイトを閲覧できる人の裾野を広くとることができています。
イラストと共に出てくるのは、専門家でなくても日常的に触れる食の問題や問いかけです。日頃なんとなく感じていることが、具体的なエビデンスとともに情報化されているので、どういったことを研究しているのかが理解でき、興味につながります。
メインビジュアルからの流れで興味を持ったユーザーが、「教員略歴」や「研究概要」に入って、研究室についてさらに詳しい情報を閲覧する、という導線が、しっかりと設計されています。
◆第二階層以下
全体的に、トップページから引き継いだやさしい色合いの背景色と、曲線を利用したやわらかい印象で展開しています。
教授の写真も、トップページとの連動を意識させる、卵のような形になっていて、全体を通して統一感があります。
◆UI
MENUのUIでは、通常では「ハンバーガーメニュー」と呼ばれる三本線が使われることが多いですが、こちらは三本線の代わりに「箸」のイラストが使われていて、マウスを重ねると箸が開きます。メニューを開くと箸がクロスされ、「CLOSE（×）」のアイコンに切り替わる演出が凝っています。
また「メニュー」を開くと、白いお皿をバックに、まさにお店のメニュー（お品書き）のようなUIを連想させ、「メインメニュー」と「サブメニュー」のような、わかりやすい構成になっています。
京都大学 大宮研究室
◆メインビジュアル
深いネイビーの背景をバックに、印象的な写真が右から左に流れます。
一見して、研究室のホームページとは思えないような（フォトグラファーのページかな？と思ってしまうような）洗練された印象です。
◆トップページの構成
メインビジュアルを下にスクロールすると、「研究室の概要」「研究内容」「News」と画面が流れ、興味のあるトピックを深掘りできるような設計になっています。
写真や文字が出る時の JavaScript によるアニメーションにもこだわりが感じられます。
「About」にある研究メンバーの写真が印象的です。メインビジュアルと並べて違和感のない、落ち着いた色調に合わせてあるところに、ビジュアルへのこだわりを感じました。
画面左側にはXやInstagramへのリンクが追従し、フォローを促しています。
◆第二階層以下
第二階層に入ってもトップページの印象が崩れないよう、シンプルなデザインと美しい写真が配置されています。
英文字を使ったタイポグラフィーと、日本語の情報を左右に分けて配置するなど、読みやすさへの配慮も感じられます。
各ページの下部には、次に見るべきページへのナビゲーションが配置されており、ページを回遊して研究室の理解を深めることができる設計になっています。
◆UI
ロゴのビビッドな水色が、ページのアクセントカラーとしてもところどころに配置されていて、同色のドットがマウスにも追従してきます。
マウスがリンクボタンに接するとこのドットが開くなど、インタラクションを楽しめると共に、クリックできる場所が分かりやすい演出になっています。
大阪大学 永井研究室
◆メインビジュアル
このサイトで圧倒的に印象に残るのは個性的なイラストです。
ユニークさも感じますが、生物分子機能科学分野ということで、「生命とは何か」という深遠なテーマも感じさせるイラストです。
イラストの中には生物発光たんぱく質や、グリーンバイオテクノロジーなど、具体的な研究内容も表現されています。
中央でお酒を飲んでいる鹿は、登山がご趣味の永井教授でしょうか（笑）。この鹿の角が枝葉となって、様々な研究に広がっている様子が分かります。
ちなみに、イラスト内にあるQRコードもきちんと機能しています。
◆トップページの構成
トップページはメインビジュアルからSNSへの誘導、News & Topics というシンプルな構成で、各メニューへはヘッダから移動する設計となっています。
◆第二階層以下
第二階層にもイラストが散りばめられていて、内容はしっかりと記載されつつも、トップページの雰囲気は引き継いでいます。
トップページのユニークな印象とは違い、設備紹介などは充実しており、第二階層以下を閲覧することで、研究に対する真摯な姿勢が垣間見られます。
メンバーページの先生の自己紹介などから、研究室のユニークな個性が感じられます。教授以外も各メンバーのページがあり、 Profile と Biography など、詳しく紹介されているのが特徴的です。
卒業生についても詳しいインタビュー内容が掲載されており、研究メンバーと研究室とのつながりの強さが感じられます。
◆UI
インターフェイスはシンプルに、ヘッダのメニューから移動するかたちとなっています。
フッタは全体を引き締める背景色となっていて、外部へのリンクなどが配置されています。
京都大学 緒方研究室
◆メインビジュアル
サイトを訪れると、まずメインビジュアルのイラストが印象に残ります。
前出の永井研究室もその例ですが、大学研究室のホームページで、ここまで描き込んだオリジナルのイラストを使用することは珍しいので、他と差別化できています。
教育工学分野の研究室ですが、学校ではなく広場というシチュエーションで、子供から高齢者まで、未来的なUIを使って学んだり、分析したりしている様子が描かれています。
色みは全体的に柔らかく、優しい雰囲気に統一されています。
ITを活用した先進的な教育の研究ですが、どちらかというと「IT」や「データ分析」という先進的なものをもう少し柔らかくとらえ、身近な生活と密着した研究といった雰囲気が醸し出されています。
◆トップページの構成
メインビジュアルのイラストで、「日常の中でどこでも、誰とでも学べる」ことを直感的に印象づけた上で、画面をスクロールすると研究概要が現れます。
この文章で具体的な説明がされ、動画でも補足されています。専門家でなくても、研究内容をすんなりと受け入れられるよう設計されています。
ページ下部には News や Event などの最新情報が掲載されています。
News やメニューなどは、丸いオレンジのオブジェクトを用いて、日付と月が分かりやすく記載されています。
◆第二階層以下
第二階層もトップページと同じ優しい色合いで統一されています。
各ページの見せ方は分かりやすさが重視され、シンプルなデザインでまとめられています。
Grants ページとして、補助金等による研究プロジェクトも紹介されています。
◆UI
ヘッダのグローバルナビゲーションに News, Members, Events, Projects などの分かりやすいメニューがあり、ここからページを移動してコンテンツを閲覧する導線がベースとなっています。
筑波大学 落合陽一 デジタルネイチャー研究室
◆メインビジュアル
アーティスト、研究者、起業家、コメンテーターなど様々な顔を持つ落合陽一先生の研究室というだけあり、メインビジュアルではアーティスティックな動画が配置されていて、第一印象としてインパクトがあります。
認知度の高い研究室なので、すでに研究室を知ったユーザーが訪れる機会も多いと考えられますが、この動画を見ることで、アートや先端技術、またその両方に興味がある人であれば、さらに興味が高まるでしょう。
◆トップページの構成
メインビジュアル部分の動画でプロジェクトを印象的に記憶に残し、その流れで、直下には各プロジェクトの写真が配置されており、クリックすると詳細が見られるようになっています。
その下にデジタルネイチャー研究室のビジョン、さらに下には News や Media Presentation などの最新情報が並びます。
全体的に細くて繊細な印象のあるフォントが用いられていますが、余白を効果的に活用することで、メッセージは強く伝わってきます。
◆第二階層以下
印象に残ったのは「PEOPLE」（メンバー紹介）ページの写真です。
背景色がグラデーションかモノトーンに統一されており、洗練された印象を与えます。
研究室を志望する学生は、ここに自分の写真が加わることを夢見るでしょう。
「Supporters」ページでは、クラウドファンディングで個人の研究活動支援者を募集しており、支援者の名前を掲載しています。
個人から研究費を集めているという点が、他の大学研究室とは大きく異なる特徴と言えます。これはメディア露出などで知名度があり、「ファン」を獲得しているからこそできることだと思います。
◆UI
ヘッダ、フッタともにシンプルなナビゲーションですが、どちらもSNSへのリンクが設置されています。
落合陽一先生はメディアにも多く出演されていて、SNSでの存在感も大きい人物です。だからこそ、研究室が個人の支援者を集めることができているのでしょう。
SNS,メディアなどで幅広いファンや支援者を集める研究室という点では、なかなか異色の存在なのではないでしょうか。
> 筑波大学 落合陽一 デジタルネイチャー研究室のサイトはこちら
東京大学 松尾・岩澤研究室
◆メインビジュアル
シンプルにAIやニューラルネットワークを連想させるビジュアルとコピーが目を引きます。
色は白、黒をベースとして、ポイントとしてメイン画像の色味に近い深緑が使われています。色を絞ることで全体的に統一感があり、洗練された印象になっています。
松尾・岩澤研究室からは多くのスタートアップが生み出されており、このサイトも研究室ではなく一般の企業サイトとしても成立するデザインです。
実際、ビジネスマンやメディア関係者も多くアクセスしているのではないでしょうか。
◆トップページの構成
企業サイトと研究室サイトの両面を持っています。
メインビジュアルのすぐ下にNewsがあり、日々最新の情報が更新されていることがわかります。
About や Activities などは、各項目の概要が表示されており、興味を持った人が詳細ページに移動し、情報を深掘りできる構成となっています。
◆第二階層以下
トップページ同様、企業サイトのようなシンプルなデザインでまとめられています。
ページ内に文字を詰め込み過ぎず、余白を活かした作りになっています。
「メンバー」ページの写真については、フォーカスの合わせ方や色合いなどが統一されていて、画面としてのまとまりが感じられます。
◆UI
ページ数が多いということもあり、グローバルメニューから第三階層以下に直接誘導できるUIとなっています。
研究室サイトとして、ここまでページ数が多い例は珍しいと思いますが、ページ数が多くなる場合の見せ方として参考にできます。
早稲田大学 古谷誠章研究室
◆トップページの構成
今回の記事で取り上げた他の研究室とは少し違い、記事が中心となった、ニュースサイト風のインターフェイスです。
記事をメインにするということは、更新頻度が高いことが前提ですが、サイトからは研究室の活発な活動が認識できます。
記事の内容についても、建築に関するものや講演などの登壇、研究室内の活動など、バランスよく掲載されており、どのような研究室なのかが言葉ではなく実際の活動内容から分かるので、説得力があります。
最新ニュースの集まりのようですが、あえてトップページ内に「研究概要」という項目を設けずにして、トップページをパッと見るだけで、研究室の概要を理解できるのが特徴的です。
各ニュースの写真や画像内の文字なども美しくレイアウトされているので、記事がランダムに配置されているようでも、ページ全体がまとまって見えます。
◆第二階層以下
各ページはシンプルですが、余白感のある写真を大きく配置して、文字の行間や画面内の余白も活かし、全体的に心地よい雰囲気が出ています。
◆UI
研究室サイトを訪れたユーザーは、まずは記事を目にすることになります。興味ある記事を覗き、そこから研究室に興味を持って、画面左のメニュー（スマホでは画面上部）から研究室についてのコンテンツを閲覧することになるでしょう。
ユーザーの興味関心から研究室の情報へと導く情報設計が洗練されています。
多くの研究室サイトでは「研究内容」から第二下層に入る導線が多いですが、「記事」から入るという点は特徴的な例だと思います。
明治大学 渡邊恵太研究室
◆メインビジュアル
最も印象的なのは、メインビジュアルで学生さんたちが楽しんで研究している様子がうかがえる動画でしょう。
きちんとライティングが考慮された、明るくてクオリティが高い映像なので、研究室が未来の前向きな方向に進んでいる印象が感じられます。
志望する学生さんは、ここで自分が楽しみながら研究活動を行っている姿を想像できるでしょう。
◆トップページの構成
メインビジュアルの下に研究の概要があり、その下にVisionが配置されています。
Visionは図式化されていて、文章のみの説明と比べ、研究室が目指していることが分かりやすく伝わるようになっています。
その下にはプロジェクトやニュースなど、定期的に更新される情報が掲載されています。
◆第二階層以下
第二階層は About, Members, Projects などシンプルな構成です。
メンバーページは、名前、学科、メンバーのサイトへのリンクがあります。それぞれの名前、読み（アルファベット）、専攻など、文字サイズや見せ方、写真とのバランスが整っていて統一感があります。
◆UI
PC、タブレット、スマートフォンなど、さまざまなデバイスの画面で見やすいよう、レスポンシブ対応がなされています。
大阪大学 茂呂研究室
◆メインビジュアル
2型自然リンパ球（Group 2 innate lymphoid cell: ILC2）に着目した研究を行っている研究室です。
言葉だけ聞くと、一般的には理解が難しい内容ですが、メインビジュアルで動画を入れることにより、専門的な知識がない人でも興味を持てます。
◆トップページの構成
メインビジュアルの下には研究の概要があります。
動画で見せたものが何なのか、ここで概要を見て、より詳しく知りたければ、詳細ページに移動することができます。
その下は研究紹介、メンバー、研究環境、イベント報告など、研究を志す学生さんが興味を持ちそうなコンテンツへのリンクが配置されています。
印鑑風の研究室のロゴ、縦文字と横文字をうまく使い分けている点、「お知らせ」部分の和紙風の背景、黄緑と紫をあしらった色合いなど、全体に「和」の雰囲気を感じ、しなやかな印象を受けます。
文章にも説得力があり、先生の人柄が伝わってくるようです。
◆第二階層以下
トップページから踏襲された黄緑と紫がキーカラーになっていて、これが研究室の雰囲気とマッチし、印象に残ります。
見出しが紫、文字が黒と色を分けることで、読みやすい構成となっています。
◆UI
グローバルナビゲーションが左に配置され、画面がスクロールしても追従する作りになっています。
今後、モバイル対応されると、さらに使いやすくなるでしょう（2025年4月現在）。
まとめ：研究室ホームページのデザインとは？
いかがでしたでしょうか？
研究室ホームページには、必ずしも「かっこよさ」は必要ないかもしれません。
しかし、学生さんが入学を希望する研究室の雰囲気や目指す方向性を、言葉や文字とは別の方法で伝えられるのが「デザイン」です。
メッセージを伝える手段としての「デザイン」も、コンテンツ同様重視してもよいのではないでしょうか。
今回挙げさせていただいた研究室ホームページは、どれも表面的なかっこよさだけではなく、読みやすさ、分かりやすさも兼ね備えられています。
さらに、サイトに来てくれたユーザーが興味を持って情報を閲覧してくれるよう、どの研究室HPもユーザーの導線が設計され、その導線をデザインやUIで演出しています。
「研究室ホームページをリニューアルしたいけど、どこに相談したらいいか分からない」
「学生さんがアクセスしたくなるような、かっこいい研究室ホームページを作りたい」
「デザインのことはよく分からないけど、今の時代に合った研究室ホームページを作りたい」
などのお困りごとがありましたら、無料オンライン相談をお申込みください。
