Webデザインを独学中、模写しても上達している気がしない時の練習の見直し方
FigmaでWebデザインを独学していて、模写を続けても上達の手応えがない人へ。数値と理由を書き出す模写の方法、架空のお店で作る練習課題の記入例、自分で使えるチェックリストを紹介します。
PR 紹介リンク経由の購入で報酬を受け取る場合があります。未購入・未実践。公開販売情報に基づく紹介です。
この記事の目次
模写は、数値と理由を書き出すまでをセットにする
見た目をまねるだけで終わると、次に自分で作るときの判断の根拠が残りません。1画面を選び、見出しと本文の文字サイズ、行間、余白、色を測って記録し、それぞれに「なぜそうしたか」の推測を1行添えます。同じサイトを2回目に模写するときは、記録を見ずに数値を予想してから測ると、身についたかを確かめられます。
記入例：「見出し32px・本文16px：見出しを本文の2倍にして、読む順番をはっきりさせている（推測）」「セクション間の余白が大きい：話題の切り替わりを示している（推測）」。推測が外れていても構いません。理由を考える習慣が目的です。
模写の次に、架空のお店で同じ構成を作る
模写した構成を使い、自分で条件を決めた架空の案件を作ります。記入例：「店：駅から徒歩5分のパン屋」「想定客：平日夕方に寄る共働き世帯」「目的：予約注文を増やす」「必要な要素：ファーストビュー、人気商品3つ、予約方法、アクセス」。
条件があると、色や写真、ボタンの位置を選ぶ理由が生まれます。完成したら、工夫した点を3行で説明文にまとめます。説明文は、後で応募や自己紹介に使う練習にもなります。ポートフォリオに載せる場合は、模写と自作を区別して表示します。
自分でできるチェックと、人に見せる方法
作った画面を次の点で確認します。「一番見せたいものが3秒で分かるか」「ボタンが押せそうに見えるか」「スマートフォンの幅で文字が読めるか」「色が多すぎないか」。当てはまらない項目を1つずつ直します。チェック項目は、気づいたことが増えるたびに書き足していきます。
可能なら、デザインに詳しくない知人に5秒だけ見せ、「何のサイトだと思うか」を聞きます。説明を加えずに見せるのがポイントです。意図と違う答えが返ってきた箇所が、次に直す場所の候補です。複数人に聞けるなら、共通して挙がった点から直します。
自己チェックだけでは直す方向が分からないとき
チェックリストや知人の反応で違和感は見つかっても、どう直せばよいか分からない、Figmaの操作やデザインの基礎を順序立てて学び直したい。こうした場面では、制作過程を見られる講座や添削を使う方法もあります。
ちこさんの「デザトレ-独学コース-」は、Figmaを中心に、デザインの基礎やツール操作、2サイトの制作過程を58本の動画で扱うと販売ページで案内されています。特典にはフォントの資料、ヒアリングの資料・動画、添削チケット2枚（FAQでは利用期限が購入から1年）が挙げられ、コーディングは扱わないとされています。この記事は未購入・動画未視聴で、公開された販売ページの情報に基づく候補の紹介です。
価格と公開されている講座内容
確認時点の価格は税込59,800円。販売ページには58本の動画、デザインの基礎やツール操作、2サイトの制作過程を扱う動画などが掲載されています。本記事は動画本編を視聴した評価ではなく、公開内容の整理です。
特典として、フォントの資料、ヒアリングに関する資料・動画、添削チケット2枚、添削に関するFigmaデータが案内されています。申込時には現在の提供物と受取方法を販売ページで再確認してください。
添削は「いつ使うか」まで決める
FAQには添削チケットの利用期限が購入から1年と記載されています。教材を買ってから学習開始まで間が空くと、練習と提出の時間が取りにくくなります。購入前に、最初の作例をいつ完成させるかを決めておくと活用しやすくなります。
添削回数だけで判断せず、何を提出できるのか、どの形式で返ってくるのか、質問対応が別途あるのかも確認しましょう。無制限の個別指導を期待する場合は、独学コースの範囲と合っているかを確かめる必要があります。
向いている人・別の学び方が合う人
向いているのは、基本的なPC操作ができ、動画を見た後に自分で制作する時間を確保できる人です。画面をまねして終わらせず、文字の優先順位や余白の理由を説明する練習まで取り組むと、学習目的が具体的になります。
コーディング込みの講座を求める人、すでに実務経験があり高度な内容だけ学びたい人、毎週の個別面談を必要とする人は、別の講座との比較が必要です。無料の操作学習と小さな作例制作を先に試す方法もあります。
副業につなげるために別途必要な準備
教材の修了と受注は別の段階です。まず架空のお店などを題材に画面を作り、想定するお客さん、制作目的、工夫した点を説明できる作例を用意しましょう。模写を掲載するときは自作案件と誤解されない表示や掲載条件の確認が必要です。
仕事を探す前には、納品形式、対応範囲、修正回数、作業時間を整理します。本記事では教材による収入や案件獲得率を検証していません。価格に見合うかは「完成させたい作例」と「必要な支援」が一致するかで判断してください。
教材の販売情報・Brain掲載評価
Brainの掲載評価です。当サイトが付けた評価ではありません。
- 教材
- 現役Webデザイナーが教える「デザトレ-独学コース-」
- 販売者
- ちこ
- 税込価格
- 59,800円
- 確認日
- 2026年9月29日
価格・評価・特典は変わる場合があります。購入前に販売ページで最新の条件を確認してください。
最新の内容と販売条件を確認する
現役Webデザイナーが教える「デザトレ-独学コース-」
Brainの販売ページを見る PR出典・確認範囲
Brain公式販売ページの公開説明と購入者レビューを2026年9月28日に確認。教材本文・特典・収益は検証していません。向き不向きは編集部の判断です。
自分に合う最初の実践を決める
経験・興味・使える時間を4つの質問で整理できます。
無料で実践プランを診断する →登録不要。診断結果はその場で確認できます。