メインコンテンツへスキップ

マガジン一覧

雑記

分類しづらい、アピールするまでもない雑な記述のものを収めています。

10 本
usagimaru

SafariでGoogle検索のAI要約を消す（udm=14）

TL;DR検索時のURLに「&udm=14」のクエリパラメータを追加することで、Google検索の「ウェブ」タブで検索します。ここにはAI要約が含まれないので表示がすっきりします。 このクエリパラメータを自動付与するブラウザ機能拡張を導入することで、自動で対応できるようになります。 基本的にはどの環境でも対策できます（以下の説明はiPhone / iPad / MacのSafariを前提にしています）。 キーワードに「 -ai」をつける方法もありますが、これだとAI要約

9
usagimaru

タイムラボのLは小文字です—固有名詞の表記について

「Goodpatchのpは小文字です」私の前職はグッドパッチ（Goodpatch）という会社だったのですが、前職社内でよく飛び交っていたこのフレーズ、ある種の定番ネタのようになっていました。なので聞いたことがある方からすると、グッ社の関係者がよく発する挨拶のようなものだなと思われるかもしれませんが、真面目な話をすると、結構な頻度で社名のアルファベット表記 “Goodpatch” を “GoodPatch” と間違われることがあり、その都度、相手の方に訂正をお願いするというのが

25
usagimaru

Mac OS 9のインターフェイスを懐かしむ

Mac OS 9の最初のバージョンが公開されたのが1999年でしたから、2025年から数えると26年前のOSになります。もうそんなに昔なのかと驚きつつも、私にとっては非常に馴染み深いシステムでもあったため、今でも記憶のどこかに当時の様子が焼きつき、思い入れのある光景して蘇ります。最近調べ物のために古いシステムを動かせる環境を用意したこともあり、興味が向くまま、そのインターフェイスの様子をただ眺めてみることにしました。 プラチナウインドウ当時のインターフェイスは「Platin

60
usagimaru

日本語入力で現れる例のテキストフィールド（Macintoshの場合）

パソコンのデスクトップで不意に日本語を入力すると、突如浮遊型のテキストフィールドが現れ、打った文字が変換待ち状態でそこに表示されることがあります。日本語のWindows環境で「左上の日本語テキスト」としてよく話題になるこの機能は、実はmacOS (Mac OS) にも同様に備わっていて、両OSのユーザーたちをしばしば困惑させています。元々は意味のあった仕組みなのですが、現代では有用な効果が薄いため、ただ不可思議かつ邪魔な存在と見られがちです。 日本語入力、すなわちIM (I

31
usagimaru
もっとみる

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

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

19 本
usagimaru

macOSのデスクトップアイコンはなぜ右寄せなのかを考える

左横書きのインターフェイスでは画面の左側を「上手（かみて）」とし、左上から右下に向かって情報と時間が展開していくような形をとります。ですから、macOSのデスクトップアイコンが伝統的に右寄せ・縦並びの配置を採用することは、日本語の縦書きを想定するならまだしも、英語の左横書きを前提とするインターフェイスとしてはとても不思議な光景です。WindowsやiOSでは左寄せが基本ですから、ある意味でMacの特徴となっています。 これには、「かつてスティーブ・ジョブズが日本文化に憧れて

110
usagimaru

OS 26で変わるバー要素のデザイン

新しいデザインを取り入れたOS 26、特にiOS 26では、タブバーに代表される“バー要素”のデザインが変わります。各コンポーネントが備える役割はこれまで通りですが、挙動の仕方やスタイルに変化が生じ、それに合わせるようにインターフェイス全体のインタラクション方法にも変化があります。 Edge-to-edge vs. Floating iOS 18までのバー要素は基本的に“Edge-to-edge”のスタイルを採用していたので、スクリーンの端まで横いっぱいに広がり、縦幅を固

54
usagimaru

Finderの進行状況ウインドウを閉じたらどうなるのか

Finderでファイルをコピーしているときの進行状況ウインドウでは、閉じるが有効になっています。これを押したらどうなるのかを考えてみると、次の2通りを予想できます。 昨今のモバイルやWebのUIに慣れていると、[1]の結果を予想する人が多いのではないかと思いますが、実際には[2]として振舞います。では、閉じたウインドウはもう2度と現れないのかというと、そうではなく、メニューバーから再表示することができるようになっています。 「ウインドウ」メニューの中で「進行状況ウインドウ

53
usagimaru

Appleプラットフォームの“新しいデザイン”をどう見るか

WWDC25でAppleが示した“新しいデザイン”と、その中でもっとも象徴的なコンセプトであるLiquid Glassは、2026年以降のAppleプラットフォームのために作られたデザインシステムの構成要素であり、サードパーティ・デベロッパーである私たちは、是が非でもこれと向き合っていかなくてはなりません。そのためには、プラットフォーマーが示したデザイン言語をしっかりと理解し、どのようにして私たちのソフトウェア製品に取り入れていくのか、その勘所を見極める必要があります。 す

310
usagimaru
もっとみる

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

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

17 本
¥850
usagimaru

OS 26で変わるバー要素のデザイン

新しいデザインを取り入れたOS 26、特にiOS 26では、タブバーに代表される“バー要素”のデザインが変わります。各コンポーネントが備える役割はこれまで通りですが、挙動の仕方やスタイルに変化が生じ、それに合わせるようにインターフェイス全体のインタラクション方法にも変化があります。 Edge-to-edge vs. Floating iOS 18までのバー要素は基本的に“Edge-to-edge”のスタイルを採用していたので、スクリーンの端まで横いっぱいに広がり、縦幅を固

54
usagimaru

クリックスルーを活用するUI設計

クリックスルー（Click-through）とは、レイヤー構造を成しているUIにおいて、裏側に位置している要素に対してのクリックイベント伝達を制御することを言い、UIのユーザビリティやモード性の表現に深く関わる考え方です。 レイヤー構造のUIでは、基本ルールとして、最前面にあるアクティブな要素に対してフォーカスやカーソルが適用されるので、各種イベントは優先的にその要素に対して伝達されます。特にフォーカスベースのインタラクションを基本とするキーボード操作では、この仕組みが前提

35
usagimaru

長いテキストを表示するためのパターン

UIで扱うテキストが枠内に収まりきらない場合の表示方法の工夫とそのパターンを考えてみます。 省略記号でテキストの末尾を省略する際の副作用一般的な、省略記号「…（三点リーダー）」によるテキスト末尾の省略では、テキストの後半部分により重要な情報な含まれている場合に、それらが省かれ、テキスト同士の判別などに支障をきたす場合があります。例えば例のようなメールアドレスや、シリーズもののドラマや映画のタイトルが挙げられます。 同じ個人が同じアカウント名で複数のドメインのメールアドレス

51
usagimaru

「機能」の言葉を区別してみる

日本語の「機能」という言葉は、しばしば異なる意味で使われます。特にソフトウェア開発の現場で「機能」と言った時に、それが具体的に何を指しているのかが不明瞭になりがちで、コミュニケーション上の問題にもなることがあります。 例えば、次のような「機能」は粒度が不揃いなので、これらを同一に扱うことは難しく感じられます。 このような不揃いな「機能」を機能一覧としてまとめても、仕様書あるいは設計図としての精度は良くありませんし、それを使ったその後のコミュニケーションコストが大きくなりそ

47
usagimaru
もっとみる

有料記事まとめ

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

3 本
usagimaru

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

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

72
¥800
usagimaru

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

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

543
¥1,300
usagimaru

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

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

481
¥1,000
usagimaru
もっとみる