コンテンツのURL・アクセス権・共有先を設定・送信するためのモーダルダイアログ。リンクコピー・メール招待・権限設定（閲覧者/編集者）・SNSシェア・QRコードを組み合わせた複合UIで、Google Docs・Figma・Notion・GitHubなどのコラボレーションツールに広く使われる。単純なURL表示から多段階の権限管理まで、用途によって複雑さが大きく異なる。
この記事を読むと、リンクコピーボタンのフィードバック設計・権限レベルのセレクト・メール招待の入力パターン・フォーカストラップ・aria-modal 実装・コピー成功状態の管理が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
コンテンツ（ドキュメント・画像・リンク）の共有設定を行うモーダルダイアログ。アクセス権の設定・招待・URLコピーを1か所で完結させる複合UIコンポーネント。
Share Modal の3つのコア機能：
| 機能 | 説明 |
|---|---|
| リンクコピー | 共有URLをクリップボードにコピー |
| ユーザー招待 | メールアドレスを入力して特定ユーザーを招待 |
| アクセス権設定 | 閲覧者/編集者/公開などの権限レベルを選択 |
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- コラボレーションツール：Google Docs・Figma・Notion のドキュメント・ファイル共有
- コンテンツ公開設定：ブログ記事・ポートフォリオの公開/非公開切り替え
- リソース共有：フォルダ・プロジェクトへのメンバー招待
- SNSシェア：X・Facebook・LINEなどへのシェアリンク生成
3.2 When NOT to use
- 常時表示する権限設定：頻繁に操作する権限管理は設定ページに置く
- 単純なURLコピーのみ：URLだけなら
<button onclick="copy">+ Tooltip で十分（モーダル不要）
4. 設計判断の核（Decision Principles）
Share Modalの核は「コピーフィードバック」——リンクコピーボタンは「コピー」→「✓ コピー済み」→「コピー」の状態遷移で成功を明示する。この瞬間的なフィードバックがないと、ユーザーはコピーされたか不安になり再度押してしまう。
判断の優先順位：① コピーフィードバック → ② 権限レベルの明確な表現 → ③ メール招待のバリデーション → ④ aria-modal のフォーカストラップ
- コピー成功は2秒間「✓ コピー済み」を表示し
aria-live="polite"で通知する：setTimeoutで2秒後に元のラベルに戻す。aria-labelも「コピー済み」に切り替えることでスクリーンリーダーにも通知できる - 権限レベルは「閲覧者」「編集者」「コメント可」などユーザーが理解できる言葉で表現する：「read」「write」などの技術語ではなく、実際の操作内容（何ができるか）を示す言葉を使う
- モーダルはフォーカストラップを実装する：
role="dialog"+aria-modal="true"を設定し、Tabキーのフォーカスをモーダル内に閉じ込める。Escapeキーで閉じる - メール招待フィールドは Enter キーで送信できるようにする：
onKeyDownでEnterを検知して招待アクションを実行する。送信ボタンのクリックと同じ動作を提供する
5. 状態設計（States）
| 状態 | コピーボタン | 入力フィールド |
|---|---|---|
| 初期 | 「コピー」（非活性気味） | プレースホルダー表示 |
| コピー成功 | 「✓ コピー済み」（緑） | — |
| 2秒後 | 「コピー」に戻る | — |
| メール入力中 | — | テキスト表示 |
| 招待ボタン | 無効（空の場合） | 有効（入力あり） |
| 送信中 | — | disabled + スピナー |
| 招待済み | — | リストに追加 |
6. バリエーション設計（Variants）
| バリアント | 特徴 | 使用例 |
|---|---|---|
| リンクのみ | URLコピー＋権限 | ブログ・メディア |
| メール招待付き | ユーザー招待＋権限管理 | Google Docs・Figma |
| SNSシェア | プラットフォーム別ボタン | メディア・ポートフォリオ |
| 公開設定付き | 非公開/リンク/公開の3択 | CMS・Notion |
| 埋め込みコード | <iframe> コードのコピー | YouTube・Google Maps |
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- コピー後にフィードバックがない：ボタンを押しても何も変わらず、コピーされたか分からない
- 権限の説明が技術語：「read」「write」「owner」などの技術語を使い、ユーザーが何ができるか分からない
- フォーカストラップがない：Tabキーでモーダル外の要素にフォーカスが移動し、操作が混乱する
7.1 Bad（典型3つ）
- コピーボタンに
onClickのみでフィードバックがなく、ユーザーが再度押してしまう - 権限セレクトに「role: viewer / editor / owner」の技術語が並び、意味が分かりにくい
role="dialog"がなくキーボード操作でモーダル外にフォーカスが出る
7.2 Good（対になる3つ）
setCopied(true)→ 2秒後setCopied(false)+aria-label切り替えでコピー成功を明示する- 「閲覧者（読み取り専用）」「編集者（変更可能）」のような自然言語で権限を表現する
role="dialog" aria-modal="true"+ Tabキートラップ（onKeyDownでフォーカス制御）を実装する
7.3 How to fix（手順）
- コピーボタンに
copiedstate を追加し、成功時に2秒間ラベルと色を変える aria-labelとaria-liveでコピー成功をスクリーンリーダーに通知する- 権限ラベルをユーザーが理解できる言語に書き換える
- モーダルに
role="dialog" aria-modal="true" aria-labelledbyを追加する
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Screen Reader
<div
role="dialog"
aria-modal="true"
aria-labelledby="share-modal-title"
>
<h2 id="share-modal-title">「UIデザイン入門」を共有</h2>
<!-- コピーボタン：状態に応じて aria-label を切り替え -->
<button
aria-label="リンクをコピー"
aria-live="polite"
>
コピー
</button>
<!-- コピー成功時 -->
<button
aria-label="コピーしました"
>
✓ コピー済み
</button>
<!-- 招待リストの削除ボタン -->
<button aria-label="tanaka@example.com を削除">×</button>
<!-- 閉じるボタン -->
<button aria-label="閉じる">×</button>
</div>
10. 実装メモ（Implementation Notes）
navigator.clipboard.writeText()：クリップボードAPIはhttps://環境でのみ動作。localhostでは動作するが、ステージング環境でHTTPを使っている場合はdocument.execCommand('copy')のフォールバックが必要- フォーカストラップの実装：
useEffectでモーダル内のフォーカス可能要素（button, input, select, [tabindex]）を取得し、Tab/Shift+Tabが最初/最後の要素を循環するようonKeyDownで制御する。focus-trap-reactライブラリを使うと簡単 - メール入力のバリデーション：正規表現でのバリデーションは厳格にしすぎると正しいメールを弾く。
/^[^\s@]+@[^\s@]+\.[^\s@]+$/程度のゆるいバリデーションで十分 - 権限変更のリアルタイム反映：招待済みユーザーの権限をセレクトで変更したら、即時APIコールで反映するか、「保存」ボタンでまとめて送信するかを設計段階で決める
11. 関連リンク
- 関連するUIデザイン原則: フィードバック (Feedback), 誤操作を防ぐ (Error Prevention)
- 用語集（定義）: アクセシビリティ
- 関連するUIコンポーネント（横）: Modal Dialog（モーダルダイアログ）, Select（セレクト）, Text Input（テキスト入力）, Toast（トースト通知）, Tooltip（ツールチップ）
12. まとめ
Share Modalの設計で最重要なのは「コピーフィードバック」と「フォーカストラップ」です。リンクコピーは Share Modal の最も使われる操作であり、成功が視覚的に伝わらないと UX が大きく損なわれます。権限レベルは技術語ではなくユーザーが理解できる言葉で表現し、aria-modal + フォーカストラップのセット実装でアクセシビリティを担保してください。
