マガジンのカバー画像

UI観察マガジン

15
さまざまなサービスのUI観察をしてます。あなたがこれから作りたい or 作るサービスのUI設計にきっと役立つはず。
運営しているクリエイター

記事一覧

UI観察:コピーと複製の違いを理解する

UI観察の第15弾は「コピーと複製」について深掘りしていきます。 (その他のUI観察記事はマガ…

MAKOTO|Designer
4か月前
12

UI観察:履歴アイコンのベストプラクティス & デザインの細かな差異。

UI観察の第14弾は「履歴アイコン」について深掘りしていきます。 (その他のUI観察記事はマガ…

MAKOTO|Designer
5か月前
12

UI観察:ドロップダウンボタンとスプリットボタンの最適活用術

UI観察の第13弾は「ドロップダウンボタン」について深掘りしていきます。 (その他のUI観察記…

MAKOTO|Designer
6か月前
18

UI観察 - アコーディオンの目立たせ方、最適解は?

UI観察の第12弾は「アコーディオン」について深掘りしていきます。 (その他のUI観察記事はマ…

MAKOTO|Designer
6か月前
9

UI観察 - LINE・メルカリ等から学ぶ、適切なタブの使い方

UI観察の第11弾は「タブ」について深掘りしていきます。 (その他のUI観察記事はマガジンはこ…

MAKOTO|Designer
7か月前
12

UI観察 - 三点リーダー(縦と横)の使い分けは出来てますか?

UI観察の第10弾は「三点リーダー」について深掘りしていきます。 (その他のUI観察記事はマガ…

MAKOTO|Designer
7か月前
27

UI観察 - パンくずリスト(breadcrumbs)

今回のUI観察は、パンくずリスト(breadcrumbs)について深掘りしていきます。 (その他のUI観察記事はマガジンはこちら ↓) パンくずリスト(breadcrumbs)とはフロントエンドの開発に携わっている方にはお馴染みかと思いますが、パンくずリストは、ユーザーが現在どのページにいるのかを示す道しるべとしての役割を果たすリストです。 よく使われるUIテンプレートにおけるパンくずリストのデザインを詳しく見てみましょう。 MUIのパンくずリスト参照先 Boots

UI観察 - ピクチャー・イン・ピクチャー(PiP)

ピクチャー・イン・ピクチャー(PiP)という機能をご存知でしょうか? これは、YouTubeやAbemaな…

MAKOTO|Designer
8か月前
1

UI観察 - ツールチップ

勉強の一環でUI観察を始めていますが、今回はツールチップです。 (その他のUI観察記事はマガ…

7

UI観察 - オンボーディングでは、まずサービスの価値を伝えよう

とある本を読んでいて、オンボーディングの考え方が興味深かった。 ついついアプリやサービス…

11

UI観察 - 検索機能(Instagram)

Instagram(以降インスタ)の検索機能について深堀りしてみました。 (その他のUI観察記事は…

UI観察 - カテゴリ検索

今回のUI観察は、カテゴリ検索です。 YouTubeの検索ボックス下に、角丸のボタンが並んでいる…

2

UI観察 - 三角形マークの付いた小さな増減ボタン(スピンボタン)

勉強の一環でUI観察を始めていますが、今回はスピンボタンです。 (その他のUI観察記事はマガ…

2

UI観察 - 読み込み中のプレースホルダー(スケルトンスクリーン)

アプリ起動時やタップしてページを読み込んでいる時には、何も表示されていないとユーザーは不安になってしまいます。そのため、読み込み中を知らせるプレースホルダー(スケルトンスクリーン)が実装されていることが多いです。 その機能のアプリ別の挙動についてまとめたので、それぞれ紹介していきます。 (その他のUI観察記事はマガジンはこちら ↓) スケルトンスクリーンとは引用に記載の通り、どんなページが表示されるのかユーザーが予想できるのがメリットとなります。 スピナーとの違いとして