マガジンのカバー画像

seya's ほぼ Daily UI

70
運営しているクリエイター

#ほぼD

〜ほぼ 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 では他の要素を薄くすることによ