はてなブックマーク

Ateam Brides Inc. Advent Calendar 2021の10日目はデザイナーの綿貫（@xrxoxcxox）がお送りします！ この記事の概要 ボタンっぽい見た目の要素をクリックしたら検索フォームが動くとか自分のプロフィールを更新するとか、そういうインターフェースはたくさんありますよね。 ときどきdivやspan要素にaddEventListener('click', function)をつけて動かしているのを見かけるのですが、結局改善を求められるはずでしかも工数がかかります。 というわけでシンプルにbuttonを使いましょう、と啓蒙する記事です。 伝えたいこと ボタンっぽい役割の要素であればbuttonタグを使いましょう！ この1点のみです！ divやspanでボタンっぽい要素を作るとどうなるの？ タブキーでフォーカスを当てられない enterやspaceでボタンのアク

概要 UIに関するTipsで、次のようなものがよく流れてきます。 「角丸がかかっている要素の内側に、更に角丸の要素を配置するときは内側の角丸 = 外側の角丸 - 間の余白にすべし」というものです。 このルール自体は数学的にも理にかなっており、外側と内側の角丸の余白面積を均一にする法則として機能します。 しかし、このミクロなTipsだけに注目してしまうと、アプリケーション全体の設計において重要な視点が抜け落ちてしまいます。 角丸の設計においても、個別の要素レベルでの最適化から一歩引いて、全体での一貫性を考慮したマクロな設計が必要なのです。 この記事では、角丸設計において「木を見て森を見ず」にならないための考え方と、実装時の具体的な対策について紹介します。 対象読者 UIデザイナー・フロントエンドエンジニア デザインシステムの構築・運用に関わる方 プロダクト開発でデザインと実装の両面を考慮する

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?