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

本

ソフトウェアデザイン分野における構造設計に関する考え方や方法論を紹介します。特にUIデザインの「裏側」とされる分野に焦点を当て、情報アーキテクチャ、モデリング、構造化、インタラ… もっと読む

運営しているクリエイター: usagimaru

固定された記事

UI構造設計：導入—プラットフォーム思考とデザイナーの視点

ソフトウェアUIデザインにおける構造設計の前提となるデザインの考え方。・・・このシリーズは、ソフトウェアデザインの手引きとなるような考え方や方法論を複数回に渡って紹介するものです。ソフトウェアデザインの中でも特に「UIデザイン」に焦点を当てながら、その構造設計の分野に迫ります。その折、情報設計と呼ばれる分野にも触れていきますが、筆者は情報設計または情報アーキテクチャ（IA）の専門家というわけでもないため、そこを重点的に説くことは致しません。このシリーズでは、Web

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

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

100〜

割引あり

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

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

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

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

800

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

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

1,000

結局、画面とはどこなのか

UIデザインにおいて画面遷移図なるモデル図を描くことがしばしばありますが、個人的にこの画面という単位がどうもよくわからなくモヤモヤした何かがありました。どこまでが「画面」でどこからが「ビュー」なのか、PCにおけるウインドウは一体何になるのか、ウインドウがもし画面ならば、その内側に描画されるwebとは画面なのかビューなのか。どうも「画面」という言葉がコンテクストによってその表す対象が異なるような気がしていて、明確な範囲が定まっていない中でこれを扱うことは何とも言えぬ歯がゆさを

MacとネイティブインターフェイスとGUIの原理に関する考察

macOSネイティブアプリケーション（Mac app）がもっとも美しい姿を見せるのは、Dockにアプリケーションの姿が「アイコン」として現れ、デスクトップの上で「特定の何か」に縛られることなく個々のウインドウが様々な大きさで自由に浮遊している、まさにその時であると私は思います。そしてその瞬間、Macと対峙した私は無限の力を得たかのような錯覚をして、創造力を掻き立てられ、画面の向こう側に確実に在るオブジェクトたちと直接的に戯れることができます。そこでは、私が予想した通りに求めた

マルチペイン型UIの設計観点／iOS 14の新しいスプリットビュー

デスクトップ向けのアプリケーションやWebサイトなどでよく見られるパターン「マルチペイン型UI」の設計とその考え方を深掘りしてみます。今回は特にiOSにおけるiPad向けの新しいスプリットビュー／サイドバーのスタイルについて触れたいと思います。 ※iPadOSもiOSで括っています。この記事の対象読者は次のような属性の方を想定しています：・UIデザイナー・iOSデベロッパー・iPadのネイティブインターフェイスを設計しようとしているマルチペインに関わる要素と言

デスクトップGUI：フォーカスの勘所

フォーカスの定義デスクトップGUIでいう「フォーカス」の意味を次のように置いて考えます。 GUIにおいて、ユーザーからの入力を受け付ける状態を示すもの。イベントの送信対象。多くの実装例ではユーザーが選択したものを直接知覚できるようにビジュアルでフォーカスが明示されるが、ビジュアルが示されない暗黙的なフォーカスも存在する。クリックしたらアクティブ状態（＝フォーカスがある）になったり、逆に非アクティブ状態（＝フォーカスがない）にもなる。フォーカスはユーザーが今この瞬間に何を

インスペクタUIの設計観点

デスクトップ向けの制作系アプリケーションでよく見られる「インスペクタを備えたUI」の設計について、その考え方を深掘りしてみます。具体的な話をする前にまず「インスペクタ」とは何かを明らかにするため、私は次のように定義してみます。インスペクタの定義と例インスペクタ / Inspector ある選択された状態にあるオブジェクトの詳細な情報を提示したり、オブジェクトの属性を編集するための手段を提供する機能。フローティングウインドウやサイドパネル（スプリットビュー）の形式で提供さ

インタラクションというはたらきの言語化を試みる

UIデザインの世界ではインタラクションというはたらきについて考える機会が多くあります。インタラクションは相互作用と訳されることもありますが、この“相互”という部分に着目し、デザインとしてどのように捉えられるのか、どう活かすのか、直近の考察を述べたいと思います。解釈：インタラクションとは何なのか実際には学術的な定義などがあるのかもしれませんが、私なりに「こういうことではなかろうか」という解釈に基づいて話を進めてみたいと思います。人間と道具のインタラクションというものを考

iOSにおける半モーダルビューの解釈

iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー（Semi-Modal View）」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。今回はパターンとしてあえて区別す