# Michigan Forty Two デザインシステム ## Michigan Forty Two デザインシステムのインターフェースプレビュー 役割と研究分野の絞り込みを組み合わせ、該当結果がない状態を確認してから選択を解除してください。 ## Michigan Forty Two デザインシステムのデザインリファレンス Michigan Engineering公式のWeb配色、タイポグラフィ、トレーニング、公開に関するガイダンス。プレビューのレイアウトと実行時の仕組みは、明確に独自のものです。 ### 公式のWeb配色 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Maize / Blue | #FFCB05 / #00274C | 基本となるアイデンティティの組み合わせ。補助色で置き換えないでください。 | | Base text / surface | #131516 / #FAFAFA | Puma BlackとBase White。 | | February Grey | #E9E9E9 | 区切りや補助的な界面表面に使う明るいニュートラルカラー。 | | Community Blue | #1E406B | 補助的なブルー。 | | Research Blue | #2A5993 | 補助的なブルー。 | | Hyperlink Blue | #1779BA | Web向けに指定されたリンクカラー。使用する場面とコントラストは引き続き確認してください。 | | Web A2 Amethyst | #663289 | Webシステムの配色を使用してください。旧版の一般ブランドページには、異なる紫色が掲載されています。 | ### タイポグラフィと言語 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Interface/headline family | Roboto | 公式のWebフォントファミリー。ウェイトで強弱を表します。 | | Paragraph family | Open Sans | 公式ガイドでは、Web本文用に指定されています。 | | Playfair Display | Print-oriented serif option | Webの見出しすべてに使用するものと解釈しないでください。 | | Page and section names | Sentence case | アンカーリンク、プロモーションタイトル、キャプションにも適用されます。 | | CTA punctuation | No punctuation | 文書化された表記規則です。意味のある文言を維持してください。 | ### 対応プラットフォームとパターン | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Runtime | Institution-supported WordPress Forty-Two theme | C&MまたはCAENの提供形態で利用可能です。一般公開されたnpm SDKであることは確認されていません。 | | Composition | Blocks and patterns | 要素／コンポーネントはブロックとして、大きなまとまりはパターンとして扱われます。 | | People directory | Role and Research filters; Query Sort or Sidebar layouts | 公式ドキュメントの一覧です。プラグインAPIの正確な内容は、ここでは一般公開情報から確認できていません。 | | Deprecated component | Accordion Item | 非推奨として掲載されています。新しいページには推奨しないでください。 | | Navigation maintenance | Appearance > Editor > Navigation | ページを作成した後、意図したメニューに追加するか、順序を変更してください。 | ### プレビューで独自に決めた点 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Preview runtime | Original HTML/CSS/JS | 文書化されたコンセプトを示すもので、アクセス制限のある組織向けテーマは読み込んでいません。 | | Preview typography | Arial; 17px body / 1.6 line-height | 意図的にフォールバックを使い、サイズも独自に設定しています。公式トークンではありません。 | | Preview geometry | 1040px max; 220px filter sidebar; 32px gap | 独自の構成であり、Forty-Twoの公開済みグリッド値ではありません。 | | Preview compact breakpoint | 700px | 絞り込み項目を結果の上に配置しています。これはアプリケーション独自の選択です。 | | Filter semantics | Role AND research area | 該当結果がない場合の復旧を含む、独自のローカルな絞り込み処理です。 | ## Michigan Forty Two デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Michigan Forty Two デザインシステムの組織向け実装 ### 対応するWordPressエコシステム > Forty-TwoはMichigan Engineeringのデザインシステムであり、対応するWordPressテーマです。公式概要では、要素、コンポーネント、コンポーネント群を紹介し、エディター内のブロックやパターンに対応づけています。このテーマは、Communications & MarketingまたはCAENのホスティング提供を通じて、Engineeringの各部門や組織に提供されています。どのプロジェクトでもインストールできる汎用npmパッケージとして紹介してはいけません。 このローカルなサンプルは、文書化された人物ディレクトリのコンセプトを独自に解釈したものです。公開済みのWeb配色と架空のプロフィールを使用していますが、レイアウトと絞り込みのコードは独自に作成しています。認可された組織のサイトでは、このデモをカスタムのHTMLブロックにコピーして同等だと見なすのではなく、対応するテーマと最新のパターンを使用してください。 関連する仕様を確認する ## Michigan Forty Two デザインシステムのWeb配色とコントラスト ### Web専用のリファレンスを使用 MaizeとBlueが基本のアイデンティティを形作ります。Web配色にはBase Puma Black、Base White、Hyperlink Blueを含む指定ブルーが加わります。補助色は基本となる組み合わせを支えるもので、学術分野ごとに無関係で目立つ背景色を割り当てるためのものではありません。このサンプルでは、ヘッダーにアイデンティティカラーを使い、結果の周囲には控えめなニュートラルカラーを用いています。 Webシステムの配色と一般向けブランドページでは、A2 Amethystなど一部の補助色が異なります。参照表ではWebシステム専用の情報源を採用しています。テーマの既定値から外れる場合は、コントラストを確認してください。公式名称のある色であっても、あらゆる背景上で小さな文字に適しているとは限りません。 関連する仕様を確認する ## Michigan Forty Two デザインシステムのタイポグラフィと編集上のトーン ### 独自のフォントトークンを作らずに階層を表現 Engineeringのタイポグラフィガイドでは、RobotoとOpen Sansを主要なWebフォントファミリーとして挙げ、本文にはOpen Sansを指定しています。Playfair Displayは印刷物向けと説明されているため、Web見出しにセリフ体を必須とする根拠にはなりません。このプレビューではArialをフォールバックとして明示的に使用しています。本文の17pxや見出しのサイズはデモ用の設定であり、Forty-Twoのタイポグラフィトークンを創作したものではありません。 執筆ガイドでは、ページタイトル、セクション見出し、アンカーラベル、プロモーションタイトル、キャプションにセンテンスケースを使うことが推奨されています。人物ディレクトリにも適した方針です。宣伝文句よりも、明確な氏名、役職、研究内容の説明のほうが多くの情報を伝えられます。実際のサイトでは組織名を正確に表記し、プロフィールに確認できていない経歴を加えないでください。 関連する仕様を確認する ## Michigan Forty Two デザインシステムの人物情報と分類構造 ### 人物情報とフィルターラベルを分ける 公式のトレーニング用インデックスには、人物情報の設定、役職または研究分野の追加、そして2種類のフィルターレイアウト（クエリーソートとサイドバー）が掲載されています。これらの項目から、人物情報とその分類は、各一覧ページに手作業で重複配置するブロックではなく、管理対象のコンテンツであることが分かります。現在のプラグイン属性の正確な情報は公開情報から確認できなかったため、このガイドではショートコード名やクエリーキーを創作していません。 この独立したサンプルでは、各人物に役職と分野を1つずつ設定しています。両方のフィルターが同時に適用されます。この小規模なモデルでは、条件の積集合が分かりやすくなっています。「教員」と「ロボティクス」の組み合わせでは該当者がいませんが、「研究スタッフ」と「ロボティクス」では1人が表示されます。本番環境の分類体系はより複雑でも構いませんが、インターフェースを作る前にAND／ORの動作を明確にしてください。 ``` // Original local filter composition; not a Forty-Two plugin API. const matches = (person, role, area) => (role === 'all' || person.role === role) && (area === 'all' || person.area === area); // Apply both conditions; clearing one filter must preserve the other. // Announce the result count and offer recovery when the intersection is empty. ``` コードリファレンス 関連する仕様を確認する ## Michigan Forty Two デザインシステムの絞り込みと結果の再表示 ### 現在の選択状態を分かりやすく保つ フィルターを変更すると、表示中のプロフィールと結果件数を知らせるライブリージョンが更新されます。フォーカスはセレクトから移動しないため、キーボード利用者は操作欄に何度も戻らずに選択肢を比較できます。該当する結果がない場合は、組み合わせに一致する人物がいないことを伝え、いずれかの項目を変更するか、両方をクリアするよう案内します。 フィルターをクリアすると初期値と全プロフィールが復元され、最初のフィルターにフォーカスが戻ります。プロフィールの並び順は一定です。これにより、フィルターを変更するたびに人物が除外され、予期せず並び替えられるという、ディレクトリで起こりがちな問題を防ぎます。ここに記載されている氏名と説明は架空のもので、実在する大学での任用を示すものではありません。 1. 「研究スタッフ」を選び、ディレクトリが1件のプロフィールに絞り込まれることを確認してください。 2. 「教員」と「ロボティクス」を組み合わせ、結果がない場合の案内と再表示方法を確認してください。 3. 両方のフィルターをクリアし、3件すべてのプロフィールが元の順序で表示されることを確認してください。 関連する仕様を確認する ## Michigan Forty Two デザインシステムのブロック、パターン、保守 ### 保守されているパターンを選ぶ トレーニング用コンテンツ一覧には、専門家、イベント、クエリループ、最近の投稿、人物情報のパターンが含まれています。つながりのないテキストボックスを並べて見た目だけ似せるのではなく、コンテンツモデルに合ったパターンを使いましょう。人物情報のパターンを使うと、人物レコードと、それを表示するディレクトリとの関係を保てます。 旧式の「アコーディオン項目」は、非推奨として明記されています。過去のトレーニング資料に掲載されていても、新しい実装での使用を推奨するものではありません。既存ページで旧式のブロックが使われている場合は、置き換える前に最新のトレーニングサイトとサポート対象の保守手順を確認してください。表示方法を変更する際も、意味のあるコンテンツと既存のリンク先は維持してください。 - 人物レコード：氏名、役職、分野、プロフィールの内容は、サポート対象のコンテンツ構造に登録します。 - パターン：一覧またはプロモーションセクションには、現在のドキュメントに記載された構成を使います。 - ナビゲーション：ページの公開に付随するものではなく、保守対象のコンテンツとして導線を扱います。 関連する仕様を確認する ## Michigan Forty Two デザインシステムの実践的な編集ワークフロー ### 新しいページをサイトに接続する 公式の新規ページチェックリストには、ページを公開しただけでは利用者が見つけられるようにならない、と説明されています。親ページを割り当てたうえで、必要なヘッダー、サブナビゲーション、役職・研究分野のフィルター、フッターに接続してください。ドキュメントに記載された編集手順では、「外観」、「エディター」、「ナビゲーション」の順に開き、該当するメニューを選択してページを追加し、リストビューで位置を調整します。 承認済みのForty-Twoプロジェクトでは、この編集ワークフローが具体的な統合手順となります。この資料には、公開されているかのようなSDKコマンドを創作して掲載していません。セットアップブロックではサポート対象のホスティング方法を説明し、トレーニング資料へのリンクを掲載しています。完全なローカルコード例は、独立した学習用として別途明記されています。 関連する仕様を確認する ## Michigan Forty Two デザインシステムのアクセシビリティとブランドの利用制限 ### 既定のスタイルだけではコンテンツの適切さは保証されない エンジニアリングのアクセシビリティガイドによると、Forty-Twoの既定コンポーネントはアクセシブルなコントラストを備えるよう設計されています。ただし、色を変更するとそのメリットが損なわれる可能性があります。プロフィールのコンテンツにも、意味のある見出し、分かりやすいリンクラベル、適切な画像の代替テキスト、理解しやすい結果なしの表示が必要です。プレビューで確認できるのはレスポンシブレイアウトとフィルターの動作であり、組織の基準への準拠を認証するものではありません。 元のプレビューでは、Block M、大学のロゴ、実在するスタッフのデータを使用していません。大学のロゴは認証が必要なブランドチャネルを通じて配布されており、ここで使われている教育用の配色とは別のブランド体系に属します。実際のEngineeringサイトでは、サポート対象のブランドおよび公開手順に従ってください。独立したプロトタイプは、実際のサイトと誤認されないように明示してください。 関連する仕様を確認する ## Michigan Forty Two デザインシステムのコンポーネント例 ### 役職と分野を組み合わせる ドキュメントに記載されたディレクトリの考え方を具体化する、独自のローカル絞り込みルール。 ``` // Original local filter composition; not a Forty-Two plugin API. const matches = (person, role, area) => (role === 'all' || person.role === role) && (area === 'all' || person.area === area); // Apply both conditions; clearing one filter must preserve the other. // Announce the result count and offer recovery when the intersection is empty. ``` コードリファレンス ### 人物ディレクトリの解釈例一式 2つのフィルター、結果の通知、該当なしの場合の案内、リセット機能を備えています。 ``` Research collaborators
INDEPENDENT RESEARCH DIRECTORY

Find a collaborator

Explore fictional profiles by role and research area.

3 people

Avery Chen

Faculty

Studies ways to make community energy systems easier to understand and maintain.

Energy

Jordan Ellis

Research staff

Supports experiments in human-centred robotics and field testing.

Robotics

Samira Patel

Faculty

Explores how durable materials can support repair and reuse.

Materials
``` コードリファレンス ## Michigan Forty Two デザインシステムのAIエージェント設定 ### 実装の出発点 公開パッケージのインストールではなく、組織のテーマを採用する方法です。独立したHTMLのサンプルは完成しており、ローカルで実行できます。「ソース」にある完全な動作サンプルのZIPには、プレビューに必要な依存関係とドキュメント一式も含まれています。ZIPを展開し、そのディレクトリで python3 -m http.server 8080 を実行してから、http://localhost:8080/michigan-forty-two.html を開いてください。モジュールを使うサンプルを file:// で開かないでください。 ``` Supported institutional adoption: 1. Confirm the site is a Michigan Engineering department or unit project. 2. Arrange a Forty-Two WordPress site through Communications & Marketing or CAEN web publishing. 3. Use the Training site to select an existing block/pattern and create page stubs. 4. Build People content with the supported role/research-area structure and the current People pattern. 5. Connect the page to the intended navigation and filters in Appearance > Editor. 6. Preview real content, contrast and narrow layouts before publishing through the institution's process. Independent study: Open the complete HTML example below locally. It does not install or reproduce the institution's theme. ``` ### あなたのプロジェクト向けプロンプト ``` 認可されたMichigan Engineeringサイトでは、サポート対象のForty-Two WordPressテーマと最新のPeopleパターンを使用してください。役職と研究分野は管理対象の分類として扱い、ウェブ専用のパレットと文書化されたタイポグラフィを使用して、新しいページをナビゲーションに追加してください。独立したプロトタイプでは、独自の図形や実行環境であることを明記し、架空の人物を使い、大学のロゴは使用しないでください。複数条件を組み合わせた明確なフィルタリングと、結果がない場合の復帰手段を実装してください。 ``` ## Michigan Forty Two デザインシステムの情報源と対象範囲 独立したOpenDesignの解釈です。サポート対象のForty-Two WordPressテーマと、プラグインの正確な内部実装は含まれていません。プロフィールはすべて架空です。 - システムとホスティングの対象範囲 WordPressブロック、パターン、認可されたホスティング経路。 - ウェブカラー ウェブ専用パレットとコントラスト要件。 - タイポグラフィ Roboto、Open Sans、編集上の階層。 - トレーニング用の項目一覧 Peopleのフィルター、パターン、非推奨ブロック。 - 新規ページの作成手順 ナビゲーションとエディターの具体的な操作手順。 - コントラストに関するガイダンス デフォルトテーマとカスタムカラーの適用範囲。 - 文章作成の規則 文頭のみ大文字にする表記とCTAの規則。 - 動作サンプル一式をダウンロード 完全なHTML、ローカルのCSS／JavaScript依存関係、付属ライセンス、正確な起動手順を含むZIPです。ビルド手順は不要です。 ## Michigan Forty Two デザインシステム関連リソース ### Aksel Aksel v8 の実際の ax トークン、ネイティブのテーブル密度、セマンティックなヘッダー構造を使用します。ライトテーマとダークテーマを切り替えながら、架空のフォローアップ記録を並べ替え、選択できます。 ### NHS デザインシステム NHS.UK のタイポグラフィ、レスポンシブな余白、選択肢をグループ化したラジオボタン、状況に応じた詳細情報を使って、わかりやすい予約希望の入力画面を作成します。 ### NL デザインシステム 実際のコントリビューターコンポーネントと明示的なテーマを使って、公共サービスのインターフェースを構成します。このリファレンスでは、Utrecht CSSを使い、トークンのマッピング、データリストの構造、同じ編集ワークフローで使える2つの独自テーマを紹介します。 - [実装リファレンス](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [ソース](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/) - [ソース](https://cm.engin.umich.edu/our-brand/typography/) - [ソース](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [ソース](https://training.engin.umich.edu/) - [関連する仕様を確認する](https://cm.engin.umich.edu/our-brand/design-system-42/) - [関連する仕様を確認する](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/) - [関連する仕様を確認する](https://cm.engin.umich.edu/our-brand/typography/) - [コードリファレンス](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [関連する仕様を確認する](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [関連する仕様を確認する](https://training.engin.umich.edu/page-basics/new-page-checklist/) - [関連する仕様を確認する](https://accessibility.engin.umich.edu/color-contrast/) - [システムとホスティングの対象範囲 WordPressブロック、パターン、認可されたホスティング経路。](https://cm.engin.umich.edu/our-brand/design-system-42/) - [ウェブカラー ウェブ専用パレットとコントラスト要件。](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/) - [タイポグラフィ Roboto、Open Sans、編集上の階層。](https://cm.engin.umich.edu/our-brand/typography/) - [トレーニング用の項目一覧 Peopleのフィルター、パターン、非推奨ブロック。](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [新規ページの作成手順 ナビゲーションとエディターの具体的な操作手順。](https://training.engin.umich.edu/page-basics/new-page-checklist/) - [コントラストに関するガイダンス デフォルトテーマとカスタムカラーの適用範囲。](https://accessibility.engin.umich.edu/color-contrast/) - [文章作成の規則 文頭のみ大文字にする表記とCTAの規則。](https://sites.google.com/a/umich.edu/engcom-wiki/web/writing-best-practices/text-content)