Webデザインの練習は何を作る？副業を目指す未経験者向けの制作課題と進め方

10/06/202610/08/2026

Webデザインを学び始めたものの、「操作の練習はしているけれど、何を作れば副業の準備になるのだろう」と迷うことはありませんか。

働きながら学ぶ場合、使える時間が限られるため、練習する作品の種類と、身につけたいことを決めておくと進めやすくなります。

最初は、告知バナーなど範囲の小さい作品から取り組み、情報の配置、文字の読みやすさ、修正の考え方を確認していきましょう。Webページのデザインを目指す場合は、LPの最初の画面や、店舗サイトのトップページへ練習範囲を広げられます。

この記事では、副業を目指す未経験者向けに、3つの制作課題、取り組む手順、完成後のチェックポイントを紹介します。

練習作品を作ることだけで、案件の受注が決まるわけではありません。ただ、自分が作れるものと課題を確かめ、応募時に説明できる作品を準備する機会になります。

学習から副業までの全体の流れは、「未経験からWebデザイン副業を始めるには？必要なスキルと始め方」で確認できます。

Webデザインの練習は「何を伝える作品か」を決めて始める

練習作品は、テーマだけでなく、見る人と目的を決めてから作ります。

例えば「カフェの画像を作る」だけでは、店内の雰囲気、メニュー、営業時間のどれを優先するか判断しにくくなります。

「近隣で働く人に、仕事帰りに利用できるカフェを知ってもらう」と決めれば、営業時間や立ち寄りやすさなど、伝える情報を整理できます。

MDNの入門教材でも、Webサイトで提供する情報や外見を考え、大まかなスケッチを作る流れが紹介されています。練習でも、制作前に文章と配置を考えるところから取り組みましょう。

参考：MDN「ウェブサイトをどんな外見にするか」

1．目指す仕事に近い制作物を選ぶ

練習する制作物は、興味のある仕事内容から選びます。

バナー制作を目指す：告知画像やキャンペーン画像
LPのデザインを目指す：サービス紹介と申込みへの流れ
店舗サイトのデザインを目指す：店舗情報と来店・予約への導線

どれから始めるか迷う場合は、このあと紹介する告知バナーを1点作ってみましょう。必要な情報を絞り、文字と画像を配置する課題として取り組めます。

バナー制作を希望する人が、最初からすべての種類の作品を作る必要はありません。まずは1点を完成させ、見直してから次の課題を選びましょう。

2．ツールの操作練習と作品づくりを組み合わせる

ツールの使い方を学ぶ時間と、目的に合わせて作品を作る時間を分けて考えます。

例えば、文字の入力や画像の配置が分からない段階では、その操作を教材で確認します。操作ができたら、自分で決めた課題に使ってみましょう。

教材と同じ作品を再現する練習では、操作手順や配置を学べます。その後、対象者や文章などの条件を変えた自主制作に取り組むと、自分で判断する練習になります。

使用するツールは、教材やスクールの指定、応募したい仕事の条件に合わせて選びます。最初から複数のツールを契約するのではなく、今の課題に必要なものを確認しましょう。

ツール選びは、「Webデザイン副業はCanvaだけでできる？Photoshopが必要な案件の見分け方」も参考にしてください。

副業を目指す未経験者向けの制作課題3つ

ここでは、範囲の異なる3つの課題を紹介します。すべてを続けて作る必要はなく、学習段階と目指す仕事に合わせて選んでください。

以下の店舗・サービスは架空の設定です。サイズや制作条件も、この記事の練習用の例であり、広告媒体の入稿規定や実案件の共通条件ではありません。

制作課題	作る範囲	主に練習すること
告知バナー	告知画像1点	情報の優先順位、文字と画像の配置
LPの最初の画面	パソコン用・スマートフォン用のデザイン	サービスの説明、申込みへの誘導、画面幅に合わせた配置
店舗サイトのトップページ	トップページ1ページのデザイン	情報の整理、見出しの統一、来店・予約への導線

1．架空のイベントを知らせる告知バナー

最初の課題は、架空のカフェが開催するコーヒー講座の告知バナーです。

練習条件を、次のように設定します。

対象者：自宅でもコーヒーを楽しみたい初心者
目的：講座の内容を知ってもらい、詳細ページへ進んでもらう
サイズ：横1,200px × 縦628px
必須情報：講座名、開催日時、参加費、店舗名
誘導する言葉：「講座の詳細を見る」
納品物の想定：PNG画像と、後から編集できる制作データ

例えば、講座名は「はじめてのハンドドリップ講座」とします。日時や参加費も練習用に設定し、必要な情報が欠けていないか確認しましょう。

制作前に、どの情報を最初に読んでもらうか決めます。講座名、写真、日時などをすべて同じ大きさで置かず、情報に応じて文字の大きさと配置を調整します。

完成後は画像を縮小し、講座名や日時が読めるか確認します。縮小すると文字が読めない場合は、文字量、背景との色の差、余白を見直してください。

余裕があれば、同じ内容を正方形の画像にも配置し直します。単純に画像を引き伸ばすのではなく、縦横比が変わったときの情報の並べ方を考える練習です。

Photoshopの操作を学ぶ場合は、Adobe公式のバナー制作教材で、画像の合成や文字の調整を確認できます。

参考：Adobe「Photoshopのキホン：実践編／バナーをデザインしてみよう」

仕事の内容や応募前の準備は、「バナー制作の副業は未経験でもできる？仕事内容と応募前の準備」で解説しています。

2．架空のサービスを紹介するLPの最初の画面

次の課題は、架空のオンライン写真講座を紹介するLPの最初の画面です。

LPは、商品やサービスを紹介し、申込みなどの行動につなげるためのページです。ここでは、ページを開いた直後に見える部分のデザインに範囲を絞ります。

対象者：スマートフォンでの写真撮影を学びたい初心者
目的：講座の内容を伝え、開催日程の確認へ進んでもらう
必須情報：講座名、対象者、学ぶ内容の短い説明、講座をイメージできる画像
ボタンの言葉：「開催日程を確認する」
制作範囲：パソコン用とスマートフォン用のデザイン

この練習では、ボタンを押した先に開催日程がある想定で、画面を設計します。

パソコン用では写真と説明を左右に並べ、スマートフォン用では上下に配置するなど、画面幅が変わった場合の読みやすさを考えましょう。文字の大きさを一律に縮小するだけで済ませないことがポイントです。

ボタンが目立っているかだけでなく、「何の講座か」「自分が対象か」「押すと何を確認できるか」が伝わるかを見直します。

なお、最初の画面だけでは、LP全体の構成や制作を練習したことにはなりません。作品を紹介するときも、担当範囲を「LPの最初の画面のデザイン」と記載しましょう。

LP制作の仕事の範囲は、「LP制作の副業は未経験でもできる？デザインだけの案件とコーディング込みの案件の違い」で確認できます。

今回は画面のデザインが課題です。ブラウザーで動くページまで作る場合は、「Webデザイン副業にコーディングは必要？仕事別の違いと学ぶ順番」も参考に、別の学習段階として取り組みましょう。

3．架空の店舗サイトのトップページ

Webサイトのデザインを練習したい場合は、架空のカフェのトップページを作ります。

目的は「初めて訪れる人が、店舗の特徴と利用方法を確認できること」とします。

掲載する情報は、例えば次のように設定できます。

店舗名と短い紹介
店内や商品のイメージ
おすすめメニューと価格
営業時間と定休日
アクセス情報
予約・問い合わせへの案内

最初は、会員登録やオンライン決済などの機能まで含めず、トップページのデザインに範囲を絞ります。

営業時間を知りたい人、メニューを見たい人などを想定し、必要な情報を探せる順番になっているか確認しましょう。

パソコン用とスマートフォン用では、見出し、画像、メニュー情報の並べ方を調整します。複数の場所に同じ種類の見出しやボタンがある場合は、書体や色、余白の使い方もそろえます。

この課題でも、デザインを作った段階と、実際に動くサイトを作った段階を区別します。デザインのみの場合、予約フォームが動作するような説明は避け、制作した範囲を明記してください。

制作課題を進める5つの手順

作品づくりは、条件を決める、配置を考える、制作する、確認する、修正するという流れで進めます。

途中で迷ったときは、最初に決めた目的と条件に戻って判断しましょう。

1．目的・対象者・必須情報を書き出す

制作前に、次の5項目をメモします。

何を作るか
誰に見てもらうか
何を伝え、どんな行動につなげたいか
必ず入れる情報は何か
サイズ・使用ツール・書き出し形式は何か

実案件のつもりで練習する場合は、「日時の変更に対応できるようにする」など、修正条件も追加できます。

写真やイラスト、フォントは、使用するサービスや素材ごとの利用条件を確認して選びます。練習で使える素材が、ポートフォリオへの公開や制作データの共有にも使えるとは限りません。

例えばAdobe Stockには、ライセンスの種類によって利用範囲や制限があります。素材の提供ページと利用条件を確認し、使用した素材のURLやライセンス情報を残しておきましょう。

参考：Adobe Stock「ライセンス情報と利用条件」

2．大まかな配置を考えてから制作する

次に、紙やツールでラフを作ります。ラフとは、文字や画像をどこに置くか考えるための大まかな配置図です。

この段階では、写真や装飾の細部まで完成させる必要はありません。

最初に読んでほしい情報はどこに置くか
関連する情報を近くにまとめられているか
写真と文字が重なって読みづらくならないか
ボタンや案内をどこに置くか

配置を決めたら、ツールで制作します。教材を調べる必要が出た場合は、「画像の切り抜き」など、その作業に必要な操作を確認して戻りましょう。

文字や画像には分かりやすい名前を付けて整理し、後から内容を変更できる状態にしておきます。

3．完成後に確認し、理由を決めて修正する

一度完成させたら、書き出した画像や画面を確認します。

他の人に見てもらえる場合は、「おしゃれですか？」だけでなく、目的に沿った質問をしましょう。

最初にどの情報が目に入りましたか？
何のサービスか分かりましたか？
日時や参加条件は探しやすいですか？
ボタンを押した後に何が見られると思いますか？
読みにくい文字や分かりにくい表現はありますか？

感想は、修正を考える材料として扱います。1人の好みだけで全体を変更せず、対象者と制作目的に合うかを確認してください。

修正するときは、「講座名が写真に埋もれていたので、文字の位置と背景を変える」など、変更する理由を決めます。

変更前のデータも保存し、どこを直したのか比較できるようにしておきましょう。

添削をお願いするときの質問例や、指摘を受けた後の修正手順は、「Webデザインの添削で何を聞く？質問例と修正の進め方」で詳しく紹介しています。

練習作品の完成後に確認したいチェックリスト

完成した作品は、見た目の印象に加えて、条件を満たしているかを確認します。

Adobeのデザイン教材では、余白、情報の階層、整列、色、読みやすさなどの基本的な考え方が紹介されています。印刷物向けの教材ですが、文字と画像を整理する観点として、Webデザインの練習にも参考にできます。

参考：Adobe「魅力的な印刷物デザインを作成する方法と注意事項」

以下は、この記事の制作課題を見直すためのチェックリストです。

確認すること	チェックの例
目的が伝わるか	何のお知らせ・サービスか、画像だけでも説明できるか
必須情報がそろっているか	名称、日時、価格など、課題で指定した情報に漏れがないか
情報の優先順位が分かるか	最初に読んでほしい情報と補足情報に違いがあるか
文字が読みやすいか	縮小した状態でも読めるか、背景に文字が埋もれていないか
配置が整理されているか	関連情報がまとまり、文字や画像の端が不自然にずれていないか
誘導する内容が分かるか	ボタンや案内の先で何を確認できるか伝わるか
制作条件を満たしているか	サイズ、制作点数、書き出し形式が指定どおりか
後から修正できるか	編集用データが残り、文字や画像を変更できるか
素材の扱いを確認したか	写真・フォントなどの利用条件と公開条件を確認したか