usagimaru

なめらかなUIを実現するための考え方を紹介しています。各アカウントはbentoに記載し…

usagimaru

なめらかなUIを実現するための考え方を紹介しています。各アカウントはbentoに記載しています。 https://bento.me/usagimaru

  • ソフトウェアデザインとUIの構造設計

    ソフトウェアデザイン分野における構造設計に関する考え方や方法論を紹介します。 特にUIデザインの「裏側」とされる分野に焦点を当て、情報アーキテクチャ、モデリング、構造化、インタラクションなどの直接“見た目”ではないUIデザインを中心に、さまざまな考え方や方法論を気まぐれに紹介します。

  • UI設計ビジュアライズノート集

    usagimaruのTwitter / Xで不定期に投稿してきたUI設計のビジュアライズノート（デザインパターン解説）を収録しています。新しい投稿も随時追加していきます。

  • 有料記事まとめ

    公開している単体有料記事をまとめています。

固定された記事

モデルベースUIデザイン—構造化UIデザインの発想と方法論

ユーザーインターフェイス（UI）のデザインに強く求められる技術や能力を列挙するとしたら、私は “情報を整理する能力” をまず挙げます。デザイナー職に対する世間一般の…

1,000
usagimaru
usagimaru
1年前
475

「アクセシビリティ」というものの一つの考え方

「アクセシビリティ（accessibility）」と聞くと、一般に想起するのは 「障害を持った人に向けた、何か特別なサポートやその設計」 だったりすると思うのですが、私はもう…

usagimaru
usagimaru
6日前
30

なめらかなユーザーインターフェイスの実現

「なめらか」というと、表面に引っ掛かりがない様子や、大きな摩擦がはたらかずに物がよく滑る様子などを表します。UIにおいてはアニメーションの動きがなめらかだとか、コ…

usagimaru
usagimaru
2週間前
110

アクションの提供手段：フローティングツールバー

フローティングツールバー（Floating Toolbar）パターンは、選択した要素に対して実行可能なアクションの一覧を提供するために、その近傍に都度ポップアップで現れることが…

usagimaru
usagimaru
1か月前
15

try! Swift 2024にて良いアプリデザインの感覚の持ち方について講演しました #tryswift

はじめにtry! Swiftとは、AppleプラットフォームおよびSwiftデベロッパーのための国際コミュニティです。 世界中から参加者が集まり、最先端のSwift技術やAppleプラットフ…

usagimaru
usagimaru
2か月前
34

UIの余計なお世話: 固有番号の接頭辞・接尾辞を入力済み状態にしない

何かの固有番号（シリアル番号、ID等）を表す文字列に固定の接頭辞・接尾辞が付いている場合に、入力を受け付けるテキストフィールド（フォーム）で接頭辞・接尾辞を切り離…

usagimaru
usagimaru
4か月前
28

UIの余計なお世話: テキスト全体を選択してあげなくても良い

テキストフィールド（フォーム）でたまにある余計なお世話としては、単クリックでその内容を選択状態にしてくれる振る舞いがあります。しかしテキスト全体を選択状態にされ…

usagimaru
usagimaru
4か月前
25

カット、コピー、ペースト、アンドゥをX,C,V,Zに割り当てたのは誰なのか

結論から言うとこれはLarry Teslerだそうなのですが、C=Copyはわかるにしろ、XとVがなぜCutとPasteに結びつくのか疑問に感じていました。Zもよくわかりません。これについ…

usagimaru
usagimaru
5か月前
71

Appleプラットフォームで“app”が「アプリ」表記に変わった件

時期的にはiOS 17, macOS Sonoma 14のリリース辺りから、Appleプラットフォームでの日本語環境における“app”の訳・表記が「アプリ」に変わりました。これまでは日本語表…

usagimaru
usagimaru
5か月前
82

Progressive blur効果を用いたUI表現

Progressive blur（プログレッシブ・ブラー）というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur（可変ブラー）、Gra…

usagimaru
usagimaru
5か月前
130

「デザインシステム」がよくわからないので、理解の仕方を変えてみる

ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしない…

usagimaru
usagimaru
7か月前
365

カレンダーのためのインターフェイス考察 設計思想編

こちらは「Timelab Advent Calendar 2023」5日目のアーティクルです。 現在私は本業とは別に株式会社タイムラボさんにてカレンダーソフトウェアの設計と開発に携わっていま…

usagimaru
usagimaru
7か月前
59

今年導入したソフトウェア、魅力的だったソフトウェア（2023）

11月のブラックフライデー／サイバーマンデーセールもあり、今年もMac appを中心にいろいろなソフトウェアを導入してみました。中にはきっと使わなくなってしまうものもあ…

usagimaru
usagimaru
7か月前
279

フローティングビューとモードの設計

このアーティクルでは、いわゆる「モーダル（ビュー）」と呼ばれるUI表現パターンと、実際のモード設計の区別の仕方を簡単に解説します。まず結論として、モーダル、モード…

usagimaru
usagimaru
7か月前
72

モバイルアプリケーションは富士山型のナビゲーションで設計する

基本は富士山型ナビゲーション富士山型のナビゲーションは、動線とその起点が複数あり、最終的に一つの「目標／目的／核となる機能」に収束する構造をしています。特にモバ…

usagimaru
usagimaru
9か月前
9

フィッツの法則（Fitts’ law）

主要なGUIシステムでは、プルダウン／ポップアップメニューでのサブメニューの展開の際にフィッツの法則を応用して「ななめ移動」の許容を行なっています。これにより、ユ…

usagimaru
usagimaru
10か月前
43
固定された記事

モデルベースUIデザイン—構造化UIデザインの発想と方法論

ユーザーインターフェイス（UI）のデザインに強く求められる技術や能力を列挙するとしたら、私は “情報を整理する能力” をまず挙げます。デザイナー職に対する世間一般の認識は「なんとなく絵を描くのが得意な人」だと思うのですが、絵が得意か不得意かはあまり本質的ではなく、情報をどのように整理して適切に表現できるのかが重要だと考えます。 UIデザインにおける “情報を整理すること” をもう少し詳しく説明すると、「設計コンセプトを形にし、コンセプトに基づく適切な部品の姿や機能を記述し、

1,000
usagimaru

「アクセシビリティ」というものの一つの考え方

「アクセシビリティ（accessibility）」と聞くと、一般に想起するのは 「障害を持った人に向けた、何か特別なサポートやその設計」 だったりすると思うのですが、私はもう少し普通のこととして考えてみても良いのかなと思います。このアーティクルでは、私なりのいくつかの考え方をご紹介します。 アクセシビリティ → 情報への到達容易性ある道具のアクセシビリティというものを考えたときに、ユーザーがその道具を使って「その人は情報に適切に到達できるのかどうか」と思考を巡らせてみます。

usagimaru

なめらかなユーザーインターフェイスの実現

「なめらか」というと、表面に引っ掛かりがない様子や、大きな摩擦がはたらかずに物がよく滑る様子などを表します。UIにおいてはアニメーションの動きがなめらかだとか、コンテンツの読み込みが速いとか、絵が美しいとか、そういう直接的な印象に対してよく用いられる言葉ですが、私は「なめらかなUI」というものは、単にツルツルした表面の印象やアニメーションなどの振る舞いのみならず、それが人間（ユーザー）にとって扱いやすいと感じられる印象があり、実際に心地よく感じられ、滞りなく求めた以上の良き効

usagimaru

アクションの提供手段：フローティングツールバー

フローティングツールバー（Floating Toolbar）パターンは、選択した要素に対して実行可能なアクションの一覧を提供するために、その近傍に都度ポップアップで現れることができるツールバーの一種です。画面上の任意の場所に恒久的に浮遊表示させられるパターンのものもあります。 モバイルのテキストエディタやWebベースのツール系ソフトウェアに採用例が多く、主に選択したコンテンツの属性を編集するためのアクションメニューやツールバーを提供する目的で使われることが多いようです。従来

usagimaru

try! Swift 2024にて良いアプリデザインの感覚の持ち方について講演しました #tryswift

はじめにtry! Swiftとは、AppleプラットフォームおよびSwiftデベロッパーのための国際コミュニティです。 世界中から参加者が集まり、最先端のSwift技術やAppleプラットフォームの情報、知識、テクニックを共有することを目的としています。カンファレンスは2024年3月22日より3日間にわたって東京・渋谷にて5年ぶりに開催されました。 私は高度なSwiftの知識を持ち合わせているわけではないのですが、今回ありがたいことにオーガナイザーのd_dateさんよりお

usagimaru

UIの余計なお世話: 固有番号の接頭辞・接尾辞を入力済み状態にしない

何かの固有番号（シリアル番号、ID等）を表す文字列に固定の接頭辞・接尾辞が付いている場合に、入力を受け付けるテキストフィールド（フォーム）で接頭辞・接尾辞を切り離して受け付ける仕様であると、ユーザー側でいちいち接頭辞・接尾辞部分を除去する手間が生じます。 例えば“NMBR0123456789”というような固有番号を扱う際、テキストフィールド側で「“NMBR”を除く残り10桁部分を入力してください」という見え方になっていると、NMBRを取り除くためのテキスト編集作業がユーザー

usagimaru

UIの余計なお世話: テキスト全体を選択してあげなくても良い

テキストフィールド（フォーム）でたまにある余計なお世話としては、単クリックでその内容を選択状態にしてくれる振る舞いがあります。しかしテキスト全体を選択状態にされると、ユーザーが任意の範囲を選択する自由を制限しかねないため、このような振る舞いをわざわざ実装しなくても良いでしょう。 基本的にはOS標準の振る舞いを尊重し、その仕組みを邪魔しない機能を提供することが大切です。例えばデスクトップOSではトリプルクリックによって段落全体を選択できる機能が備わっていることがあります。

usagimaru

カット、コピー、ペースト、アンドゥをX,C,V,Zに割り当てたのは誰なのか

結論から言うとこれはLarry Teslerだそうなのですが、C=Copyはわかるにしろ、XとVがなぜCutとPasteに結びつくのか疑問に感じていました。Zもよくわかりません。これについて、都市伝説的に語られている言説にはこのようなものがあります。 これは間違いですが、それらしくも聞こえます。 カーネギーメロン大学のBrad Myers教授によると、XCVZの4種類のコマンドとキーアサインは、Larry Tesler本人によるものだそうです。彼はTeslerのメールメッ

usagimaru

Appleプラットフォームで“app”が「アプリ」表記に変わった件

時期的にはiOS 17, macOS Sonoma 14のリリース辺りから、Appleプラットフォームでの日本語環境における“app”の訳・表記が「アプリ」に変わりました。これまでは日本語表記はほぼ一貫して「アプリケーション」または英語のまま“app”が使われてきたので、この表記ルールに関しては大きな転換が起きたようです。 一般ユーザーからすると、「単に“app”が『アプリ』に変わったくらいで、大した変化ではないだろう」と思ってしまうのですが、今回はOS内の表記のほぼすべて

usagimaru

Progressive blur効果を用いたUI表現

Progressive blur（プログレッシブ・ブラー）というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur（可変ブラー）、Gradient blur（グラデーション・ブラー）と呼ぶこともあります。その見た目は通常のブラー効果（ぼかし、ガウスブラー）とは少し異なります。このアーティクルでは、UIにおけるProgressive blur（またはVariable blur）の概要とAppleプラットフォームでの技術検

usagimaru

「デザインシステム」がよくわからないので、理解の仕方を変えてみる

ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしないが故に、私にとっては積極的に使いたくない語になってしまっています。皆さんが「デザインシステム」の語で言及しているものは、本当に同じ概念を指しているのでしょうか？ 定義にあたってみる「デザインシステム」「Design system」の言葉の定義を軽く調べてみました。 とりあえずWikipedia（英語）にはこのよう

usagimaru

カレンダーのためのインターフェイス考察 設計思想編

こちらは「Timelab Advent Calendar 2023」5日目のアーティクルです。 現在私は本業とは別に株式会社タイムラボさんにてカレンダーソフトウェアの設計と開発に携わっています。その過程で考えた、ソフトウェアでのカレンダーインターフェイスに関する考察を簡単に書き起こしてみたいと思います。このあたりはきっとカレンダーを作る際の設計思想として根付いてくるものなので、仮にそれが世の中に発信するほどのものではないにしろ、言葉に起こすことは大切であろうと考え、筆を執りま

usagimaru

今年導入したソフトウェア、魅力的だったソフトウェア（2023）

11月のブラックフライデー／サイバーマンデーセールもあり、今年もMac appを中心にいろいろなソフトウェアを導入してみました。中にはきっと使わなくなってしまうものもありそうですが、これは使う使わないだけでなく、実装されているUIの研究をする目的だったり、あるいは単にクリエイターへの「応援」としてでもあったりします。いくつかピックアップしてみます。 Procreate Dreams (iPad)Procreate DreamsはiPadOS向けの2Dアニメーション制作ソフト

usagimaru

フローティングビューとモードの設計

このアーティクルでは、いわゆる「モーダル（ビュー）」と呼ばれるUI表現パターンと、実際のモード設計の区別の仕方を簡単に解説します。まず結論として、モーダル、モードレス問わず、画面の中で手前にポップアップしてくるようなビュー表現全般を「フローティングビュー（Floating view）」と呼ぶこととします。ポップアップしてくるビュー表現には、通常のウインドウ、モーダルダイアログ、ポップオーバー、バナー、トーストなどさまざまなものがありますが、これらを総じてフローティングビューと

usagimaru

モバイルアプリケーションは富士山型のナビゲーションで設計する

基本は富士山型ナビゲーション富士山型のナビゲーションは、動線とその起点が複数あり、最終的に一つの「目標／目的／核となる機能」に収束する構造をしています。特にモバイルアプリケーションでは複雑なUI構造を表現するにはユーザビリティ上の限界があるので、使い勝手を良くするためにもその構造をなるべくシンプルに保つ必要があります。そのアプリケーションで“できること”や目標（頂上）をただ一つに定め、麓からもその様子を眺めることができるようにします。アプリケーションを使い始めた時から唯一の目

usagimaru

フィッツの法則（Fitts’ law）

主要なGUIシステムでは、プルダウン／ポップアップメニューでのサブメニューの展開の際にフィッツの法則を応用して「ななめ移動」の許容を行なっています。これにより、ユーザが厳密なポインタ操作をすることなく、素早く目的のメニュー項目にポインティングすることを可能にしています。 ななめ移動の際には、ポインタの点からサブメニューの縦幅を底辺とする線で成り立つ三角形の仮想領域を展開し、この仮想領域にポインタが一定時間滞在する間はサブメニューの開閉を一時的に待機するという工夫です。このお

usagimaru