UXデザイナーを目指すとき、避けて通れないのがポートフォリオ（作品集）づくりです。
実務の経験がない方は、自分で題材を決めて作る「自主制作」で作品を用意することになります。
ただ、いざ始めようとすると、こんなところで手が止まってしまうのではないでしょうか。
「自主制作って、どんな題材を選べばいいの？」
「調査やテストって、どこまでやって、何を残せばいいの？」
「完成した画面だけ並べても、UXの作品にならない気がする…」
UXのポートフォリオで見られるのは、完成した画面よりも、そこにたどり着くまでの考え方ですよね。
結論から言うと、題材を小さく決めて、調査から見直しまでの記録を残しておけば、未経験でも作品になります。
この記事では、題材の範囲決め、調査の記録、試作、見直し、ポートフォリオへのまとめ方を、1つの例で通してお伝えします。
筆者もGoogle UXデザイン認定を受講したときに、講座の中でポートフォリオを作りました。
読み終えるころには、自分の自主制作を、今週から何に手をつければいいかが見えてくるはずです。
手順を追えるように具体的に書いていきますので、ぜひ参考にしてください！
先に結論｜自主制作は5つのステップで進める
まずは、全体の流れと、各ステップで残しておくものを表にまとめました。
| ステップ | やること | ポートフォリオに残すもの |
| STEP1 | 題材の範囲を決める | 課題の1文、やらないことのリスト |
| STEP2 | 調査して、記録する | 調査の計画、インタビューのメモ、課題の言い直し |
| STEP3 | 試作する | 紙のスケッチ、ワイヤーフレーム、プロトタイプ |
| STEP4 | 人に試してもらい、見直す | テストの結果、直した点の前後比較 |
| STEP5 | ポートフォリオにまとめる | 過程を順に追える1ページ |
右の列の「残すもの」を、作りながら集めておくのが一番のポイントです。
あとから思い出して書こうとすると、調査の中身も、迷った理由も残っていないからです。
ここからは、次の架空の題材を例にして、各ステップを順番に見ていきます。
この記事の例（架空の題材）
- 題材：駅前にある個人経営のパン屋の、取り置き予約
- 困りごと：仕事帰りに寄ると、目当てのパンが売り切れていることが多い
- 作るもの：スマートフォンで、パンを選んで取り置きを頼む画面
- 期間：4週間（1週間あたり5時間ほど）
※ここで紹介する題材、インタビューの内容、テストの結果は、すべて手順を説明するための架空の例です。
STEP1：題材の範囲を決める
自主制作で一番多い失敗は、題材を大きくしすぎることです。
「新しいSNSを作る」「旅行アプリを作る」のように広げると、調査も画面も終わらなくなってしまいます。
題材を選ぶ3つの条件
題材は、次の3つを満たすものから選ぶと進めやすくなります。
- 話を聞ける相手が、身近に3人以上いる
- ユーザーの「1つの行動」に絞れる（例：予約する、記録する、探す）
- 作る画面が、5～8枚ほどに収まる
1つ目の条件が満たせないと、STEP2の調査で行き詰まります。
自分しか使う人が思い浮かばない題材は、思い込みのまま進んでしまいやすいので避けましょう。
課題を1文で書き、「やらないこと」を決める
題材が決まったら、課題を次の形の1文で書いてみてください。
課題の1文の型
- 〈誰〉が、〈どんな場面〉で、〈何に困っている〉のを、〈何〉で解決する
例の題材なら、次のようになります。
最初の課題の1文（例）
- 仕事帰りに寄る人が、売り切れでパンを買えないのを、取り置きの予約で解決する
あわせて、今回は作らないものも書き出しておきます。
| やること（例） | やらないこと（例） |
| パンを選んで、受け取る時間を決める | 会員登録・ログイン |
| 予約の内容を確かめる | ネットでの支払い |
| 予約を取り消す | お店側の管理画面 |
「やらないこと」を先に決めておくと、4週間で終わる大きさに収まります。
ポートフォリオにも、この表をそのまま載せておきましょう。
範囲を自分で決められることも、見る人に伝わる大事な力だからです。
STEP2：調査して、記録する
題材が決まったら、実際にユーザーの話を聞きます。
調査の計画を、先に1枚にまとめる
いきなり話を聞きに行く前に、次の4つを1枚に書いておきます。
| 項目 | 例 |
| 調べたいこと | 仕事帰りにパンを買う人が、どんなときに買えずに困っているか |
| 話を聞く相手 | 平日の夕方以降にパン屋を使う、会社勤めの人3人 |
| 聞き方 | 1人30分のインタビュー（対面かオンライン） |
| 質問 | 最近パンを買った日のこと、売り切れだったときにどうしたか、ほかの店をどう使い分けているか |
質問では、「予約できたら使いますか？」のように答えを誘う聞き方は避けましょう。
「最近パンを買った日のことを教えてください」のように、実際の出来事を聞くのがコツです。
メモは「発言」と「自分の解釈」を分けて書く
インタビューのメモは、相手が言ったことと、自分が考えたことを分けて残します。
| 相手 | 発言・行動（例） | 自分の解釈（例） |
| Aさん | 「19時に行くと、食パンがもうないことが多い」 | 夜は、定番の商品から先になくなるのかもしれない |
| Bさん | 「電話で取り置きを頼んだことはあるけど、営業中に電話するのは気が引ける」 | お店の手間を気にして、頼むのをためらっている |
| Cさん | 「売り切れだったら、コンビニのパンで済ませる」 | 買えなかったときに、代わりの手段がある |
※すべて架空の例です。
発言と解釈が混ざっていると、あとで見返したときに、本当に聞いた話なのかがわからなくなります。
ポートフォリオでも、この表があると「思い込みではなく、話を聞いて決めた」ことが伝わります。
調査の結果から、課題を言い直す
3人の話を並べて、共通していることを探します。
例の調査からは、「売り切れが困る」よりも「お店に手間をかけたくない」という気持ちが見えてきました。
そこで、STEP1の課題を次のように言い直します。
言い直した課題の1文（例）
- 仕事帰りに寄る人が、お店に気をつかわずに、目当てのパンを取っておいてもらえるようにする
調査の前と後で課題がどう変わったかは、ポートフォリオの一番の見せ場になります。
似たサービスがあれば、ここで2～3個触ってみて、良い点と足りない点を書き出しておきましょう。
STEP3：試作する
言い直した課題をもとに、画面を作っていきます。
最初から、きれいな画面を作り込む必要はありません。
紙のスケッチから始める
まずは紙とペンで、画面の流れを何パターンか描きます。
例の題材なら、次のような画面の流れになるでしょう。
- お店のトップ（今日焼き上がるパンの一覧）
- パンを選ぶ画面
- 受け取る時間を選ぶ画面
- 予約内容の確認画面
- 予約の完了画面
- 予約の確認・取り消しの画面
描いたスケッチは、写真に撮って残しておきます。
ボツにした案も、ポートフォリオに載せると考えた跡が伝わります。
ワイヤーフレームとプロトタイプをFigmaで作る
スケッチで流れが決まったら、Figma（フィグマ）でワイヤーフレームを作ります。
色や写真は入れず、ボタンや文字の配置だけを決める段階です。
画面どうしをつないで、タップすると次の画面に進むプロトタイプにしておくと、STEP4のテストに使えます。
筆者がGoogle UXデザイン認定で一番苦戦したのも、Figmaでモックアップを作る課題でした。
ツールに慣れていないと、考える前に操作で手が止まってしまいます。
Figmaを初めて使う方は、先に基本の操作だけ触っておくと安心です。
STEP4：人に試してもらい、見直す
プロトタイプができたら、実際に人に操作してもらいます。
自分で何度も見ていると、わかりにくいところに気づけなくなるからです。
「お願いすること」を決めて、黙って見る
テストでは、操作の説明はせず、次のようなお願いだけを伝えます。
- 今日19時に受け取れるように、食パンを1つ取り置きしてください
- いま入れた予約の時間を、19時30分に変えてください
- 予約を取り消してください
相手が迷っても、すぐには助けずに、どこで止まったかを記録しておきましょう。
例の題材なら、STEP2で話を聞いた人とは別の3人に頼むと、新しい気づきが得られやすくなります。
見つかった問題と、直したことを表に残す
テストが終わったら、見つかった問題と直したことを表にまとめます。
| 見つかった問題（例） | 何人がつまずいたか（例） | 直したこと（例） |
| 受け取る時間を、どこで選ぶのかわからなかった | 3人中2人 | パンを選んだ直後に、時間を選ぶ画面を出すようにした |
| 予約の変更ボタンが見つからなかった | 3人中3人 | 確認画面に「時間を変える」ボタンを置いた |
| 取り置きの期限がわからず不安になった | 3人中1人 | 完了画面に「何時まで取り置くか」を表示した |
※すべて架空の例です。
直す前と直した後の画面を並べて見せると、見直しの過程が一目で伝わります。
時間があれば、直したプロトタイプで、もう一度テストをしてみましょう。
STEP5：ポートフォリオにまとめる
最後に、ここまでに残したものを、1つの作品のページにまとめます。
過程を順に追える構成にする
1つの作品は、次の順番でまとめると、読む人が過程を追いやすくなります。
| 順番 | 書くこと | 使う記録 |
| 1 | 概要（期間、自分の役割、使ったツール） | ー |
| 2 | 最初の課題と、やらないこと | STEP1の1文と表 |
| 3 | 調査と、そこからの気づき | 調査の計画、メモの表 |
| 4 | 言い直した課題 | STEP2の1文 |
| 5 | 試作 | スケッチの写真、ワイヤーフレーム |
| 6 | テストと見直し | 問題の表、直す前と後の画面 |
| 7 | 完成したデザイン | プロトタイプ |
| 8 | 振り返り（うまくいかなかったこと、次にやりたいこと） | ー |
完成した画面は、7番目に出てくる一部にすぎません。
うまくいかなかったことも正直に書くと、かえって考える力が伝わります。
架空の題材で作った作品は、架空であることをポートフォリオにも明記しましょう。実在のお店やサービスを題材にするときは、名前やロゴの扱いにも気をつけてください。
作品の数は、まず1つを最後まで
複数の作品を並べたくなりますが、まずは1つを最後まで仕上げることが先です。
1つ作り終えると、2つ目は題材の範囲決めや調査の進め方がずっと早くなります。
一人で作るのが不安な方へ｜講座やスクールを使う手もある
ここまでの手順を、一人で最後まで進めるのは簡単ではありません。
道筋のある講座や、講評を受けられるスクールを使うのも一つの方法です。
講座の課題として作る｜Google UXデザイン認定
Courseraで受けられる「Google UXデザイン認定」では、講座の中で3つのプロジェクトを含むポートフォリオを作ります。
調査、課題の定義、試作、テストまでを、課題に沿って一通り経験できます。
授業は英語で、日本語の字幕は自動翻訳です。
筆者は1週間あたり5～10時間、休み休みで半年かけて修了しました。
英語の講義は、スクリプトをDeepLで翻訳しながら進めています。
出典｜Coursera「Google UX Design Professional Certificate」
かかった時間や費用、つまずいた点は、受講記録にまとめています。
講評を受けながら作る｜スクール
第三者の目で作品を見てもらいながら作りたいなら、スクールという選択肢もあります。
たとえば東京デザインプレックス研究所のUX / UI専攻では、調査や情報設計、検証などを学びます。
授業の中にデザインレビューや講評の時間があり、ポートフォリオ制作のサポートも用意されています。
スクールとCourseraのどちらを選ぶかは、次の記事で詳しく比べています。
まとめ｜小さく決めて、記録を残せば、未経験でも作品になる
UXの自主制作は、題材の大きさと、記録の残し方で仕上がりが決まります。
完成した画面より、調査から見直しまでの過程を見せることを意識して進めましょう。
この記事のポイントをおさらいしておきましょう。
- 題材は「話を聞ける相手がいる」「1つの行動に絞れる」「画面が5～8枚」で選ぶ
- 課題を1文で書き、「やらないこと」を先に決める
- インタビューのメモは、発言と自分の解釈を分けて残す
- 紙のスケッチ → ワイヤーフレーム → プロトタイプの順に作る
- テストで見つかった問題と、直した前後の画面を表と画像で残す
- ポートフォリオは、過程を順に追える構成にまとめる
「一人で最後までやり切れるかな…」
という方は、講座の課題として1作目を作ってみるのも一つの方法です。
