WEBデザインを勉強していると、「教科書的な練習ばかりで物足りない」「実際の案件に近い経験を積みたい」と感じることがありますよね。
今回ご紹介するのは、実際の案件をモデルにしたバナー制作の練習課題です。
この課題に取り組むことで、デザイン力を高めるだけでなく、完成した作品をポートフォリオに載せることも可能です。
バナーは、WEB広告やサイト運営に欠かせない存在であり、デザイン案件の中でも依頼数が多いジャンル。練習を通じてスキルを身につければ、将来の仕事にも直結します。
古民家カフェのオープン告知バナーを作ろう！
ここでは、架空のクライアントから依頼された案件を想定して練習します。
■依頼内容
新しくオープンするカフェの告知用バナーを作ってください。
Instagramで使用します。
■カフェの情報
店名：古民家カフェ SATOYAMA
開店日：10月1日(水)
営業時間：11：00～20：00
■カフェの雰囲気
築50年の古民家をリノベーションした、落ち着いた和モダンなカフェ。木の温もりを感じる店内。
■客層
30代〜50代の大人世代が中心。休日にゆったりと過ごしたい人におすすめ。
■取り扱い商品・人気メニュー
カフェラテ・手作りケーキ
■店主の人物像
40代前半の男性。
元は東京のカフェで修行し、地元に戻って独立開業。落ち着いた雰囲気でコーヒー愛にあふれている。
■サイズ・形式
1080×1080pxのJPG画像
■使用する素材
カフェラテ・コーヒーやスイーツの写真
■掲載内容
バナーには必ず「NEW OPEN」「スイーツ全品20％OFF」を記載。
任意で店名、営業時間を載せる。
■納期
3日以内に納品
ターゲットやペルソナを意識すると、より実案件に近い練習になるよ！
デザインのポイント
初心者がバナー制作で悩みやすい部分を、チェックポイントとしてまとめました。
■情報の優先順位をつける
「NEW OPEN！」を最も目立たせる
■配色の工夫
古民家カフェらしい「ブラウン＋ベージュ系」で落ち着いた雰囲気
■デザイントーン
「和モダン」「落ち着き」「上質感」を意識
■フォント選び
見出しは太字でインパクトを
数字や英語には欧文フォントを使う
「ベースカラー」「メインカラー」「アクセントカラー」の3色を決めて配色し、強調したい部分にのみアクセントカラーを使いましょう。
英数字には必ず欧文フォントを使用しましょう。
フォントサイズにメリハリをつけたり文字間隔を調整するとキレイに見えます。
時間のハイフン( – )やコロン(：)も上下中央になるように揃えましょう！
デザイン性が高くインパクトのある書体や、太いゴシック体よりも、明朝体やセリフ体の方が「落ち着き」や「上質感」を表現しやすいです。
制作の流れ
実際の仕事と同じように、次のステップを意識して進めましょう。
- STEP.01リサーチ
- 「カフェ バナー デザイン」などで検索し、参考デザインを収集
- 配色やレイアウトの傾向をチェック
- STEP.02ラフ作成
- 紙やツール（illustrator,Figma, Photoshop, Canvaなど）で簡単に配置を考える
- 文字と画像のバランスを決める
- STEP.03デザイン制作
- 目立たせたいテキストを大きく配置
- 配色はブランドやターゲット層に合わせる
- STEP.04最終調整
- 誤字脱字をチェック
- 書き出しサイズ・解像度を確認
案件を進めるイメージで取り組もう！
サンプル完成例
※ 転載・再配布はご遠慮ください
配色はブラウンを基調とし、秋を感じさせる紅葉のモチーフを添えることで、温かみと季節感を演出。カフェというテーマにふさわしい落ち着きのあるデザインに仕上げています。
シンプルながらも温かみがあり、ターゲット層である30代〜50代の大人世代に「癒し」「上質さ」「ほっと一息つける雰囲気」がしっかり伝わるデザインです。
デザインのポイント
1.写真選びで雰囲気を伝える
ラテアートやスイーツの写真を使うことで、カフェの魅力を視覚的に表現しています。飲み物やスイーツは「来店したい」と思わせる重要な要素です。
2.季節感を取り入れたデザイン
背景に紅葉を配置し、ブラウンを基調にした配色で秋の温もりを演出。季節感を取り入れると、より心に残りやすいデザインになります。
3.メインメッセージの強調
「NEW OPEN」の文字を大きく配置することで、最も伝えたい情報が一目で分かる構成になっています。訴求ポイントはシンプルに、視認性を重視しましょう。
4.来店動機につながる特典表示
「スイーツ全品20％OFF」といったキャンペーンを明確に伝えることで、行動を促すきっかけになります。特典はデザイン上でも目立たせる工夫が必要です。
実案件に近い練習で一歩成長しよう
今回の実践課題では、新規カフェの告知バナー制作をテーマに練習しました。
案件風の条件を整理し、リサーチからデザイン完成まで体験することで、仕事に近いデザインスキルを磨けます。
この課題で作ったバナーは、ポートフォリオや作品集に自由に掲載してOKです。
就活用のポートフォリオでは「実案件を想定した練習課題」として紹介することができますし、SNSでは「#デザイン練習」や「#WEBデザイン」といったハッシュタグを使って発信すれば、他の学習者やデザイナーと交流するきっかけにもなります。
また、学習ブログに制作の過程をまとめて記事にすれば、自分の成長を記録として残すことも可能です。
「練習でも立派な実績」になります。自信を持って公開してみてください。
