ボーダー半径は控めだが強力なデザインパラメータです。システムの個性を伝えます — 鋭すぎると冷たく企業的、丸すぎると遊び心がありおもちゃっぽく感じます。Alius は意図的な中間地点に位置しています。

デザインレーショナル

Alius のボーダー半径システムは明確な哲学に導かれています:

  • エンジニアリングシステムは丸すぎてはならない — ロボティクスプラットフォーム、設定ツール、技術インターフェースは、タイトな半径が伝える精度の恩恵を受ける
  • オープンソースコミュニティは冷たすぎてはならない — 適度な半径は技術的信頼性を損なうことなく親しみやすさと開放性を表現
  • 「適度な半径」がブランドポジション — Alius が親しみやすくもプロフェッショナルであることを伝える

パラメトリックロジック:

  • 小さい半径 = エンジニアリングの精度、技術的重厚感
  • 適度な半径 = 親しみやすさと開放性、コミュニティ志向
  • 大きい半径 = ソフトでカジュアル(控えめに使用)

半径スケール

XS(エクストラスモール)

  • 用途: 小さなタグ、バッジ、ステータスラベル、インラインインジケーター
  • 特徴: ほとんど丸みがない、ほぼ直角 — 精度を伝える
  • 例: バージョンタグ、カテゴリーラベル、ステータスチップ

S(スモール)

  • 用途: ボタン、テキスト入力、セレクトドロップダウン、小さなカード
  • 特徴: わずかに丸み — プロフェッショナルでありつつ柔らかさのヒント
  • 例: プライマリボタン、検索入力、フィルターコントロール、トグルスイッチ

M(ミディアム)

  • 用途: カード、モーダル、ダイアログボックス、コンテンツコンテナ
  • 特徴: 明確に丸み — カジュアルになりすぎず親しみやすい
  • 例: ドキュメントカード、製品カード、通知パネル、設定パネル

L(ラージ)

  • 用途: 大きなコンテナ、ヒーローセクション、フィーチャーブロック、画像コンテナ
  • 特徴: はっきりと丸み — 温かく親しみやすい
  • 例: ヒーロー画像コンテナ、フィーチャーハイライトカード、プロモーションバナー

Full(完全円形)

  • 用途: アバター、ステータスドット、ピルボタン、円形アイコン、通知バッジ
  • 特徴: 完全に丸い — 装飾目的ではなく特定の機能的要素に使用
  • 例: ユーザーアバター、オンラインステータスインジケーター、通知カウントバッジ、アイコンボタン

使用ガイドライン

  • 定義されたスケール内に留まる — 任意の半径値を導入しない
  • コンポーネントカテゴリー内で一貫性を維持(すべてのボタンは S、すべてのカードは M)
  • 迷った場合は小さい半径を選ぶ — Alius は柔らかさより精度に傾く
  • ボーダー半径がページ上で最も目立つビジュアル要素になってはならない