はじめに 🌟
Link は地味な部品に見えますが、実際には「押す」ではなく「移動する」を伝えるための重要な要素です。
ボタンと見た目が近い場面でも、役割を取り違えると、操作の意味がぶれたり、支援技術での理解が難しくなったりします。
Fluent UI 2 の Link は、単にリンクを表示するだけではありません。リンクらしく見えること、文脈から切り出しても意味が通ること、新しい文脈へ移動するなら事前に分かることまで含めて設計されています。特に、本文中リンク、subtle link、新しいタブを開くリンクは、見た目より先に情報設計の判断が問われやすいです。
本記事では、まず Fluent UI 2 とは何かを Link の文脈で整理します。
そのうえで、Fluent UI 2 の Link と Fluent UI Blazor 5 の FluentLink の違い、種類、レイアウト、アクセシビリティ、コンテンツの考え方を順番に見ていきます。
参照した公式情報はこちらです。
今回のゴール ✅
- ✅ Fluent UI 2 における
Linkの役割を理解する - ✅ これまでの Fluent UI 2 シリーズ全体の流れを把握する
- ✅ Fluent UI 2 と Fluent UI Blazor 5 の Link の違いを整理する
- ✅ 種類、レイアウト、アクセシビリティ、コンテンツ guidance を実務に結び付けて読めるようにする
- ✅ 特に本文中リンクとリンク文言の設計で迷いにくくなる
Fluent UI 2 とは
Fluent UI 2 は、Microsoft の Fluent 2 デザインシステムに沿って Web UI を設計するためのコンポーネント群と設計指針です。
見た目をそろえるための部品集ではなく、情報の優先順位、操作の意味、支援技術にどう伝わるかまで含めて体験を整える前提になっています。
そのため Link も、ただ青い文字を置くための部品ではありません。
「どこへ移動するのか」「リンクだとどう見分けてもらうか」「新しいタブを開くならどう伝えるか」を含めて考えるための UI です。
Link を入り口にすると、Fluent UI 2 の特徴がよく見えます。公式 guidance でも、Link は navigation のための要素 であり、別の操作を起こす用途には使わないよう明確に案内されています。つまり Fluent UI 2 は、見た目のパーツ集というより、意味と振る舞いの基準を先に与えてくれる存在だと捉えると理解しやすいです。
これまでの Fluent UI 2 シリーズ一覧 🧭
本記事までの Fluent UI 2 シリーズは次のとおりです。
Link は、この中でも Button、Breadcrumb、Label、Icon の話と特につながりが強いテーマです。
つまり「押す」のか「移動する」のか、そして「リンクだとどう伝えるか」を整理する回だと考えると位置づけがはっきりします。
Link は何をするコンポーネントか
Fluent UI 2 の公式 guidance では、Link は interactive text として説明されています。
つまり、同じインタラクティブ要素でも、Button のようにその場で処理を起こすものではなく、どこか別の場所へ移動させるものです。
ここが最初の重要ポイントです。
- 画面遷移や別サイトへの移動なら Link
- ダイアログを開く、保存する、設定を切り替えるなら Button
視覚的な強さを落としたいからという理由だけで Link をアクション要素の代わりに使うと、意味が崩れます。もし副次的な操作で目立たせたくないなら、Fluent UI 2 の Button にある transparent や subtle の appearance を検討したほうが安全です。
Fluent UI 2 の Link と Fluent UI Blazor 5 の比較
まず押さえたいのは、Fluent UI 2 側は Link の使い方 guidance が中心で、Fluent UI Blazor 側は FluentLink の実装 API が中心だということです。
そのため、同名コンポーネント同士を 1:1 で比較するというより、設計基準と実装手段の対応として読むのが分かりやすいです。
| 観点 | Fluent UI 2 Link | Fluent UI Blazor 5 FluentLink
|
|---|---|---|
| 🧭 基本の役割 | ナビゲーション用。アクションには使わない |
Href を使って URL に移動する実装が中心 |
| 🎨 見た目の種類 | Usage では Default / Subtle / Inverted / On-brand を紹介 |
Appearance は公開 API 上 Default と Subtle の 2 種類 |
| 📝 本文中リンク | inline behavior を重視 |
Inline パラメーターを持つ |
| 🔗 アイコン | 既定では icon slot なし。子要素として追加する |
IconStart / IconEnd を持つ |
| 🪟 遷移先制御 | guidance 側で新しい文脈を開く注意を説明 |
Target / Rel / ReferrerPolicy を指定できる |
| 🧩 実装の重心 | 文言、視認性、移動先の分かりやすさ | パラメーターで見た目と遷移先を組み立てる |
特に違いが出やすいのは、guidance 上の見せ方と、公開 API で直接選べる appearance の範囲です。
なお、Fluent UI 2 側の各種類の意味は、後述の「Link の種類」で整理します。
- Fluent UI 2 の guidance では
InvertedやOn-brandまで含めて「こういう見せ方がある」と説明される - いま公開されている Fluent UI Blazor 5 の
FluentLinkAPI ではAppearanceはDefaultとSubtleの 2 種類です - React の
Linkでもappearanceprop はdefaultとsubtleの 2 種類です - React の
Linkは icon slot を既定で持たない一方、Blazor ではIconStart/IconEndが用意されています
つまり、Fluent UI 2 の Usage に出てくる 4 つは、そのまま React や Blazor の appearance 列挙値ではありません。公開 API として直接選べる appearance は React / Blazor ともに default / subtle が中心で、それ以外の見せ方はテーマや背景文脈まで含めて判断する guidance として読むのが安全です。
使用方法の違いをコードで見る
React 側では、Link の意味づけを文言と文脈で組み立てつつ、必要なら子要素でアイコンを追加します。
import { Link, Text } from "@fluentui/react-components";
export function ArticleLinks() {
return (
<Text>
詳細は
<Link inline href="https://learn.microsoft.com/">
Microsoft Learn
</Link>
を参照してください。
</Text>
);
}
Blazor 側では、Href、Inline、Appearance、IconEnd などをパラメーターで指定できます。
<FluentText As="@TextTag.Paragraph">
詳細は
<FluentLink Href="https://learn.microsoft.com/"
Inline
IconEnd="@(new Icons.Regular.Size16.Open())">
Microsoft Learn
</FluentLink>
を参照してください。
</FluentText>
React は guidance を読みながら JSX を組み立てる印象が強く、Blazor は FluentLink 単体で表現をまとめやすい印象です。
ただし、どちらでも一番重要なのは API の多さではなく、そのリンク文言だけで遷移先が想像できるかです。
Link の種類
ここは少し注意が必要です。Fluent UI 2 の guidance では 4 つの見せ方が紹介されていますが、これはそのまま React や Blazor の公開 API の appearance と 1:1 に対応しているわけではありません。
React の Link の appearance prop と Fluent UI Blazor 5 の FluentLink.Appearance は、どちらも default / subtle が基本です。
そのうえで、Usage では背景やブランドカラーの文脈まで含めて、次の 4 つの見せ方が整理されています。
| Guidance 上の見せ方 | 役割 | 使いどころ |
|---|---|---|
| 🔗 Default | もっとも標準的でアクセシブル | 通常の本文、設定画面、説明文中のリンク |
| 🫥 Subtle | 本文色に近く視覚的な重みが小さい | フッター、ナビゲーション領域、明らかにリンク群だと分かる場所 |
| 🌙 Inverted | 暗い背景向け | ダーク面や濃色背景上のリンク |
| 🎨 On-brand | ブランドカラー上で見せる | ブランドカラー面の中でのリンク表示 |
つまり、記事としては「Link の種類が 4 つある」というより、「Usage では 4 つの見せ方が紹介され、公開 API の appearance は React / Blazor ともに 2 種類」と理解しておくのが安全です。
ここで実務上いちばん大事なのは、Default を基準に考えることです。
公式 guidance でも、Default link は最もアクセシブルで、ほとんどの場面で第一候補になるとされています。
一方で subtle link は注意が必要です。通常時にインタラクティブであることが見えにくいため、本文中で多用するとリンクが埋もれやすくなります。アイコンを足す、明確なリンク群の中だけで使う、といった補助がないと見落とされやすいです。
Inverted と On-brand はどう書くか
ここも実装時に迷いやすいところです。
React の Link では appearance="inverted" や appearance="on-brand" を直接書くのではなく、背景側の appearance context によって見た目が切り替わります。
少なくとも現在の型定義では、Link の appearance prop は default / subtle だけです。
一方で実装側のスタイルでは、backgroundAppearance === "inverted" と backgroundAppearance === "brand" に応じた link color が用意されています。
import { Link } from "@fluentui/react-components";
import { BackgroundAppearanceProvider } from "@fluentui/react-shared-contexts";
export function InvertedLinkExample() {
return (
<div style={{ backgroundColor: "#1f1f1f", padding: "16px" }}>
<BackgroundAppearanceProvider value="inverted">
<Link href="https://example.com">Dark surface link</Link>
</BackgroundAppearanceProvider>
</div>
);
}
export function BrandLinkExample() {
return (
<div style={{ backgroundColor: "#0f6cbd", padding: "16px" }}>
<BackgroundAppearanceProvider value="brand">
<Link href="https://example.com">Brand surface link</Link>
</BackgroundAppearanceProvider>
</div>
);
}
つまり React 側では、「Link 自体の appearance を 4 択で切り替える」というより、「リンクが置かれる背景文脈を与える」と考えたほうが実装に近いです。
一方で Fluent UI Blazor 5 の FluentLink は、公開 API としては Appearance="LinkAppearance.Default" と Appearance="LinkAppearance.Subtle" が中心です。
Inverted や On-brand を直接指定する専用 enum は見当たらないため、暗い背景やブランドカラー背景で使う場合は、背景コンテナ側のデザインとコントラストを先に設計し、そのうえで実際の見え方を確認する運用が安全です。
<div style="background:#1f1f1f; padding:16px;">
<FluentLink Href="https://example.com">
Dark surface link
</FluentLink>
</div>
Blazor 側は「専用 appearance を切り替える」というより、「その背景でリンクとして十分に見えるか」を確認する設計寄りの考え方になります。
レイアウト
Link のレイアウト guidance は、派手ではありませんがかなり重要です。
特に大事なのは、本文中に埋め込むか、独立したリンク群として置くかで扱いが変わることです。
Inline links
Fluent UI 2 の guidance では、既定では hover / focus / pressed 時に下線が付き、inline behavior では rest と visited の状態でも下線が付きます。
これは、本文の中にリンクが埋もれやすいからです。
本文の途中に出てくるリンクは、周囲の文章から切り出されてもリンクと分かるほうが親切です。
そのため、説明文やヘルプ文の中では inline behavior を積極的に考える価値があります。
Default vs. subtle
公式 guidance では、ほとんどのケースで default link のほうが見つけやすいとされています。
subtle link を使ってよいのは、フッターやナビゲーションパネルのように、そこがリンク集だと利用者が理解しやすい場面です。
Icons in links
アイコンは装飾ではなく、何が起こるかの補助として効きます。
たとえば外部サイトへ移動するリンクに open icon を付けると、「新しい文脈へ移動する」ことを視覚的に予告しやすくなります。
また、inline treatment を使わない場面でも、chevron のようなアイコンがあると「これは選べる要素だ」と分かりやすくなります。
Link spacing
離れたリンク同士の間隔も重要です。
リンクが近すぎると、どこまでが 1 つのリンクなのか分かりにくくなり、特に運動機能に制約がある人には選択しづらくなります。
つまり Link のレイアウトは、単に横並びか縦並びかではなく、見つけやすさと選びやすさの話でもあります。
アクセシビリティ ♿
ここは特に重要です。
Link は「クリックできる」だけでは足りず、リンクだと見分けられることとどこへ行くかが分かることの両方が必要です。
1. 視覚的手がかりを 2 つ以上持たせる
公式 guidance では、リンクには少なくとも 2 つの視覚的手がかりを持たせるよう案内されています。
- 色
- 下線
- アイコン
- フォーカス表示
- カーソル変化
特に本文中リンクでは、色だけに頼るのは危険です。
コントラストの見え方や色覚の違いによって、リンクが本文と区別しづらくなることがあります。
2. リンク文言は文脈外でも意味が通るようにする
支援技術では、ページ上のリンクを一覧として読むことがあります。
そのため、リンク文言は文脈から切り離しても意味が通る必要があります。
たとえば次のような違いです。
| 場面 | よい例 | 避けたい例 |
|---|---|---|
| 📘 ドキュメントへの遷移 | Fluent UI Link guidance を読む |
こちら |
| 🧭 コンポーネント一覧への遷移 | Fluent UI Blazor Link の API を確認する |
Click here |
| ℹ️ 補足説明への遷移 | Link のアクセシビリティ要件を見る |
Learn more |
Learn more のような文言をどうしても使うなら、何について learn more なのかが前後関係がなくても分かるように補う必要があります。難しい場合は、より具体的なリンク文言へ言い換えたほうが安全です。
3. 同じ文言のリンクを乱立させない
同じページに同一文言のリンクが複数あると、どこへ行くのか判断しづらくなります。
これは視覚的な読み手だけでなく、音声操作や支援技術でも曖昧さを増やします。
4. 新しいタブやウィンドウを開くなら事前に伝える
新しい文脈を開くリンクは、利用者を驚かせやすいです。
そのため、open icon のような視覚的手がかりや、必要に応じた aria-label で「新しいタブで開く」ことを事前に伝えるのが大切です。
見た目だけでリンクだと判断しにくい subtle link や、Learn more のような曖昧な文言は、アクセシビリティ上の問題につながりやすいです。
Link では API の指定より先に、見つけやすさと意味の明確さを確認したほうが安全です。
コンテンツの考え方
Fluent UI 2 の Link guidance では、文言は short, descriptive, and actionable であることが求められています。
つまり、短くても、何に移動するのかを予測できる必要があります。
1. URL や曖昧語をそのまま見せない
次のような文言は避けたいです。
- URL をそのまま並べる
こちらClick here-
Learn more単独
リンク文言は、遷移先や目的をそのまま表したほうが理解しやすいです。
2. 先頭だけを大文字にする
英語 UI では sentence style capitalization が推奨されています。
つまり、最初の単語だけを大文字にし、全部大文字にはしません。
Learn about Fluent UI LinkRead the accessibility guidance
3. 句点を付けない
本文中リンクなら、リンク文字列そのものに句読点を含めないほうが自然です。
独立したリンクでも、文末のピリオドを付けない運用が基本です。
4. 何を学べるか、どこへ行くかを先に言う
リンクは「押せる文字列」ではなく、小さな案内板のようなものです。
そのため、抽象語よりも、移動先が見える語のほうが向いています。
| 目的 | よい文言 | 補足 |
|---|---|---|
| 📘 仕様を読む | Fluent UI 2 Link guidance を読む |
何の guidance か明確 |
| 🧩 コンポーネント API を見る | Fluent UI Blazor Link の API を確認する |
どこへ行くか分かる |
| ♿ a11y を確認する | Link のアクセシビリティ要件を見る |
学べる内容が先に出る |
私としては、Link 文言は Button 文言以上に「単独で読まれる」ことを意識したほうがよいと感じます。
Button は周囲の画面文脈で意味を補いやすいですが、Link は一覧で読まれることがあるからです。
まとめ
Fluent UI 2 の Link は、単なる青い文字ではなく、移動の意味を伝えるためのコンポーネントです。
特に重要なのは、Button と役割を混同しないこと、Default を基準に考えること、そして文脈を切り離しても意味が通るリンク文言にすることです。
Fluent UI Blazor 5 の FluentLink は、Href、Inline、Appearance、IconStart / IconEnd、Target などの API で実装しやすくなっています。
一方で、どんな文言にするか、subtle をどこまで使うか、新しいタブをどう伝えるかといった判断は、Fluent UI 2 の guidance から読む必要があります。
Link は短い部品ですが、ナビゲーションの意味づけ、視認性、アクセシビリティ、文言設計が凝縮されています。
だからこそ、見た目だけで終わらせず、どこへ導く UI なのかまで含めて設計したいです 🔗