今回はモーダルです。
「新規作成する」という1つのタスクでも、複数の「XXXで新規作成する」「YYYで新規作成する」といった形で、完全に異なるプロセスでタスクを完了させる…といった流れのときに、モーダルの利用を検討したいのですが、
一方で「そのときのモーダルってどんな形か？」がしっかりインプットしきれていないため、他のサービスでどんな形になっているかリサーチしてみました💡
※調べた結果モーダルではないものも含みますが、「モーダルっぽいポップアップが表示されるもの」という観点でまとめました

Youtube

• タスク完了までのポップアップ数：5つ

• 装飾

  • 角丸：有り

  • シャドウ：無し

  • カバーレイヤー：黒（半透明）

  • ステップバー：有り

• ポップアップ内に含まれる、アクションが発生するコンポーネント

  • テキストフィールド

  • ラジオボタン式の設定選択

  • チェックボタン式の設定選択

  • アコーディオン形式の設定選択

  • 日時選択

• その他

  • ナビのタイトルに、入力した動画タイトルがその場で反映される形なのが独特

Googleドライブ

※モーダルではないですが、参考にしたい流れだったため掲載

• タスク完了までのポップアップ数：2つ（テンプレート使用時）

• 装飾

  • 角丸：有り

  • シャドウ：有り

  • カバーレイヤー：なし（モーダレス）

  • ステップバー：無し

X(旧Twitter）

• タスク完了までのポップアップ数：1つ

• 装飾

  • 角丸：有り

  • シャドウ：無し

  • カバーレイヤー：黒（半透明）

  • ステップバー：無し

• ポップアップ内に含まれる、アクションが発生するコンポーネント

  • テキストフィールド

  • アコーディオン形式の設定選択

  • 日時選択

  • 位置情報登録

• その他

  • 明確なナビ部分が省略されている

  • 位置情報登録などの任意のアクションは、次のステップとして用意されているのではなく、さらに別のモードが重なっている形（そのため「戻る」ボタンはなく「✗（キャンセル）」になっている）

  • 文字数カウントと、別のポスト追加＋ボタンがどっちも◯なので、区別のために線がひかれているのかなあ…と思ったり。

Meta

• タスク完了までのポップアップ数：2つ　
  ※タグ付けなどが任意のステップで用意されている

• 装飾

  • 角丸：有り

  • シャドウ：有り

  • カバーレイヤー：白（半透明）

  • ステップバー：無し

• ポップアップ内に含まれる、アクションが発生するコンポーネント

  • テキストフィールド

Pinterest

• タスク完了までの画面数：1つ
  ※モーダルではなく画面として存在。作成画面内で、「素材を選択をして初めて入力に進める」といった形のモーダルになっている（非ポップアップ）

• 装飾

  • モーダルポップアップではなく、1つの画面として存在しているためなし

• ポップアップ内に含まれる、アクションが発生するコンポーネント

  • アコーディオン形式の設定選択

  • スイッチボタン

Instagram

• タスク完了までのポップアップ数：4つ

• 装飾

  • 角丸：有り

  • シャドウ：無し

  • カバーレイヤー：黒（半透明）

  • ステップバー：有り

• ポップアップ内に含まれる、アクションが発生するコンポーネント

  • テキストフィールド

  • アコーディオン形式の設定選択

  • スライダー

  • スイッチボタン

• その他

  • ステップが多い割とステップバーが無いんだなあ…と思いましたが、

    • 表示される画像も大きいため省略した？

    • ある程度慣れている作業のため省略した？
      …などなど想像したりしました

結果と気づき

• モーダル内で複数のアクションをさせるのって（ポップアップが複数あるのって）どうなんだろう？と思っていましたが、YoutubeとInstagramでは採用していることから、うまく設計できれば必ずしも悪ではない、と思いました。

• カバーレイヤーとしては黒（半透明）を採用しているものがほとんどでしたが、白（半透明）もありました。ただこの場合、シャドウをつけたりとコントラスト差を出す必要があるのかな？と思うと、黒（半透明）が無難にいいのかな、とも思いました。