Webデザインの練習は、模写→架空バナー→LP→TOPページの順に進めると実務感覚が身につきます。この記事では、フリーランスのポートフォリオ作成に使えるお題15選をスキル別に解説します。
▶ 3日で初案件PR
この記事でわかること
模写から架空LP・TOPページまで、スキル段階別の練習お題15選を一覧できます。ポートフォリオに載せる作品の選び方と、制作意図を言語化する具体的な手順がわかります。練習から初案件へつなげる3ステップを実践できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Webデザインの練習は「模写でレイアウトを体に入れる→架空お題で1枚完結の訓練をする→LP・TOPページで情報設計を練習する」という3段階で進めると、実案件に近い感覚が身につきます。お題に目的・ターゲット・訴求ポイントを自分で設定するだけで、練習の密度が大きく変わります。ポートフォリオに載せる作品は3〜5点に厳選し、制作意図を言語化することがフリーランスとして差別化する鍵です。
最初に確認すること
自分が今どの段階にいるかを確認してください。模写経験が0なら模写から、バナーを5枚以上作ったなら架空LP課題へ進む、という順番を守ることで詰まりにくくなります。この確認に必要な時間は約3分です。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 何から始めるか決まっていない | Webデザイン練習は3段階で進む | 5分 |
| バナーの練習題材を探している | バナー練習お題5選 | 4分 |
| LPやTOPページに取り組みたい | LP・TOPページ練習お題5選 | 4分 |
| ポートフォリオ掲載の条件を知りたい | ポートフォリオに載せる練習作品の条件 | 4分 |
| 初案件への接続方法を知りたい | 練習を初案件につなげる3ステップ | 5分 |
Webデザイン練習は3段階で進む
何から練習すればよいかわからない状況は、デザイン学習でよくある詰まりポイントです。順番を決めると動き出しやすくなります。
模写でレイアウトを体に入れる
模写とは、既存のWebサイトやバナーをデザインツールで再現する作業です。「うまく作る」のが目的ではなく、「余白・文字の大きさ・色の関係性がどう成り立っているか」を手で確認するのが目的です。
プロのデザインは余白が多く、要素の配置に理由があります。この感覚を1〜2週間かけて積み上げることが、その後の架空課題の質を決めます。模写先はHP制作で良い模写の練習ができるサイト公開（note/mtech_it）のようなまとめを活用すると、探す手間が省けます。
架空バナーで1枚完結の訓練をする
模写で「見る目」が育ったら、架空バナーに移ります。バナーは1枚に「コピー・ビジュアル・CTA」が凝縮されているため、情報の優先順位を決める訓練として適しています。最初から凝ったデザインを目指すより、文字の強弱と余白だけを意識した1枚を仕上げることに集中してください。
1枚仕上げるたびに「どこがうまくいって、どこが違和感か」を書き出す習慣がつくと、次のバナーで改善点が絞りやすくなります。この振り返りなしにバナーを量産しても、なんとなく形になるだけで実力がついていない状態に陥ります。
LP・TOPページで情報設計を練習する
バナーをある程度こなしたあと、LPやTOPページに移ると「情報をどう並べるか」という設計力が鍛えられます。ページ全体を通じてユーザーをCTAへ誘導する流れを作る訓練であり、フリーランスとして受注できる案件の主力は実際にこのあたりに集中します。
TOPページ制作は「ファーストビューで何を伝えるか」の判断を繰り返す課題です。ターゲットを決めて、そのターゲットが求める情報をファーストビューに置くという制約を自分に課すと、実務感覚が大きく変わります。「30代女性・ヨガ教室を探している・スマホで検索中」という条件を付けて作ったLPは、添削でのフィードバックが具体的になり、改善の学びが明確に深まります。なお、フリーランスWebデザイナーとしての案件獲得に向けた全体像は別記事でも詳しく解説しています。
CHECK
▶ 今すぐやること: 自分が模写・架空バナー・LPのどの段階にいるかを書き出し、次に取り組む課題タイプを1つ決める（3分）
Q: 模写と架空案件はどちらを優先すればよいですか？
A： 模写を先に行うことが実務的に合理的です。模写でレイアウトや配色の基礎を確認してから架空課題に進むと、制作中に「なぜこう配置するのか」の根拠が持てます。模写なしで架空課題を始めると、見た目の真似で終わりやすくなります。学習段階の解説（stand-4u.com）も参考になります。
Q： 模写はどのくらいの期間続けるべきですか？
A： 目安は2〜4週間、もしくは5〜10サイトを再現するまでです。「余白や文字の大きさを意識して配置できる」という感覚が出てきたら、架空バナーに移ってよい段階です。期間よりも感覚の変化を判断基準にしてください。
バナー練習お題5選
バナーは1枚で完結するため、取り組みやすいと感じる人は多くいます。一方で「何となく形になった」で終わりやすく、意識して使い分けないと成長が止まります。
バナー練習お題の設定方法
お題を自作する場合は「商品・ターゲット・サイズ・用途」の4点を先に決めてください。この4点がないと、デザインの善し悪しを自分でも判断できなくなります。以下の5つは、その4点をあらかじめ設定した状態で提示します。
バナー練習お題（お題1〜5）
お題1: ヨガスタジオの体験レッスン告知バナー（728×90px）
目的は体験申込、ターゲットは30代女性でスマホユーザーが中心です。「初回無料」の文字を最も目立たせ、CTAボタン「詳しくはこちら」を右端に配置する構成を試してください。文字の大きさと余白の関係だけを意識した1枚を作ることが最初のゴールです。
お題2: IT研修サービスの採用向けバナー（300×250px）
目的は資料請求、ターゲットは人事担当者です。無機質になりやすいBtoB系で、信頼感と親しみやすさをどう両立させるかが課題になります。フォント選びと写真素材の選定に時間をかけてみてください。
お題3: カフェの新メニュー告知バナー（1200×628px／SNS用）
目的はSNSでの認知拡大、ターゲットは20代のコーヒー好きです。SNS向けの正方形に近いサイズで、スクロール中に止まる強さを意識した配色とコピーを検討してください。文字を最小限にして画像の力で伝えるパターンと、コピーを大きく置くパターンの2案を比較すると学びが増えます。
お題4: オンライン英会話サービスの期間限定バナー（728×90px）
目的は登録数増加、ターゲットは社会人の英語学習者です。「7日間無料」という緊急性をどうデザインで表現するかがポイントです。赤・オレンジ系の色で強調するパターンと、落ち着いた配色で信頼感を出すパターンを作り比べてください。
お題5: ペット保険の資料請求バナー（300×600px）
目的は資料請求、ターゲットは犬・猫を飼い始めた20〜40代です。情報量が多くなりやすい保険系で、何を一番伝えるかを絞る訓練に適しています。「月額○円〜」「無料で資料請求」の文字をどの順序で目に入れるか、視線の流れを意識して配置してください。
バナー制作に挑戦したWebデザイン学習中のデザイナーは「実際に仕事であった内容に寄せたお題もある、本格的な仕事を始める前の予行練習としても使えます」と語っています（Webデザインを仕事にするための学習ロードマップ｜こばやす）。
バナーデザインお題20選（webdesign-mame.com）やバナーデザイン練習10本ノック（webcreatorbox.com）も参考にして、題材の量を確保してください。また、画像トリミングや圧縮などの無料ツール活用も制作効率を上げるのに役立ちます。
CHECK
▶ 今すぐやること: 上記5つのお題から1つを選び、制作ツールを開いて「商品・ターゲット・サイズ・用途」を画面外に書き出してから制作を始める（5分で準備完了）
Q: バナーのサイズはどれを選べばよいですか？
A： 最初は300×250pxが取り組みやすいです。メディア掲載で多く使われるサイズであり、縦横のバランスが取りやすいため、文字とビジュアルの配置を試行しやすいです。慣れたら728×90px（横長）や160×600px（縦長）に挑戦すると、サイズ制約への対応力が上がります。
Q： バナー制作で何点くらい作れば実力になりますか？
A： 1つのお題につき2〜3案を作り、合計10〜20枚が一つの目安です。同じお題で複数案を作ると「配色を変えたらどう印象が変わるか」「コピーの位置をずらすとどうなるか」という差分比較ができ、枚数を増やすより学びが深まります。
LP・TOPページ練習お題5選
LPやTOPページは「1枚を完成させる」バナーと違い、「流れを設計する」作業が中心になります。情報設計が苦手なデザイナーがここで詰まる場面は珍しくありません。
LP・TOPページお題の考え方
LPとTOPページでは求められる設計が異なります。LPは「1つのCTAに向けてページ全体を最適化する」のに対し、TOPページは「複数のコンテンツへ分岐させる導線を作る」ことが中心です。両方の課題に取り組むことで、情報設計の引き出しが広がります。
LP・TOPページ練習お題（お題6〜10）
お題6: ヨガ教室の体験レッスンLP（スマホ優先）
目的は体験申込、ターゲットは30代の運動習慣を作りたい女性です。「なぜここを選ぶか」「どんな体験ができるか」「申込はどうするか」の3つの問いに答える構成を意識してください。ファーストビューに最も強いコピーとCTAボタンを置き、そこから下にスクロールするほど納得感が積み上がる流れを作ることが課題です。
お題7: フリーランス向けオンラインスクールのLP
目的は無料説明会の申込、ターゲットは副業から独立を考えているデザイン学習中の社会人です。「よくある疑問と回答」「受講生の声」「料金表」を含む本格的なLPを制作してください。文章素材は自分で架空のものを作り、画像はフリー素材を使います。文字量が増えるため、読む気になれる見出しデザインと余白の使い方が評価ポイントです。
お題8: 整体院のTOPページ（PC/スマホ両対応）
目的は来院予約、ターゲットは肩こり・腰痛で悩む30〜50代です。ファーストビューで「誰向けの院か」を明確に伝え、「施術内容」「料金」「アクセス」「予約ボタン」への導線を整理してください。PC版とスマホ版でレイアウトがどう変わるかを別々に確認する作業が、この課題の主な学びになります。
お題9: 中小企業向けITコンサルのコーポレートサイトTOPページ
目的は問い合わせ増加、ターゲットは経営者や情報システム担当者です。BtoBサービスは「信頼性・実績・問い合わせ導線」が三本柱になります。青・紺・グレーなどのカラーを使いながら「重すぎず・軽すぎない」バランスを意識して制作してください。コーポレートサイト実践課題（pengi-n.co.jp）も参考として活用できます。
お題10: ハンドメイド作家のポートフォリオサイトTOPページ
目的は作品問い合わせと委託依頼、ターゲットはギフトや雑貨にこだわりを持つ30〜40代女性です。作品の世界観をビジュアルで伝えながら、依頼への導線を自然に置く構成を考えてください。フォントと余白の選択が「世界観の一致感」に直結する課題です。デザイナー自身のポートフォリオサイト作成と並行して作ると、似た悩みが出てきて学びが重なります。
Q: LPとTOPページ、どちらを先に練習すべきですか？
A： LPを先に取り組む方が焦点を絞りやすいです。LPは「1つのCTAだけを目指す構成」のため、情報設計の練習として条件が明確です。TOPページは複数の導線を設計する必要があるため、LP経験後に移ると判断の軸が持ちやすくなります。
Q： テキストや画像素材はどう準備すればよいですか？
A： テキストは架空で自作し、画像はUnsplash・Pixabayなどのフリー素材サイトから入手してください。素材の選び方もデザインの一部です。「選んだ素材と課題のターゲットが合っているか」を毎回チェックする習慣が、実案件での素材提案力につながります。
ポートフォリオに載せる練習作品の条件は3点
練習作品がポートフォリオに載せられるかという悩みを持つ人は少なくありません。「何でも載せる」のでも「架空作品は載せない」のでもなく、3点を満たしているかどうかで判断するのが実務的です。
条件1: 目的・ターゲット・工夫点を自分で説明できる
作品を見せるだけでは差別化になりません。「このバナーは30代女性が対象で、スクロール中に視線が止まるよう写真のコントラストを強くしました」という言語化ができて初めて、クライアントに「この人に任せると意図のあるデザインが上がってくる」と伝わります。
どれだけビジュアルが整っていても制作意図を説明できない作品は、ポートフォリオとしての機能が弱いです。練習段階から「なぜこうした」を一言メモしておく習慣が、後の説明を楽にします。
条件2: 実務に近い制約を入れて制作している
「好きなように作った架空バナー」と「想定サイズ・用途・ターゲットを設定して作ったバナー」では、クライアントへの伝わり方が違います。後者は「クライアント要件を聞いて制作できる人」という印象を与えやすいです。
お題を自作する際は、本記事の各お題のように「目的・ターゲット・サイズ」を必ず設定してください。良いWebデザインの練習お題の選び方（vectorinc.co.jp）でも、非現実的な要件は避けることが練習精度を上げる条件として挙げられています。
条件3: 掲載点数を3〜5点に絞り質を高めている
点数を多く載せると「量を出す人」になります。3〜5点に絞り、1点ごとに制作意図・工夫点・改善点を添付すると「考えて作れる人」という印象が強くなります。フリーランスWebデザイナーとしてのポートフォリオ戦略でも、質の高い作品を厳選することが示されています。
練習作品を選ぶ基準は「自分が一番説明できる作品」です。ビジュアルが整っていても説明できない作品より、多少地味でも「このターゲットにこう伝えたかった」と話せる作品の方が選考で機能します。
Q: 架空案件の作品をポートフォリオに載せることはできますか？
A： 載せられます。「架空案件として制作した練習作品」と明記することが誠実な対応です。実案件はクライアント要件で制作したものを使う必要があるため、架空作品の扱いを先に整理しておくと、実案件を受注した際の切り替えがスムーズです。
Q： 模写した作品はポートフォリオに載せてよいですか？
A： 著作権の観点から、模写作品の公開掲載は推奨されません。模写はあくまで基礎を体に入れる訓練であり、ポートフォリオには架空お題で制作した自分のデザインを載せてください。
PR提供: 日本デザインスクール（デザスク）
練習の仕上がりを3分で診断
練習を重ねているのに実案件につながらない段階で、「自分の練習に何が不足しているか」を点検するための診断です。「自分の練習はポートフォリオとして機能しているか？」を3分で判定できます。
Q1: 制作したお題に「目的・ターゲット・サイズ」を事前に設定していましたか？
Yesの場合はQ2へ進んでください。Noの場合はResult Aです。
Q2: 完成後に「なぜこうデザインしたか」を一言でも書き出しましたか？
Yesの場合はQ3へ進んでください。Noの場合はResult Bです。
Q3: ポートフォリオに載せる作品を3〜5点に絞り込んでいますか？
Yesの場合はResult D、Noの場合はResult Cです。
Result A: お題に要件設定を追加してください
目的・ターゲット・サイズなしで制作した作品は「自分が好きに作ったもの」に見えやすく、クライアントへの説明が難しくなります。過去の作品でも後付けで「これはどんな人向けに作ったか」を言語化してみると、説明の練習になります。
Result B: 制作意図の言語化を始めてください
仕上がりのビジュアルだけを見直す習慣がある場合、同じ作業の繰り返しになりやすいです。制作後5分で「よかった点・違和感が残った点」を書くだけで、次の課題に活かせる改善軸が見えてきます。
Result C: 作品を絞り込んでください
点数が多すぎる状態は「何を見てほしいか」が伝わりにくくなります。現在の作品から「一番説明できる3点」を選んで、その3点に制作意図メモを付ける作業から始めてください。
Result D: 初案件への準備が整っています
要件設定・言語化・厳選の3点ができている状態です。次のステップは「練習を初案件につなげる3ステップ」のセクションへ進んでください。
Q： 練習作品をデザイナーに添削してもらうにはどうすればよいですか？
A： SNSでデザイン添削を募集している現役デザイナーへDMで依頼する方法と、MentaやSkillShareなどのメンタリングサービスを利用する方法があります。良いWebデザインの練習お題の選び方（vectorinc.co.jp）でも添削の重要性が挙げられています。有償のメンタリングで1〜2回フィードバックを受ける方が、学習コストの観点では合理的です。
Q： 自分で自分の作品を改善するにはどうすればよいですか？
A： 「1週間後に同じ作品を見直す」のが実務的に有効です。制作直後は細部が見えにくく、時間を置くと「なぜここに要素を詰め込んだのか」が客観的に気づけます。改善点が見つかった場合は、直すだけでなく「何が判断ミスだったか」を一文書いておくと、次の課題で同じ詰まりを避けやすくなります。
練習を初案件につなげる3ステップ
練習を続けていても「仕事に近いと感じない」「初案件のイメージがわかない」状況はよくあります。これは練習の問題ではなく、練習と受注の接続方法を知らない場合がほとんどです。
ステップ1: 実務に近い依頼文を自分で作る
架空案件に「クライアントからのヒアリングシート」を付けて取り組む練習が、受注準備として効果的です。「ご予算は〇〇円です」「ターゲットは〇〇です」「締め切りは〇〇日です」という文章を自分で作り、その条件通りに制作してください。制約があると迷いが減り、完成後の振り返りも具体的になります。
実際に仕事の依頼が来たとき、クライアントからのヒアリング内容が曖昧だった場合に何を聞き返せばよいかという判断力も、ここで養えます。
ステップ2: クラウドソーシングの小案件を並行する
練習で力がついてきたと感じ始めたら、クラウドソーシング（ランサーズ、クラウドワークスなど）の小規模案件を試してみてください。バナー制作1枚から受注できる案件は存在します。
初案件受注に向けて動き出したWebデザイナーは「まずはクラウドソーシングやメンターサービスなど、初案件につながる行動が重要だった」と語っています（初案件受注までの実践記録（shogo-log.com））。フリーランスとしての案件獲得の全体像も参考に、自分に合うルートを検討してみてください。
初案件の質がポートフォリオを大きく動かすことは多くないため、「練習の延長として1案件」という意識で臨むと消耗が少ないです。
ステップ3: ポートフォリオをクライアントが見る前提で整える
ポートフォリオは「デザインの上手さを見せる場所」ではなく、「このデザイナーに任せたらどういう仕事が上がってくるかをクライアントが想像できる場所」です。制作意図・ターゲット・工夫点をセットで掲載することで、クライアントが発注を判断する材料が揃います。
フリーランスとして受注するポートフォリオと就職用のポートフォリオは評価軸が異なります。フリーランス向けは「問い合わせをしやすい構成」と「依頼しやすい実績の提示」が優先されます。
Q: クラウドソーシングで最初に受注しやすい案件はありますか？
A： バナー制作や既存サイトの修正案件は、スキルの証明がしやすく受注難易度が比較的低めです。1〜3万円台の案件を数件受注して実績として掲載できる状態にすることを優先してください。
Q： ポートフォリオサイト自体は何で作ればよいですか？
A： Notion・Wix・Webフローなど、手軽に更新できるツールを選ぶことが多いです。デザイナーとして自分でHTMLコーディングまで行えるなら、それ自体がスキルの証明になります。制作物の見やすさが最優先のため、見やすさの基準で選ぶのが実務的な判断です。
Webデザイン練習お題5選（Webサイト系）
Webサイト系の課題は、バナーやLPより情報量が多く難易度も上がります。一方で実務案件の主力はWebサイト制作であるため、バナー・LP経験後に必ず挑戦してほしい領域です。
Webサイト練習お題（お題11〜15）
お題11: 個人カメラマンのポートフォリオサイト（PC/スマホ）
目的は撮影依頼の問い合わせ増加、ターゲットは結婚式・記念日写真を探しているカップルです。写真が主役になる構成で、テキストを最小限にして視線の動きをコントロールする練習に適しています。PC版とスマホ版で写真の見え方が大きく変わるため、両方の確認が課題に含まれます。
お題12: 子ども向けプログラミングスクールのWebサイト
目的は体験授業申込、ターゲットは小学生の保護者（30〜40代）です。子ども向けでありながら、決断するのは保護者という構造があります。「安心・楽しさ・将来性」を伝える情報設計と、ビジュアルの明るさと信頼感の両立が課題です。
お題13: フリーランスデザイナー向けのメディアサイトTOPページ
目的は記事の回遊を促す、ターゲットはデザイン学習中のフリーランス志望者です。カテゴリー分け・更新日表示・記事カードのデザインなど、情報系サイト特有の要素を扱う練習になります。本記事のような情報メディアを題材にしているため、完成後に自分自身が使う想像をしながら制作すると改善点が見つけやすいです。
お題14: 地域の美容室のWebサイト（スマホ優先）
目的は予約ボタンへの誘導、ターゲットは近隣に住む20〜40代女性です。地図・営業時間・メニュー・予約リンクという情報構造がシンプルで実務に直結しています。スマホで開いた際にすぐ予約ボタンが見える構成を第一条件に設計してください。
お題15: 副業支援サービスのランディングページ（PC版）
目的は会員登録、ターゲットは副業に興味があるが何から始めればよいかわからない会社員です。「課題の提示→解決策の提示→具体的なサービス内容→CTA」という情報の流れを意識して設計してください。ファーストビューのコピーと背景画像の組み合わせが最初の判断ポイントです。
コーディング練習用カンプ配布（code-jump.com）も、デザインデータを元にコーディングまで行いたい場合の参考として活用できます。
Q: WebサイトのPCとスマホ両対応のデザインはどう練習すればよいですか？
A： PC版を先に作り、スマホ版では「何を省いて何を残すか」を判断する練習をしてください。スマホは画面幅が狭いため、PCで横並びにした要素が縦並びになります。この切り替え時に情報の優先順位が明確になるため、レイアウト設計力の判断基準が養われます。
Q： デザインツールは何を使えばよいですか？
A： FigmaがWebデザインの現場で広く使われています。無料プランでも個人制作には十分対応できます。フリーランスとして受注を想定するなら、クライアントとのデータ共有のしやすさからFigmaを選ぶ判断が実務的です。
Webデザイン練習お題は目的設定で質が変わる
Webデザインの練習は、お題の数より「目的・ターゲット・制約を設定して取り組んだかどうか」で身につく力が変わります。模写で基礎を確認し、架空バナーで1枚完結の訓練をして、LP・TOPページで情報設計を練習する順番が実務感覚を最も効率よく積み上げます。ポートフォリオは3〜5点に厳選し、各作品に制作意図を言語化して添付することで、クライアントへの伝わり方が大きく変わります。
練習を続けるうちに「これで合っているのか」と感じる瞬間は誰にでも訪れます。そのタイミングが、添削を受けるか、小さな案件に挑戦してみるかの判断どきです。1つずつ前に進んでください。
| 状況 | 次の一歩 | 所要時間 |
| 模写をまだしていない | 参考サイトを1つ選んで模写を開始する | 2〜3時間 |
| バナーを作ったことがない | お題1〜5から1つ選んで制作する | 2〜4時間 |
| LPに挑戦したい | お題6か7を選んでワイヤーフレームを先に描く | 30分〜1時間 |
| ポートフォリオを整えたい | 現在の作品から説明できる3点を選んで意図を書く | 1時間 |
| 初案件に動き出したい | クラウドソーシングに登録してバナー案件を探す | 30分 |
Webデザイン練習お題に関するよくある質問
Q: 練習お題は無料で使えるサイトはありますか？
A： 無料で使える課題素材を掲載しているサイトがあります。無料のWebデザイン課題一覧（webtan.tech）やバナーデザインお題20選（webdesign-mame.com）は無料で参照できます。本記事のお題はすべて自由に使っていただけます。
Q： 模写に使えるWebサイトはどこで探せばよいですか？
A： デザインの参考サイトとして国内外のギャラリーサイトが使えます。「きれい」と感じたサイトを模写するより、「ターゲットが明確で情報設計がわかりやすいサイト」を意識して選ぶと、模写から得られる学びが深まります。
Q： フリーランスとして独立する前に何点くらいの作品が必要ですか？
A： 質の高い作品3〜5点が一般的な目安です。点数よりも「クライアントが発注を判断できる情報が揃っているか」を基準にしてください。作品が少なくても制作意図・工夫点・ターゲットがセットで掲載されていれば、多くの無説明作品より伝わります。独立前の全体的な準備についてはフリーランスWebデザイナーとして独立するためのロードマップも参考にしてください。
【出典・参照元】
HP制作で良い模写の練習ができるサイト公開（note/mtech_it）
良いWebデザインの練習お題の選び方（vectorinc.co.jp）
バナーデザインお題20選（webdesign-mame.com）
バナーデザイン練習10本ノック（webcreatorbox.com）