![見出し画像](https://assets.st-note.com/production/uploads/images/125828195/rectangle_large_type_2_1a50eee4c299f967b7a49e38e6b02258.png?width=800)
【よくあるUIパーツ収集】モーダル(ポップアップ)
今回はモーダルです。
「新規作成する」という1つのタスクでも、複数の「XXXで新規作成する」「YYYで新規作成する」といった形で、完全に異なるプロセスでタスクを完了させる…といった流れのときに、モーダルの利用を検討したいのですが、
一方で「そのときのモーダルってどんな形か?」がしっかりインプットしきれていないため、他のサービスでどんな形になっているかリサーチしてみました💡
※調べた結果モーダルではないものも含みますが、「モーダルっぽいポップアップが表示されるもの」という観点でまとめました
Youtube
![](https://assets.st-note.com/img/1703726706871-kxHprBflPW.png?width=800)
![](https://assets.st-note.com/img/1703726900322-X8XQ6eDwqP.png?width=800)
![](https://assets.st-note.com/img/1703726967831-6G2Rih4qGp.png?width=800)
タスク完了までのポップアップ数:5つ
装飾
角丸:有り
シャドウ:無し
カバーレイヤー:黒(半透明)
ステップバー:有り
ポップアップ内に含まれる、アクションが発生するコンポーネント
テキストフィールド
ラジオボタン式の設定選択
チェックボタン式の設定選択
アコーディオン形式の設定選択
日時選択
その他
ナビのタイトルに、入力した動画タイトルがその場で反映される形なのが独特
Googleドライブ
※モーダルではないですが、参考にしたい流れだったため掲載
![](https://assets.st-note.com/img/1703735744821-PZETgYYAIs.png?width=800)
![](https://assets.st-note.com/img/1703735770496-oFtXTURiVQ.png?width=800)
タスク完了までのポップアップ数:2つ(テンプレート使用時)
装飾
角丸:有り
シャドウ:有り
カバーレイヤー:なし(モーダレス)
ステップバー:無し
X(旧Twitter)
![](https://assets.st-note.com/img/1703727803174-MM0AKgjUuy.png?width=800)
タスク完了までのポップアップ数:1つ
装飾
角丸:有り
シャドウ:無し
カバーレイヤー:黒(半透明)
ステップバー:無し
ポップアップ内に含まれる、アクションが発生するコンポーネント
テキストフィールド
アコーディオン形式の設定選択
日時選択
位置情報登録
その他
明確なナビ部分が省略されている
位置情報登録などの任意のアクションは、次のステップとして用意されているのではなく、さらに別のモードが重なっている形(そのため「戻る」ボタンはなく「✗(キャンセル)」になっている)
文字数カウントと、別のポスト追加+ボタンがどっちも◯なので、区別のために線がひかれているのかなあ…と思ったり。
Meta
![](https://assets.st-note.com/img/1703727976186-wQEd3xOru3.png?width=800)
![](https://assets.st-note.com/img/1703730911274-Ak4oyBAqks.png?width=800)
タスク完了までのポップアップ数:2つ
※タグ付けなどが任意のステップで用意されている装飾
角丸:有り
シャドウ:有り
カバーレイヤー:白(半透明)
ステップバー:無し
ポップアップ内に含まれる、アクションが発生するコンポーネント
テキストフィールド
![](https://assets.st-note.com/img/1703728562388-HsZ5KaX64Z.png?width=800)
![](https://assets.st-note.com/img/1703728627947-nqKg4vRX0Q.png?width=800)
タスク完了までの画面数:1つ
※モーダルではなく画面として存在。作成画面内で、「素材を選択をして初めて入力に進める」といった形のモーダルになっている(非ポップアップ)装飾
モーダルポップアップではなく、1つの画面として存在しているためなし
ポップアップ内に含まれる、アクションが発生するコンポーネント
アコーディオン形式の設定選択
スイッチボタン
![](https://assets.st-note.com/img/1703728234278-NDu1fflgg1.png?width=800)
![](https://assets.st-note.com/img/1703728269593-HIXj2olila.png?width=800)
![](https://assets.st-note.com/img/1703728294048-OO9gxh5xTX.png?width=800)
![](https://assets.st-note.com/img/1703728314794-4CRdHttUWH.png?width=800)
![](https://assets.st-note.com/img/1703728432994-qf72xUeBCL.png?width=800)
タスク完了までのポップアップ数:4つ
装飾
角丸:有り
シャドウ:無し
カバーレイヤー:黒(半透明)
ステップバー:有り
ポップアップ内に含まれる、アクションが発生するコンポーネント
テキストフィールド
アコーディオン形式の設定選択
スライダー
スイッチボタン
その他
ステップが多い割とステップバーが無いんだなあ…と思いましたが、
表示される画像も大きいため省略した?
ある程度慣れている作業のため省略した?
…などなど想像したりしました
結果と気づき
モーダル内で複数のアクションをさせるのって(ポップアップが複数あるのって)どうなんだろう?と思っていましたが、YoutubeとInstagramでは採用していることから、うまく設計できれば必ずしも悪ではない、と思いました。
カバーレイヤーとしては黒(半透明)を採用しているものがほとんどでしたが、白(半透明)もありました。ただこの場合、シャドウをつけたりとコントラスト差を出す必要があるのかな?と思うと、黒(半透明)が無難にいいのかな、とも思いました。
この記事が気に入ったらサポートをしてみませんか?