Readiz ウェブ UI デザイン

ユーザーは、ボタンや説明が画面を占める構成を嫌います。小さな操作部と明確な階層で、実際のコンテンツを一目で読み、探索できるようにします。新しいウェブ UI と既存 UI の修正にこの基準を適用します。ユーザーが指定したブランド・プラットフォーム・アクセシビリティ要件があれば、それを優先します。

基本密度

以下は、別途デザイン指定がないウェブツールの初期値です。本文を小さく詰め込むのではなく、不要な余白と操作部を削減します。

短いボタンは内容の幅に合わせます。主要な操作だからといって、大きくしたり広くしたりしません。
モバイルでもコンパクトな視覚サイズを維持します。共通の media query ですべてのボタンを 38～48px に拡大しません。実際のタッチエラーが確認された場合、該当操作の間隔・ヒット領域を調整し、隣接操作と重ならないことを確認します。明示されたプラットフォーム仕様は別途従います。
長い選択肢やリスト行は、文の長さに応じて自然に伸びます。高さ固定や省略で読む内容を切り取りません。番号探索のように現在の見出しを別に表示できる場合は、小さな探索操作とコンテンツ見出しを分離します。
青色系を基本強調色として好みます。明るく静かな背景、薄い境界、小さな角を使います。既存の明示されたブランドやチャートの意味ごとの色分けは維持します。

最初に表示される領域に、実際のチャート・表・コアコンテンツを配置します。紹介用の大きな見出し、長いサブタイトル、重複するバッジで作業領域を押し出しません。
繰り返しの数値と比較は表、項目の探索はソートされたリスト・短いタブ、チャート操作は小さなツールバーで作成します。個別のボタンを大きなカードのように並べません。
使い慣れた操作は、プロジェクトの既存 SVG/アイコン体系を使用します。アイコンにはアクセシブルな名前とツールチップ/必要な短いラベルを提供します。色だけで選択・成功・エラーを区別しません。
コアサマリとよく使う操作を残し、詳細な説明・出典・使用方法・保存基準は ⓘ または初期状態で折りたたまれた details に配置します。エラー、保存失敗、実行結果、重要な判断条件は必要なタイミングで表示します。
同じ状態を見出し・カード・バッジ・説明で繰り返しません。ユーザーが機能を見つけるために長い文章を読ませることはしません。
操作ボタン・表・チャートの間隔と整列を揃えます。デスクトップの目次は狭く、モバイルの目次は現在位置がわかる折りたたみ式が適切です。

修正前の実際のボタンの computed height、padding、line-height、および最初のコンテンツ位置を確認します。変更した CSS 宣言だけを見て小さくなったと判断しません。
既存のコンポーネント variant とトークンを優先して修正します。共通 CSS、高い specificity、モバイル override、動的スタイルがサイズを再度大きくしていないか確認します。上書きルールを積み重ねるのではなく、そのサイズの原因を整理します。
代表的な PC・タブレット・360～390px のモバイルで直接確認します。通常の操作が上記の初期値を維持しているか、長いテキストが切れていないか、ドキュメントの横方向のはみ出しやツール・チャートの重なりがないか確認します。
展開・選択・キーボードフォーカス・タッチ、および必要な保存/復元を確認します。既存のデータ・保存キー・チャート座標をデザイン変更のために変更しません。
要求された範囲の結果を実装・検証し、デプロイを含む作業では実際のデプロイ画面も確認します。このスキル自体が公開・メッセージ送信の権限を追加することはありません。