usagimaru ⌘
@usagimaruma
Followers
8,052
Following
317
Media
2,932
Statuses
26,339
Software Designer / UI Architect / Developer. Appleプラットフォームを中心に、なめらかなUIを備えた美しいソフトウェアを作るための活動をしています。
Tokyo, ja_JP
Joined March 2011
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Argentina
• 2492032 Tweets
Messi
• 1884119 Tweets
#15Temmuz
• 145309 Tweets
連休最終日
• 112424 Tweets
#PEACHES_BAMBY_DAY
• 65308 Tweets
#여름에_피어난_밤비꽃
• 36662 Tweets
Milletin Zaferi
• 34837 Tweets
キィニチ
• 30934 Tweets
ムアラニ
• 22764 Tweets
カーヴェ
• 22048 Tweets
밤비야생일
• 21767 Tweets
JKWPrabowo TETAPkompak
• 20952 Tweets
夏休みキャンペーン
• 17714 Tweets
UVERworld
• 17707 Tweets
マーキュリーカップ
• 15006 Tweets
ノイミー
• 12693 Tweets
ビーズリー
• 11398 Tweets
Pinned Tweet
Twitterに投稿してきたUI設計のメモをこのマガジンにまとめてみることにしました。
1
33
445
日本人が想像するよりかなり広い範囲で日本語文字が中華フォント化している現象。CJK処理系における日本語の扱いに対する問題としてそろそろ何とかしていかないと、ソフトウェアの中の日本語が死んでいく危機感がある。そもそもなんでChineseに分類されるフォントにフォールバックされるのかって。
45
6K
15K
以前から言われていたけど、新幹線や喫茶店等でPCを広げて仕事している人、いよいよ危ないと思う。そこいらの人が性能が優れたカメラとプロセッサを備えたケータイを普通に持ってて、斜め後ろから写真撮られるだけで一瞬でデータ抜かれるような時代が来てしまった。スタバMacなんて鴨でしかなく。
17
12K
9K
Lightningを一応擁護しておくと、あれが登場した時代にはUSB Type-C規格なんてなかったし、端子の表裏気にせず好きに刺せるというものは他になくて（他は良くてMicro-USBとか）、このプラットフォームを10年支えてくれた素晴らしいインターフェイスだよ。
14
1K
4K
iOS 15のLive Text OCRを使って、他人のPC画面に映ったテキストを容易にコピーできてしまう時代。
students are starting to steal each other's notes with iOS 15 and it's... kind of genius
941
17K
97K
3
4K
4K
UIのモーションは300ms前後で動かしとくと割とちょうど良い、という経験則がありましたが、これが根拠になりそう。視覚情報を視認してから思考判断を経て行動までのレイテンシーがおよそ260msであると。
2
1K
3K
前も調べたけど、言語環境の言語優先度設定で“わざわざ”日本語を優先言語にしておかないと、日本語の文字の多くは簡体中国語の奇妙なフォントで描画される。バグではなく仕様。わざわざ日本語を優先している民族なんて日本人しかいないから、世界のほとんどはきっと中華フォントで日本語を眺めている。
3
2K
3K
デザイナー志望で、ブランド名や人名を当たり前のように間違えたり、表記揺れや誤字脱字が多いようだと、だいぶしんどい。普段からそれらへの意識が向いていないことの表れなので、物の見方や考え方から鍛える必要がありそう。ツールの使い方等は後からでも身につくので、できている人との差は大きい。
1
321
2K
中華フォント問題は2つの見方があって、
1. 開発チームに日本語がわかる者がおらず、十分な日本語サポートが欠けてしまう。
2. 正しく実装していても、非日本語環境下で日本語文字が中国語フォントで描画されるシステムの仕様がある。
2は作る人が気配りするとかそういう次元では解決しない。
2
734
2K
macOS / iOSネイティブAppに関しては、Core TextのAPIを使う方法で「どの言語環境でも日本語（ヒラギノ）書体で描画する」ことができます。kCTLanguageAttributeName をキーとして"ja"の属性を加えてやる。
しばらく前に調査したので別のやり方があるかもしれないけど。
1
541
1K
だからといって、外国製ソフトウェアの開発チーム全てに「日本語文章が表れる箇所には、Core Textを使ってjaに固定するコードを書いてね」なんて要望出しても受け入れられるわけがない。中華フォント問題は、OSベンダーやブラウザベンダーがなんとかしてくれないとどうしようもないのである。。
4
525
1K
私もUIとかで角Rをつけたシェイプを描くときに、単純な「内径+枠幅=外径」ではなんだかカーブとその幅が歪んで見えると感じて、視覚頼りに数値調整を入れることがまあまああるのだけども、やっぱり光学的調整を少し入れた方が綺麗に仕上がるみたい。
I love this subject! As usual, I think the answer is to do it optically if you want precision. When you do it metrically, it can create the optical illusion that a ball rolling through the gutter would get stuck on the curve, even though it wouldn't.
8
58
518
0
141
956
AirPodsのノイズキャンセリング技術に関して、誰かが特許侵害を訴えたらしく、その影響により（すべての？）AirPodsのノイズキャンセリング機能がファームウェアアップデートを通じて劣化しているらしい。
5
332
862
デジ庁のメール誤送信はポカしちゃった人をただ責めるのではなく、デジタル技術で防ぐ方法（おそらくインターフェイスデザインが多く占める）を考えていってほしい。
人は間違える前提の設計が良い。
0
187
829
私はモバイルUIのナビゲーション設計において、
「タブバーをなるべく隠さない」
「タブの強制移動をしない」
「ホームタブを無くせ」
これらを強く主張することが多いのだが、全く同じことがこちらのセッションでも言われていたので、理由がわからない人は見た方が良いです。
0
86
777
iOS app起動時に静止画（ロゴとか）を表示する仕組みが非推奨になり、6月30日までにStoryboardベースのLaunch Screenに移行しろとのお達しが。要するに全てのデバイスに対応しつつ、ダミーのUIを先に見せてシームレスに起動するようデザインしろってことですかね。
1
227
768
職場ではMacBookを外に持ち出す際には必ず覗き見防止シートを付けよと言われているけど、ある程度抑止できているとは思うがこれも完璧ではない。やむを得ない場合を除き、そもそも外でPC広げないことが安全でしょうね。
渋谷は土地柄外でMacBook広げてる人多いけど、覗き見対策への意識は低めである。
1
590
760
以前、テレビの電源が入っていなくても緊急地震速報は流せないのかと発言した大臣がいて、その発言が報道されたところ、「大臣は機械の仕組みも知らないのか」と馬鹿にされてたんだよね。でもよく考えると防災観点からは電源が自動で入るとか予備電源を備えるとかするべきで、真っ当な疑問なんだよね。
5
361
701
UIの専門家でもないディレクター職の人がなんとなくUIのワイヤーフレームを描いて、UIデザイナーはその通りに肉付けしていく。過去に現場を直接見たこともあるけれども、このワークフローは実際多い模様。（どうやらそういう慣習になっている）
UIデザイン担当がUIの骨格すら作らないのはだいぶ変。
1
90
696
テレ東やMXのように、トップランナーではない局の方が考え方がまともに感じら��るし、「売るためではない姿勢」というのがよく表れていて好きなんですよね。
0
79
643
普通に考えたらAdobeがFigma買収すると、ユーザはCC契約で課金とかお得になりそうな気もするのに悲鳴あげてるデザイナーが多いのは、Adobeが本当に嫌われてることの表れなんじゃないかと考えざるを得ない。
1
202
621
ダイアログUIで「戻る」｢閉じる」をボタン名に採用するのがなぜ駄目なのかというと、命令の対象がUIの仕組みに対する表現になっているから。UIを操作するためのUIを設計するのではなく、UIを通じて一体「何」を本当の対象とするのかをよく考えること。
ここでも少し書いた。
1
60
580
流行りの書籍タイトル風に言うと、
「UIデザインは見た目が1割」「ユーザーにとっては見た目（表現）が9割」となる。一角を浮かすためには、その下の構造体を作り込む必要があり、これらを怠ると氷塊は容易く沈んで消えてしまうという。
1
64
552
仮にUXデザイナーという職があるとして、それを新卒で担うとか、ものの仕組み、作られ方、振る舞い方に無知、あるいは人間の考え方、行動の仕方に無関心な人にそれが務まるのか甚だ疑問がある。ドラクエでいう魔法使いと賢者を最低Lv.20まで経験してようやく転職できるような上位職だと思うのだけども
1
45
490
何年か前にキャンセルのキャンセル問題のくだりで「『〜する』を避ける」と書いたけど、一つは一目見て行動結果を予測しやすいことが考えられそう。あと「〜する」と書くと、「〜しない」が現れる可能性や、する/しないの区別で認知コストが上がるので、言い切った方が良い。
1
57
459
こういうインターフェイスの概念設計はいつまでも読んでいられる
1
32
461
学校でエンジニアリングを学んでいたときにうるさく言われたことは、とにかくコメントやドキュメントは残せ、習慣づけろということだったわね。経験則からもこれは正しくて、2、3週間も経てば当時自分で書いたコードは他人のコード同然になるので、意図や経緯をコメントで残すことは自分のためになる。
1
125
432
macOSやiOSのシステムフォントには、数字を等幅にするAPI (monospacedDigitSystemFont)があるのだけど、こいつの使い所はこういった「数字が連続的に変化するUI」で使う。でないと文字列の幅がガタガタ揺れてしまって見た目が美しくない。
1
71
427
Apple Intelligenceのアプローチがすごく賢く良いと思えた理由がほとんど言語化されていて思わず唸った
1
41
413
UX in Motion Manifesto の原則 Value change、実装簡単そうに見えて意外と考えることが多くて難しい。
1
94
399
先日、マネーフォワードさんからのご依頼でUIの構造設計ワークショップを行いまして、そこで講師を務めました。
職場で推進している「モデルベースUIデザイン」というアプローチを用いて“画面で考えない”UIの組み立て方をレクチャーさせていただきました。
以下様子です。
1
35
395
iOSの基準フォントサイズは17ptだけど、デスクトップのmacOSは13ptになるので、UI全体のスケール感はモバイルの77%といった具合になる。
モバイルのUIコンポーネントをそのままデスクトップに持ってくるのではだいぶ「デカい」。
こういう話もWWDCでは語られていたりするので要チェック。
1
31
393
UIアニメーション好きな人は見た方が良いです
Animate with springs - WWDC23 - Videos - Apple Developer
0
40
389
「iOSっぽい動き」にはSpringを使うのが良いので、アニメーターのパラメータが重要になる。加速がついてて着地時に一回跳ねる感じにしたいなら、duration: 1.0, damping: 0.5, velocity: xにする。加速なく跳ねずに着地するにはduration: 0.5, damping: 1.0, velocity: x or 0でそれっぽくなる。
1
30
374
これUI好きな人には面白い本だと思う。ベン・シュナイダーマンの著書。しばらく前に買ってたまにパラパラ開いてるけど設計論がどっさり載ってて楽しい。
2
19
368
しばらく前に職場のデベロッパーチームに向けて行ったUIデザイン講義から起こした資料です。
0
38
329
UIデザインのこういうHCI的なところが一番面白いと思う人間なので、Design for iPadOS pointerはど直球に刺さった。作りたくなる。過去にもGUIの「ユーザー側」に着目したカーソル等のデザインをざっとお話ししたこともある。
GUIの「こちら���」からのデザイン
#macosnative
1
43
321
よくまとまってた。ボリュームがすごい。良記事です。
0
45
317
某大学でCGを齧っていた時に講師から言われたこと。
「ツールなんて誰でも覚えられるから、基礎が出来上がっている美大生にデジタルツールを教えた方が圧倒的に能力が高い人材に仕上がる。お前らはまず基礎がなってないからツールだけ使えても既に差がついてしまっている。」
（耳痛）
1
71
309
昨晩発表されたGPT-4 Turbo (1106-preview)とGPT-3.5 Turbo (1106)の速度検証。ツールは自作のプレイグラウンド環境でChat Completion。
左からGPT-3.5 Turbo / 3.5 Turbo (1106) / 4 / 4 Turbo (1106-preview)。
GPT-4は明らかに高速化され実用的になり、3.5 Turboも亜光速の領域に達しつつある。
1
55
305
SketchでAppleの「システムフォント」を再現できるようにするプラグインを作りました。システムフォントは和欧混植の際の調整が施されていますが、これを再現できないことが課題でした。それをおそらく解決できます。
2
79
301
Shortcuts\.appで面倒作業を効率化することをよくやってて、最近の渾身の出来はこの「AmazonのURLから余計な情報を削ぎ落とす」やつ。macOSのサービスメニューとクリップボード入出力に対応できたので、こうしてテキストの副クリックから一発でモードレスなURLテキスト整形ができる。iOSでも動く。
2
32
299
半モーダルってものについて最初にそう言及したのはたぶん私なんですけど、あれはシートと呼ぶのが正解です。そしてモーダルとは何であるのかというところを考えると、フローティングビューの類は必ずしも排他的モードを形成して操作を縛るとも言い切れないというUI論的な話もあり。
iOSエンジニアの人に質問です!ABCDそれぞれなんて呼んでますか?
ぼくは現状心のなかでこのように呼んでいるのですがたぶん伝わらないんだろうな
2
16
365
1
26
291
久々にデザインの記事を書きました。構造化UIデザインの方法の一つとして、モデルベースUIデザインというものを紹介しています。
1
35
284
私が今年導入してみたソフトウェア、魅力を感じたソフトウェアというものをまとめました。後年にあの時どのようなソフトウェアに触れていたのか、ということを振り返るための個人記録でもあります。
今年導入したソフトウェア、魅力的だったソフトウェア（2023）
0
27
283
WWDCはテックイベントなので、Appleプラットフォームの知識を持っていないと何が面白いのかが分かりにくいというのはある。たぶん今回だとVision Pro除くと地味で退屈に見えたと思うけど、デベロッパーたちはSwiftDataやSwiftUIなんかに乱舞してて、デザイナーは置いてけぼりっぽい空気も感じてる。
2
42
275
今年の新卒UIデザイナーに向けて実施したソフトウェアデザインの研修を紹介する記事を書きました。研修の設計と講義内容をチラ見せします。
0
35
267
1Password 8の衝撃
・サブスク必須になる
・同期にはメンバーシップ加入が必須になる
・買い切りで使えなくなる（これは少し前から既に？）
・macOS版もネイティブ技術を捨ててElectronで書き直し。UIがとても残念なことになる
・↑によりMacでの10年選手のユーザーたちが離れていく予兆あり
2
111
255
UIデザインもしくはUXデザインのプロはそれらを混ぜて“UI/UX”などとは基本言わないので、もしそう言ってるとしたらそれは営業トークとしてわかりやすく伝わるよう翻訳しているか、本当に本職の方ではないのいずれか、くらいのつもりで眺めると穏やかに過ごせます。
1
24
255
振る舞いに対して道具が自己帰属していないとこうなる。GUIの世界ではまかり通っていることがある
0
117
248
いいサイト見つけた
0
28
244
今日は「こういう枠線がセクシーだ」という話で盛り上がれただけでも十分に良かったです
0
16
242
「デザインシステム」がよくわからないので、理解の仕方を変えてみる、という駄文を放流しました。
0
27
238
メニュー、コントロール、そういう小さな単位でUI部品を設計していると細かい話にとても敏感になってきます。メニューの修飾キーシンボルは愚直に右詰めテキストで描画すると整列が崩れてしまいます。文字単位で揃える意義があるならば、実装でも細かな調整が必要になります。どう挙動するのかです。
0
55
233
UIデザインではデザイナーである私が「ヒトに〜させる（ように誘導する）」というような発想を持たないことを強く意識するのだけれど、昨今のマーケティング界隈の炎上を見るに、根本的に発想の仕方が彼らとは異なるような気がした。
0
21
231
昨日お話ししたウインドウUIのデザインパターンの資料を公開用に仕立て直しました。macOS軸に展開していますが他のシステムでも使えるヒントはあるかと思います。例により公開できない部分は削っています。
#macosnative
0
31
227
完全に出遅れましたが、書きました。誰得記事です。
MacとネイティブインターフェイスとGUIの原理に関する考察
2
28
227
いや、読もうよ。
> Human Interface Guidelineは一度も読んだことがありません。
0
36
222
ここ最近の思考を書き綴りました。
オブジェクトベースなUIデザインに取り組むための心構え｜usagimaru ⌘ Satori Maru
@usagimaruma
｜note（ノート）
1
39
215
浮遊型はコンテクストの内側に寄るのでセグメンテッドコントロールの文脈にも近くなり、私はこれだと上下のタブバーの意味と力関係が逆転してしまうと思う。
メイン下タブのフローティング化は、見た目もボタン感あるし、どんな端末でも同じデザインを使い回せて好きなんだけど、既存サービスで採用するにはまだマイノリティすぎるので、グローバルの���スサービスが導入して市民権を得てほしい。半年〜1年後くらいに定着しそうな雰囲気ある。
5
44
429
0
25
218
00年代からアンチハンバーガー論者ですが、流石に2023年にもなるとそれが悪名高いパターンとして定着している様子で、私は正しかったと思う。
（ただし、モバイルWebでは駆逐しきれない事情もあるとみる）
ここで例のGifを
1
32
212
要素が少ないものを見て「こんなの素人でも作れる」と思ってしまうのは、そのシンプルな姿をすでに目で見て答えを知っているからですよね。でもデザインでは答えをまったく知らない状態から、要素を増やす圧力を強く受けながらもシンプルな形を目指そうとする。だから素人にはなかなか作れないんですね
0
39
211
UI表現の流行りで言うと昨今のGUIは画面をより広く見せる方向性なので、私なら右をベースに、シャドウの表示・非表示の際に軽くディゾルブのアニメーションをつけてふわっとさせるかなあ。あるいはbackdrop blurでバーを透けさせるか。もうちょい環境が整えばprogressive blurを使う手も。
0
6
209
UXと呼ばれるやつは、何かの経験の結果抱く感情を含む個人的なものらしいので、他人がどうこう出来るものではないと思うんですよね。「（誰かの）UXをデザインする」って表現もおかしくて。このことをUX Designと言うのではなく、Design for UXのように解釈していきたい気持ち。
0
22
199
UXは直接的なデザイン（設計）の対象じゃねえって理解をしているのだけれど、この記事がまさにその説明していて納得感が大きい。
1
23
195
モバイルアプリケーションの経験則的な設計の話と考え方をさくっと書いてみました
1
27
193
ここでさらにプログラミングを齧るようになると、今度はそのたった一字の間違いがシステム上で致命的なエラーだとか予期しない結果を招く可能性があることを学べるので、デザインとはあらゆる制作行為に関わってくる概念なのだとよくわかります。
0
40
192
みんなこれ買ってるな。何となく、いけてるiPhone appっぽさを感じられるハードウェアだ。
（ソフトウェアっぽいハードウェアって少し変な評価かもしれないけど。）
1
10
191
調べ物してて興味深かったのでまとめました
カット、コピー、ペースト、アンドゥをX,C,V,Zに割り当てたのは誰なのか
0
51
189
本当だ。UserDefaultsを使うのにその理由を明示しなければならなくなった。
1
56
183
この前渋谷かどっかを歩いていたら、このシャツを着たおばあちゃんとすれ違って、「センスのあるコンピュータおばあちゃんや」と思った
1
16
181
UIデザイン界隈のトレンドの主流が「デザインシステム」に収束していった感じがするのは、正直望んだ世界ではなかったのよねえ。それも大切ではあるけど。もっとインタラクションとして、ソフトウェアとしてのUIの面白さが輝くような世界が見たかった。でもそういうのはちょっと古臭くなったかな。
0
16
178
UIのナビゲーション設計では、基本パターン「一覧−詳細」ペアを念頭に、ボトムアップ設計とトップダウン設計の両方からアプローチすると精度が高くなりやすい。その際に概念オブジェクト（コンテンツに相当）やユースケースの定義を行っておくと設計も捗るのでまずは基礎設計、次にナビゲーション。
1
13
177
I was inspired by this tweet so I tried to implement a chrome button on iOS with UIKit, AV Foundation and Core Animation.
I was playing around with some blend modes and found a pretty interesting style. I would like to improve the surface texture more.
1
21
175
GoogleがiOS向けに提供していた公式のMaterial Designライブラリをメンテモードに移行したとのこと。
理由は、UIKitが年々アップデートされていってMDライブラリでわざわざカスタマイズする必要性が減り、更にUIコンポーネントを独自実装することにより生じる副作用が無視できなくなってきた等。
This year my team shifted the open source Material components libraries for iOS into maintenance mode. Why?
A 🧵...
44
244
1K
1
50
170
このdevツールめっちゃ便利だな…
しかもこの設計思想がめちゃくちゃ大切だし共感する
> Native macOS app, fast & beautiful
> Work offline, and respect your data
1
22
168
大半のデザインツールと呼ばれるものは抽象化レイヤーの域を出ず、「抽象化をめっちゃ頑張る」の次元は越えられていないから、概念設計をサクッと行える方向に注力した方が生産��かもしれない。この記事を読んで改めてそう思った。
1
18
166