Webデザインの技術を伸ばすには、実践的な練習が欠かせません。
しかし、お題がないと何を作れば良いのか迷うことも多いのではないでしょうか。
知識のインプットだけでは、なかなか技術力は向上しません。
この記事では、そんな悩みを解決するために、
- Webデザインの練習お題10個
- 優良お題の特徴や選び方
- 制作物のポートフォリオ反映方法
をご紹介します。
この記事を読み終えたら、すぐに実践に移せるお題と、作成した作品のフィードバックを得るための第一歩を踏み出せます。
【10個】Webデザインの練習用お題
ここでは、Webデザインの練習に役立つお題を10個ご紹介します。
これらのお題は、バナーやランディングページ（LP）、Webサイトといった異なるカテゴリーに分けているので、自分が練習したいスキルに合わせて取り組めます。
また、バナーを作った後は、Pinterestやデザインサイトで同様の条件を持つデザインと比較することが効果的です。
Webデザインには「正解」はありませんが、他の作品を参考にすることで、自分のデザインをより良くするためのアイデアが見つかるはずです。
バナーデザインの練習に使えるお題
以下では、バナーデザインの練習に役立つお題をいくつかご紹介します。
整骨院「高橋整骨院」のバナー
| バナー設置箇所 | 地域の健康情報サイト |
| ターゲット | 30代〜50代の肩こりや腰痛に悩む人 |
| バナーイメージ | 清潔感のある落ち着いたデザイン |
| バナーサイズ | 300×250（ミディアムレクタングル） |
| メインメッセージ | 「痛みを和らげるプロの手を体験しよう！」 |
| アクセス | 「巣鴨駅から徒歩5分」 |
| キャッチコピー案 | 「あなたの健康をサポートします」 |
| 画像イメージ | 施術中の患者さんの写真 |
| CTAの有無 | 有り（ 「今すぐ予約する」） |
| 訴求する感情 | 癒し（施術による心身のリラクゼーション） |
高級スキンケア販売店のバナー
| バナー設置箇所 | ビューティー関連のウェブサイト |
| ターゲット | 20代後半〜40代の女性 |
| バナーイメージ | 高級感あふれる洗練されたデザイン |
| バナーサイズ | 728×90（リーダーボード） |
| メインメッセージ | 「あなたの肌を変える、一滴の贅沢」 |
| マイクロコピー | 「今月末まで特別キャンペーン中」 |
| アクセス | 「公式オンラインショップ」 |
| キャッチコピー案 | 「素肌美を手に入れよう」 |
| 画像イメージ | 高級感のあるスキンケア製品の画像 |
| CTAの有無 | 有り（ 「今すぐ予約する」） |
| 訴求する感情 | 満足感: 特別な商品での満ち足りた気持ち |
地域のカフェ「SHIRO」のバナー
| バナー設置箇所 | 地域情報サイト、SNS広告 |
| ターゲット | 地元の住民、カフェ好きの30代女性 |
| バナーイメージ | 温かみのあるナチュラルな雰囲気 |
| バナーサイズ | 300×600（スカイスクレイパー） |
| メインメッセージ | 「新メニュー登場！心温まるカフェで癒しのひとときを」 |
| マイクロコピー | 「今月の特別メニュー」 |
| アクセス | 「大橋通り沿い、山端駅から徒歩3分」 |
| キャッチコピー案 | 「お気に入りの一杯を見つけて！」 |
| 画像イメージ | カフェの内部や新メニューの美しい写真 |
| CTAの有無 | 有り（ 「今すぐ予約する」） |
| 訴求する感情 | 癒し: リラックスできるカフェの雰囲気 |
オンライン英会話教室「ANGLAIS」のバナー
| バナー設置箇所 | 教育関連のウェブサイト、SNS広告 |
| ターゲット | 30代〜50代の英会話を学びたい人 |
| バナーイメージ | モダンで活気のあるデザイン |
| バナーサイズ | 468×60（バナー） |
| メインメッセージ | 「自宅で気軽に英会話！」 |
| マイクロコピー | 「初月無料キャンペーン実施中」 |
| アクセス | 「オンラインでいつでも受講」 |
| キャッチコピー案 | 「あなたのペースで学べる！」 |
| 画像イメージ | オンラインレッスンの様子を表す画像 |
| CTAの有無 | 有り（ 「今すぐ予約する」） |
| 訴求する感情 | 楽しさ: 学ぶことの楽しさを伝える |
スポーツジム「マリンフィットネス」のバナー
| バナー設置箇所 | フィットネス関連サイト、SNS |
| ターゲット | 健康志向の若者から中年層 |
| バナーイメージ | ダイナミックで活気のあるデザイン |
| バナーサイズ | 250×250（スクエア） |
| メインメッセージ | 「新しい自分を見つけよう！」 |
| マイクロコピー | 「今月限定、入会金無料」 |
| アクセス | 「○○駅から徒歩5分」 |
| キャッチコピー案 | 「目標に向かって一緒に頑張ろう！」 |
| 画像イメージ | トレーニングを行う人々の活気あふれる写真 |
| CTAの有無 | 有り（「今すぐ登録する」） |
| 訴求する感情 | モチベーション: 健康的な生活を送るための励まし |
ペット用品店「PECHAT」のバナー
| バナー設置箇所 | フィットネス関連サイト、SNS |
| ターゲット | 健康志向の若者から中年層 |
| バナーイメージ | ダイナミックで活気のあるデザイン |
| バナーサイズ | 250×250（スクエア） |
| メインメッセージ | 「新しい自分を見つけよう！」 |
| マイクロコピー | 「今月限定、入会金無料」 |
| アクセス | 「○○駅から徒歩5分」 |
| キャッチコピー案 | 「目標に向かって一緒に頑張ろう！」 |
| 画像イメージ | トレーニングを行う人々の活気あふれる写真 |
| CTAの有無 | 有り（「今すぐ登録する」） |
| 訴求する感情 | モチベーション: 健康的な生活を送るための励まし |
旅行代理店「Vtation」のバナー
| バナー設置箇所 | 旅行関連サイト、SNS広告 |
| ターゲット | 50代〜70代の旅行好きな人 |
| バナーイメージ | 美しい風景を使った魅力的なデザイン |
| バナーサイズ | 728×90（リーダーボード） |
| メインメッセージ | 「夢のバカンスを今すぐ予約！」 |
| マイクロコピー | 「限定プラン実施中」 |
| アクセス | 「Vatationのサイトへ」 |
| キャッチコピー案 | 「あなたの理想の旅が待っている！」 |
| 画像イメージ | 美しい旅行先の風景写真 |
| CTAの有無 | 有り（「詳細を確認する」） |
| 訴求する感情 | ワクワク感: 旅行への期待感を引き出す |
LPやWebサイトの制作練習に使えるお題
LPやWebサイトの制作練習お題を提供します。
ここでは、「mifu-sensei」さんや「こばやす｜現場のWebデザイナー」さんが公開している練習用のお題をご紹介します。
これらを使って、実際のLPやWebサイトの制作に近い形で練習を行うことが可能です。
mifu-senseiさんのデザインお題
mifu-senseiさんのデザインお題は、ChatGPTと共同で作成されたもので、非常にしっかりとした定義書が含まれています。
これらのお題にはバナーなどの15本が含まれており、他のジャンルのお題も多数揃っています。
また、何よりも作成したデザインの添削を依頼できる点が魅力で、料金は3000円から利用可能です。
詳しくは以下をご覧ください。
https://note.com/mifu_sensei/m/mc54378b7fcbc
こばやす｜現場のWebデザイナーさんのWebデザインお題
こばやすさんはSNSを中心に活躍するWebデザイナーで、IT企業で10年の経験を持ち、現在はフリーランスとしても活動するパラレルワーカーです。
採用担当も務めており、Webデザインの現場に精通しています。
こばやすさんのお題は、Noteで無料のものと有料のものが提供されており、有料のお題でも1000円以下で手に入れることができ、必要な投資と考えられます。
詳しくは以下をご覧ください。
https://note.com/kobayas/m/mc59ee224baf7
UI/UXデザインの練習となるお題
UI/UXデザインを学ぶには、実践的な練習が重要です。
Webデザイナー向けというよりも、特にUI/UXデザイナーのスキル向上に役立つ練習サイトをいくつか紹介します。
これらのサイトでは、インターフェースの使いやすさやユーザー体験を向上させるための練習が可能です。
DailyUI
DailyUIに登録すると、100日間にわたり毎日デザインのお題がメールで届きます。
DailyUIを続けることで、画面内にどの情報を目立たせるべきか、どのように表示するべきかが理解できるようになります。
また、課題を通じて世の中のサービスについてリサーチすることもあり、デザインのトレンドを学ぶ良い機会となります。
さらに、毎日新しいお題に取り組むことで、デザインの発想力を養い、実際のプロジェクトでも応用できるスキルを身につけることができます。
コミュニティ内で他の参加者と交流することで、異なる視点やアイデアに触れることができ、自己成長にも繋がります。
ただし、登録時刻に基づいてお題が送られてくるため、遅い時間に登録するとタイトなスケジュールで取り組むことになるので、時間を考慮して登録することをおすすめします。
効率的に進めるためには、毎日のスケジュールに余裕を持たせ、お題に取り組む時間を確保することが重要です。
AIを使ってWebデザインの練習用お題を自分で作る方法
AIを使えば、Webデザインの練習用お題を簡単に作成することができます。
例えばChatGPTを活用すれば、特定の条件に従ったデザインのお題を作るのも非常に容易です。
ただし、ラフに指示するよりも、具体的で詳細な指示を与えることで、より良いアウトプットを得ることができます。
例えば、バナー制作であれば、上述した項目について求めると良いでしょう。
（プロンプト例）
下記の項目に従って、整骨院のバナー制作の練習お題を提案してください。
・依頼概要：バナー設置箇所、ターゲット、バナーイメージ、バナーサイズ、
・テキスト：メインメッセージ、日付、アクセス、キャッチコピー案
・画像イメージ：
・CTAの有無：有りの場合の文言
・訴求する感情：例）癒し、食欲
良いWebデザインの練習お題の特徴やお題の選び方
良いWebデザインの練習お題を選ぶ際には、具体性があり、実践的な課題であることが重要です。
時間が許すのであれば、紹介したお題をすべて取り組むのも良いでしょう。
幅広い経験を積むことで技術力が向上し、より多くのデザインスキルを身につけることができます。
自分のレベルに合ったお題を選ぶ
Webデザインの練習お題を選ぶ際には、自分のスキルレベルに合ったものを選ぶことが大切です。
たとえば、バナーやLPを作ったことがないのに、サイト構造が複雑で数十ページにわたるホームページのデザイン課題に挑戦するのは難しいでしょう。
まずは、簡単なバナーやシンプルなLPから始め、徐々に難易度を上げていくことが重要です。
こうした段階的なアプローチにより、基礎から応用までスムーズにスキルを身につけることができます。何事にもステップがあり、段階的にスキルを高めることが成功への近道です。適切なレベルのお題を選ぶことで、挫折を防ぎ、モチベーションを保ちながら効率的に学習を進めることができるでしょう。
フィードバックの機会があるもの
練習お題によっては、フィードバックを得たり、他の人が同じ要件で作成したデザインを見ることができる場合もあります。
例えば、冒頭で説明したmifu-senseiのnoteで提供されているお題では、別料金が必要ですが、添削サービスを利用できます。
このようなフィードバックの機会を活用することで、自分の制作物を客観的に評価し、他のデザインと比較することで成長することができます。
フィードバックを受けられる練習お題には、優先的に挑戦することをおすすめします。
また、制作物をSNSに投稿して他のデザイナーからフィードバックをもらうことも、スキル向上に役立つ良い方法です。
リアルなお題
練習に取り組む際は、あまりに非現実的な要件が記述されているお題は避けましょう。
例えば、「全ての世代（子供から高齢者まで）を対象とした多機能な求人サイトのLP作成」といったお題です。
実際には、子供や高齢者が求人サイトを見ることはほとんどなく、ターゲットが広すぎるのは現実的ではありません。このようなお題は、時間の無駄になりかねないため取り掛かるべきではありません。
また、公的に使えないものや差別的な要素が含まれているお題も避けるべきです。
このようなお題に取り組むと、無駄な労力を費やすことになり、ポートフォリオに掲載しても評価されにくいため、実際の価値が得られにくくなります。
逆に、現実的で具体的なターゲットを設定したお題に取り組むことで、制作物の品質も向上し、ポートフォリオに掲載する際にも効果的です。
例えば、特定の年齢層や業種に絞ったお題は、実際のニーズに即しており、より説得力のある成果物を生み出せるでしょう。
公的に利用可能で、社会的に有用性のあるテーマを選ぶことも重要です。
こうした現実的なアプローチを取ることで、デザインスキルの向上だけでなく、制作物を通じて自己PRにもつなげることができます。
ターゲットが明確なもの
デザインは、特定のターゲットに対して何らかの目的を達成するための手段です。
そのターゲット情報がどれだけ明確であるかによって、デザインの方向性やイメージが大きく変わります。
実務の現場レベルでは、ペルソナ調査も任されることがありますが、練習段階ではその調査が難しいため、ターゲットをできるだけ明確にすることが重要です。
例えば、「27歳女性」というだけの情報より、「27歳女性、東京一人暮らし、新潟出身、年収400万円、貯金200万円、IT業界で営業に従事」など、詳細な情報がある方が、よりターゲットに応じた具体的なデザインが可能になります。
前者のような曖昧な情報だと、単に女性らしいデザインに終始する可能性がありますが、後者のように詳細な情報があると、例えば近未来的なIT要素を取り入れたり、商品価格の訴求を控えるなど、よりターゲットに寄り添ったデザインができます。
このようにターゲットが明確であればあるほど、デザインの質が向上し、効果的なコミュニケーションが可能になります。
販売促進や情報提供などの目的のものを選ぶ
バナーやWebサイトを作成する目的はさまざまです。
商品の販売促進や特定の情報をターゲットに伝えることなどが挙げられます。
しかし、採用目的のブランディング向上や企業のビジュアル向上といった少し難易度の高い目的のデザインは、初心者の段階では避けた方が良いでしょう。
こういったブランディング向上を目的としたデザインは、優秀なWebデザイナーが数ヶ月にわたり取り組むものですし、実務の現場に出ても初心者が初期に扱うことは少ないため、まずは商品の販促や簡単な情報提供を目的としたデザインから始めることが推奨されます。
このような取り組みを通じて、デザインの基礎を確実に身につけていくことが成功への鍵です。
作ったWebデザインはポートフォリオに添付しよう
ポートフォリオは現役のWebデザイナーだけでなく、未経験のWebデザイナーも作成する必要があります。
未経験から初めての案件を受注する際には、模写や架空案件のアウトプットを掲載し、自分のスキルをアピールすることが重要です。
ポートフォリオは自分の成長を示す重要なツールであり、可能な限り日々更新し、より良い内容に改善していくことが求められます。
特に未経験者にとって、模写や架空案件であっても、積極的にアウトプットをポートフォリオに載せることで、クライアントに自分のスキルやデザインの適応力を伝えることができます。
未経験者用のポートフォリオの作り方については、こちらの記事を参考にしてみてください。
【次の一歩】練習で作ったWebデザインやポートフォリオのフィードバックを受けよう
Webデザインは作って終わりではなく、フィードバックをもとに自分の技術を高めることが大切です。
可能であれば、現役のWebデザイナーに添削を依頼するのが良いでしょう。
もし身近にWebデザイナーの知り合いがいるなら、ぜひお願いしてみてください。
もし知り合いがいない場合は、ココナラやMENTAなどのスキルシェアサービスを活用するのもおすすめです。
これらのサービスを使えば、〜5000円以内で添削や相談を依頼できることが多く、コストを抑えながらも効果的なフィードバックを得ることができます。
フィードバックを受けることで、自分のデザインの改善点や強みを具体的に理解し、次のステップに活かすことができます。
また、X（旧Twitter）を始めることも有効です。
自分の成果物を投稿し、広くフィードバックをもらえる環境を作ることで、さまざまな視点からの意見を得ることが可能になります。
特にSNS上でのフィードバックは、同じ志を持つ仲間やプロからの意見を得る絶好の機会です。
積極的に自分の作品を公開し、フィードバックを通して自分のデザインスキルを磨き続けましょう。
さらに、自分の成長を記録することで、モチベーションの維持にも繋がります。
独学で進めていく場合はロードマップの作成もおすすめです！
独学でWebデザインを進めていく際には、特に仕事や家庭の空き時間を利用して学習を行う場合、ロードマップや学習計画を立てることがとても大切です。
しかし、未経験でWebデザインの全体像を理解していない中で、自分でロードマップを作成するのは難しいというのも事実です。
そこでおすすめしたいのが、WEBCOACHの無料相談です。
WEBCOACHの無料相談では、未経験から理想のキャリアを叶えるための具体的なロードマップを提案してくれます。
通常、このようなサービスは有料で提供されることが多いですが、WEBCOACHではWEB業界のプロが無料で作成をサポートします。
参加満足度は95％と非常に高く、予約には限りがあります。
少しでも興味がある方は、ぜひ早めに予約を取ってみてください。
プロのアドバイスを受けることで、自分に合った効果的な学習計画を立てることができ、目標達成に向けた効率的な学びが実現します。
