01 Maersk デザインシステム インターフェースプレビュー オリジナルのサンプル参照を2件検索し、経路履歴を確認して、不正なクエリと見つからないレコードを見分けます。
マースクのライトテーマのロールと余白に関する公開ドキュメントをもとにした、オフラインで動作するネイティブなHTMLの解釈です。非公開のMDSランタイム、ブランドフォントファイル、リアルタイムの貨物接続は使用していません。 ·
実装リファレンス 02
Maersk デザインシステム デザインリファレンス 公開されているMDSの基盤とコンポーネントの使用方法に関するドキュメントです。ネイティブコンポーネントのパッケージは非公開のマースクレジストリで提供されています。実行可能なサンプルでは、独自のmc-* APIではなく、ネイティブなHTMLと公開済みのトークンスナップショットを使用しています。
名前 / ルール 値 / 設定 用途 --mds_brand_appearance_primary_default_background-color#141414 プライマリの塗りつぶしアクション。 --mds_brand_appearance_primary_default_on-background-color#FFFFFF プライマリの塗りつぶし背景上のテキスト。 --mds_brand_appearance_primary_default_link-color#0077B2 リンクテキスト。 --mds_brand_appearance_secondary_default_background-color#42B0D5 ブランドのセカンダリ塗りつぶし。 --mds_brand_appearance_secondary_default_on-background-color#141414 セカンダリの塗りつぶし背景上のテキスト。 --mds_brand_appearance_secondary_weak_background-color#E2F3F9 控えめなセカンダリサーフェス。 --mds_brand_appearance_neutral_default_border-color#D4D4D4 標準の境界線。 --mds_brand_appearance_neutral_weakest_text-color#6A6A6A 補助テキスト。 --mds_brand_appearance_neutral_weakest_background-color#F7F7F7 控えめなページサーフェス。
名前 / ルール 値 / 設定 用途 --mds_brand_typography_text_font-familyMaersk Textブランド標準の書体。 text_large desktop/mobile18px / 28px line heightどちらのプラットフォームでも同じ。 text_medium desktop/mobile16px / 24px line height標準の本文サイズ。 text_small desktop/mobile14px / 20px line heightコンパクトなメタデータ。 text_x-small desktop/mobile12px / 16px line heightリファレンスで最小のサイズ。 normal / light / medium / semibold / bold400 / 300 / 500 / 600 / 700ドキュメントに記載された文字の太さ。
名前 / ルール 値 / 設定 用途 headline_large desktop50px / 56px, weight 300大きなディスプレイ見出し。 headline_large mobile38px / 38px, weight 300モバイル向けのサイズ。 headline_medium desktop40px / 40px, weight 300ページ見出し。 headline_medium mobile26px / 32px, weight 300モバイルのページ見出し。 headline_small desktop26px / 32px, weight 400セクション見出し。 headline_small mobile22px / 26px, weight 400モバイルのセクション見出し。 headline_x-small desktop/mobile20px / 24px, weight 400小見出し。
名前 / ルール 値 / 設定 用途 radius-xs2px小さな入れ子要素。 radius-sm4pxチェックボックスサイズの要素。 radius-md6pxボタンと入力欄。 radius-lg8px通知とテーブル。 radius-xl12pxコントロールを内包するカード。 radius-2xl16px大きな画像とダイアログ。 radius-full9999px完全な円形。
名前 / ルール 値 / 設定 用途 Base rhythm4px multiplesパディング、マージン、間隔。 Fine component exceptions2px, 6px, 10px小さなコンポーネントの配置調整。 Responsive dimensionsNot required to be divisible by 4隣接する要素間の間隔は、リズムに沿って保つ。
名前 / ルール 値 / 設定 用途 Primary actionPrimary + Filledメインのアクションは1つにする。 Secondary actionNeutral + Outlined開いたフォーム内の補助アクション。 Tertiary actionNeutral + Plainクリア、リセット、または繰り返し表示する開示要素。 Secondary in a dialogNeutral + Filledアウトライン同士が競合しないようにする。 Brand hero exceptionSecondary + Filledフォームの標準アクションにはしない。
03 Maersk デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
DESIGN-maersk.md 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
ガイドをダウンロード Maersk デザインシステム 公開されているルールと非公開コンポーネントは別のリソースです 導入方法は実情に即して選ぶ MDSでは基盤と使用方法に関する幅広いガイダンスが公開されていますが、開発者ガイドによると、パッケージは非公開のMaersk Global GitHub PackagesおよびNexusリポジトリで提供されています。コンポーネントのページを読んでも、パッケージやフォントの配布権が得られるわけではありません。
利用が許可されたチームは、社内環境に対応するパッケージとStorybookを使用してください。この公開リファレンスでは、架空の公開インストールコマンドを用意する代わりに、表示ルールを完全に実装したネイティブなHTMLを提供しています。非公開の依存関係なしで動作を確認できます。
ネイティブパッケージを選ぶ前に、社内レジストリへのアクセスを確認してください。 コンポーネントのドキュメントとインストール済みのリリースを一致させてください。 非公開の依存関係なしで公開情報を確認するには、オリジナルのHTMLサンプルを使用してください。 関連する仕様を確認する
Maersk デザインシステム ブランドカラーを見分ける前に、用途を確認する ライトテーマでは、プライマリアクションに暗い色を使う マースクブルーは見分けやすい色ですが、ライトテーマのプライマリ塗りつぶしロールには#141414を使い、前景のテキストには白を使います。セカンダリ塗りつぶしロールは#42B0D5で、テキストには暗い色を使います。この使い分けにより、すべてのコントロールが鮮やかなブランドカラーになるのを防げます。
サンプルでは、メインの検索アクションに暗いプライマリロールを使用しています。淡いセカンダリサーフェスで経路の検証部分を囲み、ニュートラルな境界線で補助レコードを整理しています。トークン名には、階層、項目、バリアント、プラットフォーム、状態、属性が含まれるため、テーマを変更しても用途がわかります。
関連する仕様を確認する
Maersk デザインシステム 見出しの個性と読みやすさに関わる文字密度を分けて考える デスクトップとモバイルそれぞれの実際のサイズを使う Maersk HeadlineとMaersk Textは、それぞれ異なる用途に使います。中サイズの見出しはデスクトップでは40/40、モバイルでは26/32に変わりますが、中サイズの本文テキストは16/24のままです。すべてのテキストスタイルに同じ比率の拡大縮小を適用すると、この意図的な違いが失われます。
オリジナルのプレビューでは、ブランドフォントファイルを再配布しないようArialを使用しています。文字サイズの階層はドキュメントに従い、軽い印象のページタイトル、わかりやすいセクションラベル、読みやすい14pxのイベントメタデータで構成しています。リファレンスの識別子は選択可能なテキストとして表示し、先頭のゼロを確認したり、文字列をそのままコピーしたりできます。
関連する仕様を確認する
Maersk デザインシステム 情報を省くのではなく、余白で密度を調整する コンパクトな業務用画面でも情報間の関係を保つ MDSでは、コンポーネントの細かな配置調整に4ピクセル刻みの余白を使い、2、6、10pxの例外も設けています。密度トークンではDefault、Compact、Spaciousの各モードに対応しますが、パッケージ固有の密度値が確認できない場合は、名称から推測しないでください。
このサンプルでは、8pxと16pxの間隔でラベル、イベント、メタデータをまとめ、24pxと32pxで大きな領域を区切っています。画面幅が狭い場合は、経路とイベント履歴を縦に並べます。小さなスクリーンショットをすっきり見せるために情報を省くことはありません。
関連する仕様を確認する
Maersk デザインシステム 外側のコンテナには、内側のコントロールを配置する余裕が必要 角丸の段階で入れ子構造を表す カードには12px、ボタンと入力欄には6px、大きな画像やダイアログには16pxを基準として使用します。角丸のガイドラインでは、コンポーネントの内側に別のコンポーネントが入る場合、外側の角丸を大きくするよう明示されています。
サンプルでは、ルート図を角丸カードの中に配置し、検索欄はより小さな角丸にしています。ここでの境界線は構造を区切るもので、すべてのテキスト行を装飾的な枠で囲むものではありません。ドキュメントに記載されたグローバルな境界線は、1pxの実線です。
関連する仕様を確認する
Maersk デザインシステム 出荷番号は識別子であり、数量ではありません 数値入力によって参照番号が変わらないようにする MDSの入力ガイドラインでは、数量と、コンテナ番号や参照番号などの識別子を区別しています。数値入力では、先頭のゼロが削除されたり、誤操作で値が変わったりすることがあります。そのため、このサンプルではtype="text"とinputmode="numeric"を使用し、キーを文字列としてそのまま保持します。
6桁という形式は、このサンプル独自の制約であり、Maerskの出荷番号の仕様ではありません。空欄や形式が正しくない入力には個別の修正メッセージを表示し、形式は正しいものの該当する参照がない場合は、別の「一致するものがありません」という結果を表示します。これらの結果を曖昧な「無効」エラーにまとめてはいけません。
ラベルは入力欄の上に配置します。 識別番号はすべての桁を文字列として保持します。 aria-describedbyで書式の説明とエラーテキストを関連付けます。 aria-invalidを設定するのは書式エラーの場合のみとし、形式が正しいものの該当する記録がない場合は設定しません。 関連する仕様を確認する
Maersk デザインシステム メインの検索操作とサンプルのショートカットを区別する 具体的な結果が伝わる、文頭を大文字にしない動詞表現を使う 「出荷情報を表示」は、塗りつぶしで示す唯一のアクションです。サンプル参照へのショートカットは控えめに表示し、複数の主要ボタンとして競合させず、同じ検索欄に値を入力します。フォームを開いたとき、キーボード操作と読み上げの順序では、主要アクションを補助アクションより前に配置します。
プレビューでは、選択したサンプルのイベント履歴を順序付きリストで表示します。イベントラベルにステータスがテキストで示されるため、青いマーカーと線は補助的な要素です。この記録は架空のものであり、ETAやルートを実際の運航情報として表示するものではありません。
関連する仕様を確認する
Maersk デザインシステム ダークテーマには独自のセマンティック値が必要 スクリーンショットを単純に反転しない 公開されているダークテーマの表では、主要テキストを#F0F0F0、主要な塗りつぶしを白に変更し、中立的なキャンバスを#141414にしています。これらは意図的な役割の割り当てであり、すべてのRGB値を反転する指示ではありません。
このサンプルでは、ドキュメントに記載されたライトテーマを使用しています。ダークモードに対応するには、ホバー、境界線、背景上の色も含め、役割の値を一貫して置き換える必要があります。その場合、元のルート図には全体へのフィルター適用を引き継がず、個別にコントラストを確認する必要があります。
関連する仕様を確認する
Maersk デザインシステムのコンポーネント例 完全なスタンドアロンのインタラクティブ見本 ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。ドキュメントに記載されたMaerskのライトテーマのカラーと間隔を使用した、オフラインで動作するオリジナルのネイティブHTML実装です。非公開のMDSランタイム、ブランドフォントファイル、実際の出荷情報との接続は含まれていません。
html コードをコピー
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Sample shipment lookup</title><style>*{box-sizing:border-box}body{font:16px/24px Arial,sans-serif;background:#f7f7f7;color:#141414;margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #0077b2;outline-offset:3px}header{background:#fff;padding:20px 32px;display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #d4d4d4}header b{font-weight:500;letter-spacing:1px}header span{font-size:12px;color:#6a6a6a}main{max-width:1120px;margin:auto;padding:32px}h1{font-size:40px;line-height:40px;font-weight:300;margin:8px 0 16px}p{margin:0 0 16px}.subtitle{color:#6a6a6a}.search{background:#fff;border:1px solid #d4d4d4;padding:24px;border-radius:12px;margin:24px 0}.search label{display:block;margin-bottom:8px}.entry{display:flex;gap:8px}.entry input{border:1px solid #8a8a8a;border-radius:6px;padding:12px 16px;max-width:360px;min-width:0;width:100%;background:#fff;color:#141414}.entry button{border:0;background:#141414;color:#fff;border-radius:6px;padding:12px 24px}.hint{font-size:14px;color:#6a6a6a;margin:8px 0 0}.error{color:#b80012;margin:8px 0 0}.error:empty{display:none}.layout{display:grid;grid-template-columns:250px 1fr;gap:24px}aside{background:#fff;border-radius:12px;border:1px solid #d4d4d4;padding:24px}aside h2{font-size:20px;line-height:24px;font-weight:400;margin:0 0 16px}.record{display:block;text-align:left;background:none;border:0;border-top:1px solid #e2e2e2;padding:16px 0;width:100%;color:#141414}.record strong,.record small{display:block}.record strong{font-size:16px;font-weight:500}.record small{color:#6a6a6a;font-size:12px;margin-top:4px}.record[aria-pressed=true]{color:#0077b2}.record[aria-pressed=true] strong:after{content:' →'}.detail{background:#fff;border:1px solid #d4d4d4;border-radius:12px;padding:24px;min-width:0}.detail h2{font-size:26px;line-height:32px;font-weight:400;margin:0}.topline{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}.tag{font-size:12px;border-radius:4px;background:#e2f3f9;color:#141414;padding:4px 8px;align-self:start;white-space:nowrap}.route{height:148px;border-radius:12px;background:#e2f3f9;display:flex;align-items:center;justify-content:space-between;padding:24px;position:relative;gap:16px}.port{position:relative;z-index:1;font-size:14px;max-width:40%}.port b{display:block;font-size:20px;line-height:24px;font-weight:400}.port:last-child{text-align:right}.route:before{content:'';height:2px;background:#42b0d5;position:absolute;left:24px;right:24px;top:52%}.port{background:#e2f3f9;padding:8px}.history{list-style:none;margin:24px 0 0;padding:0}.history li{position:relative;padding:0 0 24px 28px;border-left:2px solid #d4d4d4;margin-left:5px}.history li:last-child{padding-bottom:0;border-color:transparent}.history li:before{content:'';position:absolute;left:-6px;top:7px;width:10px;height:10px;background:#42b0d5;border-radius:50%}.history b{font-weight:500;display:block}.history small{font-size:14px;line-height:20px;color:#6a6a6a;display:block;margin-top:4px}.notice{padding:32px 0;max-width:430px}footer{font-size:12px;line-height:16px;color:#6a6a6a;margin-top:24px}@media(max-width:650px){header{padding:16px}header span{max-width:115px}main{padding:24px 16px}h1{font-size:26px;line-height:32px}.layout{grid-template-columns:1fr}aside{padding:16px}.record{padding:12px 0}.search,.detail{padding:20px}.entry{flex-wrap:wrap}.entry input{max-width:none}.entry button{width:100%}.topline{flex-wrap:wrap}.route{padding:8px}.port b{font-size:18px}.route:before{left:16px;right:16px}}
</style><header><b>CARGO / WORKSPACE</b><span>Independent MDS interpretation</span></header><main><h1>Follow the next milestone.</h1><p class="subtitle">A reference lookup and event history, using original sample records.</p><form id="lookup" class="search" novalidate><label for="reference">Shipment reference</label><div class="entry"><input id="reference" type="text" inputmode="numeric" value="000042" required aria-describedby="hint error"><button type="submit">Show shipment</button></div><p class="hint" id="hint">Try 000042 or 000108. Keep the leading zeros.</p><p class="error" id="error" role="alert"></p></form><div class="layout"><aside><h2>Sample shipments</h2><button class="record" data-id="000042" aria-pressed="true"><strong>000042</strong><small>Rotterdam → Singapore</small></button><button class="record" data-id="000108" aria-pressed="false"><strong>000108</strong><small>Hamburg → New York</small></button></aside><section class="detail" id="result" aria-live="polite"></section></div><footer>All references, routes and events are fictional. No live tracking, shipment status or transport commitment is represented.</footer></main><script>const data={'000042':{from:'Rotterdam',to:'Singapore',status:'In transit',events:[['Booking received','Sample milestone 1 · Reference created'],['Loaded at origin','Sample milestone 2 · Origin handling complete'],['In transit','Sample milestone 3 · Next event pending']]},'000108':{from:'Hamburg',to:'New York',status:'Awaiting handover',events:[['Booking received','Sample milestone 1 · Reference created'],['Awaiting origin handover','Sample milestone 2 · Cargo handover pending']]}};const input=document.querySelector('#reference'),result=document.querySelector('#result'),error=document.querySelector('#error');function resetError(){error.textContent='';input.setAttribute('aria-invalid','false')}function show(){resetError();const id=input.value.trim();document.querySelectorAll('.record').forEach(x=>x.setAttribute('aria-pressed',String(x.dataset.id===id)));result.replaceChildren();if(!/^\d{6}$/.test(id)){error.textContent='Use a six-digit sample reference, including leading zeros.';input.setAttribute('aria-invalid','true');input.focus();result.innerHTML='<p class="notice">Correct the reference to view a sample event history.</p>';return}const r=data[id];if(!r){result.innerHTML='<h2>No sample shipment found</h2><p class="notice">This reference does not match the two sample records. Try 000042 or 000108.</p>';return}result.innerHTML=`<div class="topline"><h2>Shipment ${id}</h2><span class="tag">${r.status}</span></div><div class="route"><div class="port"><small>ORIGIN</small><b>${r.from}</b></div><div class="port"><small>DESTINATION</small><b>${r.to}</b></div></div><ol class="history">${r.events.map(([a,b])=>`<li><b>${a}</b><small>${b}</small></li>`).join('')}</ol>`}document.querySelector('#lookup').onsubmit=e=>{e.preventDefault();show()};document.querySelectorAll('.record').forEach(x=>x.onclick=()=>{input.value=x.dataset.id;show()});input.oninput=()=>{resetError();document.querySelectorAll('.record').forEach(x=>x.setAttribute('aria-pressed','false'));result.innerHTML='<p class="notice">Select Show shipment to look up the edited reference.</p>'};show();</script></html>
コードリファレンス
検索できるのは、含まれているサンプルの出荷参照番号のみです。完全一致によって識別子を保持します。このドキュメントには、非公開のMaerskコンポーネントも追跡機能も含まれていません。 出荷参照番号はテキストとして保持する ネイティブフォームでMDSの入力ガイドラインに従い、公開されているトークンの役割を使用します。サンプルデータは完全一致で照合するため、先頭のゼロを保持し、形式エラーと該当する記録がない場合を区別します。
html コードをコピー
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>Sample shipment lookup</title><style>
/* Local snapshot of documented Maersk light roles; not an MDS package import. */
:root{--mds_brand_appearance_primary_default_background-color:#141414;
--mds_brand_appearance_primary_default_on-background-color:#fff;
--mds_brand_appearance_neutral_default_border-color:#d4d4d4;
--mds_brand_appearance_secondary_weak_background-color:#e2f3f9}
body{font:16px/24px Arial,sans-serif;color:#141414;margin:32px}
main{max-width:48rem;margin:auto}label{display:block;margin-bottom:8px}
input,button{font:inherit;padding:12px 16px;border-radius:6px}
input{border:1px solid var(--mds_brand_appearance_neutral_default_border-color);max-width:100%;box-sizing:border-box}
button{border:0;background:var(--mds_brand_appearance_primary_default_background-color);color:var(--mds_brand_appearance_primary_default_on-background-color)}
.actions{display:flex;gap:8px;flex-wrap:wrap}li{padding:12px 0}#error{color:#b80012}#result{margin-top:24px;padding:24px;border-radius:12px;background:var(--mds_brand_appearance_secondary_weak_background-color)}
</style><main><h1>Find a sample shipment</h1>
<form id="lookup" novalidate><label for="reference">Shipment reference</label>
<p id="hint">Try 000042 or 000108. These are original sample records.</p>
<div class="actions"><input id="reference" type="text" inputmode="numeric" value="000042" aria-describedby="hint error" required>
<button type="submit">Show shipment</button></div><p id="error" role="alert"></p></form>
<section id="result" aria-live="polite"></section></main>
<script>
const shipments={'000042':{route:'Rotterdam → Singapore',events:['Booking received','Loaded at origin','In transit']},'000108':{route:'Hamburg → New York',events:['Booking received','Awaiting origin handover']}};
const input=document.querySelector('#reference'),result=document.querySelector('#result'),error=document.querySelector('#error');
function lookup(e){e.preventDefault();const id=input.value.trim();error.textContent='';input.setAttribute('aria-invalid','false');result.replaceChildren();
if(!/^\d{6}$/.test(id)){error.textContent='Use a six-digit sample reference, including leading zeros.';input.setAttribute('aria-invalid','true');input.focus();return;}
const record=shipments[id];if(!record){result.textContent='No sample shipment matches this reference. Try 000042 or 000108.';return;}
const heading=document.createElement('h2');heading.textContent=id+' · '+record.route;
const list=document.createElement('ol');record.events.forEach(x=>{const li=document.createElement('li');li.textContent=x;list.append(li)});
result.append(heading,list);
}
document.querySelector('#lookup').addEventListener('submit',lookup);
input.addEventListener('input',()=>{error.textContent='';input.setAttribute('aria-invalid','false');result.replaceChildren();});
</script></html> コードリファレンス
type="text"は識別番号の各桁を保持し、inputmodeはキーボードを指定するためのヒントにすぎません。 表示ラベル、常時表示のヒント、関連付けられたエラーには、それぞれ異なる役割があります。 このコードはオリジナルの実装であり、非公開のMDS InputコンポーネントではありませんAPI。 04
Maersk デザインシステム エージェントのセットアップ 実装の出発点 公開されている開発者向けページには、非公開レジストリへのアクセス方法が記載されています。入手できないコードスニペットから、正確なネイティブインポートやイベントシグネチャを捏造することは避けています。提供されるHTMLは、公開されている基盤をもとにした、完全に動作する解釈例です。
テキスト サンプルをコピー
Native MDS adoption (authorized Maersk teams):
1. Obtain access to Maersk Global GitHub Packages or the private Nexus registry.
2. Use the corporate authentication and SSO flow in the official developer guide.
3. Install the approved component or core package and its documented token/font dependencies.
4. Read exact component properties and events in the MDS Storybook for that installed release.
Public reference specimen:
Save the complete HTML example as index.html and open it in a browser.
It requires no registry, external script or private asset.
Its token declarations are a local light-theme snapshot; they do not initialize MDS Web Components. あなたのプロジェクト向けプロンプト AI エージェント用プロンプト プロンプトをコピー
ドキュメントに記載されたライトテーマのカラー、濃色の主要アクション、4px単位の間隔、6pxの入力欄の角丸、12pxのカードを使用して、Maerskに着想を得た業務用検索画面を作成してください。出荷識別子はテキストとして保持し、形式不正の入力と該当する記録がない場合を区別し、イベント履歴は順序付きリストで表示してください。公開パッケージへのアクセスや非公開コンポーネントのAPIを捏造しないでください。 05
Maersk デザインシステム 出典と対象範囲 独立したOpenDesignの参考例です。MDSのネイティブパッケージを利用するには、認可された企業向けアクセスが必要です。プレビューに含まれる出荷識別子、ルート、イベントはすべて架空のサンプルデータであり、追跡サービスへの呼び出しは行いません。
