コンポーネント設計

ねらい

Webサイトを作るとき、初心者はつい「絵」を描こうとする。1ページぜんぶを、一枚の絵としてゼロから配置していく。トップページを描き、次に下層ページをまた最初から描く。一見ふつうに見えるが、これは行き止まりへの道だ。

このクエストのねらいは、その考え方を根っこからひっくり返すこと。プロは画面を「一枚絵」として作らない。再利用できる部品（コンポーネント）の組み合わせとして作る。ボタン、入力欄、カード——こうした部品をいくつか作り、それを並べて画面を組み立てる。同じ部品を使い回すから、サイト全体が自然にそろう。そして直すときは、部品を1個直せば、それを使った全ページが同時に直る。

なぜ「一枚絵」だと困るのか

まず、一枚絵の何が困るのかをはっきりさせよう。理由がわかれば、部品にする意味も腑に落ちる。

サイトには、ふつうボタンが何十個も出てくる。トップページに3個、商品ページに5個、問い合わせページに2個……。一枚絵で描くと、これらは全部バラバラの別物になる。作るたびに「色はこのへん、角の丸みはこのくらい、文字サイズは……」と毎回決め直すからだ。前のクエスト「なぜ理論か」で出てきた恣意性——気分で決まること——が、ここでも顔を出す。

すると2つの問題が起きる。1つめ、そろわない。よく見ると、ボタンごとに色も大きさも微妙に違う。人の目は「ちょっと違う」を見抜くので、サイト全体が「なんとなく雑」に見える。2つめ、直すのが地獄。「ボタンの色を変えたい」と思ったら、何十個あるボタンを1個ずつ探して直すことになる。1個でも直し忘れたら、そこだけ古い色が残る。

つまり「一枚絵」は、作るのも直すのも、ページや部品が増えるほど雪だるま式に重くなる。ボタンが100個あれば、直すのに100回手を動かす羽目になる。部品にするのは、ラクをするためではない。そろえるためと、安全に直すためだ。

どこから来た考えか — 「分けて組む」の歴史

部品で組むという発想は、Web時代に突然わいたものではない。もっと古い、ものづくり全体の知恵を受け継いでいる。

産業革命のあと、工業の世界では規格化された部品という考えが広まった。ネジでも歯車でも、同じ規格で作っておけば、どの製品にも使い回せるし、壊れたら同じ部品と交換できる。1つずつ手作りしていた時代から、「共通の部品を組み合わせる」時代への転換だ。前のクエストで学んだスイス様式も同じ思想の仲間だった。あれは「再現できる仕組みとしてのデザイン」を目指した様式で、グリッドという共通の升目に要素を乗せた。個性より再現性。これは部品の発想とまっすぐつながっている。

そしてWebの世界で、この発想に「分け方の地図」を与えたのが、次に見るブラッド・フロストだ。

アトミック・デザイン — 原子から組み上げる

2016年、デザイナーのブラッド・フロストが『Atomic Design（アトミック・デザイン）』という本を出した（考え方自体は2013年のブログ記事「Atomic Web Design」が最初だ）。彼は「部品を作れ」と言うだけでなく、部品をどんな順番で組み上げるかを、化学の比喩で整理した。「アトミック（atomic）」とは「原子の」という意味。世の中のすべてが、原子が集まって分子になり、分子が集まってもっと複雑なものになる——画面も同じように、小さな部品から段々と組み上がる、という見立てだ。

階層は5つ。小さいほうから順に見ていこう。

1. 原子（アトム／atom） … これ以上分けられない最小の部品。ボタン、入力欄、札（ラベル＝項目名の小さな見出し）、文字1つぶんのスタイルなど。単体ではあまり意味をなさない、素のパーツ。
2. 分子（モレキュール／molecule） … 原子をいくつか組み合わせた、小さなかたまり。たとえば「札＋入力欄＋ボタン」をくっつけると、検索フォームという分子になる。ここで初めて「使える機能」になる。
3. 有機体（オーガニズム／organism） … 分子や原子を組み合わせた、画面の大きな一区画。たとえばロゴ＋メニュー＋検索フォームをまとめると、ページ上部のヘッダー（サイト上端の帯）という有機体になる。
4. テンプレート … 有機体を並べた、ページの骨組み。中身（文章や写真）はまだ仮の状態で、「どこに何が来るか」という配置だけを決めた設計図。
5. ページ … テンプレートに、本物の文章や写真を流し込んだ、最終的な完成画面。

なぜわざわざ階層に分けるのか。それは、部品に「大きさの段階」をつけると、どこを直せば何が変わるかが見えるからだ。ボタン（原子）を直せば、それを含むフォーム（分子）も、フォームを含むヘッダー（有機体）も、自動でそろう。逆に、ヘッダーの並びを変えても、ボタンそのものは無事だ。影響の届く範囲が、階層を見れば一目でわかる。これが「分けて組む」最大の利点だ。

なお、この5段階の名前を丸暗記する必要はない。大事なのは「小さい部品から大きい画面へ、段階的に組み上げる」という考え方のほうだ。化学にたとえれば「原子→分子→有機体」と組み上がる、その筋さえ握っておけばいい。

状態も部品の一部 — ボタンは「5つの顔」を持つ

ここが、初心者が一番見落とすポイントだ。部品は、見た目が1つではない。状態（じょうたい）によって顔が変わる。そして、その全部の顔をまとめて設計して、はじめて「部品が完成した」と言える。

ここで一つ、典拠をはっきりさせておく。「状態を見せよ」という原則そのものは、ヤコブ・ニールセンのユーザビリティ・ヒューリスティクス（使いやすさの10原則）の第1番「システム状態の可視化」から来ている。一方、「ボタンには通常・ホバー・押下・無効・エラーの5つの顔がある」という整理は、その原則を実務で具体化したものだ。原則（状態を見せよ）は典拠から、5つという数え方は本書の運用整理から——この境目を覚えておくといい。

ボタンを例にとろう。ボタンは代表として5つの顔を持つ。

• 通常 … 何もしていない、ふだんの姿。
• ホバー … マウスを上に乗せたとき。「ここ押せますよ」と知らせる（hover＝上に浮かぶ、の意）。
• 押下（おうか） … 実際に押している瞬間。少し沈むように見せると、押した手応えが出る。
• 無効（むこう） … 今は押せない状態。たとえば必須項目が未入力のとき。灰色にして「今はダメ」と伝える。
• エラー … 操作が失敗したとき。赤などで「うまくいかなかった」と知らせる。

なぜ状態まで設計するのか。理由は、設計し忘れた状態は、本番でユーザーを迷わせるからだ。たとえば「無効」を作り忘れると、押せないボタンが押せそうに見えてしまう。ユーザーは押して、何も起きず、「壊れてる？」と不安になる。逆に、押せないことを灰色で示しておけば、迷いは消える。状態の設計は、見た目のおまけではない。ユーザーへの説明そのものだ。

なお、この5つは「代表」であって全部ではない。実務では、キーボード操作で当たっている部品を示すフォーカス（次に動く対象を枠などで光らせる状態）も加える。マウスを使えない人にとって、今どこにいるかを示す命綱になるからだ（このあたりは、後のレスポンシブやアクセシビリティの編で詳しく扱う）。

この状態の設計は、フィードバック（ユーザーの操作に対して画面が反応を返すこと）を、部品の単位で形にしたものだとも言える。フィードバックそのものは、このあとのUI/UX編でさらに詳しく扱う。ここでは「部品は静止画ではなく、触られて反応する生き物だ」とだけ握っておけばいい。

デザインシステム — 部品を1か所に集める

ここまでをまとめると、自然に1つの考えにたどり着く。サイトで使う部品の全部を、状態ごと・1か所に集めて管理しよう、という考えだ。これをデザインシステムと呼ぶ。

デザインシステムとは、ざっくり言えば「部品の棚」だ。ボタンはこれ、カードはこれ、入力欄はこれ——と、使ってよい部品が見本つきで並んでいる。新しいページを作るときは、棚から部品を取って組むだけ。ゼロから描かない。だから、誰が作っても、いつ作っても、サイトはそろう。

このクエストの双子である「部品の棚」アプリ（design-gallery）は、まさにこれを形にしたものだ。参照したサイトを部品に分解し、棚に貯めていく。新しい客のサイトを作るとき、その棚から取り出して組む。一枚絵を描くのではなく、蓄積した部品を再利用する。前のクエスト「なぜ理論か」で言った「経験を貯金にする」が、ここでは文字どおり部品の貯金になっている。

レイアウト編とのつながり — 反復とグリッドの到達点

最後に、これまでのクエストとどうつながるかを確認しておこう。コンポーネント設計は、いきなり現れた新しい話ではない。レイアウト編で学んだ2つの原則の、自然な到達点だ。

1つは「反復とリズム」。同じ形を繰り返すと秩序が生まれる、という原則だった。部品の使い回しは、まさに反復そのものだ。同じボタン、同じカードが画面じゅうで繰り返されることで、サイト全体にリズムと統一感が生まれる。部品は「反復を仕組みにしたもの」だと言える。

もう1つは「グリッド」。要素を共通の升目（目に見えない方眼）に乗せると、そろう、という原則だった。部品は、グリッドという「置き場所のルール」に乗せる「置くものの単位」だ。グリッドが棚板、部品が棚に並べる物。2つがそろって、はじめて整った画面になる。

だから、もしあなたのサイトが「なんか雑」に見えるとき、原因の多くはここにある。部品を使い回さず、毎回少しずつ違うものを描いているのだ。前のスイス様式のクエストと同じ処方箋が効く——足して直そうとせず、引いて、そろえる。具体的には、バラバラの要素を「これは同じ部品だ」とまとめ直す。部品の種類を減らすほど、サイトはそろい、直すのもラクになる。

見分け方

最後に、よくできた「部品で組まれたサイト」を見抜く目を持とう。次の特徴があれば、そのサイトは一枚絵ではなく、部品で設計されている。

• 同じ役割のボタンが、どのページでもまったく同じ顔をしている（色・大きさ・角の丸みがそろう）
• カードや見出しが、同じ型の繰り返しで並んでいる
• マウスを乗せると、ボタンやリンクが同じ反応をする（状態が設計されている）
• 押せないボタンが灰色で、押せないと分かる（無効状態がある）

これらは別々の工夫ではない。すべて「画面を再利用できる部品で組む」という1つの思想から出ている。部品の名前（原子・分子……）を覚えるより、この思想を握るほうが大事だ。思想さえあれば、目の前のどんな画面も「これは何という部品の組み合わせか」と分解して見られるようになる。

譜例

棚（design-gallery）で、参照サイトから取り出した部品の実例を見てみよう。本文で言った「同じ顔のボタン」「同じ型のカード」が、実際にどう棚へ並んでいるかを確かめられる。

• 棚：部品の実例を見る

見るときは、図8の4チェック（同じ顔のボタン・同じ型のカードの反復・同じ反応・灰色の無効）が、その部品にいくつ当てはまるかを数えてみるとよい。

練習・チェック

1. 身近なWebサイトを1つ選び、「見分け方」の4特徴のうち、いくつ当てはまるか数えてみよう。3つ以上当てはまれば、それは部品で設計されている可能性が高い。
2. そのサイトのボタンに、マウスを乗せてみよう。色や見た目が変わるか？　変わるなら「ホバー」状態が設計されている。
3. あなたが作ったページが「なんか雑」に見えるとき、原因を探そう。――同じ役割なのに少しずつ違う部品が混ざっていないか？　まずは「これは同じ部品だ」とまとめ直し、部品の種類を減らしてみよう。