マガジン一覧

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

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

14 本
usagimaru

モバイルUI構造の4段活用

モバイルUIのデザインでは、4段階の拡張を意識して、なるべくシンプルな形から計画的に構造を作る方針をとることが効果的です。私はこれを「モバイルUI構造の4段活用」と呼び、構造設計の指標の一つとしています。 モバイルUIはフォームファクタの都合上、物理的な制限の力が強く働くため、デザインではなるべく情報量を少なく抑える工夫が求められます。もちろん、どのようなデザインでも「シンプルに保つ」ことは原則的に同じだと思いますが、モバイルUIの場合はより顕著になるはずです。そのような環

91
usagimaru

シンプルなインターフェイスに多様性を持たせるコンセプト

私は現在、株式会社タイムラボにて、主に新規事業のソフトウェア製品の開発に取り組んでいます。この取り組みでは、CEOのhozumixさん、CDOのNob Nukuiさん達と共に、私たちにとって馴染みのある、そして理想のインターフェイスを備えたアプリというものを形にすべく、日々いろいろなコンセプトの検討を重ねています。 その中には、「複数のビューを切り替えられるインターフェイス」というものがあります。今回は、このコンセプトについて、少しロジカルに表現してみたいと思います。 昨

55
usagimaru

デスクトップアプリケーションのUIパターン - ウインドウ編

この記事は、2023年7月8日に開催されたmacOSネイティブアプリケーション開発技術を主題としたイベント macOS native Symposium #09 での同名講演が元になっています。講演時のスライドをベースにテキスト解説を書き下ろし、講演では触れなかった解説も追加しています。 Macらしいソフトウェアを形作るには、開発者によるUIパターンの理解が大切です。ひとえにUIパターンと言ってもさまざまなものがありますが、今回はUIパターンのうち“ウインドウ”に着目し、よ

61
¥800
usagimaru

デザイナー／アーキテクトのプロジェクト参画時期と手戻り不可逆点の認識ギャップ

ソフトウェア製品の開発を念頭に、少しだけ悩みを書いてみます。綺麗なオチはないかもしれません。 ソフトウェア開発におけるアーキテクトの役割時既に遅し 経験上、サービス要件や業務要件を詰めている段階には既にUIのナビゲーション基本設計に着手し始めていないと、プロジェクトとして手遅れになる可能性が高く、この辺りの感度と認識のズレをどのようにして解消できるのだろうかというような課題感がありまして、どれだけ案件を経験しても毎度難しいと感じます。 私はある職務上ではアーキテクトと名

243
usagimaru
もっとみる

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

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

12 本
¥800
usagimaru

ピラミッド型ナビゲーション／ビルディング型ナビゲーション

ピラミッド型ナビゲーションまたはビルディング型ナビゲーションは、概要レベルのナビゲーションと詳細レベルのナビゲーションを組み合わせたようなパターンです。いずれの階層でも並列に並ぶ兄弟コンテンツ間の横移動を実現しますが、階層間の粒度変化を起こす縦移動のナビゲーションも併せ持ちます。概要レベルの一覧と詳細レベルの一覧はコンテンツの並びを一致させておく必要があります。 縦方向のナビゲーションを中心に見た時に、同じ階層の兄弟コンテンツ間の移動ではわざわざ親階層のレベルに戻ることなく

26
usagimaru

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

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

17
usagimaru

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

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

33
usagimaru

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

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

27
usagimaru
もっとみる

有料記事まとめ

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

3 本
usagimaru

デスクトップアプリケーションのUIパターン - ウインドウ編

この記事は、2023年7月8日に開催されたmacOSネイティブアプリケーション開発技術を主題としたイベント macOS native Symposium #09 での同名講演が元になっています。講演時のスライドをベースにテキスト解説を書き下ろし、講演では触れなかった解説も追加しています。 Macらしいソフトウェアを形作るには、開発者によるUIパターンの理解が大切です。ひとえにUIパターンと言ってもさまざまなものがありますが、今回はUIパターンのうち“ウインドウ”に着目し、よ

61
¥800
usagimaru

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

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

489
¥1,200
usagimaru

実例から考えるUIの情報設計

情報設計とは、端的に言うと「情報に関する混乱を整えて、理解しやすい形にする行い」です。情報設計というとなんとなくWebデザインやUIデザインに関する専門的な分野として認識されることが多いかもしれませんが、“情報” に関することなので、情報があるところには基本的にどこにでも通用します。 情報設計の専門書を漁ってみると、“ふわっとした” 話か、Webサイト設計の話に終始するものが多いのですが、本来はWebサイト設計以外の分野にも通用する考え方です。今回はiOSなどのアプリケーシ

461
¥900
usagimaru
もっとみる