VOL. 08 — UI / Web Design 実践 / The Digital Surface

— 01 / Premise

デジタル ≠ 紙。

Five fundamental differences

Print— 紙

A固定サイズ。A4、四六判、新書 — 寸法は決まっている。
B静止。文字も画像も動かない。
C状態がない。読まれる前に最終形が決まっている。
D線形。読み手は最初から最後まで一方向に進む。
E完成して終わる。印刷後の修正は次の版まで持ち越し。

Digital— 画面

A可変サイズ。320px のスマホから 4K まで、同じデザインが伸縮する。
B動く。ホバー、トランジション、ローディング — 動きそのものが情報。
C状態がある。Default / Hover / Active / Focus / Disabled / Loading / Error / Success。
D非線形。ユーザーは戻る、飛ぶ、検索する。フローは樹形。
E使われ続ける。デプロイ後も改善し続けるソフトウェアの一部。

— 02 / Methodology

Atomic Design.

Brad Frost, 2013

UI を化学のように組み立てる。

2013 年、Brad Frost は UI を化学に例えた。Atom (原子) が集まって Molecule (分子) になり、Molecule が集まって Organism (生体組織) になる。

この階層的アプローチによって、デザインは「ページ」ではなく「再利用可能な部品の集合」として扱えるようになった。Figma のコンポーネント、React の Component、Storybook — すべて同じ思想の上にある。

右の図は、五段階の階層と、それぞれの代表例を示している。下の段の安定があって、上の段の自由が生まれる。

— 01 — Atoms

最小単位。色、タイポ、アイコン、ボタンの「形」など、これ以上分解できない要素。

Aa

— 02 — Molecules

原子の小さな組み合わせ。検索フォーム (input + button) のような、目的を持った最小ユニット。

— 03 — Organisms

分子の集合。ヘッダー、商品リスト、フォームセクションなど、ページの「区画」を成す単位。

Card A

Card B

Card C

— 04 — Templates

骨格としてのページ構造。コンテンツが入る前の「ワイヤーフレーム」段階。

— 05 — Pages

テンプレートに実コンテンツが入った最終形。実際のユーザーが見る画面。

— 03 / Components

コンポーネント解剖。

Real, working components

— Button —5 variants

階層と意図を視覚で区別する。Primary は CTA に 1 つだけ、Secondary は補助、Ghost は弱い操作、Destructive は破壊操作専用。

— Input —with states

Email

Password — 8 文字以上必要です

ラベル、入力欄、エラーメッセージは三位一体。Focus 時のリングと Error 時の赤枠で、状態を即座に伝える。

— Badge —5 colors

Success Pending Failed Info Draft

セマンティックカラーで状態を一瞥で伝える。文字色だけでなく、視覚障がい者のためにアイコンや形でも冗長化する。

— Card —content container

Article

Designing in the open.

How public design systems shape modern product teams.

— Editorial5 min read

画像、タグ、見出し、本文、メタ — の五段階で構成された汎用コンテナ。ニュース、商品、ブログのリストで広く使われる。

— Navigation —primary nav

Meridian

Dashboard Projects Team Settings

⌘K

ロゴ、ナビゲーション、アクション (検索 / アカウント) の三領域で構成。Active 状態の下線が「いまどこにいるか」を伝える。

— 04 / States

八つの状態。

Every interactive element has these

— 01 / Default —

通常の見た目。何もしていない静止状態。

— 02 / Hover —

マウスが乗った瞬間。色変化や影で反応。

— 03 / Active —

押下中。物理的に「沈む」フィードバック。

— 04 / Focus —

キーボード操作中。リングで明示的に示す。

— 05 / Disabled —

操作不可。条件未達の表現。色を落とす。

— 06 / Loading —

処理中。スピナーで進行を伝え、二重押し防止。

— 07 / Success —

完了。緑とチェックで視覚的な達成感。

— 08 / Error —

失敗。赤で警告し、復旧経路を併記する。

— 05 / Theming

ライト & ダーク。

Same content, twin moods

— Light Mode —

Day.

Conversion Rate+12.4%

Active Users+8.1%

2,481

Total

94.2%

Uptime

1.4s

Avg Load

明るい環境、長時間の集中作業に向く。コントラストが強く、白の照度が高い。屋外で読みやすい。

— Dark Mode —

Night.

Conversion Rate+12.4%

Active Users+8.1%

2,481

Total

94.2%

Uptime

1.4s

Avg Load

暗い環境、夜の使用に最適。OLED でバッテリー消費も少ない。色の彩度を 10–20% 上げないと沈む。

— 06 / Responsive

応答する画面。

From 320px to 4K

同じ内容、違う形。

レスポンシブとは、コンテンツに応じて画面が呼吸することを意味する。決まったブレイクポイントは存在しない — コンテンツが壊れる地点がブレイクポイント。

Mobile First の思想では、最小画面で何を残すかから設計し、画面が広がるにつれて要素を「足していく」。逆ではない。

右の三段階は同一サイトの別レイアウト。情報の優先順位は同じだが、配置と密度が呼吸している。

— Phone —

≤ 600 / 4 col

— Tablet —

601-1024 / 8 col

— Desktop —

≥ 1025 / 12 col

Interface, in motion

— Premise / 前提

— Coverage

デジタル ≠ 紙。

Print— 紙

Digital— 画面

Atomic Design.

UI を化学のように組み立てる。

コンポーネント解剖。

Designing in the open.

八つの状態。

ライト & ダーク。

Day.

Night.

応答する画面。

同じ内容、違う形。

Interface, in motion

— Premise / 前提

— Coverage

デジタル ≠ 紙。

Print— 紙

Digital— 画面

Atomic Design.

UI を化学のように組み立てる。

コンポーネント解剖。

Designing in the open.

八つの状態。

ライト & ダーク。

Day.

Night.

応答する 画面。

同じ内容、違う形。

応答する画面。