一人の開発者が作るすべてのプロダクトに、統一された美しさと使いやすさを。 ミニマルで機能的、そして一目であなたの作品だと分かるデザイン。
すべてのプロダクトに共通する4つの原則。これらを守ることで、 技術やプラットフォームが変わっても「Senastraのプロダクトだ」と感じてもらえる。
余分を削ぎ落とし、本質だけを残す。余白は情報であり、沈黙は雄弁。認知負荷を下げ、ユーザーがタスクに集中できる空間を作る。
色・文字・余白・角丸のルールを全プロダクトで共有する。フォントは2種、アクセントカラーは1色。ルールが少ないほど統一感は強くなる。
すべての操作に応答する。ホバー・クリック・成功・エラー。静かだが確実な反応が信頼を築く。マイクロインタラクションは控えめに、しかし必ず。
WCAG AA以上のコントラスト。ライト/ダーク両対応。キーボード操作。モーション低減。美しさとアクセシビリティは対立しない。
ライトテーマは純白ではなくオフホワイト(#FAFAF9)を採用。長時間の利用でも目に優しく、洗練された印象を与える。 ダークテーマはほぼ純黒(#0C0C10)にわずかなブルーを含ませ、冷たくなりすぎない暗色に。 アクセントのIndigoはブランドの署名。
UIテキストには Inter、コードには JetBrains Mono。 日本語は Hiragino Sans / Yu Gothic UI にフォールバック。 明確な階層差で視線を誘導し、認知負荷を減らす。
4pxベースグリッド。すべての余白・パディングはこのスケールから選ぶ。 一貫した間隔がプロダクト全体にリズムと秩序を生む。
角丸はコンポーネントごとに適切なサイズを使い分ける。 小さい要素には小さな角丸、大きな要素にはより丸みを。
控えめで上品な影。浮遊感は最小限に、レイヤーの重なりを伝える程度に。
マイクロインタラクションは控えめに、しかし確実に。
すべてのインタラクティブ要素にフィードバックを設定する。
prefers-reduced-motion でアニメーションを無効化。
ホバーしてアニメーションを確認
全プロダクトで共有する基本コンポーネント。 ホバー・フォーカス・無効の各状態を必ず定義し、操作のフィードバックを確保する。
Primary は画面に1つ。Secondary / Ghost は補助的操作に。
フォーカス時にアクセントカラーのリングでフィードバック。エラー状態も明確に。
ホバーで微かに浮き上がり、クリッカブルであることを伝える。
操作結果を明確に伝えるフィードバック。問題発生時は原因と対処法を具体的に。
プロダクト間の統一感を保つためのDo / Don't。 リサーチ資料のベストプラクティスとアンチパターンに基づく。
余白を惜しまず取る。情報を詰め込みすぎない。余白はデザインに落ち着きと高級感を与え、可読性を向上させる。
画面を要素で埋め尽くさない。「スペースがもったいない」と考えて余白を潰すと、認知負荷が跳ね上がりユーザーの離脱を招く。
すべてのインタラクションにフィードバックを返す。ホバー・クリック・成功・エラー、すべての状態をデザインする。ユーザーは常にシステムの状態を把握できるべき。
反応のないボタンを作らない。クリックしても見た目が変わらないUIは、ユーザーに「動いているのか？」という不安を与える。
デザイントークンを介して色・サイズを参照する。ハードコードせずCSS変数(var(--color-accent))を使うことで、テーマ切替やリブランドに柔軟に対応。
色やサイズをマジックナンバーで指定しない。#5B5BD6をコード中に散りばめると、後から変更する際に漏れが発生し統一が崩れる。
WCAG AA以上のコントラスト比を確保する。テキストと背景のコントラスト比4.5:1以上。美しさとアクセシビリティは両立できる。
見た目のために視認性を犠牲にしない。薄いグレー文字を淡い背景に載せるのはおしゃれに見えても、多くのユーザーにとって読みづらい。
レスポンシブを最初から設計する。モバイル→タブレット→デスクトップの順にブレークポイントを検討し、どのデバイスでも一貫した快適さを提供する。
固定幅レイアウトだけで作らない。ランディングページは特に多様なデバイスからアクセスされる。ピンチ操作が必要なUIは離脱要因になる。
CSSファイルを読み込み、変数を参照するだけ。フレームワークや技術スタックに依存しない。
新しいプロダクトやページをリリースする前に確認する8項目。