進め方の地図
| 週 | やること | 仕上がるもの |
|---|---|---|
| 1〜2週目 | 授業1: 情報設計 ― 誰が何をしに来る? | 利用者像カード + 情報の優先順位表 |
| 3週目 | 授業2: ワイヤーフレーム (線画の設計図) | 美容室3ページのワイヤー |
| 4週目 | 授業3: スマホファースト | スマホ版ワイヤー + タップ検査 |
| 5週目 | 授業4: フォームとUI部品の定番 | 予約フォームの設計 |
| 6週目 | 授業5: デザインシステムに育てる | 美容室用ルールブック |
| 7〜8週目 | ユニット制作: カンプ一式に仕上げる | 美容室サイトのカンプ一式 + 発表 |
授業1: 情報設計 ― 誰が・何をしに来る?
デザインの最初の仕事は、描くことではなく決めることです。決めるのは3つ ―「誰が来るか」「何をしに来るか」「どうなったら成功か」。これが決まると、ページに置くもの・置かないもの・目立たせるものが、ほとんど自動的に決まります。
- カードの枠を作るFigmaに「利用者像」というフレームを作り、「誰が / 何をしに / 成功とは」の3行の枠を用意します。
- 「誰が」を書くお店の設定から想像します。例:「30〜40代、家と駅の間で美容室を探している。初めてのお店は少し緊張する」。
- 「何をしに」を書く例:「雰囲気と料金を確かめて、合いそうなら予約したい」。
- 「成功とは」を書く例:「不安が減って、予約ボタンを押せたら成功」。
- 声に出して確かめる「この人がトップページを開いた3秒後に、何が見えているべき?」と自分に質問します。答え (お店の雰囲気 + 予約への入り口) が、トップの主役です。
お題: トップページに置く候補の情報に、利用者像カードを根拠にして優先順位をつけます。
- 候補を全部書き出す例: 店内写真 / 料金表 / 予約ボタン / アクセス地図 / スタッフ紹介 / お知らせ / こだわりの薬剤の話。
- 利用者像に照らして並べる「雰囲気と料金を確かめて予約したい」人にとっての重要度順に並べかえます。
- 下位を思いきって落とす下位の項目はトップから外し、別ページ行きにします。「全部載せ」は、何も伝わらない一番の原因です。
お題: 実在のサイトを3つ開き、それぞれ「このページの成功は、利用者が何をすることか」を1文で言い当てて、観察ノートに書きます。
授業2: ワイヤーフレーム ― 線画の設計図
ワイヤーフレームは、色も写真も入れない「グレーの四角と線だけ」の設計図です。なぜ最初から色を塗らないのか。理由は単純で、直すのが安いからです。完成品の手直しは1時間、ワイヤーの手直しは1分です。仕事では、ワイヤーの段階でお客さんと合意してから色を塗ります。
- 道具を縛る使うのは、グレーの四角・線・文字だけです。写真の場所は四角に ✕ を描いて表します。色は禁止です。
- 骨格を上から置くヘッダー (店名 + 予約ボタン) → 大きな写真エリア → ひとことキャッチ → 料金の入り口 → アクセス → フッターの順に、優先順位表のとおり並べます。
- 文字は本物を書く「ここに文章」ではなく、「柔らかいショートが得意な、駅徒歩5分の小さなお店です」のように本物に近い文を入れます。文字量が分からないと設計になりません。
- ボタンに動詞を書く「予約する」「料金を見る」のように、押した結果が分かる言葉にします。
- 3秒テストをするできたワイヤーを3秒見せて隠し、「何のお店だった?」「どこを押せば予約?」にスタッフが答えられたら合格です。
お題: 「料金・メニュー」ページと「予約」ページのワイヤーを描きます。
- 料金ページ: メニュー名と料金がひと目で対応して見える表組みを設計します。「どれが人気か」も対比で示しましょう。
- 予約ページ: 聞く項目を「名前・連絡先・希望日時・メニュー」の4つだけに絞った、短いフォームを設計します (詳しくは授業4で)。
- 3ページの行き来を描く各ページのどこを押すとどこへ行くか、矢印でつなぎます。行き止まりのページがないか確かめます。
授業3: スマホファースト ― 小さい画面から設計する
お店のサイトを見る人の多くはスマホからです。だから設計もスマホから始めます。スマホで成立する設計はPCに広げられますが、逆は崩れがちです。スマホ設計の約束は3つ ― 1列に並べる、タップできるものは44ピクセル以上、大事なボタンは親指が届く下の方にも置くです。
- スマホフレームを作るF → iPhoneサイズを選びます。
- 横並びを縦に直すPCで横に並べた要素を、優先順位の順に縦1列に置き直します。順番は優先順位表のままです。
- タップサイズを確かめるボタンや電話番号など押せるものの高さを44ピクセル以上にします。四角を選べば右パネルに高さが出ます。
- 予約ボタンを2か所にヘッダーと、ページ下部の「もう一度予約ボタン」の2か所に置きます。読み終わった指の近くに出口を作る定番です。
お題: 料金・予約ページもスマホ幅で組み直し、3ページ全部に「44ピクセル未満の押せるもの」が残っていないか検査します。
授業4: フォーム ― UIデザインの難所
予約・問い合わせ・申し込み。サイトの成功はたいていフォームで起きます。そしてフォームは、利用者が一番イライラしやすい場所でもあります。良いフォームの約束は4つです ― 項目は最少、ラベルは枠の上、必須は明示、エラーは「どこを・どう直すか」まで言う。
- 入力欄の部品を作る「ラベル (上) + 入力枠 + 補足 (下)」の3段をオートレイアウトで1部品にし、コンポーネント化します。
- 必須マークを決めるラベルの横に「必須」の小さなタグをつけます。「※」だけより親切です。
- 4項目並べる名前 → 連絡先 → 希望日時 → メニューの順に部品を並べます。聞く理由を言えない項目は置きません。
- エラー状態をバリアントで作る入力枠が赤くなり、下に「例: 090-1234-5678 の形式で入力してください」と出る状態を追加します。「入力が正しくありません」だけのエラーは禁止です。
- 送信ボタンの文言を決める「送信」より「この内容で予約する」。押した結果が分かる動詞にします。
お題: 次の「残念な予約フォーム」を、授業の4つの約束で直します。― 項目: 名前 / ふりがな / 生年月日 / 郵便番号 / 住所 / 電話 / メール / 希望日時 / メニュー / 当店を知ったきっかけ。ラベルは枠の中に薄く表示。必須の印はなし。エラーは画面上部に「入力が正しくありません」とだけ出る。
- 項目を斬る美容室の予約に本当に要るものだけ残します (理由を言えるかが基準です)。
- ラベルを外に出す枠の中の薄い文字は、入力を始めると消えて困る、の定番例です。
- 必須とエラーを直す例題の部品に置きかえます。
お題: 実在のサイトで「良いフォーム」「良いナビ」「良いカード一覧」を1つずつ見つけ、なぜ良いかを観察ノートに追加します。授業の言葉 (ラベル・必須・タップサイズ・優先順位) を使って説明しましょう。
授業5: デザインシステムに育てる
ユニット2で作ったミニUIキットを、「ヘアサロン そら」専用に育てます。色・文字・部品に加えて、言葉のルール (敬語の調子、ボタンは動詞で終わる、など) も1枚に書きます。ルールブックがあると、ページが増えても世界観がぶれません。これは複数人で作る現場の必需品で、ジュニアの最初の仕事が「デザインシステムどおりに量産する」であることも多いのです。
お題: 美容室の世界観 (柔らかい・清潔・小さなお店の安心感) に合わせて、色3つ・文字3階層・ボタン・入力欄・カードを決め、1フレームのルールブックにまとめます。
ユニット制作: 美容室サイトのカンプ一式
2ヶ月の総まとめです。ワイヤーフレームにルールブックの色と文字を流し込み、カンプ (完成見本) に仕上げます。
- スマホ版カンプ3枚トップ・料金・予約を、ルールブックの部品だけで仕上げます。
- PC版カンプ3枚12カラムグリッドに展開します。スマホ版と「同じお店」に見えるかが検査項目です。
- プロトタイプでつなぐ予約完了までの道のりを再生できるようにします。
- 通し検査3秒テスト・タップ44ピクセル・コントラスト・「どのページからも予約に行けるか」の4点を自分で検査します。
- 発表する利用者像カードから始めて、「誰のための、何のための設計か」を5分で発表します。ワイヤー → カンプの過程も見せましょう。過程を見せられる人は、仕事で信頼されます。
つまずきやすいポイント
発展チャレンジ (余力のある方へ)
- 「ユーザビリティテスト」を体験してみましょう。家族やスタッフに「このサイトで予約してみて」とだけ伝えて操作を観察し、詰まった場所を1つ直します。
- 4ページ目「スタッフ紹介」を、利用者像カードから自分で設計して追加してみましょう。
- 「ヤコブ・ニールセンの10ヒューリスティック」という有名な使いやすさの原則集を調べて、自分のカンプを採点してみましょう。