進め方の地図
| 週 | やること | 仕上がるもの |
|---|---|---|
| 1〜2週目 | 授業1: オートレイアウト徹底 | ボタン・タグ・カード・リスト・ナビ |
| 3週目 | 授業2: コンポーネントとバリアント | 状態違いつきのボタン部品 |
| 4週目 | 授業3: スタイル登録 | 自分のミニUIキット1枚 |
| 5週目 | 授業4: プロトタイプ (画面遷移) | 動く2画面 |
| 6週目 | 月末制作 | アプリ風の画面3枚 + 遷移 |
授業1: オートレイアウト徹底 ― 中身に追従する箱
オートレイアウトは、「中の文字が増えたら箱も伸びる」「部品を足したら自動で並び直す」仕組みです。Step 4では体験まででしたが、ここではどんな部品でもオートレイアウトで組めるところまで練習します。順番に難しくなる5つの部品を作ります。
- 文字を書く文字ツール (T) で「申し込む」と書きます。
- オートレイアウト化するその文字を選んで Shift + A を押します。文字のまわりに箱がつきます。
- 余白を整える右パネルで、上下のパディングを12、左右を24にします。
- 見た目を整える箱のFillにメイン色を入れ、Corner radius (角の丸み) を999にし、文字色を白にします。
- 追従を確かめる文字を「今すぐ無料で申し込む」に書き換えてみましょう。箱がついてくれば成功です。これがオートレイアウトの価値です。
お題: 小さい部品から順に、入れ子のオートレイアウトを作ります。
- タグ: ボタンと同じ作り方で、小さめ (パディング4 / 12、文字13px) の「おすすめ」タグを作ります。
- カード: タグ・見出し・本文の3つを選んで Shift + A。縦並びになるので、要素の間隔 (Gap) を12、パディングを24にし、Fillを白、角を14にします。
- リスト: カードを Ctrl + D で3枚に複製し、3枚まとめて選んでもう一度 Shift + A。カードの間隔を16にすれば、縦リストの完成です。
- 追従を確かめる真ん中のカードの本文を3行に増やしてみましょう。下のカードが自動で押し下がれば成功です。
お題: 「左にロゴ、右にメニュー3つ」の横並びナビを、オートレイアウトだけで組みます。フレームの幅を広げたり狭めたりしても、ロゴは左端・メニューは右端に張りつくようにします。
授業2: コンポーネント ― 1か所直すと全部直る
コンポーネントは部品の「親」を作る仕組みです。親からコピー (インスタンス) を何枚置いても、親を直せば全部に伝わります。50ページのデザインでボタンの色変更を頼まれたとき、コンポーネントなしなら50回、ありなら1回の修正です。仕事では「使えると便利」ではなく「使えないと困る」機能です。
- 親を作る授業1のボタンを選んで Ctrl + Alt + K。レイヤー名の左に ◆ がつけば、それが親 (コンポーネント) です。
- 子を3つ置く親を Ctrl + D で3回複製します。子 (インスタンス) には ◇ がつきます。
- 親を直す親のFillの色を別の色に変えます。子3つが一斉に変われば成功です。
- 子だけ変えてみる子の1つの文字を「キャンセル」に書き換えます。これは その子だけの上書き (オーバーライド) になり、他には伝わりません。
- 使い分けを言葉にする「全部に効かせたい修正は親、その場だけの変更は子」と声に出して覚えましょう。
お題: ボタンに「ふつう / マウスをのせたとき / 押せないとき」の3状態を持たせます。
- バリアントを増やす親ボタンを選ぶと、右パネルに「Add variant (+)」が出ます。2回押して、合計3つの状態を作ります。
- 状態ごとの見た目を作る2つ目は少し暗い色 (マウスをのせたとき)、3つ目は灰色 + 文字も薄く (押せないとき) にします。
- 名前をつける右パネルのプロパティ名を「State」、値をそれぞれ Default / Hover / Disabled にします。
- 切り替えてみる子ボタンを選び、右パネルのStateを切り替えます。1つの部品が3つの顔を持てば完成です。
お題: 授業1のカードをコンポーネントにして、子6枚のリストを作ります。その後「角の丸みを14から8に変更」という修正依頼が来たと想定して、1回の操作で6枚全部を直します。
授業3: スタイル登録 ― 色と文字に名前をつける
「メインの青、どれだっけ?」と毎回スポイトで探すのは、時間も精度も失います。色と文字の設定に名前をつけて登録しておくのがスタイルです。登録した色を変えると、その色を使っている場所が全部変わります。コンポーネントが「部品の親子」なら、スタイルは「色と文字の親子」です。
- 色を塗った四角を選ぶユニット1で作った自分のパレットの色で、四角を1つ塗ります。
- 色スタイルにする右パネルのFillの右にある、点が4つ並んだアイコンをクリックし、+ を押して「base」と名前をつけます。同じ手順でmain・accentも登録します。
- 文字も登録する本文設定 (16px / 行間170%) の文字を選び、文字パネルの同じ4点アイコンから + で「body」を登録します。見出し (28px / 太字) を「heading」、補足 (13px) を「small」として登録します。
- 使ってみる新しい四角を描き、Fillの4点アイコンから「main」を選んで塗ります。探さず・ぶれずに塗れるようになりました。
- 全体修正を体験するスタイル「main」の色味を少し変えてみましょう。mainで塗ったすべての場所が一斉に変われば成功です。
お題: 「夏祭りのお知らせ」ページを1枚、登録したスタイルと部品だけで組みます。スポイトでの色選びと、その場での文字サイズ変更は禁止です。
- 骨格をグリッドで決めるユニット1の12カラムグリッドを引きます。
- 文字はスタイルから見出しはheading、本文はbody、日時などの補足はsmallを使います。
- 色もスタイルから背景はbase、見出しまわりはmain、「申し込みはこちら」ボタンだけaccentにします。
お題: ここまでに作った部品とルールを、1つのフレームに整理します。内容は「色3つ (名前つき)・文字3階層・ボタン (3状態)・タグ・カード」です。これは小さなデザインシステム ― あなたの最初のルールブックです。ユニット3以降、ずっと使います。
授業4: プロトタイプ ― 紙芝居を動かす
カンプを「押したらどうなるか」までつなぐと、プロトタイプ (動く試作品) になります。作る前に動きを確かめられるので、実装してから「思っていたのと違う」と作り直す事故を防げます。お客さんへの見せ方としても最強です。
- 画面を2枚作るF でスマホサイズ (iPhoneなど) のフレームを2枚作ります。1枚目にカードのリスト (授業2の部品)、2枚目に「詳細ページ」と大きく書いておきます。
- Prototypeタブに切り替える右パネル上部の「Prototype」をクリックします。
- 矢印でつなぐ1枚目のカードを選ぶと右端に ○ が出るので、ドラッグして2枚目のフレームまで引っぱります。青い矢印がつながります。
- 動きを選ぶ出てきた設定で「On click → Navigate to」になっていることを確かめます。
- 再生する右上の ▶ (再生ボタン) を押すと、本物のアプリのように操作できます。カードを押して2枚目に飛べば成功です。
お題: 詳細ページに「← 戻る」ボタンを置き、一覧へ戻れるようにして、往復できる2画面にします。
月末制作: アプリ風の画面3枚 + 遷移
このユニットの総まとめとして、スマホアプリ風の画面を3枚デザインし、プロトタイプでつなぎます。お題は「お薬リマインダー」「事業所の日報アプリ」「読書記録アプリ」から1つ選びます (自分のお題でもOKです)。
- 画面構成を決める定番は「ホーム (一覧)」「追加・入力」「完了・詳細」の3枚です。紙に手描きのラフを描いてから始めると迷いません。
- ミニUIキットで組む演習3-Bのキットの部品とスタイルだけで3画面を組みます。足りない部品が出たら、キットに追加してから使います。
- 遷移をつなぐ「ホーム → 入力 → 完了 → ホーム」が一周できるようにプロトタイプを設定します。
- 修正に強いかを自己検査する「メイン色を変えて全画面が変わるか」「カードの親を直して全部に効くか」を実際に試します。これがこのユニットの卒業試験です。
- 発表する▶ で再生しながら、「目的 → 案 → 理由」でスタッフに説明します。
つまずきやすいポイント
発展チャレンジ (余力のある方へ)
- Googleの「Material Design」(マテリアルデザイン) は、世界最大級の公開デザインシステムです。ボタン1つに何が決められているか、のぞいてみましょう。
- Figmaの「Variables (変数)」機能を調べてみましょう。スタイルのさらに一歩先で、「ライトモード / ダークモード」の切り替えなどに使われています。
- 月末制作の3画面に、4枚目「設定画面」を自分の判断だけで追加してみましょう。キットが育っていれば、驚くほど速く作れるはずです。