usagimaru

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

usagimaru

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

マガジン

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

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

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

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

  • 有料記事まとめ

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

最近の記事

  • 固定された記事

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

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

有料
1,000
    • なめらかなユーザーインターフェイスの実現

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

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

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

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

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

        • 固定された記事

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

        マガジン

        • ソフトウェアデザインとUIの構造設計
          12本
        • UI設計ビジュアライズノート集
          11本
          ¥800
        • 有料記事まとめ
          3本

        記事

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

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

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

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

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

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

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

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

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

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

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

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

          Progressive blur効果を用いたUI表現

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

          Progressive blur効果を用いたUI表現

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          フィッツの法則(Fitts’ law)

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

          フィッツの法則(Fitts’ law)

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

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

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