UIデザイン観察

+4

Bono-UIの基本知識

「基礎知識」というタイトルの動画なのに、知らんことはまだまだいっぱいです😂 コツコツ頑張るぞー 【かかった時間】※正確にメモしていなかったのでアバウトです ・執筆時間:1h 【学んだこと】 ・UI=「情報表示エリア」+「アクション・ナビエリア」 ・UIパターンは3つ ①ヘッダーに「アクション・ナビ」:スタバ 設定マークのところとか? ②フッターに「アクション・ナビ」:アディダス これはただのボトムナビか?🤔ページ全体に対するボタンじゃないな。。。 他にあるかまた探して

スキ
2
+9

【UI比較】 料理アプリのレシピ画面

こんにちは!お久しぶりです。 今回は、DailyUI #012のお題である「料理アプリのレシピ画面」のUI考察をしていきたいと思います。 参考にさせていただいたアプリは、DELISH KITCHENさん、クックパッドさん、クラシルさんです。 UI勉強中の初心者が知識向上のために、勝手にアウトプットさせていただいておりますので、間違いやフィードバックがあればなんなりとご指摘ください...。 それでは、はじめていきます! 目次 01. カラーとフォントサイズの比較 02

+1

音楽アプリ一覧画面分析

この記事では、音楽アプリの一覧画面(以下のような画面)の各アプリの比較を行っていきます。 基本的に、以下の観点から分析していきます。 ・他のサービスとは異なる機能、コンセプトは何か ・どんなユーザー層を想定しているか 各アプリがどんな項目を一覧画面に入れているかの特徴を紐解き、分析していきます。 Apple Music項目一覧 ・アーティストインタビュー ・プレイリスト(地域ごと) ・プレイリスト(気分別) ・プレイリスト(アーティストごと) ・ベスト(世界都市別) ・

スキ
1
+3

日常に紛れる優れたUIデザイン考察【駐車場編】

こんにちは。 株式会社アジケでUIデザイナーをしている山本です。 今回日常にあるデザインを考察してみようと思い駐車場に目を向けてみました。 駐車場には立体駐車場や平面駐車など、様々な種類がありますが 今回は平面駐車に焦点を当ててデザイン事例を紹介していきたいと思います。 そもそも駐車場とは 限られたスペースを線で区切り、無駄なスペースができないよう 車を誘導しスムーズに停めて置ける場所なのです。 なのでよく見る一般的な駐車場も一つ一つに意味が込められています。 直角駐

スキ
20
+3

最小タップ領域は44*44pxやけど検索バーは?

はじめまして!千葉工業大学知能メディア工学科4年のかいえだと申します。 初めてのnoteですが細かい自己紹介などは省略して、さっそく本題に入りたいと思います。 UIの勉強中私はUIを学習する上で、HIG(ヒューマンインターフェイスガイドライン)を踏襲し、情報設計などを行っています。 そんな時にふと感じた疑問があるので共有させてください。 最小タップ領域HIGにはUIを設計する上で非常に細かい定義がされています。 その中でも今回お話ししたいのは『最小タップ領域は44p

スキ
16
+17

【UI観察】#01.物件サイトの情報設計を観察した。

こんにちは。皆さんいかがお過ごしでしょうか。実は私の推しアイドルがとある賃貸住宅物件情報サービスのCMソングを担当しまして。うれしかったので今日はそちらのサービスさんを覗いてみようと思います。(ぜひアイドルの応援もよろしくお願いします。)(布教を欠かさないオタク) こちらに記述しておりますのはあくまでも私個人の考え・感想です。本文に登場するサービスや施設、企業団体様とは全く関係ありません。御理解の方よろしくお願いいたします。 アパマンショップ 皆さんご存知アパマンショップ

スキ
5
+1

Amazon.co.jpのUIを変えてみた。

私は大半の買い物をAmazonで済まします。東京で一人暮らししていますが、机から食器まで、ほとんどAmazon Primeに翌日配送してもらいました。そうなるとリピートしたいものが出てくるのですが、Amazonの注文履歴がどうも使いづらい部分があったのでAdobe XDを使って改善案を作ってみました。 注文履歴を閲覧しにくい 上の画像に挙げたように、Amazonのヘッダーにある「注文履歴」から自分が購入した商品を閲覧できるのですが、初期設定で「過去3か月」のアイテムが表示

検索結果の絞り込み・並び替えUIの観察

先日、検索結果の絞り込みUIの検討をするために事例を調べたところ、意外にもアプリによって様々な違いがありました。面白いテーマなため観点ごとに違いを整理し、メリット・デメリットや設計意図を考察しました。注目した観点は以下の7つの点です。 1. 絞り込み・並び替えボタンの配置 2. 絞り込みと並び替えの区別 3. 絞り込みUIの表示方法 4. 絞り込みUIの非表示方法 5. 絞り込み条件の指定方法 6. 数値の範囲で絞り込む場合の指定方法 7. 絞り込み後の表示の変化 これら

スキ
355

#4.ニューモーフィズム

SNSでふと気になるUIデザインを発見しました。密度の高い液体のような表現で、シャドーを活用したグラフィックが印象的で目を惹きました。”ニューモーフィズム(Neumorphism)”というそうです。 こちらに記述しておりますのはあくまでも私個人の考え・感想です。本文に登場するサービスや施設、企業団体様とは全く関係ありません。御理解の方よろしくお願いいたします。 ニューモーフィズム(Neumorphism)とは Dribbbleのある投稿に端を発して話題となったデザイン手法

スキ
1

#2.ゲームUIから学ぶ、触りたくなるUI

機能性の高さを保ちつつサービス全体の魅力が伝わるUIデザインとは一体何なのでしょうか?そこで今回は演出やエンターテインメント性の強いゲームのUIデザインから”ワクワク感や没入感”を学びたいと思います。 こちらに記述しておりますのはあくまでも私個人の考え・感想です。本文に登場するサービスや施設、企業団体様とは全く関係ありません。御理解の方よろしくお願いいたします。 任天堂『スプラトゥーン』UIデザイン大ヒットゲームシリーズのスプラトゥーン。UIの基本である”分かりやすさ”を

スキ
2