はじめに
弊社では、Webアプリケーション開発における効率化や品質向上を目的として、社内デザインシステムを構築しています。
この記事では、デザインシステムのTableを作成する過程で巻き起こったTableのデザインの考察を紹介します。
GitHubやSpotifyなど、身近なサービスの実例を参考にしながら議論を進めました。「あ、なるほど...!」と思えるような工夫があり、私自身も非常に濃密な議論を経験でき、とても楽しい時間でした。
また、デザイナーのすずきとフロントエンドエンジニアのs.katoが実装時に意識したポイントも記事で公開していますので、こちらもぜひチェックしてみてください！
- デザインシステムを作るにあたって意識したポイント by すずき
- 社内デザインシステムの"実装"にあたって意識したポイント by s.kato
Table要素の選択動作：一般的な仕様
多くのWebシステムでは、Table行全体をクリックできる仕様は少なく、特定の要素（タイトルやボタン）をクリックしてアクションを発生させる設計が一般的です。
この設計は、どこが操作可能なのかを明確にし、ユーザーの混乱を防ぐためのものです。
では、GitHubとSpotifyの例を通じて、具体的な工夫を見ていきます。
GitHubのTable要素の例
動作概要
GitHubのリポジトリページにあるTable要素では、以下のような工夫がされています。
-
行全体はクリック不可。
クリック可能な要素（フォルダ名やプルリクエスト名）が明確に設定されています。 -
視覚的フィードバックがしっかり。
カーソルを合わせるとクリック可能な要素がハイライトされ、操作のヒントが得られます。
親切なインタラクション
プルリク番号にカーソルを合わせると…？
-
ポップアップで概要を表示：
ページ遷移せずに必要な情報が表示されます。親切ですね...!
学びポイント
-
クリック可能な要素の明確化
ユーザーに「ここが押せる！」と直感的に伝える工夫。 -
補助情報の提供
ポップアップのような機能で、余計なクリックを減らす設計。
SpotifyのTable要素の例
動作概要
一方、SpotifyのWeb版では、GitHubとは少し異なります。
-
行全体をクリック可能に！
行をクリックすると曲が選択され、Shiftキーを押しながら複数行の選択も可能です。
要素ごとの動作
- 曲名をクリックすると曲の詳細ページへ、アルバム名をクリックするとアルバムページへ遷移します。
- カーソルを合わせるとテキストに下線が表示される仕様で、視覚的な混乱を防ぎます（再生中を示す緑色との混同を避けるため）。
ダブルクリックの便利機能
- 行をダブルクリックすると曲の再生がスタート！
再生ボタンのショートカットとして機能しており、使い勝手が抜群です。
アンチパターン：押せそうだけど押せない!?
一方で、「これ押せるよね？」と思わせておいて実際には押せないデザインも少なくありません。
例えば、行にカーソルを合わせると青くハイライトされるTableがあります。一見、行全体がクリックできそうですが、実際にはそうではありません。この原因は、ハイライトの強調が誤解を生むことにあります。
解決策
-
控えめなハイライト
GitHubやSpotifyのように、トーンを変えず色の濃淡で控えめに表現する。 -
交互の背景色
テーブル行の背景色を交互にすることで視覚的な区切りを明確に。
まとめ
GitHubとSpotifyの例から、Table要素の選択動作における設計のコツを学びました。
- GitHub: クリック可能な要素を限定し、視覚的フィードバックとポップアップでユーザー体験を向上。
- Spotify: 行全体をクリック可能にし、ダブルクリックを便利機能として利便性を向上。
どちらのアプローチも、「ユーザーが迷わないデザイン」を実現しています。
今後もデザインシステム構築では、これらの学びを活かし、システムに慣れていない人でも直感的で便利なUI/UXを目指して改善を図っていきたいと思います！
Discussion