CSSで作るモーダルウィンドウデザイン集

CSSで作るモーダルウィンドウデザイン集

モーダルウィンドウは、ユーザーへ重要な情報を表示したり、フォームや確認画面を表示したりする際によく利用されるUIコンポーネントです。

この記事では、実務で使えるモーダルウィンドウデザインを紹介します。すべてコピペOKです。

モーダルウィンドウとは？

モーダルウィンドウとは、画面上に重ねて表示されるダイアログUIのことです。

  • お問い合わせフォーム
  • ログイン画面
  • 確認ダイアログ
  • 画像拡大表示
  • キャンペーン告知

など様々な場面で利用されています。

基本のモーダルUI

① シンプルモーダル

HTML
<div class="modal">
  <div class="modal-content">
    モーダルの内容
  </div>
</div>
CSS
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: #fff;
  padding: 32px;
}

最も基本的なモーダルデザインです。

モーダルの内容
シンプルモーダル

② 角丸カードモーダル

CSS
.modal-content {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

サービスサイトやLPでよく利用されます。

モーダルの内容
角丸カードモーダル

アニメーション付きモーダル

③ フェードインモーダル

CSS
.modal {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

自然な表示演出ができます。

モーダルの内容
フェードインモーダル

④ ズームインモーダル

CSS
.modal-content {
  animation: zoomIn 0.5s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}

視線を集めたい場合に有効です。

モーダルの内容
ズームインモーダル

⑤ スライドアップモーダル

CSS
.modal-content {
  animation: slideUp 0.5s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

モダンなWebサービスでよく見られる演出です。

モーダルの内容
スライドアップモーダル

モダンUIデザイン

⑥ Glassmorphismモーダル

CSS
.modal-content {
  color: #fff;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.2);
}

ガラスUIを取り入れたトレンドデザインです。

モーダルの内容
Glassmorphismモーダル

⑦ グラデーションモーダル

CSS
.modal-content {
  color: #fff;
  background: linear-gradient(
    135deg,
    #3498db,
    #9b59b6
  );
}

キャンペーンページなどで目を引きます。

モーダルの内容
グラデーションモーダル

実務で使える応用パターン

⑧ ログインモーダル

HTML
<form action="./login/" class="login-form">
  <input type="email" name="email" placeholder="メールアドレス">
  <input type="password" name="password" placeholder="パスワード">
  <button>ログイン</button>
</form>

会員サイトなどでよく利用されます。

ログインモーダル

⑨ 画像拡大モーダル

HTML
<div class="modal-content">
  <img src="sample.jpg" alt="">
</div>

ポートフォリオサイトやECサイトに最適です。

⑩ フルスクリーンモーダル

CSS
.modal-content {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

スマホアプリ風のUIを作れます。

アクセシビリティ対応

  • ESCキーで閉じられるようにする
  • フォーカス管理を行う
  • 背景スクロールを無効化する
  • 閉じるボタンを設置する

まとめ

  • モーダルは重要な情報を表示するためのUI
  • アニメーションで視認性を向上できる
  • Glassmorphismなどのデザインも人気
  • アクセシビリティへの配慮も重要

用途に応じて最適なモーダルデザインを選び、ユーザー体験を向上させましょう。

関連記事

PAGE TOP