サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
2025年ランキング
note.com/usagimaruma
Mac OS 9の最初のバージョンが公開されたのが1999年でしたから、2025年から数えると26年前のOSになります。もうそんなに昔なのかと驚きつつも、私にとっては非常に馴染み深いシステムでもあったため、今でも記憶のどこかに当時の様子が焼きつき、思い入れのある光景して蘇ります。最近調べ物のために古いシステムを動かせる環境を用意したこともあり、興味が向くまま、そのインターフェイスの様子をただ眺めてみることにしました。 プラチナウインドウ当時のインターフェイスは「Platinum」と呼ばれるテーマでした。一応テーマファイルを使ってシステムのアピアランスを変更できる仕組みが用意されていましたが、当時私はあまりその辺りには手を出しませんでした。この数年後にMac OS Xの「Aqua」が登場します。 そういえばStuffIt（スタッフイット）はMacにおけるファイル圧縮・解凍ツールとして定番でし
先日、AI技術をテーマにしたオンライン講演のイベント「POST Dev 2025」が開催され、その目玉の一つとして、アラン・ケイ氏による登壇がありました。この記事では、アラン・ケイ氏の講演後に私から問いかけた質問と、その後に氏から返ってきた回答を紹介しつつ、その内容を考えます。 私（usagimaru）からの質問は以下の通りでした。なお、質問投稿は当時の運営案内に従って、Xにてハッシュタグ「#postdev」を付加する形にて行いました。時間の都合でその場で直接氏に問いかけること／回答を得ることが叶わなかったため、イベントの運営者にQ&Aを仲介していただいた上で、日を置いて回答をテキストで得る形となりました。 （当時急いで文章を作って投稿したので、一部表現に違和感があることはご容赦ください。） Q. usagimaru: 現在人気なAIツールは、対話方法にチャット型のUIを採用しています。私
左横書きのインターフェイスでは画面の左側を「上手（かみて）」とし、左上から右下に向かって情報と時間が展開していくような形をとります。ですから、macOSのデスクトップアイコンが伝統的に右寄せ・縦並びの配置を採用することは、日本語の縦書きを想定するならまだしも、英語の左横書きを前提とするインターフェイスとしてはとても不思議な光景です。WindowsやiOSでは左寄せが基本ですから、ある意味でMacの特徴となっています。 これには、「かつてスティーブ・ジョブズが日本文化に憧れていたから」とか、嘘か本当か分からない言説がいろいろあるようなのですが、一番説得力が高い説は、初期のMacintoshはスクリーンが非常に狭かったため、メニューバーやウインドウが左寄せになりやすいことと、デスクトップアイコンへのアクセシビリティとを両立させるための策であったとする解釈が有力的です。要は左側が混雑しやすいので
WWDC25でAppleが示した“新しいデザイン”と、その中でもっとも象徴的なコンセプトであるLiquid Glassは、2026年以降のAppleプラットフォームのために作られたデザインシステムの構成要素であり、サードパーティ・デベロッパーである私たちは、是が非でもこれと向き合っていかなくてはなりません。そのためには、プラットフォーマーが示したデザイン言語をしっかりと理解し、どのようにして私たちのソフトウェア製品に取り入れていくのか、その勘所を見極める必要があります。 すでに公式からは新しいデザインに言及する多くのセッションビデオや解説資料が案内されているので、まずはこれらをとっかかりとして学んでいくことになるはずです。セッションビデオの多くには日本語字幕が組み込まれているため、日本語によって最新のデザインに触れられる絶好の機会がすでに用意されています。この環境を有効活用し、2026年以
テキストの改行や何かのコマンドを実行するためのキーとしてEnterとReturnがありますが、日本ではそれを「Enterキー」と呼ぶことが慣例化しています。広く普及しているWindows PCがそのキーにEnterを採用しているためか、主にReturnを採用しているMacを使っているユーザーでさえもそれを「Enterキー」と呼ぶ人が多くいらっしゃいます。 現代においてReturnキーとEnterキーの機能的差異はほとんど見られないため、仮にMac環境でそれを「Enterキー」と呼んだとしても、現実的には何かの支障が生じることはほとんどありません。しかし、これら2つのキーを厳密に区別するソフトウェアや機能が存在する場合があることや、MacではReturnキーとEnterキーの両方を別々に備えている場合があること、そもそも刻印されているキーの名称を間違った呼び方をすることはよろしくない姿勢であ
デジタル環境において、日本語テキストがたびたび不自然に感じられるフォントに置き換わって描画されることがあります。この現象が起こる仕組みを簡単に解説します。 この現象を俗に「中華フォント化現象」と呼ぶことがありますが、フォントが置き換わる先は中国語に限るわけではありません。もしも韓国語のフォントが優先されるような環境であれば、日本語テキストが韓国語フォントに置き換わることもあります。むしろ、日本語の文字を収録している外国語フォントが関係する場合においては、往々にして起こる可能性がある現象、と考えるべきかもしれません。 まず結論だけ述べると、「中華フォント化現象」を完全に解消する手立ては、現状存在しないと考えられます。そして、「中華フォント化現象」は非日本語話者のユーザー全員（日本語環境を除くほぼ全世界）の環境で現在進行形で生じており、『適切な日本語フォント』で日本語テキストを読んでいるユーザ
何かのプレビューモードだとか、編集不可能な表示方法だとか、とにかくユーザーに対して配信される形に極力近い形態でその成果物を確認することが大切です。記事ならば、エディターモードでは見抜けなかった誤字脱字を、プレビューモードないし実際の配信版で確認することによって、制作者の脳が強制的にユーザー人格に切り替えられるので、ミスを見つけやすくなります。 さらに付け加えると、パソコンで編集していたならば、確認をスマートフォンで行うとか、別のパソコンで行うとか、環境そのものも大きく切り替えてみるとより効果的です。作業場所も普段の執務室ではなく別の部屋とか、自らがいる場所すらも変えてみることです。 あとは、マーフィーの法則的なものを期待して、「完成しました」と宣言してから読み直してみると、大体ミスが見つかって未完成稿に戻せます。まあこれは制作現場が混乱しやすいのであまりお勧めはしませんが。 問題としては、
モバイルUIのデザインでは、4段階の拡張を意識して、なるべくシンプルな形から計画的に構造を作る方針をとることが効果的です。私はこれを「モバイルUI構造の4段活用」と呼び、構造設計の指標の一つとしています。 モバイルUIはフォームファクタの都合上、物理的な制限の力が強く働くため、デザインではなるべく情報量を少なく抑える工夫が求められます。もちろん、どのようなデザインでも「シンプルに保つ」ことは原則的に同じだと思いますが、モバイルUIの場合はより顕著になるはずです。そのような環境に向けて最初からいきなり膨大な情報を複雑なナビゲーションで扱うようなUIを作ってしまうと、その後の機能拡張が難しくなりますし、小さい画面の中で大量の情報をあちこち行き来しながら触れることになるので、普通に使いづらくなります。 情報を増やす／減らすという観点に限れば、初めから情報量を不必要に増やさないよう努力することも、
私は現在、株式会社タイムラボにて、主に新規事業のソフトウェア製品の開発に取り組んでいます。この取り組みでは、CEOのhozumixさん、CDOのNob Nukuiさん達と共に、私たちにとって馴染みのある、そして理想のインターフェイスを備えたアプリというものを形にすべく、日々いろいろなコンセプトの検討を重ねています。 その中には、「複数のビューを切り替えられるインターフェイス」というものがあります。今回は、このコンセプトについて、少しロジカルに表現してみたいと思います。 昨年版： 多様なユースケースに対応するためのデザインアプローチソフトウェアをさまざまなユースケースに対応させていく方法には、いくつかのアプローチがあります。一つは、機能を増やして得られる効果をなるべく大きくしようとするやり方です。もう一つは、一個のコンテンツモデルに対するインターフェイスの種類を増やすことです。 前者のやり方
2023年に公開したこちらの資料「今年導入したソフトウェア、魅力的だったソフトウェア（2023）」のその後について書いてみたいと思います。 いろいろ導入してみて、その後も使い続けているものと、結局使わなくなったものがあります。昨年を振り返りながら、自分なりの良し悪しを考えてみます。そして今年もいくつか導入したソフトウェアがあるので、それについても後半で言及します。 昨年導入したソフトウェアのその後Procreate Dreams、Sleeve 2、Unclutter、Dropover、TextSniper、Workspaces 2、Bike Outliner、Scapple、Name Mangler、Lasso、Hand Mirror、Dark Noise、DaisyDisk Procreate Dreamshttps://procreate.com/jp/dreams私にとって、Proc
はじめにtry! Swiftとは、AppleプラットフォームおよびSwiftデベロッパーのための国際コミュニティです。 世界中から参加者が集まり、最先端のSwift技術やAppleプラットフォームの情報、知識、テクニックを共有することを目的としています。カンファレンスは2024年3月22日より3日間にわたって東京・渋谷にて5年ぶりに開催されました。 私は高度なSwiftの知識を持ち合わせているわけではないのですが、今回ありがたいことにオーガナイザーのd_dateさんよりお声がけがありまして、一番最初のセッション登壇者として、macOSやiOSにおけるアプリのUIデザインに焦点を当てた講演を行いました。 これに先立ってnextstep.fmのポッドキャスト「nextstep.fm, episode 73 - try! Swift Tokyo 直前タイムテーブル徹底解説」を聞いていたところ、声
結論から言うとこれはLarry Teslerだそうなのですが、C=Copyはわかるにしろ、XとVがなぜCutとPasteに結びつくのか疑問に感じていました。Zもよくわかりません。これについて、都市伝説的に語られている言説にはこのようなものがあります。 CはCopyの頭文字。QWERTY配列ではCの隣にVがあるので、利便性からそれが選ばれた。XもCに隣接していることと、それがハサミの形状に似ているためCutコマンドに割り当てられた。Zは切り替えるスイッチを意味する。 出典：どこかで聞いた気がする都市伝説これは間違いですが、それらしくも聞こえます。 カーネギーメロン大学のBrad Myers教授によると、XCVZの4種類のコマンドとキーアサインは、Larry Tesler本人によるものだそうです。彼はTeslerのメールメッセージを引用する形で次のように紹介しています。 Larry Tesle
Progressive blur（プログレッシブ・ブラー）というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur（可変ブラー）、Gradient blur（グラデーション・ブラー）と呼ぶこともあります。その見た目は通常のブラー効果（ぼかし、ガウスブラー）とは少し異なります。このアーティクルでは、UIにおけるProgressive blur（またはVariable blur）の概要とAppleプラットフォームでの技術検証を紹介しつつ、後半では簡単な経緯やデザインとしての考慮事項を解説します。 例えば次のイメージはProgressive blurの例です。通常のボカシ表現とどこが違うのかわかりますか？ Progressive blur（プログレッシブ・ブラー）の例 Gaussian blur vs. Progressive blurわ
ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしないが故に、私にとっては積極的に使いたくない語になってしまっています。皆さんが「デザインシステム」の語で言及しているものは、本当に同じ概念を指しているのでしょうか？ 定義にあたってみる「デザインシステム」「Design system」の言葉の定義を軽く調べてみました。 とりあえずWikipedia（英語）にはこのように書かれています。 デザインシステムは、任意のアプリケーションを組み立てるのに用いる再利用可能なコンポーネントと標準規約の集まりです。デザインシステムは、モバイルアプリケーションやWebサイトなどデジタルプロダクトのデザインと開発をサポートします。パターン、コンポーネントライブラリ、デザイン言語、スタイルガイド、コード化さ
11月のブラックフライデー／サイバーマンデーセールもあり、今年もMac appを中心にいろいろなソフトウェアを導入してみました。中にはきっと使わなくなってしまうものもありそうですが、これは使う使わないだけでなく、実装されているUIの研究をする目的だったり、あるいは単にクリエイターへの「応援」としてでもあったりします。いくつかピックアップしてみます。 その後の振り返り版： Procreate Dreams (iPad)Procreate DreamsはiPadOS向けの2Dアニメーション制作ソフトウェアです。iPadで一番有名なお絵かきソフトウェアの一つ、Procreateを作っている会社が新たにリリースしたアプリケーションです。 私はアニメーション制作をやるようなクリエイターではないのですが、Procreate DreamsはとにかくUIがよくできていて、まずワクワクしてしまったというのも
この記事は、2023年7月8日に開催されたmacOSネイティブアプリケーション開発技術を主題としたイベント macOS native Symposium #09 での同名講演が元になっています。講演時のスライドをベースにテキスト解説を書き下ろし、講演では触れなかった解説も追加しています。 Macらしいソフトウェアを形作るには、開発者によるUIパターンの理解が大切です。ひとえにUIパターンと言ってもさまざまなものがありますが、今回はUIパターンのうち“ウインドウ”に着目し、よく用いられるレイアウトや振る舞い方の解説を簡単に行いました。 今回のテーマはMacにおけるデスクトップUIのデザインに関するものですが、他のプラットフォームやiOSなどのモバイルUIにも通ずる考え方が多くあります。そもそも、モバイルUIは基本的にデスクトップUIから派生して作られているので、元来多くのコンセプトを共有して
このアーティクルでは、いわゆる「モーダル（ビュー）」と呼ばれるUI表現パターンと、実際のモード設計の区別の仕方を簡単に解説します。まず結論として、モーダル、モードレス問わず、画面の中で手前にポップアップしてくるようなビュー表現全般を「フローティングビュー（Floating view）」と呼ぶこととします。ポップアップしてくるビュー表現には、通常のウインドウ、モーダルダイアログ、ポップオーバー、バナー、トーストなどさまざまなものがありますが、これらを総じてフローティングビューと分類して考えてみましょう。 このフローティングビューという呼び方は私が便宜上名付けたパターン名なので、まだあまり一般的ではないかもしれません。HIGなどの有名なUIデザインガイドラインにもそのような記載は無いと思います。しかし「ウインドウ」「ビュー」「シート」「モーダル」「ダイアログ」などの既存のよく知られた分類方法で
ツリー構造 vs. セミラティス構造 UIの構造設計を行う際には、ツリー構造とセミラティス構造の違いを意識すると、それぞれの特徴を活かした形を作りやすくなります。 ツリー構造ツリー構造 (tree structure) とは、ある要素から見た親要素の数が必ず一つで、子要素が0もしくは複数個の階層型をしています。ただし、ルートとなる要素には親要素が存在しません。ちょうどフォルダとファイルのような関係のものです。 ツリー構造はさまざまなところで目にすることができます。コンピュータのファイルシステムのほか、政府や企
ひとえにUIデザインといっても、プラットフォームや分野によって考えることも作る内容も変わってくるので、彼らをすべて「UIデザイナー」と一括りに呼ぶことにはいささか無理があるように感じることがあります。エンジニア職でいう「Webフロントエンジニア」と「iOSデベロッパー」の区別がされていないような状況に近いかと思います。かといって職能や肩書きを細分化することを提案しても、それが適切に社会に支持され、お金を稼ぐことができるひとつの職業として認められなければあまり意味がないので、理想だけを語っても仕方がありません。その代わりに、大きくUIデザイナーと呼ばれる職種には具体的にどのようなタイプが存在しているのかについては、なんとなく言葉にできるような気がしました。この発想でスキルマップを作ったりして当てはめてみることで、さまざまな個性の存在や捉え方といった発想が見えてくるのではないかと考えました。
ソフトウェア製品の開発を念頭に、少しだけ悩みを書いてみます。綺麗なオチはないかもしれません。 ソフトウェア開発におけるアーキテクトの役割時既に遅し経験上、サービス要件や業務要件を詰めている段階には既にUIのナビゲーション基本設計に着手し始めていないと、プロジェクトとして手遅れになる可能性が高く、この辺りの感度と認識のズレをどのようにして解消できるのだろうかというような課題感がありまして、どれだけ案件を経験しても毎度難しいと感じます。 私はある職務上ではアーキテクトと名乗り、主にソフトウェア製品のUIの構造設計やアーキテクチャ構築を支援する仕事もしています。クライアントワークにがっつり取り組んでいた時期には、マネージャから呼ばれて現場サポートに赴いた時点ではもう既に基盤となる設計は終えているか、決裁者による承認を終えてしまっているかしており、要するに「デザインにおける手戻り不可逆点」を1つ越
Reflective UIと呼ばれる表現がにわかに注目されています。そのいくつかの事例紹介や、私自身が実際に実装してみてどうだったかの所感を書き留めておこうと思います。 Reflective UIとはReflective UIとは、光や映像の反射表現を活用してUIの質感を高めた表現を指します。ジャイロや加速度センサーを使って擬似的に反射を表現したり、カメラで取り込んだ映像をUIのテクスチャとして活用して、より現実感を持たせた表現などがあります。 カメラを使う場合、例えばフロントカメラでユーザーの顔や背後の映像を撮影しリアルタイムに加工して、テクスチャとしてUIの見た目に反映します。これがスマートフォンで実装されるとまるでGUIが鏡のように映り込む質感を持った物体かのように錯覚するので、「クールな新しい表現」として注目されています。 Reflective UIに明確な分類や定義があるかは定か
情報設計とは、端的に言うと「情報に関する混乱を整えて、理解しやすい形にする行い」です。情報設計というとなんとなくWebデザインやUIデザインに関する専門的な分野として認識されることが多いかもしれませんが、“情報” に関することなので、情報があるところには基本的にどこにでも通用します。 情報設計の専門書を漁ってみると、“ふわっとした” 話か、Webサイト設計の話に終始するものが多いのですが、本来はWebサイト設計以外の分野にも通用する考え方です。今回はiOSなどのアプリケーションデザインに焦点を当てて、UIの情報設計というものを考えてみたいと思います。 この資料では、「情報設計としてのUIの組み立て方と考え方」をテーマとし、すでにあるようなUIの実例を用いて情報設計視点でのUIデザインの解説を試みます。UIの具体イメージと結果から設計の意図というものをクイズ形式で考えられる内容となっています
ユーザーインターフェイス（UI）のデザインに強く求められる技術や能力を列挙するとしたら、私は “情報を整理する能力” をまず挙げます。デザイナー職に対する世間一般の認識は「なんとなく絵を描くのが得意な人」だと思うのですが、絵が得意か不得意かはあまり本質的ではなく、情報をどのように整理して適切に表現できるのかが重要だと考えます。 UIデザインにおける “情報を整理すること” をもう少し詳しく説明すると、「設計コンセプトを形にし、コンセプトに基づく適切な部品の姿や機能を記述し、ユースケースに合った使い方を定義すること」と表せそうです。 コンセプトやユースケースもなく、いきなり「画面イメージ」を精緻に描くようなやり方をすると、求められていた価値をうまく表現しきれなかったり、設計プロセスとしても全体の作業効率が悪くなってしまうことがあります。そのようなやり方をするのではなく、IA（情報アーキテクチ
Studio Displayには入力（アップストリーム）として1つのThunderbolt 3ポートを持ちますが、これだと複数台のデバイスで共用するにはあまり都合が良くありません。他社製モニターの中には入力を複数持っていて切り替えが可能なものがありますが、Studio Displayではその運用ができないため、限られた方法の中から複数台で共用する方法を検討しなければなりません。 Studio Displayとの接続方法の検討過去記事でも検討しましたが、改めてStudio Displayと複数のMacとの接続方法を検討してみます。 私の要求は以下の通りです。「★」付きの要求を可能な限り実現し、そのほかは努力目標としたいと考えています。 ・★ Mac Studioの主ディスプレイとして運用できること ・★ MacBook Proの副ディスプレイとして運用できること ・★ 複数台のMacで共用で
解釈は人それぞれなのかもしれませんが、この業界には何でもかんでも“UX”を付けたがる癖があります。私はこの流行りには乗らずに物事を分けて考えてみたいです。 言葉の定義と解釈などユーザーインターフェイス（UI）の設計を表す言葉に関して、それをわざわざ「UX〜」と言い換える事例が国内外問わず多くあり、本来この“UX”と呼ばれるはずのものがどこか蔑ろにされているようにも感じられます。言い換えの例としては次のような具合です。 ・UIデザイン → UXデザイン ・UIデザインツール → UXデザインツール または UXツール ・UIデザイナー → UXデザイナー または UI/UXデザイナー “UX”という言葉がバズワードになり、Xの文字がどこかかっこいいからと既存の“UI”の語句をただ言い換えているだけのように感じられることもあります。実際のところ、「UX〜」と表記されている言葉の幾らかについては
プラットフォームによってはアプリケーションの実装技術には複数の方法があり、開発側の要件や制約、好み等に合わせて適した技術を選ぶことができます。例えばiOSアプリケーションの実装技術には、Appleが提供するCocoa Touch（およびUIKitやSwiftUIなどのフレームワーク群）がありますが、そのほかのベンダーから提供されている技術として、FlutterやReact Native, Titanium, Xamarinなどのフレームワークも存在します。 どのフレームワークが一番優れているのかを語ろうとすると宗教戦争に発展してしまいますので、そこは避けつつも「ネイティブとは何か」の解釈をはっきりさせておきたいと思いました。 どのようにして実装技術を選ぶのか開発現場としては、大抵は次のような観点で実装技術を選ぶことになると思います。 ・開発コスト、運用コスト重視 ・開発スピード重視 ・技術
モニターの発色性能と個体差DTPや映像の世界ではカラーマネージメント（Color Management）と呼ばれる工程が非常に重視されます。ざっくりいえば、モニターで見る「色」と、プリンタなどそのほかの装置から出力される「色」と、デジタルデータの「色」、それぞれを統一的に管理して、クリエイターが求めている「正しい色」というものを得るための仕組みです。『色なんてRGB値を合わせておけばズレることなんてないじゃないか』と思われるかもしれませんが、私たちが普段目で見ているモニターの色が本当に“その色”なのかどうかは、厳密にはわからないものなのです。 ハードウェアとしてのモニターを見てみたときに、まず性能でどのように色が扱われるのかによって、出力される色表現の幅も変化します。モニター製品のスペック表などで「sRGBカバー率」「Adobe RGBカバー率」といったような言葉を見たことがあるかもしれま
使用する製品（サービス、ツール、ソフトウェア）を選ぶ際の指標みたいなものとして、私の場合は製品そのものや作っている人々の「誠実さ」を特に重視しています。人によってはこの指標が「価格」だとか「機能性」だとかに重きが置かれることがあると思いますが、私には価格の安さやポイント還元率よりもこれらが優先されます。 ITサービスなら、まずプライバシーへの姿勢を強く重視します。どんなに価格が安くポイント還元率が高かろうと、自身のプライバシーを損なうサービスはなるべく利用したくありません。裏でユーザーの行動を追跡しているとか、許可なくプライベート情報にアクセスしようとしているとか、誤操作・誤認識を狙ったようなUI（ダークパターンに該当するUI）を意図的に盛り込んでいるとか、そのようなサービスには自らの何かを預ける気には到底なれないのです。 プライバシーの扱いが誠実かどうか私はプライバシーは基本的人権だと考
デスクトップ向けのアプリケーションやWebサイトなどでよく見られるパターン「マルチペイン型UI」の設計とその考え方を深掘りしてみます。今回は特にiOSにおけるiPad向けの新しいスプリットビュー／サイドバーのスタイルについて触れたいと思います。 ※iPadOSもiOSで括っています。 この記事の対象読者は次のような属性の方を想定しています： ・UIデザイナー ・iOSデベロッパー ・iPadのネイティブインターフェイスを設計しようとしている マルチペインに関わる要素と言葉の定義 マルチペイン–インターフェイス / Multi-Pane Interface 複数のペインから成るレイアウトパターン。ある矩形領域（ウインドウなど）があったとき、その内側を複数の領域—ペイン—で区切り、それぞれに意味と役割を与えるもの。マルチペインレイアウトを提供するコンテナを「スプリットビュー」と呼ぶこともある。
次のページ
このページを最初にブックマークしてみませんか？
『usagimaru｜note』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
