【UIパーツ大全】アクションシート[action sheet]参考パーツ一覧

アプリやWebサービスのUI設計で欠かせないコンポーネントのひとつが「アクションシート（action sheet）」です。特にモバイルデザインにおいては、限られた画面スペースでユーザーの選択肢をスマートに提示する手段として活用されています。

本記事ではアクションシートの基本仕様・使いどころ・UI設計のポイント・主要サービスでの使用例を解説し、最後に参考になるUIパーツ集を一覧で紹介します。UI/UXデザイナーやフロントエンドエンジニアにとって、実践に役立つ情報を網羅した保存版です。

アクションシートとは？その役割と基本機能

アクションシートの定義

アクションシートとは、ユーザーが特定の操作を行ったときに画面下部からスライドアップして表示される選択メニューのことです。iOSでは「UIAlertController」のactionSheetスタイルが代表例で、Androidでも同様のコンポーネントが存在します。

主に以下のような特徴を持ちます

• フルスクリーンを覆わず、ユーザーの文脈を保ったまま選択肢を提示できる
• 2〜5個程度の明確な選択肢を水平または縦に並べる
• 操作の確認（例：削除、ログアウト）などで頻出

よく使われるシーン

• 写真アップロード：「写真を撮る」「フォトライブラリから選ぶ」「キャンセル」
• アカウント操作：「ログアウト」「アカウントを削除」「キャンセル」
• ソートやフィルター：「価格順」「人気順」「評価順」

アクションシートのUX設計におけるポイント

操作の文脈を明確にする

アクションシートは現在の画面に重なる形で表示されるため、選択肢が何に対する操作かが明確でないと混乱を招きます。そのため、タイトルや補足文を使って操作の文脈を示すことが重要です。

例

写真を追加しますか？

• 写真を撮る
• フォトライブラリから選ぶ
• キャンセル

危険な操作は視覚的に区別する

「削除」や「アカウント解除」など、取り消せない操作は赤字やアイコンで視覚的に警告するのがベストプラクティスです。誤操作を防ぎつつ、選択肢として必要な項目を自然に並べることができます。

タップ領域とスワイプ操作を考慮する

アクションシートは、画面下部からスワイプで閉じる動作が期待されることが多いです。AndroidやiOSの挙動に合わせ、誤って閉じてしまわない工夫（スワイプ無効化、再表示など）もUX設計上のポイントとなります。

主要アプリにおけるアクションシートの実装事例

Instagram

• ストーリー投稿画面で「画像の選択元」を提示
• メニューは黒背景、選択肢は白地で明確に
• 「キャンセル」は他より一段下に配置

LINE

• トーク削除時に「このトークを削除」「キャンセル」などを提示
• 危険な操作は赤字＋太字で表示
• キャンセルは一番下に固定

Apple iOS純正UI

• iPadではポップオーバー表示に自動で切り替わる
• UIAlertController(style: .actionSheet)を使用
• ハプティクス付き

アクションシートの設計で気をつけたいNG例

1. 選択肢が多すぎる（5つ以上）
   • スクロール可能になり、アクションシートの目的である「素早い選択」が失われる
2. 全て同じトーンの表示
   • 重要な操作（削除など）もその他と同列で表示され、誤操作につながる
3. 閉じる操作がわかりにくい
   • キャンセルボタンがない、スワイプで閉じると保存されないなど

参考UIパーツ一覧：アクションシートのデザインサンプル集

ここでは、実際のデザイン業務で参考にできる高品質なアクションシートUIのサンプル・コンポーネントを紹介します。プロジェクトの初期段階でのインスピレーションソースとして活用してください。

Figma Community – Action Sheet UI Kit

https://www.figma.com/community

• iOS・Android両対応のモックアップあり
• タイトル付き、アイコン付き、危険アクションの色分けなど豊富なバリエーション

Material Design – Bottom Sheets

https://m3.material.io/components/bottom-sheets/overview

• Androidアプリにおける公式ガイドライン
• モーダル型・非モーダル型の違いも明確に解説

iOS Human Interface Guidelines – Action Sheets

https://developer.apple.com/design/human-interface-guidelines

• Appleが提示するアクションシート設計のベストプラクティス
• iPhoneとiPadでの表示挙動の違いに注意

Tailwind UI Components（有料）

https://tailwindui.com

• React/Vue対応のアクションシート実装例あり
• 美しいトランジション、アクセシビリティにも配慮

CodePen – Action Sheet Examples

https://codepen.io

• 実際の挙動を確認しながらカスタマイズ可能
• CSSとJSだけで構築された軽量アクションシート

まとめ：アクションシートは「文脈を保つUI」の代表格

アクションシートはモバイルUIにおいてユーザーの文脈を保ちつつ操作を誘導できる強力な手段です。誤操作を避けるための配慮、操作を促す視覚的な工夫、デバイスによる最適化など、細やかな設計が求められます。

本記事で紹介した事例やパーツ一覧を活用し、ユーザー体験を損なわない洗練されたUI設計を目指してください。