こんにちは、プロダクトマネージャーの田嶋です。 6月から約半年間の育休取得を予定しており、今は引き継ぎのラストスパート中です👶
※補記:「UI/UX」という表現は個人的には好みではありませんが、今回は便宜的に使用しています。
ーーーー さて、時は遡ること1年半ほど前・・・ ワイヤーフレーム検討の打ち合わせでアイデアが出ず沈黙していた時、 先輩)「たじまさん、遊んでる?」と聞かれ、 ぼく)「え、真剣に考えてますよ!?」とちょっと怒り気味で返すと、 先輩)「いや、そうじゃなくて。普段ちゃんと遊んでますか?遊ばないと、良いアイデア出ないですよ。」 というやり取りがあった。
「遊ぶ」という言葉が適切かはさておき、たしかに当時の自分はあまりにもアイデアに乏しかった。それなのに、「ユーザー目線に立って操作をイメージすれば、最適なユーザー体験は作れる」などと、甘っちょろい考えもあった。実際、自身の経験から想像できる範囲からしかアイデアは出ないというのに。
以降は、本を読んだり、色々なサービスを使ってみたりと、引き出しを増やすためのインプットを日頃意識的に行ってきた。するとなるほど。これは1週間籠もって頭を何周捻っても自分の中からは閃かないな、というアイデアが沢山あることに気付く。
今回はその中でも「いつかパクりたい!!」と温めている、雰囲気良さげで真似できそうな、WEBやアプリに活用できるUI/UX好事例10選を紹介していく。 ※掲載しやすいTwitterから引用。選定基準・掲載順は適当。
それではサクサクいくぞー!レツゴー!!
【目次】
- 1.前回ログイン方法の提示
- 2.飛び先指定のページネーション
- 3.続きをぼかして見せる
- 4.回る導入実績ロゴ
- 5.スクロールバーでお知らせ表示
- 6.レスポンシブ非対応LP
- 7.SorryページにTwitter枠設置
- 8.離脱タイミングで電話動線
- 9.ストアレビュー依頼前のスクリーニング
- 10.確定申告、本当に本当にお疲れさまでした。
- おわりに
1.前回ログイン方法の提示
Facebookログインかメールログインか、どっちか思い出せない時あるある×3。
前回どうやってログインしたか教えてくれる。これはありがたい。 pic.twitter.com/RQTgBEd45L
— Hidemitsu Aoki (@hidemitsuaoki) 2022年2月17日
2.飛び先指定のページネーション
ページネーションの一部が省略されてるやつ、ピンポイントで飛べなくて面倒な時あるよね。 これは グロリアーレ という結婚式の写真販売サイトのUIですが、弊社の ルクミーフォト でも真似できそう・・!
このページネーションUI、1番良い。 pic.twitter.com/np18kCJrN5
— 𝙏𝙖𝙟𝙞𝙮𝙮𝙮 / 𝙋𝙙𝙈 (@tajiyyy) 2022年4月26日
3.続きをぼかして見せる
気になる、見たい。(語彙力) ファーストビューで場所を取らず、それでも気を引きたい、というバランス◎ アプリ誘導のコンバージョンとしても優秀。
「もっと見る」「続きを見る」ボタンは、ぼかしUIの方が続きが気になりそう。画像の場合は特に。 pic.twitter.com/4ekGxVxQvX
— 𝙏𝙖𝙟𝙞𝙮𝙮𝙮 / 𝙋𝙙𝙈 (@tajiyyy) 2022年2月7日
4.回る導入実績ロゴ
これも場所取らない系② それでいてなんか多く見える。一石二鳥のお得感。
導入実績の企業ロゴを、横向きのオートスクロールで周回させるUI良い。
— 𝙏𝙖𝙟𝙞𝙮𝙮𝙮 / 𝙋𝙙𝙈 (@tajiyyy) 2021年10月9日
アピールしたいけど、場所は取りたくない。を上手く表現できてる。 pic.twitter.com/jfdjDLN5jn
ちなみに弊社 ルクミー のサービスサイトでも採用してます!
5.スクロールバーでお知らせ表示
これも場所取らない系③。収納上手な感じ。
トップ画面にお知らせ表示するUIで、サマリとして何件出すか?どれだけの期間出すか?に以前悩んでたけど、スクロール付きの小窓にしたら良さそうっていう今更な気付き。(もう半年早く気付きたかった..) pic.twitter.com/LFm1EPzvLq
— 𝙏𝙖𝙟𝙞𝙮𝙮𝙮 / 𝙋𝙙𝙈 (@tajiyyy) 2021年10月15日
なお、現在は弊社の園施設向けTOP画面の「お知らせ」にも適用してます!
6.レスポンシブ非対応LP
もうLPはこれで良いんじゃない?
【そもそもPCで見るん?】
— 鈴木祥平|デザイナー (@suzusho1115) 2022年3月6日
タイトル長いのがマイブームw本日はヘアアイロンのLPですが、PCサイトの横幅がスマホ仕様になってます。TOPに「スマホで見る」というQRもあります。レスポンシブは時間もお金をかかるので、必要なければこんな感じでOKってことです😊グッナイ🌙#webデザイン #webデザイナー pic.twitter.com/IPZ8jpqCst
7.SorryページにTwitter枠設置
中の人を応援したくなっちゃうやつ。 リアルタイムで障害状況が分かると、誠実なサービスだなって好きになるかも。
note が 障害っぽいんだけど、Tweetがすぐ横にあるメンテナンスページ、「ちょっといいな・・・」って思ってしまった。中の人がんばれ・・・! pic.twitter.com/wCxJSBB0v4
— 永嶋 広樹 / NAGASHIMA Hiroki (@_nagacy) 2022年3月3日
8.離脱タイミングで電話動線
よくお気持ちをご理解で。 ちなみに私はドラマ『結婚できない男』の頃からパグ好きです。
おお、カウカモで内見問い合わせのフォームから離脱しようとしたら出てきた。なるほどー、ちょっと「そうしようかな」って気持ちにはなる pic.twitter.com/bowV8Uxzy2
— バトーさん (@hiloki) 2022年2月16日
9.ストアレビュー依頼前のスクリーニング
・No → Googleフォーム案内で、ユーザー意見は回収しつつ、 ・Yes → ストア評価案内で、★評価を上げる裏技すげー。 弊社アプリの評価向上にも使いたい・・!
③の裏技はこれか・・! https://t.co/llt29Z1iRE pic.twitter.com/QKtMhcthqc
— 𝙏𝙖𝙟𝙞𝙮𝙮𝙮 / 𝙋𝙙𝙈 (@tajiyyy) 2021年10月1日
10.確定申告、本当に本当にお疲れさまでした。
こういうエモいの好き。 弊社では、年度末、先生方に対応いただく「進級処理」終わりとかに良さそう。
This is UXライティング。 pic.twitter.com/KW11AoDrck
— rikika|web3オタク (@rikikamano) 2021年4月14日
おわりに
今回紹介した10のアイデアは、ただ列挙しただけで繋がりのない、言わば粒のコレクションだ。
体系立てた学びももちろん大切。一方で、地続きでは発想できないアイデアもあることから、色々なモノを見て触れて「遊ぶ」ことも大切と実感し始めている。この感覚を共有したく、今回はあえて雑多に紹介してみた。
ハッとするようなアイデア、ぜひ皆さんからも共有いただけたら嬉しいです💡 最後までお読みいただきまして、ありがとうございました。
ーーーー ユニファでは、家族の幸せを一緒に語り合えるPdMを絶賛大募集しています! よろしくお願いします! herp.careers