仕事から帰ってWebデザインを勉強しようと思っても、「今日は何を進めよう」と考えているうちに時間が過ぎてしまうことはありませんか。
教材を見る時間は取れても、制作まで進められない。残業や家事で予定が変わり、学習計画が崩れてしまう。働きながら学ぶと、こうした場面もあります。
学習の予定を立てるときは、確保できる時間と、その時間に行う作業をセットで決めましょう。
この記事では、30分・1時間・2時間の学習時間の使い方と、週4時間の予定例、計画どおりに進まないときの見直し方を紹介します。
時間配分や週間予定は、計画を作るための一例です。この時間だけで副業に必要なスキルが身につく、一定期間で仕事を受注できるという意味ではありません。目指す仕事、学習状況、受講中の講座に合わせて調整してください。
Webデザインの勉強時間は、1週間の予定から考える
毎日同じ時間を確保できるとは限らないため、まずは1週間の中で使える時間を確認します。
学習時間の長さに加えて、何を終えたかも記録すると、次の予定を立てやすくなります。
仕事・家事・休息の予定を先に書き出す
最初に、本業の勤務時間、通勤、家事、家族との予定、休息などを書き出します。
そのうえで、学習に使える時間帯を探しましょう。
例えば、次のように整理します。
- 月曜と木曜は、帰宅後に30分使える
- 火曜は、朝に30分使える
- 金曜は、予定がなければ30分使える
- 土曜は、パソコンで90分制作できる
- 水曜は、学習を入れない
「毎日2時間」と先に決めるより、実際の予定に合わせて枠を置くと、対応できる計画を考えやすくなります。
残業が多い曜日や、予定が変わりやすい時間帯は、最初から確実な学習時間として数えすぎないようにしましょう。
勉強時間と、終えたい作業を一緒に決める
予定表に「Webデザインを1時間勉強する」とだけ書くと、何を始めるかをその場で考える必要があります。
次のように、作業まで具体化してみましょう。
- 文字の大きさと読みやすさについて教材を確認する
- 見出しと本文の文字サイズを変えて比較する
- バナーの配置案を一つ作る
- 前回の修正点を反映して画像を書き出す
作業の区切りを決めておくと、短い時間でも着手する内容が分かります。
学習後は、「予定していた時間」と「実際に終えたこと」を残しましょう。時間を使ったのに進まなかった場合も、何に時間がかかったかが見直しの材料になります。
学習計画を作る前に、目標と教材を絞る
Webデザインには、デザインの基礎、制作ツール、HTML/CSSなど、さまざまな学習内容があります。
最初に目指す制作物を決め、そのために必要な内容を予定へ入れましょう。
最初に作りたいものを一つ決める
バナー制作と、Webサイトの実装では、学ぶ内容や完成までの工程が異なります。
まずは、最初に作りたいものを一つ決めてみてください。
例えば、バナーなら、目的や対象者を決め、文字・画像の配置、配色、ツールの操作、書き出しなどを学習へつなげられます。
LPのデザインなら、ページの情報整理や、PC版・スマートフォン版の見せ方も確認したいところです。
最初からすべての種類を同時に進めず、今回の制作に必要な学習を選びましょう。
副業までの全体の流れは、未経験からWebデザイン副業を始めるためのスキルと手順で紹介しています。
使用する教材とツールを決める
教材を次々に切り替えると、途中まで見た内容が増え、制作に取り組む時間を取りにくくなることがあります。
まずは主に使う教材を決め、分からない部分を補う資料を追加する形で進めてみましょう。
Photoshopを使う場合は、Adobeの公式Photoshop学習ページで、基本操作、レイヤー、テキストなどのチュートリアルを探せます。
文字の見せ方を学びたい場合は、Figmaの文字デザインに関する公式解説も参考になります。英語のページですが、文字の大きさや配置、読みやすさを考える観点が紹介されています。
教材に表示される所要時間は、実際に操作し、理解して再現するまでの時間と同じとは限りません。
読む・見る時間に加え、手を動かす時間も予定へ入れてください。
スクールを受講している場合は、指定された教材や課題、提出期限を優先し、自分の予定と照らし合わせましょう。
30分・1時間・2時間で何をする?時間別の学習例
確保できる時間に合わせて、学習と制作を組み合わせます。
以下は、時間の使い方を考えるための例です。毎回この配分に合わせる必要はありません。
| 確保できる時間 | 時間配分の例 | 取り組む内容の例 |
|---|---|---|
| 30分 | 前回の確認5分+教材10分+操作10分+記録5分 | 文字サイズや配置など、一つの内容を確認して試す |
| 1時間 | 前回の確認5分+教材15分+制作30分+見直し10分 | 教材で確認した内容を、制作中の作品に反映する |
| 2時間 | 作業確認10分+教材20分+制作65分+見直し15分+休憩10分 | 構成やデザインを進め、確認して次の作業を決める |
30分の日は、一つの操作や確認に絞る
30分で作品全体を完成させようとせず、一つの作業を選びましょう。
例えば、次のような内容です。
- 見出しと本文の文字サイズを変えて比較する
- 画像と文字の間隔を調整する
- レイヤーの名前を整理する
- 一つの画像を書き出し、サイズを確認する
- 前回分からなかった操作を試す
教材の説明が長い場合は、今回は確認、次回は操作と分けても構いません。
大切なのは、その時間に何を終えたかが分かることです。
1時間の日は、学んだ内容を作品へ反映する
1時間取れる日は、教材の確認と制作を組み合わせてみましょう。
例えば、文字の優先順位を学んだ後に、自分のバナーで見出し、補足、申込み案内の大きさを調整します。
作業の最後に、次の点を見直します。
- 何を先に読んでほしいかが伝わるか
- 変更前後で、どこが変わったか
- 変更した理由を説明できるか
- 次に確認したいことは何か
練習で作るものに迷う場合は、副業向けのWebデザイン制作課題と進め方を参考にしてください。
2時間の日は、制作と見直しをまとめて進める
まとまった時間を取れる日は、配置案を作る、複数の部分を整える、書き出して確認するといった工程を組み合わせられます。
ただし、2時間あるからといって、毎回新しい内容を増やす必要はありません。
前回作った作品の修正に使ってもよいでしょう。
作業前に、今回進める範囲と、終わりに確認することを決めます。
例えば「バナーの文字と画像を配置し、書き出した画像で読みやすさを確認する」といった区切りです。
途中の休憩や、保存・記録の時間も含め、自分が取り組める配分に調整してください。
働きながら学ぶ、週4時間の学習計画例
ここでは、バナーの自主制作を進めるために、1週間で合計4時間を確保する例を紹介します。
基本操作をすべて一から習得する計画ではありません。学習状況によっては、一つの工程を複数週に分けて進めてください。
平日は小さな作業、休日は制作を進める
短い時間に行う作業と、まとまった時間に行う作業を分けます。
以下は、毎日同じ時間を取らずに予定を組む例です。
| 曜日 | 時間 | 予定する作業 |
|---|---|---|
| 月曜 | 30分 | バナーの目的、対象者、サイズ、掲載情報を決める |
| 火曜 | 30分 | 今回使う文字・画像の操作を確認して試す |
| 水曜 | 学習を入れない | 本業や生活の予定に使う |
| 木曜 | 30分 | 文字と画像の配置案を作る |
| 金曜 | 30分 | 配置を調整し、次に直す点を記録する |
| 土曜 | 90分 | 制作を進め、書き出した画像を確認する |
| 日曜 | 30分 | 完成状況を見直し、次週の作業を決める |
| 合計 | 4時間 | 学習・制作・振り返りを組み合わせる |
土曜の90分で終わらなかった場合は、残った工程を次週へ移します。
この例どおりに一週間で完成させる必要はありません。作業が大きすぎた場合は、工程をさらに分けましょう。
受講中の講座にライブ授業や提出期限がある場合は、その日時も先に予定へ入れます。
スクールと仕事の両立については、働きながらWebデザインスクールに通うためのポイントで確認できます。
週末に、進んだことと次の一手を確認する
週末の振り返りでは、学習時間だけでなく、制作の状態を確認します。
例えば、次の4項目を記録します。
- 今週できるようになった操作
- 制作で進めた部分
- 分からなかったこと
- 次に行う作業
「デザインがうまくいかない」だけでは、次の作業を決めにくくなります。
「見出しより補足の文字が目立つ」「画像と文字の位置を変えたが、どちらがよいか判断できない」など、確認したいことを具体化しましょう。
第三者に見てもらう場合は、Webデザインの添削で使える質問例と修正の進め方を参考にしてください。
作品が完成したら、制作目的、自分が担当した範囲、工夫した点も記録します。
後から応募に使う準備として、Webデザイン副業のポートフォリオに載せたい内容も確認しておくと整理しやすくなります。
学習計画どおりに進まないときの見直し方
予定が崩れたときは、残った作業と使える時間を改めて確認します。
できなかった分をすべて翌日に詰め込まず、次の予定へ組み直しましょう。
時間が取れなかった場合は、作業を減らして組み直す
残業などで30分の予定が取れなかった場合は、その作業が次の工程に必要かを確認します。
例えば、配置案ができていなければ、休日の予定を「仕上げ」から「配置案の作成」に変える必要があります。
次の順番で見直してみましょう。
- 未完了の作業を書き出す
- 次の工程に必要な作業を選ぶ
- 今週残っている学習時間を確認する
- 収まらない作業は次週へ移す
- 次に着手する作業を一つ決める
毎週同じ曜日の予定が崩れるなら、その時間帯を固定の学習枠にすること自体を見直します。
スクールの提出期限に影響する場合は、期限が近づく前に講師やサポートへ相談しましょう。
時間は使ったのに進まない場合は、止まった理由を確認する
学習時間を確保しても、同じところで止まる場合があります。
まずは、どこで進めなくなったかを分けて考えます。
- 操作方法が分からない
- 教材の前提となる知識が不足している
- 作りたいものの条件が決まっていない
- デザインの良し悪しを判断できない
- 課題の範囲が大きすぎる
操作が分からない場合は、必要な部分の説明を確認して試します。
制作条件が曖昧なら、目的や対象者を決め直します。課題が大きすぎるなら、一つの画像や一つの画面に範囲を絞る方法もあります。
質問するときは、操作画面、試したこと、期待した結果、実際の結果をまとめると、相談内容を伝えやすくなります。
学習方法そのものを見直す場合は、副業向けWebデザインスクールの選び方で、質問対応や添削、学習量の確認項目を参考にしてください。
学習支援を利用する場合も、自分が何に困っているかを整理してから比較しましょう。
まとめ|勉強時間と、その時間に行う作業をセットで決めよう
働きながらWebデザインを学ぶときは、1週間の予定から使える時間を確認し、その時間に行う作業を決めることが大切です。
- 仕事・家事・休息の予定を先に確認する
- 最初に作りたいものと、主に使う教材を決める
- 教材を確認する時間と、手を動かす時間を予定へ入れる
- 短い時間の作業と、まとまった時間の制作を分ける
- 週末に進んだことと、次の作業を記録する
- 予定が崩れたら、残った作業を組み直す
まずは、今週使えそうな時間帯を一つ選び、その時間に行う作業を書いてみましょう。
「30分勉強する」から「文字サイズを変えて比較し、気付いたことを記録する」へ具体化すると、学習を始めるための予定を作れます。

