コンテンツにスキップ

Webスタイルガイド

Webスタイルガイドのイメージ画像

Webスタイルガイドは、本学のWebサイト管理者・運用担当者をはじめ、Webサイトに関わるすべての方が利用することができます。ご利用いただく際は、利用規約の記載事項を遵守し、最新の情報やデータをご利用いただくようお願いいたします。

更新履歴

  • 「Science Tokyo Web Style Guide 1.0.0」をリリースしました。

  • 「Science Tokyo UI Beta」をリリースしました。

デザイントークン

Science Tokyoブランドを表現するための視覚的な特徴や雰囲気をWebサイトに反映するためにデザイントークンを定義しています。

デザイントークンのイメージ画像

デザイントークン

コンポーネント

Science TokyoのWebサイトでは、一貫したデザインと使いやすさを実現するために、共通のUIコンポーネントを用意しています。

ページパターン

Webサイト運用や新たなWebサイト立ち上げなどに活用するため、Webサイトを構成するページの役割を踏まえ、コンポーネントを組み合わせたページのレイアウトバリエーションをページパターンとして定義しています。

ページパターンのイメージ画像

ページパターン

デザインリソース

WebサイトのUIデザイン実現のために用意しているデザインリソースは、デザイン制作に活用するFigmaのデザインデータと、開発済みコンポーネントの元となる開発ソースによって構成されています。

デザインリソースのイメージ画像

デザインリソース