usagimaru

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

usagimaru

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

マガジン

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

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

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

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

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

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

最近の記事

  • 固定された記事

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

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

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

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

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

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

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

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

        • 固定された記事

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

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

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

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

        マガジン

        • UI設計ビジュアライズノート集
          usagimaru
          ¥800
        • ソフトウェアデザインとUIの構造設計
          usagimaru

        記事

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

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

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

          Progressive blur効果を用いたUI表現

          Progressive blur(プログレッシブ・ブラー)というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur(可変ブラー)、Gradient blur(グラデーション・ブラー)と呼ぶこともあります。通常のブラー効果(ぼかし、ガウスブラー)とは様相が少し異なります。 例えば次のイメージはProgressive blurの例です。通常のボカシ表現とどこが違うのかわかりますか? Gaussian blur vs. 

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

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

          マウスポインタの作用点

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

          マウスポインタの作用点

          テキストの編集方式

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

          テキストの編集方式

          アプリケーション中心設計 vs. ドキュメント中心設計

          アプリケーション設計の(UIとしての)アーキテクチャには、主にアプリケーション中心設計(Application-Centric Design)とドキュメント中心設計(Document-Centric Design)の二つの型があります。アプリケーションの初期設計の段階においては、これらの特徴の違いを意識して構造設計に反映することが大切です。

          アプリケーション中心設計 vs. ドキュメント中心設計