このコースのゴール
要望を聞いてデザインカンプを形にし、修正依頼に理由のある案で応えられる ― ジュニアレベルのデザイナーになる。証明として、代表作3点 + 制作意図の説明がそろったポートフォリオを完成させる。
10ヶ月のロードマップ
全6ユニットです。前半で理論と道具を固め、後半は実戦と作品づくりに使います。ユニット4では、フロントエンドの世界に少しだけ越境します。
| ユニット | テーマ | 目安時間 | 達成目標 (B型) | 仕上げに作るもの |
|---|---|---|---|---|
| 1 | デザインの目を鍛える (理論の土台) | 80時間 | 1ヶ月後 | 観察ノート + 名刺セット |
| 2 | Figmaを仕事道具に | 120時間 | 2.5ヶ月後 | アプリ風の画面3枚 + 画面遷移 |
| 3 | UIデザイン実践 ― 画面を設計する | 160時間 | 4.5ヶ月後 | 架空の美容室サイトのカンプ一式 |
| 4 | コードに馴染む (フロントエンドへ越境) | 120時間 | 6ヶ月後 | 自分のカンプを自分で実装して公開 |
| 5 | 実戦演習 ― 依頼に応えるデザイン | 160時間 | 8ヶ月後 | 架空案件3本の納品物 |
| 6 | 卒業制作 ― ポートフォリオ | 160時間 | 10ヶ月後 | ポートフォリオ一式 + 発表 |
ユニット一覧 ― ここから進む
行をクリック (タップ) すると、ユニットのページが開きます。上から順番に進みましょう。ログインしていると、ユニットごとの進み具合が表示されます。
- ユニット1: デザインの目を鍛える4原則の深掘り・タイポグラフィ・配色理論・余白とグリッド。「きれい」を理由で説明できるようになります。
- ユニット2: Figmaを仕事道具にオートレイアウト・コンポーネント・スタイル登録・プロトタイプ。「速く・きれいに・直しやすく」作る技術です。
- ユニット3: UIデザイン実践情報設計・ワイヤーフレーム・スマホファースト・デザインシステム。見た目の前に「設計」を学びます。
- ユニット4: コードに馴染む (越境)自分のカンプをHTML/CSSで実装して公開します。コードが分かるデザイナーは現場で重宝されます。
- ユニット5: 実戦演習 ― 依頼に応えるヒアリング・提案・修正対応。スタッフをお客さん役に、架空案件3本を「納品」まで運びます。
- ユニット6: 卒業制作 ― ポートフォリオ代表作を磨き直し、制作意図を言葉にして、ポートフォリオ一式を完成させ、発表します。
このコースの進め方
週のリズム
週のはじめ4日は新しい演習を進め、週の最後の1日は「今週作ったもの」を見直して整理します。振り返りの日を必ず確保しましょう。
使う道具
Figma (無料プラン) を中心に、配色ツールのCoolors、コントラスト検査のWebAIM、ユニット4からはVS CodeとGitHubを使います。すべて無料です。
作品は全部保存
演習で作ったものは、小さくてもすべてFigmaのファイルに残します。ユニット6のポートフォリオづくりで、この蓄積がそのまま材料になります。
コース修了のチェック (ジュニアレベルの証明)
全ユニットを終えたら、ここで最終確認をします。全部にチェックがつけば、このコースは修了です。