usagimaru

なめらかなUIの実現を志しています。各アカウントはbentoに記載しています。 htt…

usagimaru

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

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

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

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

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

固定された記事

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

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

1,000
usagimaru
usagimaru
1年前
468

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

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

usagimaru
usagimaru
3週間前
32

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

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

usagimaru
usagimaru
2か月前
24

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

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

usagimaru
usagimaru
2か月前
22

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

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

usagimaru
usagimaru
3か月前
71

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

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

usagimaru
usagimaru
3か月前
80

Progressive blur効果を用いたUI表現

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

usagimaru
usagimaru
4か月前
130

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

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

usagimaru
usagimaru
5か月前
356

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

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

usagimaru
usagimaru
5か月前
60

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

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

usagimaru
usagimaru
5か月前
275

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

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

usagimaru
usagimaru
5か月前
67

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

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

usagimaru
usagimaru
7か月前
6

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

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

usagimaru
usagimaru
8か月前
42

ナビゲーション設計の基本／ボトムアップ型設計とトップダウン型設計

ナビゲーションの基本パターンとその設計一覧－詳細（List-Detail） UIのナビゲーション設計では、「一覧 → 詳細」を基本とする構造で組み立てることで、整ったナビゲー…

usagimaru
usagimaru
8か月前
24

マウスポインタの作用点

マウスポインタは矢印や手などのアイコンで表示されますが、いずれかの1dotの点が実際のマウスポインタとして振る舞い、残りの部分は人間が理解しやすいようにするための飾…

usagimaru
usagimaru
8か月前
9

テキストの編集方式

直接操作方式テキストが常に編集可能である場合や、直接的に編集を行いたい場合には、直接操作方式を採用すると良い。テキスト内容は常に変更される可能性が高いため（不…

usagimaru
usagimaru
8か月前
4
固定された記事

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

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

1,000
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

ナビゲーション設計の基本／ボトムアップ型設計とトップダウン型設計

ナビゲーションの基本パターンとその設計一覧－詳細（List-Detail） UIのナビゲーション設計では、「一覧 → 詳細」を基本とする構造で組み立てることで、整ったナビゲーションを表現しやすくなります。一覧とは、ビュー表現でいうリスト、カラム、カルーセル、メニューなどのコレクション表現全般です。詳細とは、コレクションに羅列される個々の単体オブジェクトの表現です。 ナビゲーション設計に先立ち、情報の塊をコンテンツと見立てて概念定義に着手しておくと効果的です。 不要なら

usagimaru

マウスポインタの作用点

マウスポインタは矢印や手などのアイコンで表示されますが、いずれかの1dotの点が実際のマウスポインタとして振る舞い、残りの部分は人間が理解しやすいようにするための飾りです。 この1dotを作用点と呼ぶとすると、マウスポインタの表現として先端もしくは中心点となるようなところを作用点に割り当てるのが妥当と言えます。ユーザーのメンタルモデルを考えた時に、どこに作用点があれば自然と感じられるかを吟味します。 例えば矢印なら鏃の先端、人差し指なら人差し指の先端、虫眼鏡（ズーム）なら

usagimaru

テキストの編集方式

直接操作方式テキストが常に編集可能である場合や、直接的に編集を行いたい場合には、直接操作方式を採用すると良い。テキスト内容は常に変更される可能性が高いため（不安定）、そのような性質のテキストコンテンツに向いている。 編集モードで包んでいない場合には、書き換えられたテキスト内容は即時にデータベースに反映する（モードレスを保つ）。 間接操作方式編集内容の保存や破棄といった編集モードを提供したい場合には、間接操作方式にする。例えばプロフィール編集画面など。 そのほか、ツール

usagimaru