世界を動かす技術を、日本語で。

イディオマティックデザインを取り戻そう

概要

  • デスクトップソフト時代の 一貫したデザイン とその利便性への懐古
  • 現代のウェブアプリは インターフェースの多様化 により使いにくさが増加
  • デザインイディオム (慣用的な設計パターン)の重要性を強調
  • Appleなどに見る 強いデザイン規範 の効果
  • 一貫性あるUI/UX への回帰の提案

デスクトップソフト時代のデザイン一貫性

  • Windows 95~Windows 7 時代のデスクトップソフトは、オフライン中心で マウスとキーボード操作 が主流
  • ソフト間で 共通したインターフェースデザインイディオム が徹底されていた
    • 例: チェックボックス による「ログイン状態保持」などの標準的な質問形式
  • メニュー構造 (File, Edit, View等)はどのアプリでも共通
  • キーボードショートカット も統一され、学習コストが低減
  • ステータスバー明瞭なラベル により、操作に迷いが少ない設計

現代ウェブアプリの多様化と課題

  • ウェブアプリは インターフェースの一貫性が失われ、操作方法がアプリごとに異なる
    • 例:日付選択やクレジットカード入力の方式が統一されていない
  • キーボードショートカットUI要素 もアプリごとにバラバラ
  • 使い方を都度探す必要があり、 生産性や快適さが低下
  • タッチスクリーン対応マルチデバイス対応 の影響で中途半端な設計が増加
  • フロントエンド開発 の進化と コンポーネントのコピペ文化 が混乱を助長

デザインイディオムの意義

  • デザインイディオム とは、誰もが直感的に理解・利用できる 設計パターン
    • 例:チェックボックス、下線付き青リンク、標準メニュー構造
  • 一貫したUI は、学習コストを下げ、ユーザー体験を向上
  • かつてのWindowsや現在のAppleのように、 強いデザイン規範 はエコシステム全体の質を高める

Appleと現代の成功例

  • Apple はフォント、ボタン、配色などの 厳格なデザインシステム を持ち、純正/サードパーティ問わず 一貫した体験 を実現
  • iOSの標準操作 (ピンチイン/アウト、キーボード操作等)がすべてのアプリで共通
  • Substack のように、 カスタマイズ性を制限 しつつも洗練されたデフォルトで高品質な体験を提供

プロダクト開発者への提案

  • HTML/CSSの基本イディオム を可能な限り守る
    • 例:リンクは<a>タグ、ボタンは<button>タグ、標準ショートカットの維持
  • JavaScriptによる再実装 ではなく、 標準要素の活用 を推奨
  • 社内での一貫性 も重視し、少なくとも自社製品内では統一性を保つ
  • アイコンよりも言葉 を優先し、分かりやすい表現を
  • 分かりやすさ>見た目の美しさ を優先
  • 迷った場合は、 過去の優れたUI設計書や成功事例 を参考に

未来への展望

  • 日付ピッカーやクレジットカード入力 など、全ウェブアプリで同一のUI/UXが実現される未来を希望
  • CTRL-クリックで新しいタブが開く など、統一された操作体系の復活を夢見る
  • 最良のデザインパターン が定着し、誰もが迷わず使える世界への期待

まとめ デザインイディオムによる一貫性は、ユーザー体験と生産性を劇的に向上させる。現代のウェブアプリ開発では、再び 共通言語としてのUI設計 を重視し、過去の成功例や厳格なデザインシステムから学ぶ姿勢が求められる。

Hackerたちの意見

アイコンより言葉の方がいい。普遍的に理解されるアイコンだけを使うべき。過小評価されてるよ。ディスレクシアの人を除けば、ほとんどの人はアイコンよりも一目で単語を認識する方が早いと思う。

...HNの「unvote」や「undown」フィードバックは特に残念だね、共通の接頭辞があるから。何かにアップボートするたびに、間違ってクリックしないように「unvote」や「undown」を確認するんだ。

アイコンは小さくしすぎない限り、認識するのが簡単で早いと思う。特に、位置が変わらなければ、長期的にはアイコンの方が楽だろうけど、物事が変わったりボタンがたくさん必要な状況では、言葉の方が勝つかもね。

実際に認識できる絵があるアイコンについてはちょっと疑問だけど、最近のアイコンはスタイライズされすぎてて、ただの線が曲がったり壊れたりして、運が良ければたまに点が並んでるだけ。マウスオーバーでもテキスト説明がないと(カーソルがないタッチスクリーンでは…)発見はほぼ試行錯誤だし(権限が本当にダメージを与える可能性があるならロシアンルーレットみたいなもんだね)。プログラマーが何を伝えたかったのか、既存のサポート質問を探して頭をひねるしかないよ。

UXは本当に悪化してる。特に銀行のウェブサイトがひどい。スクロールバーを隠したり、大きな無駄なスペースを作ったり、ボタンを平坦に見せたり、混乱を招くアイコンやドロップダウンの使い方など、全体的な体験がデスクトップUIが数十年前に比べてずっと劣ってる。

いろんなウェブサイトが日付を選ばせる方法は何百通りもある。ああ、日付ピッカー。これらの多くは、明らかなことをしようとするとすぐにイライラさせられる:日付をタイプするだけなのに。デザイナーが自分の作品を見せつけたくて、無意味なメニューをクリックさせようとしてるみたい。パワーユーザーにはタイプさせてあげて。もし間違って03/142/026とタイプしたら、フィールドに注意を戻してあげればいいんだ。

03/04/2026は3月4日?それとも4月3日?国際的なオーディエンスがいるなら、誰かを混乱させることになるよ。できればYYYY-MM-DD形式を求めてほしい。

生年月日を入力するために年のリストをスクロールするのが嫌だな。自分の死を直視させられる感じがして。

いやいや、40年分の月を遡って自分の誕生日を探すのって、人生の儚さや加速する感じを考えるいい機会になると思うよ。

これらの大半は、俺は200歳くらいだって言ってるよ。

今のソフトウェアは、賢くて思慮深い人たちによって設計されていない。急に昇進した中間管理職のPMやプロダクトタイプの人たちによって設計されてる。彼らは、効率のために思慮深いユーザーインターフェースデザインがほぼ必須だった時代にはいなかった。無能さもあれば、ビジネスの収益側がダークパターンを助長することで悪意もある。

ソフトウェアはもうツールじゃなくてメディアだね。メディアには変なインセンティブがたくさん組み込まれてるし。

モバイルエンジニアの俺が、ステークホルダーに「シャワー中に思いついたランダムなインターフェースアイデアを実装するだけじゃダメだよ。デザインの意見が必要なんだ」って言うと、みんなの無表情がすごい。 「なんでできないの?」って聞かれるけど、俺は一貫したUXと実際に使えるIAの重要性を理解してるから。開発者と同じように、(ちゃんとした)デザイナーも問題を解決するんだから、もっと早く自転車を求めるのはやめようよ。

サイボーグ的な自然選択が時間をかけてこれを解決するはずだけど、ソフトウェアシステムのランダム変異の頻度は生物システムよりもずっと高いんだ。これの平衡ダイナミクスをモデル化するのに興味があるな。

著者が指摘しているように、イディオムはシステムフレームワークの使用から来ていて、イディオマティックな実装に導いてくれる。システムUIフレームワークは非常に詳細で、思いつかないような隅々のケースも扱ってくれる。時間が経つにつれてパワーユーザーになる手助けをしてくれる。WindowsにはWin32があって、そのコントロールを使う方が自分でカスタムのものを作るよりも簡単だった。(win32のUI側が放置されてるのは残念だけど)macOSにはAppKitがあって、たくさんの制約がある。例えば、ネイティブボタンの高さを変えることはできない。iOSにもUIKitがあって、似たような感じ。ウェブには何もない。自分で作らなきゃいけなくて、せいぜい中途半端なものになる。現代のデスクトッププラットフォーム向けの開発がひどいから、フレームワークなしのウェブも使われてるんだ。

著者は「イディオムはシステムフレームワークの使用から来ている」と言ってるけど、アプリがウェブ上で一貫性がない理由についてはほとんど間違ってると思う。例えば、「この非均質性は2つの理由による」ってセクションの理由には驚かされた。まず、彼が言う「デスクトップ時代」って、実際にはデスクトップ時代じゃなくてWindows時代だったんだよ。Windowsがほとんどのデスクトップを支配してたし、WindowsとMacの間にもたくさんの不一致があった。だから、Win32 APIに関して言えば、開発者は基本的に一つのやり方しかなかった、もしくは少なくとも一番簡単なやり方だった。開発者は「デザインのイディオムに従っていた」わけじゃなくて、「Windowsで簡単にできることをやっていた」んだ。ウェブは最初はドキュメント共有システムとして始まり、徐々にアプリシステムに変わっていった。やり方の「一つのデフォルト」や「一番簡単な」方法なんてなかったし、その中でBootstrapにみんなが一斉に集まった時期もあったよね。つまり、君の言ってることには完全に同意するよ。「標準的なイディオム」をいくら持っていても、使いやすいデフォルトのフレームワークを提供している会社が一つもなければ、常にいろんなやり方が存在することになる。

Bootstrapは良かったね。

ウェブはインタラクティブなドキュメントのために設計されたもので、デスクトップアプリケーションのためじゃない。レイアウトエンジンは組版からインスパイアされていて、テキストにしか意味がないコンポーネントも多いし(、、、...)。動的データ(リストの仮想化)やカスタムコンポーネント(キャンバスやSVGはその点であまり良くない)にも対応してない。> 現代のデスクトッププラットフォーム向けの開発はひどいし、フレームワークなしのウェブもそこで使われてる。PMが自分の製品を「ブランディング」したがってるのと、開発者が短期的に自分のために最適化してるのが関係してると思う。ユーザーのためじゃなくてね。

ネイティブボタンの高さは変えられないんだよね。もちろん、できるんだけど、いろんな状況で分かりにくいし、簡単じゃないんだよね。

ウェブには何もない。自分で作らなきゃいけなくて、せいぜい半端なものになるよね。そして、現代のデスクトッププラットフォーム向けの開発がひどいから、フレームワークなしのウェブも使われてる。これが根本的な原因に感じる。もっと具体的に言うと、ウェブにはイディオムがあるけど、そのイディオムは1980年代に取り残されていて、ウェブはハイパーリンクと時々の画像、データテーブル、送信可能なフォームの集まりだと思ってる。これが「お気に入り」リストやウェブページ上の任意のテキストを選択できる機能の起源なんだ。ウェブアプリは、アプリケーションUIを完全にゼロから作らなきゃいけないだけじゃなくて、全く違うことをしたがるドキュメントUIの上にそれを乗せなきゃいけない。現代のブラウザはそのイディオムを抑え込んで「戦うのが楽になった」けど、取り除いたり改善したりはしてないんだよね。

それだけじゃないんだよね。自分の使ってるオペレーティングシステムの動きに慣れてくると、開発者としてはアプリもその環境に合わせて動いてほしいって思うんだ。ウェブではそれが崩れちゃったんだよね。ウェブページはちょっと違う「ボックス」環境だったから。そして、モバイルの登場で完全に崩壊した。デスクトップの慣習がタッチや小さい画面にはそのまま適用できなかったからね。(これも君の言ってたことに戻るけど)モバイルOSの開発者たちは、同じような慣習を導入するのをあまり真剣にやらなかったんだ。例えば、長押しはデスクトップの右クリックの代わりに使える一貫した表現になり得たのに、最初はそれが実装されず、後からも一貫して推進されなかった。シェアメニューや省略メニューと競合してしまったからね。

いくつかのアプリでは、テキストボックスに入力したらEnterで送信、Ctrl+Enterで改行になる(俺のパソコンじゃないけど、Slackはそうだった気がする)。でも他のアプリでは逆だったりする(GitHubのコメントはそうだと思う)。どうしてこうなったのかも、どう直せばいいのかも分からないけど、「イディオマティックデザインを復活させろ」って言っても、イディオムが足りないから意味がない。あの二つの挙動が不一致なのが間違ってるかどうかも分からないけど、PRレビューのコメントではもっと派手なフォーマットが欲しいだろうし、チャットメッセージではそうでもないかもしれない。ユーザーとしては、どっちがどっちかを覚えておくのが面倒でイライラするよ。

面白いね。エンターで送信するフィールドで改行を作るのはシフト+エンターだと思ってたから。これがこの問題のバラバラな性質を示してるよね。

Slackでは、エンターを改行に戻すオプションがあるから(俺はそうしてる)、他のソフトはそんなに優しくないよね。Grafanaはシフト+エンターで送信する新しい方法を導入したけど、いつも混乱しちゃう。

チャットインターフェース以外で、エンターがテキストを送信するのはいつなんだろう?

Slackだとさらに厄介になることがあるよ。Markdownフォーマットをオンにすると、Shift+Enterで改行できるんだけど、3つのバックティックで始まるマルチラインのコードブロックにいるときは、Enterで改行、Shift+Enterでメッセージ送信になるんだ。これがいいアイデアだと思った人の気持ちは分かるけど、実際は全然ダメだよね。

Teamsは両方やってるね。基本的にはEnterで送信、Shift+Enterで改行だけど、フォーマットツールを開くと切り替わる。少なくとも、どのキーコンボで改行になるかを示すメッセージはあるけど、たまに混乱することもある。

数十年前、ReturnとEnterはその理由で別々のキーだったんだ。Returnは改行を入れるため、Enterは入力を送信するため。今は一つのキーに減ったから、伝統的なGUIのルールでは、マルチラインやマルチパラグラフの入力ではEnterは他のコンテキストのように送信せず、改行(または段落の区切り)を入れるけど、Ctrl+Enterで送信するんだ。チャットアプリでは、単一段落の内容が一般的だから、これが逆転することが多い。良いアプリはこれを設定可能にしてるね。

マルチライン入力をサポートするものは、Enterで送信するんじゃなくてボタンを押して送信するべきだよ。そうすれば誰でもすぐに使えるし、何も学んだり覚えたりしなくて済む。次に、ユーザーがCtrl+Enterでより早く入力できることを学びやすくするために、ツールチップや隣接するテキストで宣伝すればいい。75%の人が早くできることを学んでも、100%の人が簡単に使える方がいいよね。

これって、プロダクトデザインに迷い込んだビジュアルデザイナーたちが押し付けてる部分が大きいよね。職業としてのカテゴリーエラーがずっと修正されてない感じ。 (ちょっと物議を醸すかもしれないけど、必要ないプロジェクトに「デザイナー」って肩書きの人が関わることが原因なんだよね。このカテゴリーは思ってる以上に広いし。)

Appleが称賛されるのは興味深いね。 > それってリンク? かもね!Appleがスキューモーフィックからフラットデザインに移行したとき、これが大きな問題だったんだ。iOSでボタンが何かを判断するのが難しくて、タップしたかどうかも分からなかったし、プラットフォーム間でのローディングGIFの削除が二重送信みたいな問題をさらに悪化させたんだよね。iOSのもう一つの馬鹿げたところは、ジェスチャーのやり方が多すぎること。最初はシンプルだったのに、今は複雑すぎて、OSが一つのジェスチャーを別のものと混同することもある。

俺のイライラするポイントの一つは、ウェブフォームを送信するためにEnterを押しても、もう普遍的には機能しなくなってきてること。代わりにタブで送信ボタンに移動して、(ウェブページによっては)スペースかEnterを押さないといけない。もう一つの面倒なことは、多くのウェブフォーム(ウェブ技術に基づくデスクトップアプリも)で、最初に表示されたときに自動的に入力フィールドにキーボードフォーカスが置かれなくなってること。これもモバイルではアンチパターンで、たった一つか二つのテキスト入力しかない画面でも、前のアクションが何かを入力するステップを実行したいことを明確に示しているのに、まず入力フィールドをタップしないとキーボードが表示されないから、要求された情報を入力し始めるのが面倒なんだよね。

俺のイライラするポイントの一つは、ウェブフォームを送信するためにEnterを押しても、もう普遍的には機能しなくなってきてること。代わりにタブで送信ボタンに移動して、(ウェブページによっては)スペースかEnterを押さないといけない。先日、10年ぶりに新しくセットアップしたmacOSマシンでSafariを使ったんだけど、もちろんHNを見たくて、最終的にはコメントを書きたかったんだ。いろいろ書いて、筋肉の記憶でタブを押してEnterを押したら、コメントが「送信された」代わりに何が起こったかというと、macOSのSafariではタブがアドレスバーにジャンプするらしくて(???)、その後Enterを押すとページがリロードされて、書いたものが全部消えちゃった。正直、数分後にまた同じことをやっちゃったから、Safariでのブラウジングは諦めてFirefoxをダウンロードしたよ。

皮肉なことに、Substackではモバイルで画像をズームインする機能がないんだよね。