このユニットのゴール
代表作3点 + 制作の物語 + 自己紹介がそろったポートフォリオを完成させ、5分の発表をやり遂げる。
進め方の地図
| 週 | やること | 仕上がるもの |
|---|---|---|
| 1週目 | 授業1: 作品の棚卸しと選定 | 全作品リスト + 代表作3点の決定 |
| 2〜3週目 | 授業2: 代表作の磨き直し | 今の腕で再点検された3作品 |
| 4週目 | 授業3: 制作の物語を書く | 作品ごとの説明文 |
| 5〜6週目 | 授業4: ポートフォリオ本体の制作 | ポートフォリオ一式 |
| 7週目 | 授業5: 発表の準備 | 5分の台本 + 想定問答 |
| 8週目 | 発表会 + コース修了チェック | 修了! |
授業1: 棚卸し ― 全部並べてから、3点選ぶ
採用側がポートフォリオで見たいのは、作品の数ではありません。考えて作れる人か、そして伸びる人かです。だから多作より、語れる3点です。
例題 (リードつき) | 棚卸しリストを作って3点選ぶ
- 全部書き出すユニット1の名刺からユニット5の案件まで、作ったものを全部リストにします。小さい演習も含めます。
- 3つの枠で選ぶ代表作は種類のバランスで選びます。枠① 設計から作ったUI一式 (ユニット3の美容室が有力)、枠② 依頼に応えた実戦案件 (ユニット5から1本)、枠③ 自分の幅を見せる1点 (実装した美容室ページ、バナーシリーズなど)。
- 選外も捨てない選ばなかった作品は「その他の制作」として小さく一覧に載せます。量は信頼の補強になります。
選び方の答え: 迷ったら「語れる方」を選びます。仕上がりが8割でも過程を語れる作品は、仕上がり10割で語れない作品に勝ちます。ユニット5の振り返りメモ (9行) がある案件は、それだけで有力候補です。
授業2: 磨き直し ― 今の腕で、過去の自分を直す
選んだ3点を、10ヶ月分育った今の目で再点検します。作り直しではなく「検査と手直し」です。1作品あたり1週間が上限です。
演習 2-A (リードつき) | 4点検査で磨く
お題: 代表作3点それぞれに、この検査を通します。
- コントラスト検査文字と背景の組み合わせがすべて4.5 : 1以上か。
- 整列検査グリッドを表示して、そろっているべき線がそろっているか。
- 階層検査文字サイズが3階層に収まっているか。野良サイズが混ざっていないか。
- 言葉の検査ボタンが動詞か、誤字がないか。声に出して読むのが一番確実です。
直したくなりすぎたら: 「全部作り直したい」と感じたら、それは成長の証拠ですが、罠でもあります。直すのは検査で引っかかった場所だけ、と決めて進みましょう。完成は完璧に勝ります。
授業3: 制作の物語 ― 4行の型で書く
作品の説明文は、次の4行の型で書きます。① 課題 (誰の、何のため) → ② 考えたこと (設計の根拠) → ③ 工夫 (デザインの判断) → ④ 結果と学び。機能の羅列ではなく、判断の記録を書くのがポイントです。
例題 (リードつき) | パン屋案件の説明文を型で書く
悪い例とよい例を見比べてから、自分の作品で書きます。
- 悪い例を知る「チラシとSNS画像を作りました。色は茶色系でフォントはNoto Sansです」― 事実だけで、判断が見えません。
- 型に流す① 新作食パンの予約を増やしたい、年配のお客さんが相手のパン屋の案件です。② 『安っぽく見られたくない』という言葉から、にぎやかさより上質さを優先しました。③ 色数を2色に絞り、文字を通常より2段階大きくして、読みやすさと上質さを両立させました。④ 修正は1回 (写真の差しかえ) で納品でき、「読みやすい」の一言をもらえました。文字サイズの大胆さは年配向けデザインの武器になると学びました。
- 自分の3点ぶん書く1作品4〜6文で十分です。ユニット5の振り返りメモが、ほぼそのまま④になります。
書けない行があったら: ②が書けない作品は、設計の根拠が弱かった作品です。今からでも「もし依頼されたとしたら」で根拠を考え直してOKです。それも立派な編集です。
授業4: ポートフォリオ本体を作る
形式は2つから選べます。A: Figmaのプレゼンテーション形式 (デザインの腕がそのまま出る、おすすめ) と、B: Webサイト形式 (ユニット4の腕でコーディングして公開する、攻めの選択)。どちらでも、構成は同じです。
例題 (リードつき) | 定番構成で組む (A形式)
- ページ構成を作る表紙 → 自己紹介 → 代表作1 → 代表作2 → 代表作3 → その他の制作 → できること一覧 → 連絡先、の8ページ構成でフレームを並べます。
- 表紙と自己紹介名前・肩書き (Webデザイン学習中など、正直な現在地で)・ひとこと。ユニット1の名刺の世界観を使い回すと、全体に芯が通ります。
- 作品ページの型を決める「大きな完成図 + 4行の物語 + 過程の小さな図 (ワイヤーやラフ)」を1ページの型にして、3作品に反復します。過程を見せるのがプロらしさです。
- できること一覧道具 (Figma・Coolors・VS Code・GitHub) と技術 (情報設計・ワイヤー・カンプ・HTML/CSSの基礎) を、正直なレベル感の言葉 (「一人でできる」「助けがあればできる」) つきで書きます。
- このポートフォリオ自体を検査する授業2の4点検査を、ポートフォリオ自身にもかけます。ポートフォリオは「あなたのデザイン力の見本」そのものだからです。
B形式 (Webサイト) を選ぶ方へ: まずA形式で中身を完成させてから、それをWebに引っ越すのが安全です。中身づくりとコーディングを同時にやると、どちらも中途半端になりがちです。
演習 4-A (ヒントだけ) | 共有して感想を1巡もらう
お題: 完成前の8割の状態で、スタッフ2人以上に共有して感想をもらい、1巡分の手直しをします。
ヒント: 共有は、Figmaの右上「Share」からリンクの権限を「閲覧のみ」にして送ります。感想のもらい方は「どのページで手が止まりましたか?」と聞くのがコツです。良い・悪いより、止まった場所に改善の種があります。
授業5: 発表の準備 ― 5分の台本
例題 (リードつき) | 台本テンプレートに流しこむ
- 構成は4分割①自己紹介と10ヶ月の歩み (1分) → ②代表作1点を深く (2分、4行の物語で) → ③残り2点を短く (1分) → ④これからやりたいこと (1分)。
- 一番話したい作品を②に置く全作品を均等に話すと、何も残りません。
- 想定問答を3つ用意する定番は「なぜこの色に?」「どれくらい時間がかかった?」「一番苦労したのは?」。答えはすべて、制作の物語の中にあります。
- 1回通しで練習する時間を計って1回だけ通します。完璧より「最後まで言えた」を目指しましょう。
発表会 ― そして修了へ
卒業制作の提出
スタッフ (可能なら他の利用者さんも) の前で、5分の発表をします。発表が終わったら、コースのページに戻って「コース修了のチェック」の5項目を確認しましょう。全部にチェックがついたら ― デザインコース修了です。10ヶ月前のあなたが見たら、信じられない場所に立っています。おめでとうございます。
修了後の道: ポートフォリオを持って、Goalページの「卒業後の道」へ進みましょう。A型での実案件・障害者雇用・在宅ワーク、どの道でも、このポートフォリオと「目的 → 案 → 理由」で話せる力が通用します。
つまずきやすいポイント
「人に見せるのが怖い」とき: その怖さは、真剣に作った人にしか生まれません。まず一番話しやすいスタッフ1人だけに見せる、から始めましょう。発表会も、聞き手1人から始めて構いません。
完成が見えなくて焦るとき: 8ページ構成のうち、表紙と作品1ページだけ先に完成させましょう。「型が1つ完成すると、残りは反復」― ユニット2で学んだとおりです。
発展チャレンジ (余力のある方へ)
発展チャレンジ
- ポートフォリオをPDFにも書き出して、「リンクを開けない相手」用の版を持っておきましょう (FigmaはフレームをPDFでExportできます)。
- 実在の求人 (在宅のバナー制作・Web制作補助など) を1つ選び、「この求人に出すなら、どの作品を先頭にするか」を考えて、並び替え版を作ってみましょう。
- 次の10ヶ月の学習計画を、自分で1枚に描いてみましょう。このカリキュラムの「進め方の地図」が、そのまま型として使えます。