任天堂のUI/UXデザイナーが語るデザイン思想。UI Crunch #13 娯楽のUI【書き起こし前編】｜Goodpatch Blog グッドパッチブログ
イベントレポート 任天堂のUI/UXデザイナーが語るデザイン思想。UI Crunch #13 娯楽のUI【書き起こし前編】 私たちが利用するサービスやプロダクトには、毎日使う実用品もあれば、娯楽品もあります。目的は異なっても、どちらも生活に欠かせないものです。技術が進化し、新しいものが生まれ続ける現代において選ばれるサービスやプロダクトには、人に寄り添ったデザインが求められることは想像に難くないでしょう。では、娯楽品のデザインに潜むロジックや哲学はどのようなものなのでしょうか。 2018年4月27日、DeNAとGoodpatchが主催するUI Crunchは、任天堂株式会社さまをゲストに迎え「UI Crunch #13 娯楽のUI – by Nintendo –」を開催しました！告知開始直後からたくさんの反響をいただき、最終的には4200人以上の方々にご応募いただきました。伝説の回となった
iOSアプリによく使用されているナビゲーションの最新パターンとそれぞれの特徴
iOSアプリによく使用されているナビゲーションのパターンとそれぞれの特徴を紹介します。 情報の階層ツリーを行き来するための構造型ナビゲーション、ユーザーの注意を引くためのオーバーレイ型ナビゲーション、特別なコンテンツで使用する埋め込み型ナビゲーションなど、最近のアプリに必須のナビゲーションばかりです。 Modern iOS Navigation Patterns by Frank Rausch 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 最新のiOSのナビゲーションパターン 構造型ナビゲーション オーバーレイ型ナビゲーション 埋め込み型ナビゲーション 参考資料 最新のiOSのナビゲーションパターン この記事では、ドリルダウン、モーダル、ピラミッド、シーケンスなど、iOSアプリを構造化す
現場で使えるモードレスUIの具体例と実践テクニック
はじめに 先日「Modal、Dialog、Drawer の違い」について解説した記事を書きました。 この記事の中で「モードレス」について軽く触れましたが、 「そもそもモードレスってなに？」 「モードレスな UI ってどんなものがあるの？」 と疑問をもった方が多いかと思います。 本記事ではモードレスにフォーカスを当て詳しく解説します。また、記事の後半では厳選した具体例 5 選を紹介します。 この記事を読み終えれば、現場で使えるためのエッセンスが身についているはずです。 モードレスとは モードレスは言い換えると「モードがない」「モードを持たない」となります。 ユーザが特定のタスクを強制されることなく、任意の UI オブジェクトを操作できる状態を指します。 モードレスな UI は自由に操作できるため、ユーザビリティを向上させます。 アクセシビリティの観点でも短期記憶に負荷をかけないため、ユーザに
myTOKYOGASにおけるUIデザイナーの役割と業務内容について｜東京ガス内製開発チーム
こんにちは！UIUXデザインチームでmyTOKYOGASデザインを担当している鈴木です。 東京ガスには2023年2月に経験者採用で入社しました。 今回はUIデザイナーの役割と業務内容についてご紹介いたします。 UIデザイナーの役割私は、ユーザーが直接触れる画面や機能のデザインを主に担当しています。 ただ見た目を良くするだけではなく、ユーザーが求める情報を迅速に見つけられるようにしたり、直感的に操作できることを意識しデザインしています。 具体的には、ガスや電気の料金／使用量を確認したい、契約情報の確認や更新をしたいなど、それぞれのケースにおいて分かりやすいUIデザインを心掛けています。 私が重視している４つのポイント①ユーザー目線での設計実際にユーザーがサービスを利用する際の体験をmyTOKYOGASに関わるメンバーでカスタマージャーニーを作成し、課題を抽出しながらデザインをしています。 た
Decision Trees For UI Components — Smashing Magazine
Imagine finally resolving never-ending discussions about UI decisions for good. Here are some practical examples of decision trees for UI components and how to use them effectively. An upcoming part of Smart Interface Design Patterns. How do you know what UI component to choose? Decision trees offer a systematic approach for design teams to document their design decisions. Once we’ve decided what
Top 10 Application-Design Mistakes
Summary: Application usability is enhanced when the UI guides and supports users through the workflow. Designing complex applications is a challenging undertaking. Building applications that have both the depth to support complicated tasks and the intuitiveness to make it clear how to get that work done is a tremendous challenge. We spend a full day on this topic in our Application Design for Web
Redesign the biggest Ice Cream Brand in Japan “31 Ice Cream’’
How do I collaborate with an international team and redesign a decade-old app product within an extremely tight timeframe while enhancing the user experience that impacts more than six million users? This is a story from the largest ice cream brand “31 Ice Cream (Baskin-Robbins)” in Japan. To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this ca
ちゃんと名前で呼べますか？UIコンポーネントの名称クイズ100問【中級編】｜Goodpatch Blog グッドパッチブログ
UIデザインを学んだり興味を持っているみなさんに向けて、UIコンポーネントに関する知識をクイズ形式で紹介するこのシリーズ。100種類のUIコンポーネントについての解説を、初級・中級・上級に分けて全3回でお届けしています。 以下の画像と説明を見て、コンポーネントの名称を当ててみてください。答えの部分をクリック（タップ）すると正解例として、UIデザインの場で広く使われている呼び方が表示されます。中級編は全部で32問。前回からの続きで、Q35からスタート！ Lv.3：正解できたらUI好き 【Q35】 アイコンをタップする、または画面をスワイプすると横から表示されるメニュー。 答え ドロワー（ドロワーメニュー／ハンバーガーメニュー／スライドメニュー） 【Q36】 親ビューとの相互作用を防ぎ、閉じるために明示的なアクションを必要とするコンポーネント。焦点を絞ったモードでコンテンツを表示する。 答え
Material Design コンポーネントまとめてみた Badges編｜やなしん
こんにちは！ 今回からMaterial Design 3 のコンポーネントをまとめていきます。 第1回はBadges編です。 バッジとはナビゲーションアイテムやアイコンの通知、カウント、ステータス情報を表示するものです。iOSバッジ探してみました！ 使用方法□ 公式に書かれていること⚡ ラベルまたは数字を含めることができます https://m3.material.io/components/badges/overview ⚡ コンテンツは「+」を含む 4 文字までに制限してください https://m3.material.io/components/badges/overview ⚡ 小と大の2種類 https://m3.material.io/components/badges/overview □ よくある使い方と特徴バッジは、通知、アイテム数、またはナビゲーションの目的地に関連す
[Unity]スマートフォンのノッチとセーフエリア - ブログ | 株式会社トリサン | TORISAN
こんにちは。プログラマーのIです。 今回はUnityを利用してスマートフォンアプリのUIを作成する際、 注意が必要な部分とその処理方法について説明したいと思います。 本投稿は Unity2021.3.14f1 をベースで作成した内容になるため、 それより古いバージョンでは一部の機能は導入されていない可能性があります。 ご注意ください。 まず簡単なUIを用意しました。 TopとBottomが今回のメインになるUIです。 用意したUIをGameビューで確認すると問題なく表示されます。 それでは、普通のGameビューの代わりに Simulatorビューで確認してみましょう。 まずは iPhone8 で確認するために 端末リストから iPhone8 を選択しましょう。 特に問題なく表示されているのが確認できます。 ただ、最近のスマートフォンは 大体「ノッチ」と呼ばれるカメラーなどの部品が搭載されて
![[Unity]スマートフォンのノッチとセーフエリア - ブログ | 株式会社トリサン | TORISAN](https://cdn-ak-scissors.b.st-hatena.com/image/square/57a17afc66d558f08f429ba4c26f498f27fcff23/height=288;version=1;width=512/https%3A%2F%2Ftorisan-net.com%2Fwp%2Fwp-content%2Fuploads%2F2022%2F12%2Feyecatch-4.png)
ちゃんと名前で呼べますか？UIコンポーネントの名称クイズ100問【初級編】｜Goodpatch Blog グッドパッチブログ
こんにちは！Goodpatch UIデザイナーのharuです。突然ですが、皆さんはUIデザインの超基本となる「コンポーネント」についてどれぐらい知っていますか？ ユーザーインターフェースを構成するパーツのことを「コンポーネント」といいます。分かりやすい例としては、アクションや遷移のトリガーとなるボタンなどがあります。UIデザイナーは日々、ありとあらゆるUIコンポーネントを「用法用量（原則的な使い方）」に沿って使いこなしながら、デザインに取り組んでいます。 そこでこの記事では、UIデザインを学んだり興味を持っているみなさんに向けて、バラエティに富んだUIコンポーネントをクイズ形式で紹介します。用意した数はなんと100種類（！）。初級・中級・上級に分けて全3回でお届けしていきます。 まずは初級編。ソフトウェアデザインに関わる人たちの共通言語ともいえる、最も基本的なコンポーネントを集めました。
UIデザイナーは要チェック！ 新しくなったMaterial Design 3は可変フォントやアイコン、アクセシブルで使いやすいカラーに
5/11,12に開催されたGoogle I/O 2022に伴い、Material Design 3のガイドラインが大幅アップデートされたので紹介します。 注目すべきキーワードは、アクセシビリティとパーソナライズ。 アクセシブルなコントラストを備えたダイナミックカラー、可変フォントRoboto FlexとRoboto Serif、可変アイコンフォントを使用したマテリアルシンボル、スイッチをはじめUI要素のデザインも変更されています。 Material Design 3 Material Design 3の大きな特徴は、表現力豊かなパーソナライズ機能とアクセシビリティ機能です。ダイナミックカラーのサポートに加えて、いくつかのマテリアルコンポーネントもアップデートされました。新機能は、オンラインやFigmaやGoogle Fontsなどで提供されており、すぐに利用できます。 Dynamic co
Dynamic Islandに至るまでの道のり。Appleが検討したデザインやUIが判明 | ゴリミー
Dynamic Islandに至るまでの道のり。Appleが検討したデザインやUIが判明 「えっこれはさすがにナシじゃない？」と所見で思ってしまうようなデザインもしっかりと検討されていたみたい MacRumorsより Appleは2022年に発表したiPhone 14 Proで、Dynamic Islandを発表した。iPhone Xシリーズから導入されていた画面上の切り欠きに内蔵されたカメラなどをディスプレイ内に埋め込み、ソフトウェアと連動することで画面スペースを無駄にしない画期的なアイディアだった。 しかし現在のデザインに行き着くまでには、様々なアイディアが議論されていた。MacRumorsが入手した情報によると、Appleは従来のノッチを保ったままスタータスバーにある時間、電波強度、バッテリー残量などがサイドバーとして必要に応じて出現するデザイン案があった。他にもステータスバー部分を
間違えがちなUI用語《モーダル？ポップアップ？》｜Link-U Creative Team
こんにちは！Link-UのUIチームです！ 今回の記事はモーダルやダイアログ、ポップアップなどの似たようなUI用語について具体的な使用用途をまとめました。 混同しがちな用語なので明確に違いを捉えて理解しましょう🔥 モーダル特定の操作を求めるために表示させるウィンドウ 画面を覆い被さるようなウィンドウが表示されることを「モーダル」と呼びます。 情報を入力するように促したり、承諾やキャンセル、項目の選択などの目的で使用されます。 ハーフモーダル画面下部から出現し、画面の半分まで表示されるモーダル 背後のコンテンツを見続けることができ、背後コンテンツと操作内容が関連していることが大きなポイントになります。 情報量があまり多くなく、簡単に操作ができるということも大切です！ モーダルとハーフモーダルの使い分けは ？🤔 モーダルとハーフモーダルの使い分けは、 " メインコンテンツを見ながら操作すべ
iPhone アプリでの Haptic Feedback による効果的なマイクロインタラクション｜Keisuke Tada
iPhone には Haptic Feedback という振動によるフィードバックの仕組みがあり、それを自分の開発しているアプリに組み込むことが可能です。しかし、いざ組み込もうと思うと、使いどころがなかなか悩ましいといったことがあると思います。 この悩みを解決できるように、Haptic Feedback の考え方や実際の事例をもとに、どういう時に Haptic Feedback を用いると効果的かということを iOSDC Japan 2018 で発表しました。 発表で用いたスライドは下記ですが、メインの事例紹介がすべて動画だったのでこの記事内ですべて紹介します。 Haptic Feedback とは 今回取り上げるのは、iPhone 6s 以降の端末に搭載の Taptic Engine を用いた触覚フィードバックについての話です。 例えば App Store でアプリをインストールする際に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Text input states
https://x.com/s_jhnxp/status/1807751924487475547
ProtoPie Japan
5 Soft Skills Every Product Designer Should Master
https://twitter.com/usagimaruma/status/1759820107575144938