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 でアプリをインストールする際に
想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
SND: Crafted UI sound assets for UX developers
様々なインタラクションに対応したシンプルなサウンドキットです。すべての音を、音の最小要素である正弦波をベースにデザインしました。比較的再生能力の低いスピーカーでも再生可能な周波数帯域を中心に、できるだけシンプルに、小さなファイル容量でデザインされているので、ウェブ、アプリ、サイネージなど様々なシーンでご利用いただけます。 土屋泰洋 サウンドデザイナー/リサーチャー The simple sound kit for designing a variety of interactions. All sounds are designed based on sine waves; the smallest pure element of sound. It is designed to be as simple as possible with a small file size, focusi
Mamba UI
Kickstart your next website in minutes Mamba UI is a free, open-source collection of UI components and templates based on Tailwind CSS. Make the web your playground Easy to use UI elements based on Tailwind CSS Mamba UI is a toolkit for developers and designers to make creating interfaces easier. We have some of the most popularly used components to help you get started. Everything is modular and
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ProtoPie Japan
5 Soft Skills Every Product Designer Should Master
https://twitter.com/usagimaruma/status/1759820107575144938
UI Pocket
Galileo AI
daisyUI — Tailwind CSS Components ( version 4 update is here )
Spectrum, Adobe’s design system
