今回の記事では、Webサービス開発などで参考になりそうな、かっちょいいモーダルウィンドウ(ダイアログ)のデザインをまとめてみました。
ウィンドウ枠や「閉じるボタン」をどんなデザインにするのか、など考えながら見てください。
モーダルウィンドウとは?
Webデザインでのモーダルウィンドウとは、背景が黒や白くなって親ページの上に子ページが立ち上がるものを言います。主に、ログインフォームや登録フォームなどを、インラインで表示させるのに使われます。
※厳密な意味は、Wikipediaなどで調べてください。
AddThis
![](/img/upload/2220.png)
Virb
![](/img/upload/2189.png)
Build It With Me
![](/img/upload/2191.png)
Awesome
![](/img/upload/2201.png)
LearnBoost
![](/img/upload/2200.png)
Get Satisfaction
![](/img/upload/2233.png)
ゲッティ イメージズ
![](/img/upload/2195.png)
KISSmetrics Web Analytics
![](/img/upload/2196.png)
DISQUS
![](/img/upload/2197.png)
Flow
![](/img/upload/2202.png)
UserVoice
![](/img/upload/2207.png)
BonLook
![](/img/upload/2208.png)
※zendeskを使用
GoneFreelancing.com
![](/img/upload/2219.png)
Zootool
![](/img/upload/2221.png)
Sprocket House · Web Design & Advertising · Raleigh, Durham, Chapel Hill NC
![](/img/upload/2228.png)
someecards.com
![](/img/upload/2229.png)
まとめ
並べてみると、結構おもしろいですね。
最近は、モーダルウィンドウを実現する、jQueryのプラグインとかもあって、こういったモーダルウィンドウを使ったサイトも増えてきてますね。
ということで、Webサービスを作る際には、モーダルウィンドウを検討してみてもいいかもしれません。その際、どんなデザインにするか迷ったら、この記事を参考にしてみてください。
~また明日~
コメント