前の章に戻る
- ✓カラー・フォント・余白のルールと、ボタンなどコンポーネントの状態を定義できる
- ✓支給ロゴとブランドカラーの制約を守り、ワイヤーフレームに見た目を与えてリフトのUIを仕上げられる
- ✓決めたルールをスタイルガイドに一覧化し、ニールセンの10原則やコントラストで自己点検できる
前回（3-4）では、予約フローを中心にリフトのワイヤーフレームを作りました。今回はそこに色・文字・部品を与えてUIを仕上げ、決めたルールをスタイルガイドに残します。仕上げる成果物は、UIデザイン（Figma）とスタイルガイドの2点です。
このレッスンでやるのは、前回のワイヤーフレームに色・文字・部品を与えて、リフトの予約サービスのUIを最後まで仕上げることです。ワイヤーフレームは、どこに何を置くかを決めた灰色の下書きでした。ここに、深緑 #2F5D50とオフホワイト #F6F1E7のブランドカラー、読みやすい文字、押せると分かるボタンを載せて、実際の画面に近づけます。この見た目は、好みで決めるのではありません。第2章で定義したリフトの価値と要件を、画面の形で実現するために決めます。第1章で学んだUXデザインの7ステップでいえば、ここは④のUIデザインにあたります。ただし、見た目を整えるだけでは終わりません。決めた色・文字・ボタンのルールを、あとから何度でも使い回せる形で1つにまとめます。これがスタイルガイドです。3-2で学んだUIの基礎知識と、人がどう見て理解するかという認知の性質を、ここで実際のデザインに当てはめます。仕上がりの使いやすさと、画面をまたいだ一貫性。その両方を、支給されたロゴとブランドカラーの制約を守りながら形にするのが、この180分のゴールです。
この工程で作るもの（UIデザインとスタイルガイド）
この工程で作るものは2つあります。1つは、ワイヤーフレームに色・文字・部品を与えて仕上げたUIデザイン。もう1つは、そのとき決めたルールを1つにまとめたスタイルガイドです。画面を作るだけなら1つ目で足りそうに見えますが、あとから画面が増えても迷わないために、2つ目を必ずセットで作ります。
配置（レイアウト）は左右で同じ。変わるのは色・文字・部品という見た目だけです。この見た目のルールをまとめたものが、次に出てくるスタイルガイドです。
スタイルガイドは、この画面で使う色・文字の大きさ・余白の取り方・ボタンなどの部品の見た目を、一覧にした決めごと集です。デザインを進めるたびに色をなんとなく選び直したり、ボタンの形が画面ごとに変わったりすると、全体がちぐはぐになります。先にルールを決めて記録しておけば、どの画面でも同じ判断を繰り返せます。
一貫性は、気をつけようという心がけからではなく、決めて記録したルールから生まれます。予約ボタンの色を1度決めてスタイルガイドに書けば、次の画面でも同じ色を使えます。画面が10枚に増えても、そのつど悩まずに済み、直しが出ても1か所を直せば全体に効きます。
使いやすさと一貫性は、別々のものではありません。同じ操作がいつも同じ見た目なら、利用者は一度覚えた操作を使い回せて、迷いが減ります。作り手にとっても、判断の基準が1つにそろうので、仕上げが速くなります。スタイルガイドは、その基準を自分と、あとで見る人（エンジニアや将来の自分）に渡すためのものです。
土台のルールを決める（カラー・フォント・余白）
UIを仕上げる前に、土台となる3つのルールを先に決めます。カラー・フォント・余白です。この3つを最初にそろえておくと、あとの画面づくりが速くなり、仕上がりもばらつきません。
カラー：ブランドカラーを役割で割り当てる
色は、数を絞って役割ごとに割り当てます。リフトのブランドカラーは、深緑 #2F5D50とオフホワイト #F6F1E7の2色が指定されています。深緑を予約ボタンや見出しなど目立たせたい要素に、オフホワイトを画面の背景に使う、というように役割を決めます。色を役割で固定すると、利用者は「深緑は押せるところ」と自然に学び、操作の手がかりになります。下のパレットが、この工程で使う色を1か所にまとめたものです。
ブランドカラーの2色は約束事として固定します。足すのは、どの画面にも要る「文字・面・注意」の色だけ。飾りで色を増やさないのがコツです。
支給されたロゴは、色を変えたり、縦横比を崩したり、影や飾りを足したりしてはいけません。渡された形のまま置きます。ブランドカラーも指定どおり、深緑 #2F5D50とオフホワイト #F6F1E7を使います。これは見た目の好みではなく、リフトというお店の約束事です。勝手に明るい緑にしたり別の色を足したりすると、お店の印象がぶれて信頼を損ないます。
フォントと余白：読みやすさは「そろえる」ことで作る
フォントは、読みやすいゴシック体を1つ選び、見出しと本文で大きさを2〜3段階に分けます。本文は16px以上を目安にすると、スマホでも無理なく読めます。余白は、要素と要素の間隔を8pxの倍数などの基準でそろえます。間隔がばらばらだと画面が雑然として見えるので、決めた基準を繰り返し使って整えます。
フォントの大きさも余白も、種類を増やすほど散らかります。段階を少なく決めて、同じ役割には同じ値を使い回すと、それだけで整って見えます。人は、そろっているものを「きちんとしている」と感じます。凝った装飾より、そろえることのほうが読みやすさに効きます。
コンポーネントの状態を設計する
ボタンや入力欄は、1つの見た目だけでは足りません。3-2で学んだとおり、同じ部品でも「今どうなっているか」で見た目を変える必要があります。この状態のルールを決めておくのが、UI設計のもう1つの土台です。3-1で参考アプリを模写して作った引き出しは、ボタンの形や状態の付け方を決めるときの手本になります。
ボタンなら、通常・押せる合図が出た状態（ホバーやフォーカス）・押した後・押せない状態（無効）を用意します。たとえば予約の必須項目が埋まっていない間は、送信ボタンを薄いグレーの無効状態にして、まだ押せないことを見た目で伝えます。入力欄なら、入力中はふちが色づき、間違いがあれば赤いふちと短い注意文を出す、というように状態を決めます。
状態を分ける目的は、飾りではなく、利用者に今の状況を伝えることです。押せるのか押せないのか、入力は合っているのか間違っているのか。これが色や形の違いで一目で分かれば、利用者は迷わず操作できます。状態ごとの見た目も、いったん決めたらスタイルガイドに書いて、全画面で同じにそろえます。
UIを仕上げて自己点検する
土台のルールと部品の状態が決まったら、ワイヤーフレームに当てはめてUIを仕上げます。仕上げたら、決めたことをスタイルガイドに一覧化し、最後に自己点検します。この3つ（適用・一覧化・点検）を1セットで進めます。
まず、3-4のワイヤーフレームに、決めた色・文字・部品を載せて予約フローの画面を仕上げます。このワイヤーフレームは3-3で作った画面フローに沿っているので、順番どおりに仕上げれば、予約の流れがそのまま画面になります。次に、使った決めごとをスタイルガイドに並べます。下の表が、スタイルガイドに載せる項目の目安です。各項目に「どこで使うか」を1行添えておくと、あとで見た人がそのまま使えます。
| 項目 | 決めること | リフトでの例 |
|---|---|---|
| カラー | メイン・ベース・文字色の役割 | メイン＝深緑 #2F5D50、背景＝オフホワイト #F6F1E7、文字＝墨 #333333 |
| フォント | 書体と、見出し・本文の大きさ | ゴシック体1つ、本文16px以上で2〜3段階 |
| 余白 | 要素の間隔をそろえる基準 | 8pxの倍数で間隔をそろえる |
| コンポーネント | ボタン・入力欄などの見た目と状態 | 予約ボタン（通常・押せる・押した後・無効）、入力欄 |
最後に自己点検です。3-2で学んだニールセンの10原則のうち、予約サービスで特に効く観点で見直します。予約の途中で今どこにいるか分かるか（システム状態の可視化）、間違えても戻れるか（利用者の操作の自由）、画面ごとに用語やボタンがそろっているか（一貫性）の3点です。あわせて、文字と背景のコントラストが十分か、ボタンが押せると見て分かるかも確認します。
この1枚があれば、どの画面でも同じ色・文字・部品・余白で作れます。これがスタイルガイド＝再利用できるルールの集まりです。
演習：リフトのUIとスタイルガイドを仕上げる
ここからは実践です。前回のワイヤーフレームを土台に、これまで決めたルールを当てはめて、リフトのUIデザインとスタイルガイドを仕上げます。5つのステップで進めます。
- ●前回（3-4）で作ったワイヤーフレームを、Figmaで開いておく
- ●支給物（ロゴ・ブランドカラー指定・店舗写真・料金表）を手元にそろえる
- ●スタイルガイドを並べる場所（Figmaの1ページ、または別ファイル）を用意する
STEP 1：カラー・フォント・余白のルールを決める
- ブランドカラー（深緑 #2F5D50・オフホワイト #F6F1E7）を、メインとベースに役割で割り当てる
- 見出しと本文の文字の大きさを2〜3段階で決める（本文は16px以上）
- 要素の間隔を、8pxの倍数などの基準でそろえる
STEP 2：ボタンなどコンポーネントの状態を定義する
- 予約ボタンの通常・押せる合図（ホバー/フォーカス）・押した後・無効の見た目を決める
- 入力欄・日時の選択カードなど、繰り返し使う部品の見た目と状態をそろえる
STEP 3：ワイヤーフレームに適用してUIを仕上げる
- 3-4のワイヤーフレームに、決めた色・文字・部品を載せて予約フローの画面を仕上げる
- 支給ロゴは渡された形のまま置く（色変更・変形はしない）
STEP 4：スタイルガイドに一覧化する
- 決めたカラー・フォント・余白・コンポーネントを、1つの場所に並べる
- 各項目に「どこで使うか」を1行添える
STEP 5：ニールセンの10原則とコントラストで自己点検する
- 予約の途中で今どこにいるか分かるか、間違えても戻れるか、画面がそろっているかを確認する
- 文字と背景のコントラストが十分か（深緑 #2F5D50の上の文字が読めるか）を確認する
- ボタンが押せると見て分かるか、押せない状態と区別できるかを確認する
完了条件（提出物）
この成果物は、章の最後でまとめてコーチに提出しましょう。
- UIデザイン（予約フローの主要画面。ブランドカラー・支給ロゴ・文字・部品の状態を反映したもの）
- スタイルガイド（カラー・フォント・余白・コンポーネントを一覧化したもの）
- 自己点検メモ：ニールセンの10原則とコントラストで見直して気づいた点と、直した点を2〜3行で書く
UIデザインとスタイルガイドは、修了評価のUIデザイン観点（20点）に直結する成果物です。凝った装飾より、ルールをそろえて一貫させることと、支給ロゴ・ブランドカラーの制約を守ることを優先してください。ここで作ったスタイルガイドは、次の章のプロトタイプづくりでもそのまま使えます。
カラー・フォント・余白のルールを決められる
コンポーネントの状態（通常・押せる・押せない）を定義できる
スタイルガイドに一覧化し、ニールセン10とコントラストで自己点検できる
この章で作った次の成果物を、まとめてコーチへ提出します。コーチが確認したら次の章へ進みます。（※途中の作業シート・自己採点の演習は提出不要）