Webサービスで使われるポップアップ12選【UIデザイン】

ランサーズでは、ディレクターがUI設計を行い、その上でデザイナーさんがより良い物を作り上げるという方針を取っています。

そこで仮説に基づいてUIを設計する段階で、他のサービスを参考にしてUI設計を行っています。

多くのサービスが採用しているUIは、ユーザさんが慣れている、使い勝手がいいなどの理由があるので、UI設計をする際に、既存のものを多くインプットすることは重要です。

今回は『ポップアップ』のUIを参考にさせていただいた、UIの素晴らしいサイトを紹介させていただきます。

ただのポップアップとは言え、考える要素はたくさんあります。

バツボタンの表示方法、ボタンの位置、ポップアップ背景の透過率、白か黒かなど参考になる要素は様々です。

SUUMO

2014y04m23d_183217325

CHINTAI

2014y04m23d_183229151

pixiv

2014y04m23d_183327318

クックパッド

2014y04m23d_183332200

2014y04m23d_183339974

Wish Scope

2014y04m23d_183351440

タウンワーク

2014y04m23d_183246366

マイナビバイト

2014y04m23d_183255362

アットホーム

2014y04m23d_183251073

マイナビ賃貸

2014y04m23d_183304462

ビズリーチ

2014y04m23d_183307841

2014y04m23d_183311830

レオパレス

2014y04m23d_183321187

ゼクシィ

2014y04m23d_183348186

 

 

最後に

『ポップアップ』の『UI設計』というかなりニッチな記事になってしまいました。

しかし他サービスで実際に使われているデザインというものは、たとえあまり表示されない要素だとしても徹底的に考えられて作成されています。サービスに合わせた世界観を考え、UIとして用いられています。サービス作成者さんが作成された素晴らしい物を参考にさせていただいています。

参考にさせていただいたものを活かして、サービスに合ったUI設計をしていければと思います。

 

ランサーズでは一緒に成長したい人を募集中!

一緒に企画を作っていくディレクターの方、技術力を磨きたいエンジニア・デザイナーの方、新規事業でビジネススキルを身につけたい方。

ランサーズで一緒に働きませんか?下記URLよりご応募ください。

ランサーズ株式会社|募集要項

日本最大級のクラウドソーシング「ランサーズ」はこちら!

この記事を書いた人

田畑Twitter:@hayato_ts
Webサービスディレクター、グロースハックチームディレクター
以前はメディアを複数運営していました。
ディレクターブログのメイン更新担当として日々更新していきます。
趣味でサイトをいくつか運営しています。

関連記事

Nike+ 2014-05-13 21-54-22

エンゲージメント向上!サービスで使えるゲーミフィケーション事例9選!

ディレクターブログ更新担当・田畑です。 皆さん人生で一度くらいはゲームをプレイしたことがあるのではな

記事を読む

2014y05m29d_095429217

Webサービスで使われるお気に入りボタン11選【UIデザイン】

ランサーズディレクター田畑です。 ランサーズでは、ディレクターが細かい箇所までUI設計を行い、その上

記事を読む

ライティング

オウンドメディアの効果を最大限発揮するための運用フローのつくりかた

ランサーズディレクター田畑です。 インターネットの発達により、スタートアップに中小企業などでも自社で

記事を読む

Webディレクターズマニュアル

新入Webディレクター必見!ディレクターが抑えるべきメディア16選

今回はWebディレクターを目指している方や、将来Webで起業したいと考えている方にも参考になると思う

記事を読む

Inschrijven workshops - IM Creator 2014-06-04 13-46-05

Webディレクターが憶えておきたいMySQL構文の参考サイト

ランサーズディレクター田畑です。 Webディレクターが企画・施策を検討するにあたって必要な数値の取得

記事を読む

髪を変えれば、一気にキレイ ホメ髪.com 2014-05-27 21-11-21

成功事例から学ぶ!業界別国内オウンドメディア事例まとめ

ランサーズディレクター田畑です。 最近『オウンドメディア』という、企業が所有するメディア媒体というも

記事を読む

PAGE TOP ↑