この記事は ウェブクルー Advent Calendar 2023 20日目の記事です。
昨日は @yuko-tsutsui さんの「 AWS EC2環境にCircleCI＋CodeDeployを導入した時の記録 」でした。
今年も日々のストックから、UI/UXに関するものをご紹介したいと思います。
個人的な好み・見解になりますので、ご了承ください。
スライダーの見せ方、2段階
まずはECサイトのスライダーです。
画像を横にクルクル回すスライダーはよく使うものですが、ここのコントロールってすごく悩みますよね…。
一見よくある横軸のスライダーですが、画像右上のアイコンをタップすると、モーダルウィンドウとなり縦軸に切り替わります。縦スクロールの方が情報が見やすく、インタラクションもすごく気持ちがいいですね。
また画像右上の複数枚あることを示すアイコンも見たことがないものだったので珍しいなと思いました！
参照元：https://shopping.yahoo.co.jp/のアプリおよびSP版
追従ヘッダーの透過具合
こちらは不動産サイトです。とてもデザインが好きです(笑)
注目したのは追従ヘッダーです。
スクロールされても常に表示させておきたいコンテンツがある際に当社もよく使う手法ですが、特にスマートフォンサイトでは表示領域を取られてしまい、追従を採用するかは賛否両論分かれるところです…。ちなみに私は反対派でして。
ですが、こちらのヘッダーはスクロール中もあまり気にならずかつ視認性高い印象、、調べてみたところ背景透過の具合が絶妙…！
CSSのbackdrop-filterのぼかし(blur)＋透過(alpha)で表現されていました。
alpha値のみだとハッキリしすぎてしまい、ぼかし(blur)のみだとボヤっとしすぎてしまう、ダブル掛けが絶妙。
CSSで一工夫するだけで良くなるいい例だと感じました。
※すりガラスのような表現ができるGlassmorphism（グラスモーフィズム）というデザイン手法のようです。
.header__bg {
backdrop-filter: blur(3px);
background-color: rgba(255, 255, 255, 0.6);
}
参照元：https://www.yamada-kensetsu.co.jp/cms/bukken/minamigyotoku/
参考：https://photoshopvip.net/126760
補足/ヘルプ情報の見せ方
日頃大変お世話になっている某キャッシュレスアプリから。
？アイコンをタップし表示されるヘルプ情報の見せ方の個人的に一番好きなUIでして。
こちらは某ポイントを利用した資産運用のページですが、画面下のリスト上の右にある「コース説明」をするためのヘルプマーク（？アイコン）を押すと下からニュっとモーダルウィンドウのようなものが表示されます。
スマホを片手で操作した際に”親指が届く範囲”で完結している点が個人的Goodポイントです！こういう補足情報は手軽にサッと確認できる方がストレスがないですね。特に閉じるボタンが親指から遠くなればなるほど辛い…。
アプリ内のヘルプがすべてこの表示方法に統一されている点も良きです。（一部例外あり）
参照元：https://paypay.ne.jp/のアプリ版のみ
おわりに
いかがでしたでしょうか？活用できそうな手法は取り入れていきたいですね。
またストックが溜まったらご紹介できればと思います。
明日は、@kalzit さんの記事です、よろしくお願いします。