東京科学大学(Science Tokyo)   広く社会に公開する大学のデザインシステム

メインビジュアル。Science Tokyoのロゴと、「科学の進歩と、人々の幸せと。」の文字が入っている。

つくって終わりではない。社会との共創と知の循環を目指すデザインシステムの構築

東京科学大学様(以下、Science Tokyo)は、2024年10月に東京医科歯科大学と東京工業大学が統合して新設された大学です。新大学の設立に伴い、両大学のさまざまな違いを踏まえ、新しいブランドを表現する言葉やかたち、色などの要素の体系的な整理に取り組み、組織全体としての一貫性と信頼性を高め、イノベーションの創出を支える仕組みとしてのデザインシステムを開発しました。

  • ウェブサイト・サービス
  • ブランディング支援
  • デジタルマーケティング支援
  • デザインガバナンス構築支援
  • メディア・コンテンツ開発

[ プロジェクトのポイント ]

  • 「大学ブランドの価値や姿勢」と「一貫性をもったブランド表現や情報設計・UIデザイン」を提供する
  • 大学全体のウェブサイト方針や、一貫したサイトの構成・UIデザインに活用できる共通デザインリソース
  • 大学内で継続的にデザインシステムを更新できる仕組みの導入
  • 新大学のMissionを踏まえた、社会に開かれたデザインシステム

プロジェクトの背景

新大学のブランドに沿った一貫性のある情報発信を行っていくためには、「Science Tokyoらしさ」の共通理解を関係者間でもっておくことが必要です。しかし、ガイドラインという「ルール」としての提供では、経験的にも形骸化することがわかっていました。ブランドそのものを正しく理解し活用していくための、より包括的な情報提供が求められました。

また、新大学の情報発信の中核を担うウェブサイトでも、ブランド価値を蓄積して活用するエコシステムを支えるウェブガバナンスを実現する上で、「Science Tokyoらしさ」を共通理解として体系的に提供する仕組みを必要としていました。

問題解決までのアプローチ

「Science Tokyoらしさ」を表現するための仕組み

Science Tokyoでは、新大学のブランドを伝えるための「Science Tokyoらしさ(目指す方向性や大切にしている思い)」を言葉やかたち、色などさまざまな要素でわかりやすく表現し、仕組み化したデザインシステムを構築しました。

大学関係者が「Science Tokyoブランド」を活用して行う表現やコミュニケーションは多岐にわたりますが、ブランドに対する理解を深め、一貫性を担保しながら、効率的かつ自由に表現するための情報を集約し提供することで、認知や利便性を高め、活用を促したいという意図があります。

デザインシステム全体の構成

デザインシステムは、「Science Tokyoらしさ」に込めた思い、ブランド価値を言語化した理念や、シンボルマーク、ロゴマーク、大学名表記、ブランド体系など、ブランド自体への理解を深めるためのコンテンツと、学内関係者に配布するアプリケーション(名刺・パワーポイントテンプレート・Zoom背景など)、ウェブサイトの方針や「Webスタイルガイド」、各種ガイドラインなど、一貫性をもったブランド表現をするためのツールで構成されています。

また、より利便性高く利用できるようPDFなどのドキュメントツールではなく、ドキュメントサイトとして提供しています。

デザインシステム全体の構成を示す図。

2025年2月公開時点のScience Tokyoデザインシステムの構成。

ウェブガバナンスの推進に活用するデザインシステム

ウェブガバナンスを適用する新しい大学のウェブサイト立ち上げに伴い、全体最適のアプローチでブランドを伝えるウェブサイトの方針や、ウェブアクセシビリティに対する考え方、管理・運用担当者をサポートするツールである「Webスタイルガイド」をデザインシステムから提供しています。

Webスタイルガイドは、UIデザインをビジュアル・フロントエンド開発の観点で確認できるだけでなく、サイト構造のもととなるレイアウトのバリエーションである「ページパターン」を実際のウェブページとして確認することも可能です。

また、デザインリソースとして、Figmaコミュニティから提供する「Science Tokyo Web Style Guide」と、GitHubから提供する「Science Tokyo UI」を公開しています。

Science Tokyoデザインシステム「Science Tokyoデザインシステムとは」ページのキャプチャ。
Science Tokyoデザインシステム「ウェブアクセシビリティ」ページのキャプチャ。
Science Tokyoデザインシステム「設計方針」ページのキャプチャ。
Science Tokyoデザインシステム「画像/Image」ページのキャプチャ。

Webスタイルガイドの構成

  • 色やアイコンなどの視覚的な特徴や雰囲気を定義する「デザイントークン」
  • 一貫したデザインと使いやすさを実現するための「コンポーネント」
  • コンポーネントを組み合わせたレイアウトのバリエーションとなる「ページパターン」
  • デザイン制作に活用するFigmaのデザインデータと、開発済みコンポーネントのもととなる開発ソースによって構成した「デザインリソース」
デザイントークンを説明するページのキャプチャ。
デザイントークンを説明するページのキャプチャ。

大学内部での運用を支える技術スタック

デザインシステムの構築に当たっては、その多岐にわたる内容から、組織統合とも並走しつつ、さまざまな関係者との協力・共創が必要でした。また、新大学の組織は立ち上がったばかりであり、これからも変化を続けていくことが想定されています。そのため、デザインシステムも同様に構築して完成するものではなく、これからも変化に対応し続けていくものと位置付けています。

デザインシステムを支える技術スタックは、できるだけ人への依存を少なくすることを前提とした仕組みを採用しました。マークダウン形式のファイルから更新できる仕組みにより、大学内の関係者による継続的なデザインシステムの点検・アップデートが可能となりました。

デザインシステムの運用フロー図。

「Science Tokyoデザインシステム」ウェブシステム全体の構成・フローのイメージ図

新しい価値の社会への還元や共創と知の循環が続いていくために

Science Tokyoデザインシステムは広く社会に公開されています。これは、「『科学の進歩』と『人々の幸せ』とを探求し、社会とともに新たな価値を創造する」というScience TokyoのMissionに基づいています。

「『科学の進歩』と『人々の幸せ』とを探求し、社会とともに新たな価値を創造する」をMission に掲げ、両大学のこれまでの伝統と先進性を生かしながら、どの大学もなしえなかった新しい大学の在り方を創出していきます。

「Science Tokyoについて」より引用

本プロジェクトでは同じように、一般公開されている事例や知見を参考にデザインシステムを検討しました。今回のScience Tokyoの取り組みが知られることで、新たな取り組みが立ち上がり、知の循環が続いていくことに期待しています。

[ プロジェクト概要 ]

クライアント名 東京科学大学 様
URL https://design-system.isct.ac.jp
公開日/発行日 2025/2/28
  • Facebookでシェアする
  • Xでシェアする

お仕事のご相談やお見積もり、ご不明な点など、お気軽にお問い合わせください。

お問い合わせ
ページの先頭に戻る