01 Morningstar デザインシステム インターフェースプレビュー 2つのオリジナルの資産配分モデルを切り替え、アセットクラスごとの色を維持したまま、割合の順序を変更できます。
引用元を明記した過去のMDS資産配分カラーとシステムフォントを用いた、オフラインで動作するネイティブなHTML表現です。MDS Vueランタイム、独自の評価情報、リアルタイムの投資データは使用しません。·
実装リファレンス 02
Morningstar デザインシステム デザインリファレンス Vue 3の現行の採用状況と、2025年のIntrinsicガイダンスをまとめ、公開定数の参照先をバージョンごとに明記しています。Legacy v2.37の数値は過去の参考情報であり、現行のVue 3パッケージについて示すものではありません。このサンプルでは、引用した過去のチャートカラーと独自のアプリケーションレイアウトを使用しています。
名前 / ルール 値 / 設定 用途 UI scope@mdsコンポーネントは個別にバージョン管理されています。 Chart scope@mceチャート要素は個別にスコープされています。 Vue 3 packages-vue3 suffix対応する世代のライブラリを使用してください。 Registryartifacts.morningstar.com/repository/npm-prod-group/内部アクセスが必要です。 SassDart Sass / sass package提供されたコンポーネントスタイルをコンパイルしてください。 CSS Modules[local]___researchNotebookこれはアプリケーションの名前空間の例であり、公式に必須とされるサフィックスではありません。
名前 / ルール 値 / 設定 用途 TypefaceMorningstar Intrinsic承認済みのアセットは別途入手してください。 WeightsRegular and Bold現在サポートされているウェイトのファミリー。 Thin / Light / RegularMap to Intrinsic Regular旧ウェイト名は、新たに3種類のフォントファイルがあることを意味しません。 Bold / HeavyMap to Intrinsic Bold強調は意図的に使いましょう。 Vue 3 typography@mds/typography-vue3更新されたミックスイン。 Legacy monolith / MBCNo Intrinsic updates古いモノリシックパッケージを基盤に、新しい連携を構築しないでください。
テキストカラー — constants 3.3.0のスナップショット ソース 名前 / ルール 値 / 設定 用途 $mds-text-color-primary#1e1e1e 明るい背景上の主要なテキスト。 $mds-text-color-secondary#5e5e5e 明るい背景上の補助テキスト。 $mds-text-color-primary-on-dark#ffffff 暗い背景上の主要なテキスト。 $mds-text-color-secondary-on-dark#ababab 暗い背景上の補助テキスト。 $mds-text-color-interactive-primary#006fba インタラクティブなテキスト。リンクにはlink mixinを優先してください。 $mds-text-color-error#ca0000 フィードバック用の塗りつぶしとは区別されるエラーテキスト。
名前 / ルール 値 / 設定 用途 $mds-visualization-color-asset-allocation-equity#1f55a5 株式のチャートセグメント。 $mds-visualization-color-asset-allocation-fixed-income#ef7622 債券のチャートセグメント。 $mds-visualization-color-asset-allocation-cash#518428 現金のチャートセグメント。 $mds-visualization-color-asset-allocation-alternative#a50032 代替資産のセグメント。 $mds-visualization-color-asset-allocation-not-classified#e5e5e5 未分類のセグメント。ラベルを併記してください。
名前 / ルール 値 / 設定 用途 $mds-space-quarter-x2px過去の定数です。採用前に、インストール済みパッケージを確認してください。 $mds-space-half-x4px過去の定数です。採用前に、インストール済みパッケージを確認してください。 $mds-space-1-x8px過去の定数です。採用前に、インストール済みパッケージを確認してください。 $mds-space-1-and-a-half-x12px過去の定数です。採用前に、インストール済みパッケージを確認してください。 $mds-space-2-x16px過去の定数です。採用前に、インストール済みパッケージを確認してください。 $mds-space-3-x24px過去の定数です。採用前に、インストール済みパッケージを確認してください。 $mds-space-4-x32px過去の定数です。採用前に、インストール済みパッケージを確認してください。 $mds-space-6-x48px過去の定数です。採用前に、インストール済みパッケージを確認してください。
名前 / ルール 値 / 設定 用途 row-numbersBoolean on mds-tablemds-trに行番号を指定してください。 nested-headersNumber of levelsmds-thead-group-nスロットを使用してください。 multiselectionBoolean on mds-table全選択と一部選択の状態を区別してください。 mds-thead.indeterminateBoolean一部選択の状態を表します。 mds-tr.multiselection-labelRow-identifying text選択用チェックボックスに名前を付けます。 mds-pagination-page-changedPagination eventページ切り替えのロジックはアプリケーション側で実装します。
03 Morningstar デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
DESIGN-morningstar.md 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
ガイドをダウンロード Morningstar デザインシステム 比較可能な数値を軸にしたリサーチノートブック 正確な値はテーブルで確認できます オリジナルのサンプルには、架空の2つの資産配分モデル、積み上げバー、正確な値を示すテーブルが含まれています。視覚的なバーは構成比を示し、正式な値の確認にはテーブルを使用します。各モデルの合計は100%で、選択中のモデル名は見出しとテーブルキャプションの両方に表示されます。
並べ替えでは、分母やアセットクラスの色を変えずに、行の順序だけを変更します。独自の評価アイコンを読み解かなくても、配分の全体像から正確な割合を確認できます。これは具体的なリサーチ操作の例であり、Morningstarの実在しない製品や推奨を示すものではありません。
関連する仕様を確認する
Morningstar デザインシステム 定数には明確な役割とバージョン境界があります すべてのグレーをテキストトークンにしない MDSでは、役割に基づく定数と汎用カラーを区別しています。エンジニア向けガイドでは、テキストカラーと同じ視覚的な値をテキスト以外の要素に使う場合、汎用ニュートラルカラーを別に扱うよう明示しています。付属のSassの例では、テキストに読み取り用のカラーを使い、独自のテーブル罫線には汎用ニュートラルカラーを使用しています。
リファレンステーブルでは、それぞれのバージョン境界を維持しています。constants 3.3.0には引用したテキストカラーの値があり、公開されているv2.37アーカイブには過去の資産配分カラーとスペーシングの値があります。これらは既存のインターフェースを読み解く際には役立ちますが、現行のVue 3のすべての定数が同じ値に解決されることを示すものではありません。アーカイブされた数値を現行のデザイン要件として扱う前に、認可されたインストール済みパッケージを確認してください。
関連する仕様を確認する
Morningstar デザインシステム Morningstar Intrinsicにより実装の基準が変わります 2種類のウェイトファミリーと、連携するコンポーネントの更新 2025年のIntrinsicに関する発表では、従来のthin、light、regularがregularフォントに、boldとheavyがboldフォントに対応しています。font-familyの宣言を変更するだけでは、この移行を再現できません。発表では、フォントやタイポグラフィのパッケージを含むコンポーネントの更新も求められています。
旧morningstar-design-systemモノリスとMorningstar Base Chartsは、Intrinsicの更新対象ではありません。新しい例で、アーカイブされたインストール手順と現行のVue 3向け手順を組み合わせないでください。このオフラインのノートブックではシステムフォントを使用し、独自のフォントファイルは埋め込んでいません。
関連する仕様を確認する
Morningstar デザインシステム テーブルの機能は明示的に組み合わせます 選択、入れ子の見出し、ページネーションはそれぞれ別の役割です MDSでは、すべてのデータ操作を不透明な単一のグリッドにまとめるのではなく、テーブルの各要素を組み合わせて構成できます。ドキュメントに記載されたパターンでは、行番号、入れ子の見出し用スロット、複数選択、ページネーションを利用できます。データ変換と選択状態の管理は、引き続きアプリケーション側の責任です。
提示されている実装例では、定数ベースのスタイルを使ったネイティブテーブルを意図的に採用しています。ネイティブコンポーネントファミリーへ移行する際は、ドキュメントに記載されたMDSの構成リファレンスが引き続き役立ちます。一部だけが選択されている場合はヘッダーを不確定状態にし、各行のチェックボックスには行を識別できる複数選択ラベルを付けてください。
表示用に書式設定するまでは、パーセンテージを数値のまま保持してください。書式設定済みの文字列で並べ替えないでください。 数値列のヘッダーも、セルと同じ右揃えにしてください。 並べ替え後も資産ラベルを保持してください。インデックス位置は安定したレコード識別子ではありません。 関連する仕様を確認する
Morningstar デザインシステム 資産の色は汎用的な装飾ではありません 意味を固定し、同等のテキスト表現を用意する 過去の配分パレットでは、株式、債券、現金、オルタナティブ、未分類の項目を区別します。このサンプルでは、該当する3色を、モデルや行の順序が変わってもそれぞれの資産クラスに結び付けています。先頭にあるセグメントに応じて色が入れ替わることはありません。
テキストテーブルではすべての値を繰り返し表示するため、モデルを理解するのに青、オレンジ、緑を見分ける必要はありません。このサンプルでは、Morningstarの星、メダリスト、スタイルボックスの画像を使っていません。公式のアイコンリファレンスでは、知的財産権に関わるアイコンの用途を、定められた意味に限定しています。
関連する仕様を確認する
Morningstar デザインシステム 過去のスケールとアプリケーションのレイアウトを分ける 非表示の列がない、コンパクトな閲覧用画面 アーカイブには、8ピクセルを基本とし、4分の1刻みと2分の1刻みを用いるスペーシングが記録されています。このサンプルでは、過去のリファレンスを参考に、控えめな8/16/24/32のリズムを採用しています。全体の幅、積み上げ棒グラフの高さ、モバイル表示への切り替え幅は、公式の定数を装ったものではなく、アプリケーション独自の選択です。
テーブルの列は、資産クラス、パーセンテージ、比較バーの3つだけです。画面幅が狭い場合は、小さな比較バーを非表示にし、資産名と正確なパーセンテージを残します。モデルセレクターはデータの上に配置し、ラベルも常に表示します。ラベルのないアイコンだけのフィルターはありません。
関連する仕様を確認する
Morningstar デザインシステム アクセス範囲内で現行のパッケージ世代を採用する 製品のスタイルを設定する前に、実際のアセットを構成する 認可されたチームは、ドキュメントに記載された社内レジストリ、Vue 3のパッケージサフィックス、Sassの設定を使用できます。CSS モジュールはコンポーネントのスタイルをスコープ化するため、異なるバージョンを共存させられます。この例では製品固有の名前空間を使用しています。ホストされているフォントアセットは、それを使用するスタイルより先に設定してください。
公開プレビューでは、こうしたアクセスは必要ありません。これは、資産配分の操作を独立して完全に紹介するHTMLデモで、出典に基づく過去の配色と、明示的なシステムフォントのフォールバックを使用しています。別途示すVueの例は、定数ベースで導入する具体的な方法です。このページからレジストリやフォントにアクセスできるという意味ではありません。
承認済みの社内レジストリとフォントへのアクセスを確認し、上記のスコープ付きプロジェクト設定を作成してください。 アプリケーションのコンポーネントを読み込む前にSassのエントリーポイントをコンパイルし、完全なApp.vueの例をマウントしてください。 プレビューで資産配分モデルを切り替え、昇順と降順の両方で並べ替え、ラベル、値、合計が連動していることを確認してください。 関連する仕様を確認する
Morningstar デザインシステムのコンポーネント例 完全なスタンドアロンのインタラクティブ見本 ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。引用した過去のMDS資産配分カラーとシステムフォントを使った、オフラインで動作するネイティブなHTML実装です。MDS Vueランタイム、独自の格付け、ライブの投資データは含みません。
html コードをコピー
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Allocation notebook — MDS interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fff;color:#1e1e1e;font:16px/1.45 Arial,sans-serif}.app{max-width:1100px;margin:auto;padding:32px}.mast{border-bottom:2px solid #333;display:flex;justify-content:space-between;padding-bottom:16px;gap:16px}.mast b{letter-spacing:.06em}.mast span,.muted{color:#5e5e5e;font-size:13px}h1{font-size:36px;font-weight:400;line-height:1.2;margin:28px 0 10px}.intro{max-width:600px;color:#5e5e5e;margin:0 0 24px}.controls{background:#f2f2f2;display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:24px}select{font:inherit;padding:8px 32px 8px 10px;background:white;border:1px solid #808080;border-radius:2px}button:focus-visible,select:focus-visible{outline:3px solid #006fba;outline-offset:3px}.chart{display:grid;grid-template-columns:1fr 90px;gap:24px;align-items:center;margin:28px 0 32px}.stack{display:flex;height:42px;overflow:hidden}.segment{min-width:0}.total{text-align:right;font-size:30px}.total small{display:block;font-size:11px;color:#5e5e5e}.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;margin-top:12px}.legend i{display:inline-block;width:8px;height:8px;margin-right:6px}table{width:100%;border-collapse:collapse}caption{text-align:left;font-size:20px;padding-bottom:12px}th,td{padding:16px 8px;border-bottom:1px solid #e5e5e5;text-align:left;font-weight:400}thead th{border-top:2px solid #333;border-bottom:1px solid #808080;font-size:13px}.numeric{text-align:right;font-variant-numeric:tabular-nums}.sort{border:0;background:none;color:#006fba;cursor:pointer;padding:0;font:inherit;text-align:right}.spark{width:35%}.track{height:6px;background:#f2f2f2}.fill{height:6px}.status{font-size:12px;min-height:20px;color:#5e5e5e}.foot{margin-top:32px;padding-top:16px;border-top:1px solid #ccc;font-size:12px;color:#5e5e5e}@media(max-width:600px){.app{padding:20px}.mast{flex-direction:column;gap:4px}h1{font-size:30px}.controls{align-items:flex-start;flex-direction:column;gap:8px}.chart{grid-template-columns:1fr 70px;gap:12px}.spark{display:none}.numeric{width:35%}th,td{padding:16px 4px}.legend{gap:10px}}</style><main class="app"><header class="mast"><b>RESEARCH NOTEBOOK</b><span>Independent MDS interpretation</span></header><h1>One model. Every allocation.</h1><p class="intro">Read the mix at a glance, then inspect the exact numbers. These two original models are fictional.</p><div class="controls"><label for="model">Sample model</label><select id="model"><option value="balanced">Balanced sample</option><option value="reserve">Reserve sample</option></select><span class="muted">No market data or investment recommendation</span></div><div class="chart"><div><div class="stack" id="stack" aria-hidden="true"></div><div class="legend"><span><i style="background:#1f55a5"></i>Equity</span><span><i style="background:#ef7622"></i>Fixed income</span><span><i style="background:#518428"></i>Cash</span></div></div><div class="total">100<small>PERCENT TOTAL</small></div></div><table><caption id="caption">Balanced sample allocation</caption><thead><tr><th scope="col">Asset class</th><th scope="col" id="sorthead" class="numeric" aria-sort="descending"><button class="sort" id="sort">Allocation (%) ↓</button></th><th scope="col" class="spark">Share of model</th></tr></thead><tbody id="rows"></tbody></table><p class="status" id="status" role="status">Sorted by allocation, highest first.</p><p class="foot">Historical MDS v2.37 allocation colors; original application layout and system-font fallback. No Morningstar ratings, proprietary font assets or native Vue components are included.</p></main><script>const models={balanced:[55,35,10],reserve:[20,45,35]},assets=[{name:'Equity',color:'#1f55a5'},{name:'Fixed income',color:'#ef7622'},{name:'Cash',color:'#518428'}];let ascending=false;const model=document.querySelector('#model');function render(){const entries=assets.map((a,i)=>({...a,value:models[model.value][i]}));document.querySelector('#stack').innerHTML=entries.map(a=>`<div class="segment" style="width:${a.value}%;background:${a.color}"></div>`).join('');document.querySelector('#caption').textContent=model.selectedOptions[0].textContent+' allocation';document.querySelector('#rows').innerHTML=[...entries].sort((a,b)=>ascending?a.value-b.value:b.value-a.value).map(a=>`<tr><th scope="row">${a.name}</th><td class="numeric">${a.value.toFixed(1)}%</td><td class="spark"><div class="track"><div class="fill" style="width:${a.value}%;background:${a.color}"></div></div></td></tr>`).join('');document.querySelector('#sorthead').setAttribute('aria-sort',ascending?'ascending':'descending');document.querySelector('#sort').textContent='Allocation (%) '+(ascending?'↑':'↓');document.querySelector('#status').textContent='Sorted by allocation, '+(ascending?'lowest first.':'highest first.')}model.onchange=render;document.querySelector('#sort').onclick=()=>{ascending=!ascending;render()};render();</script></html>
コードリファレンス
資産配分の値は架空です。並べ替え後も資産の色はカテゴリに対応した意味を保ちます。このドキュメントには、独自のMDS VueアセットやIntrinsicフォントは埋め込まれていません。 分母を明示した、並べ替え可能な完全なテーブル Vue 3のテーブルでは、ネイティブのセマンティクスと、上記のMDSのビジュアル言語設定を使用しています。並べ替えでは数値を保持し、順序を表示します。
vue コードをコピー
<!-- src/App.vue — native table styled with MDS constants, not MdsTable -->
<script setup>
import {computed,ref} from 'vue';
const ascending=ref(false);
const rows=[{name:'Sample Equity',allocation:55},{name:'Sample Bonds',allocation:35},{name:'Sample Cash',allocation:10}];
const sorted=computed(()=>[...rows].sort((a,b)=>ascending.value?a.allocation-b.allocation:b.allocation-a.allocation));
</script>
<template>
<main><h1>Research notebook</h1><p>Fictional allocation; not an investment recommendation.</p>
<table><caption>Sample allocation, total 100%</caption><thead><tr><th scope="col">Asset</th><th scope="col" class="numeric" :aria-sort="ascending?'ascending':'descending'"><button type="button" @click="ascending=!ascending">Allocation (%) {{ascending?'↑':'↓'}}</button></th></tr></thead>
<tbody><tr v-for="row in sorted" :key="row.name"><th scope="row">{{row.name}}</th><td class="numeric">{{row.allocation.toFixed(1)}}%</td></tr></tbody></table>
<p role="status">Sorted by allocation, {{ascending?'lowest first':'highest first'}}.</p></main>
</template> コードリファレンス
MDSでは、チームがVueコンポーネントを使わずに、定数やビジュアル言語を調整できます。 この例では、MdsTableのインポートやドキュメントにない並べ替えイベントを意図的に作っていません。 55/35/10の配分は架空のもので、合計は100です。市場データではありません。 文字のスケールと見出しのセマンティックなレベルを分ける 公式ミックスインを使うと、文書上の意味を変えずに、h1をレベル2の視覚的なスケールでスタイリングできます。
scss コードをコピー
@use '@mds/constants-vue3' as *;
@use '@mds/typography-vue3' as *;
h1 { @include mds-level-2-heading($bold:true); color:$mds-text-color-primary; }
p { @include mds-body-text-m(); color:$mds-text-color-primary; } コードリファレンス
タイポグラフィのミックスインはテキストの色を設定しません。 MDSの上書きがチャートにも反映されると想定せず、チャート要素には別途スコープを設定したMCE定数を使用してください。 04
Morningstar デザインシステム AIエージェントの設定 実装の出発点 認可されたチーム向けの、制限付きレジストリ設定です。フォントのパスには、ライセンスを取得し、アプリケーションが実際にホストしているファイルを指定してください。下のApp.vueと組み合わせて使用します。これは定数ベースのネイティブなHTMLテーブルであり、MDSパッケージが一般公開されている、またはネイティブコンパイルが検証済みであることを示すものではありません。
shell / javascript / scss サンプルをコピー
# Authorized Morningstar teams only: project .npmrc
@mds:registry=https://artifacts.morningstar.com/repository/npm-prod-group/
@mce:registry=https://artifacts.morningstar.com/repository/npm-prod-group/
# Within a Vite Vue 3 project with approved registry access
pnpm add @mds/constants-vue3 @mds/typography-vue3 @mds/fonts-vue3
pnpm add -D sass
// vite.config.js
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins:[vue()],
css:{modules:{generateScopedName:'[local]___researchNotebook'}}
});
// src/main.js
import {createApp} from 'vue';
import './main.scss';
import App from './App.vue';
createApp(App).mount('#app');
// src/main.scss — host licensed font files at this application path first
@use '@mds/fonts-vue3/scss/config' with ($font-path:'/fonts/morningstar-intrinsic');
@use '@mds/fonts-vue3';
@use '@mds/constants-vue3' as *;
@use '@mds/typography-vue3' as *;
h1 { @include mds-level-2-heading($bold:true); color:$mds-text-color-primary; }
p,td,th { @include mds-body-text-m(); color:$mds-text-color-primary; }
main { margin:$mds-space-4-x; }
table { width:100%;border-collapse:collapse; }
th,td { text-align:left; border-bottom:1px solid $mds-color-neutral-37; }
.numeric { text-align:right;font-variant-numeric:tabular-nums; }
button { font:inherit;cursor:pointer; }
あなたのプロジェクト向けプロンプト AI エージェント用プロンプト プロンプトをコピー
このガイドに記載された明確なバージョン境界に沿って、Morningstarに着想を得たリサーチノートを作成してください。正確な資産配分値はセマンティックなテーブルに記載し、色は各資産の意味に固定してください。格付けを作り出したり、知的財産権に関わるアイコンを装飾として使ったりしないでください。現行の認可済みVue 3の定数・フォント設定は、承認されたアクセスがある場合にのみ使用してください。それ以外の場合は、オフライン実装であることを明確に示してください。 05
Morningstar デザインシステム 出典と適用範囲 独立したOpenDesignガイドです。資産配分の例は架空のもので、金融アドバイスではありません。過去の数値定数には出典のバージョンを明記しています。現行のパッケージおよびフォントへのアクセスは、引き続きMorningstarの管理下にあります。
