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

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

概要

  • デスクトップソフト時代の 一貫したデザイン とその利便性への懐古
  • 現代のウェブアプリは インターフェースの多様化 により使いにくさが増加
  • デザインイディオム (慣用的な設計パターン)の重要性を強調
  • 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やプロダクトタイプの人たちによって設計されてる。彼らは、効率のために思慮深いユーザーインターフェースデザインがほぼ必須だった時代にはいなかった。無能さもあれば、ビジネスの収益側がダークパターンを助長することで悪意もある。

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

Hacker Newsで議論の続きを見る