前の章に戻る
- ✓良いUIと悪いUIを見比べて、整って見えるかどうかがどこで決まるのかを説明できる
- ✓良いとされるUIを模写し、なぜ良いのかをレイアウト・コンポーネント・状態・導線の観点で説明できる
- ✓模写した型を、リフトに合わせて作り変えたUIまで作成できる
前回（2-7）では、リフトの提供価値と体験コンセプトを言葉にし、価値定義シートとコンセプトテスト記録にまとめました。ここからは、その価値を画面の形にしていく第3章です。今回は、2-4で作った競合UX/UI分析シートを入力に、良いUIを模写し、リフトに合わせて作り変えます。仕上げる成果物は、模写した参考画面・リフト向けに作り変えたUI・作り変えメモの3点です。
このレッスンでやるのは、良いUIの型を手で覚えて、リフトの予約画面に作り変えるところまでです。進め方は3段に分かれます。まず、良いUIと悪いUIを見比べて、どこで使いやすさが変わるのかを目でつかみます。次に、広く良いとされる実サービスのUIを模写して、使いやすい型を手で覚えます。最後に、なぜその型が良いのかを踏まえて、リフトに合う形へ作り変えます。第2章までのリサーチと要件・価値定義を終えて、ここから画面を設計する工程に入ります。Figma教材で配られた見本を模写して操作を覚えたやり方の、その延長です。
良いUIと悪いUIを見比べる
良いUIは、機能が同じでも、整って見えて垢抜けた印象になります。その差は、角丸・余白・色・影といった見た目の作り込み（クラフト）から生まれます。ここではリフトの予約画面によく出てくる部品を題材に、作り込みの甘い例と整えた例を6組並べました。どちらが整って見えるかを目で確かめてください。
ここでの狙いは、整いの差を感覚でつかむことです。余白は8の倍数、文字サイズは何段階までといった数値の網羅や、原則の体系化はレッスン2でまとめて扱います。今は理屈より、見た目の差を体で覚えます。
角丸が6・20・2pxとバラバラで、内側が外側より丸く同心円がずれ、雑に見えます。
角丸を1スケールにそろえ、内側の角丸＝外側−余白（16−8＝8px）で同心円が重なります。
余白が7・13・22pxと半端で、行の間隔がガタついて落ち着きません。
余白を8の倍数でそろえ、内側の余白を外側より狭くして情報がひとまとまりに見えます。
サイズも太さも色も同じで、どれが見出しで何が補足か区別がつきません。
サイズ・太さ・色の3つで差をつけ、予約名・日時・補足が一目で分かります。
原色が何色も競い合って、一番押してほしい予約確定が埋もれます。
配色を抑え、主役の予約確定だけに深緑のアクセントを当てて目を導きます。
硬い1px枠でカードを区切っていて、平らで窮屈に見えます。
やわらかい影でカードを浮かせ、選択中の枠を一段高く見せて奥行きを出します。
左端も幅もそろわずガタついて、視線が引っかかります。
グリッドで端をそろえ、幅もそろえて視線がまっすぐ流れます。
6組に共通するのは、右側のほうが整って見え、作り手が細部まで気を配った印象になる点です。角丸をそろえる、余白にリズムを出す、色を抑える。一つひとつは小さな判断ですが、積み重なると垢抜けた画面になります。まずはこの整いの差を感覚として持って、次の模写に進みます。
良いUIを模写して型を覚える
良し悪しの感覚がついたら、次は良いとされるUIを実際に模写します。画面を見ているだけでは、その作りは身につきません。ある程度そのまま写してみると、余白の取り方や部品の並べ方が、手を通して分かってきます。Figma教材で見本を模写して操作を覚えたのと同じで、模写は使いやすい型を体に入れる近道です。
模写する参考は、広く良いとされる実サービスのUIを1つ選びます。たとえばAppleのアプリ、よく設計された予約系やEC系のアプリ、または2-4で分析した競合のなかで一番良かった画面です。予約に関わる画面（日時選択・入力・確認・完了など）を中心に写します。
作業はFigma上で進めます。まず選んだ参考UIの画面をスクリーンショットして、Figmaに貼り付けます。次に、貼り付けた参考画面の隣に、同じ型を模写して並べて作ります。余白・部品の並び・階層をそろえる意識で、参考と見比べながら写すのがコツです。写しながら気づいた工夫（なぜこの余白なのか、なぜこの並びなのか）は、Figmaのコメント機能でその場に残しておきます。こうして手を通して型を覚えたうえで、次のセクションでリフト向けに作り変えます。
ここでの模写は、良い型を手で覚えるための学習です。写した画面を、自分がゼロから作ったオリジナルとして扱ったり、そのまま公開したりはしません。あくまで型を学ぶ練習として使い、次の作り変えで自分の設計に落とし込みます。
模写は型を覚えるための入口です。そこで満足して止めると、参考画面のコピーが1枚できるだけで、リフトの役には立ちません。大事なのは、模写した型を、なぜ良いのかを踏まえてリフトに合う形へ作り変えるところまで進めることです。
なぜ良いかを4つの観点で見る
模写しながら、同時になぜ良いのかを見ておきます。あとでリフトに作り変えるとき、この理由が判断のよりどころになります。見る観点は、レイアウト・コンポーネント・状態・導線の4つです。
| 観点 | 何を見るか | 予約サービスでの例 |
|---|---|---|
| レイアウト | 余白・要素の並び・視線の順序（何が大きく先に目に入るか） | 空き時間の一覧が画面の中心に大きく置かれている |
| コンポーネント | ボタン・入力欄・カレンダーなど、部品の形と使い方 | 日付がカレンダー形式で、押せる日と押せない日がひと目で分かる |
| 状態 | 通常・押した時・エラー・完了など、状況ごとの見た目の変化 | 予約が終わると大きな確認画面が出て、予約できたと分かる |
| 導線 | 次に何をすればよいかの流れと、今どこにいるか | 今が何ステップ目かが上部に出て、次へ進むボタンが1つだけ目立つ |
この4つは、次の3-2で学ぶUIの基礎知識ともつながっています。今は模写した型のどこが良いのかを見つける観点として使い、その裏にある原則は次のレッスンで詳しく扱います。
レイアウトやコンポーネントは画面を見れば分かりますが、状態は実際に操作しないと見えません。模写するときも、画面を眺めるだけでなく、ボタンを押した時・入力を間違えた時・予約が完了した時の変化まで操作して確かめましょう。この変化まで見ると、良いUIがどこで安心感を作っているのかが分かります。
リフトに合わせて作り変える
模写して型を覚え、なぜ良いのかも見えてきました。ここからが本番です。模写した型を、リフトに合う形へ作り変えます。リフトはスマホ縦画面が前提で、織田さんが1人で運用します。ブランドの色は、深緑（ #2F5D50）と、オフホワイト（ #F6F1E7）です。予約で迷わせないことを大事にしています。参考にした大手サービスとは、規模も事情も違います。だから模写した型をそのまま使うのではなく、第2章で定義したリフトの価値と要件に合わせて作り変えます。
下の表は、模写した日時選択画面の良い点を4観点で押さえ、リフトに作り変えるとどうするかを並べた例です。左が観点、中央が模写でつかんだ良い点、右がリフトへの作り変え方です。
| 観点 | 模写でつかんだ良い点 | リフトに作り変えると |
|---|---|---|
| レイアウト | 空き時間の一覧が画面中央に大きく、余白で区切られて見やすい | 空き枠を画面の主役にし、スマホ縦で1日ずつ大きく見せる |
| コンポーネント | 予約枠が押せるボタンとして並び、埋まった枠は薄いグレーで押せないと分かる | 空き枠と満席を色で区別し、押せる枠と押せない枠をひと目で分ける |
| 状態 | 枠を選ぶと色が変わり、完了画面で予約内容が大きく表示される | 選択中と完了を見た目で伝え、予約できたと分かる安心感をつくる |
| 導線 | 日付→時間→確認の3ステップが上部に出て、迷わず進める | 予約を少ないステップに分け、今どこにいるかを常に見せる |
作り変えで手を入れるのは、リフトの事情に合わない部分です。参考にした大手サービスの機能を全部持ち込むのではなく、予約で迷わせないことに効く型だけを残します。そのうえで深緑とオフホワイトのブランドや、織田さんが1人で運用できる範囲に合わせて整えます。
演習：模写してリフトに作り変える
ここからは手を動かします。セクション1で見た良し悪しの観点を持って、良いとされるUIを1つ選んで模写し、リフトに合う形へ作り変えます。模写した画面と、作り変えたUIと、作り変えメモの3点が今回作る成果物です。
- ●2-4で作った競合UX/UI分析シートを、手元に開いておく
- ●模写する実サービスを1つ決めて、スマホで開けるようにしておく（スクリーンショットを撮れる状態に）
- ●模写と作り変えを行うFigmaで、新規ファイルを1つ開いておく
STEP 1：良いとされるUIを1つ選んで、Figmaで模写する
- 広く良いとされる実サービス（Appleのアプリ・よく設計された予約系やEC系アプリ・2-4の競合のベスト画面など）を1つ選ぶ
- 予約に関わる画面（日時選択・入力・確認・完了など）をスクリーンショットして、Figmaに貼り付ける
- 貼り付けた参考画面の隣に、同じ型を模写して並べて作る。余白・部品の並び・階層をそろえる意識で、参考と見比べながら写す
- セクション1で見た良し悪しの観点（読める・押せる・迷わない）を持って、押した時・完了時の状態の変化も操作して確かめる
- 写しながら気づいた工夫（なぜこの余白か、なぜこの並びか）を、Figmaのコメント機能でその場に残す
STEP 2：なぜ良いかを4観点で押さえる
- 模写した画面を、レイアウト・コンポーネント・状態・導線の4つの観点で見る
- 観点ごとに、良いと感じた理由を短くメモする
STEP 3：リフトに合わせて作り変える
- 模写した型を、リフトの事情（スマホ縦画面・織田さん1人の運用・深緑×オフホワイトのブランド・予約で迷わせない）に合わせて作り変える
- 参考の機能をすべて残さず、予約で迷わせないことに効く型だけを選ぶ
- どこを、なぜ作り変えたかを一言ずつメモに残す
完了条件（作成物）
- 模写した参考画面（押した時・完了時の状態も分かる形で）
- リフト向けに作り変えたUI（模写した型を、リフトに合わせて直したもの）
- 作り変えメモ（どこをなぜ変えたか。レイアウト・コンポーネント・状態・導線のどれに効くかを一言ずつ）
ここで模写して作り変えたUIと、手で覚えた型は、次のレッスンからのIA・ワイヤーフレーム・UI設計でそのまま生きます。覚えた型が増えるほど、リフトの画面を組み立てるときに迷いにくくなります。