seya's ほぼ Daily UI｜seya

〜ほぼ Daily UI vol.70〜 Event Listing

参考にしたサイト・アプリ Meeup Peatix Friends of Figma 珍しいカルーセル式。パッパとイベントを一覧で確認できないので正直微妙かも。 Doorkeeper 時間ごと表示ユーザが時間潰し目的に探しているのだとしたらアリかもデザインを考える上でのポイント Card を魅力的にデザインするリストではユーザが詳細を見たくなるようなアイテムを表示することがゴールになるかと思われるので、サムネイル、開催日時、タイトルなどで引き込むのが重要になる

〜ほぼ Daily UI vol.69〜 Trending

参考にしたサイト・アプリ Twitter App Store ジャンプ+ TikTok デザインを考える上でのポイントランキングで強調するか否か例えば一位のものはより大きくするかどうか。ユーザにとって人気のものが分かることが重要であったり、そのランキングを上げることのインセンティブがある(ユーザがシェアしたくなったり、作り手のモチベーションになったり)場合はランキングによって強弱をつけるのは有効そう。そうではなくトレンドの中からなんでもいいので見たくなるものが

〜ほぼ Daily UI vol.68〜 Flight Search

参考にしたサイト・アプリ Google Expedia British Airline デザインを考える上でのポイント 1ページで完結する UI とそうでないもの Google のものが特徴的だなと思ったのは検索ボタンがないことで、条件を変更したらすぐに下に検索結果が出るようになっている。 1ページで完結する方がなんとなく便利な気がしたが、大量の結果を見るのには不向きな気がしたのと、逐一ローディングが入るのは少しストレスなので、ローディングは検索結果を表示する部分に

〜ほぼ Daily UI vol.67〜 Hotel Booking

参考にしたサイト・アプリ Agoda Booking.com Expedia デザインを考える上でのポイントホテルを選ぶ時に必要な情報を優先度つけて表示ものすごく情報量が多いが、大事なのはホテルの写真、名前、クチコミ評価、宿泊費、あたりは重要でファーストビューで見えた方が良さそう。ついで立地や部屋の詳細などを見られるようになっている。Booking.com だと部屋の詳細はそれ専用のページと階層が区切られていた。 CTA(予約、客室選択)が埋もれないようにする

〜ほぼ Daily UI vol.66〜 Statistics

参考にしたサイト・アプリ Fitbit PayPay Google Analytics デザインを考える上でのポイント見たい単位で差分を見やすくするこういった Stats の目的は目標に届いているかの確認だったり、時系列での変化を見ることだと思うので、例えば PayPay のような月次でみたいものは月毎のバーチャートで表現する。用途にあったグラフの表現形式を選ぶ重要な指標を独立させる特に重要な指標はその値とセットでグラフのそばにおいてあげると Stats の

〜ほぼ Daily UI vol.65〜 Notes Widget

参考にしたサイト・アプリ iPhone のメモ一覧ではタイトルと最初の数文字を出す note よく見ると画像アップロードとかは固定されるようになってる。Undo も編集中でプライマリーなアクションだから少し大きくなっているのかな Notion デザインを考える上でのポイント一覧では一覧性を高めつつ、選びやすくするどんなこと書いてたっけと言うのが分かりやすいように、最初の数文字を薄く表示させたり、更新日時でソートさせたりなどの工夫が必要。 WYSIWIG にするな

〜ほぼ Daily UI vol.64〜 Select User Type

参考にしたサイト・アプリ dribbble 以外で該当の UI 見つけられなかった。 https://www.pinterest.jp/pin/137148751130535114/ シンプルだけどこれよな全画面でカルーセルで選ぶのいい感じ。ゲームっぽい高低差つけて目立たせるのいいかもデザインを考える上でのポイント効果的なアイコンで選びやすくその User Type が何なのかを視覚的にすぐ掴みやすくするためにアイコン選びが重要。また、選択肢の数にもよると

〜ほぼ Daily UI vol.63〜 Best of 2020

元のお題は2015だけど、あまり覚えてないので2020にした。参考にしたサイト・アプリ The Game Awards ダイナミックなカルーセルでかっこいい。Discoverってスクロールサジェストもいい State of JS 特殊な見せ方。一位が何かとかランキングっていうより遷移に重きをおいてるからこんなグラフになっているのかも Dribbble 写真も相まってかっこよす。ワンアイテムバーンってやるのいいかもデザインを考える上でのポイントメインのグラフィック

〜ほぼ Daily UI vol.62〜 Workout of the Day

参考にしたサイト・アプリデザインを考える上でのポイント何をどのくらいやればいいのか分かりやすい多分メディアとしては動画が一番望ましそう。誰でもわかるようなワークアウト(ジョギングとか腕立て伏せ)しかないのであれば、動画あってもむしろ邪魔だと思うので、ワークアウトの難易度で表現を変える。どこまで終わったのかをトラックしやすくするワークアウトが複数ある場合はどこまで終わったのかをOpacity下げたりチェックマークつけたりで分かりやすくする。自分のデザインフロー

〜ほぼ Daily UI vol.61〜 Redeem Coupon

Imagine that it's time for someone to redeem a coupon. It could be via an in person self-checkout screen or on a website. Think about the requirements of a coupon such as the discount percentage, the subtotal, total, and other unique featur

〜ほぼ Daily UI vol.60〜 Color Picker

参考にしたサイト・アプリ Google Color Picker 左に広い面積で色を確認できるのいいかも Figma figma.com htmlcolorcodes https://htmlcolorcodes.com/ デザインを考える上でのポイント色相のスライダーと彩度と明度のpickerが一般的なUIっぽい基本的にこの形なので、強い目的がない限りはこのUIを踏襲した方がいいっぽい。色を選んだ後コピペして使いやすいようにするおそらくメインのユースケース

〜ほぼ Daily UI vol.59〜 Background Pattern

Hint: Design a boarding pass. Consider the origin, the destination, gates, seats, the airline, etc. (As always, it's up to you!) 参考にしたサイト・アプリ Goodpatch Blog https://goodpatch.com/blog バックグラウンドにアイコン敷き詰めるのかわいいメルカリ https://www.mercari.com

〜ほぼ Daily UI vol.58〜 Shopping Cart

参考にしたサイト・アプリ Nike https://www.nike.com/jp/ja/cart 合計の部分だけフォント違うけど何目的なんやろ Amazon https://www.amazon.co.jp/ref=navm_hdr_logo デザインを考える上でのポイント個数を選ぶUI 普通のプルダウンにするかこう言う感じのやつ削除の位置 Amazonみたいにアイテム自体の情報の下にアクションを集めるパターン。個数表示で1からマイナスにするときはゴミ箱にすると言

〜ほぼ Daily UI vol.57〜 Video Player

参考にしたサイト・アプリ YouTube Twitter Frontend Masters デザインを考える上でのポイント動画の視聴を邪魔しないように最小限に動画のコントロールは動画を見ながらでもストレスなく操作できるように半透明にしたり、あまり縦に長くなりすぎないようにする必要がある。全画面前提なら、下の方に余白を固定で作るとかもできるかもしれない。 Hoverをコントラストを下げることによって分かりやすくする Netlifx では他の要素を薄くすることによ

seya's ほぼ Daily UI

記事一覧