デザイン基礎の総合演習｜イベント告知バナーを90分で1枚作る

ここまでのレッスン、おつかれさまでした。最後は仕上げの課題です。

読んで分かったつもりでも、白いキャンバスの前に座ると手が止まります。知っている状態と、作れる状態のあいだには段差があるからです。その段差を1枚のバナーで越えます。

お題は架空のイベント告知。要件を読む、進め方どおりに手を動かす、提出前に自分でチェックする。実際の仕事と同じ流れでやってみましょう。目安は90分です◎

課題：イベント告知バナーを1枚作る

依頼の内容はこれだけです。まず全部読んでから手を動かしてくださいね。

項目	内容
作るもの	イベント告知バナー 1枚
サイズ	1080 × 1080 px（正方形）
掲載先	InstagramとXの投稿
目的	申し込みページを開いてもらう
イベント名	パンをこねる、はじめての体験会
日時	10月12日（日）10:00〜12:00
場所	みなと公民館 調理室
参加費	1,500円（材料費こみ・定員12名）
申し込み	プロフィールのリンクから

縛りも3つ置きます。自由に作るより、制限があるほうが早く上手くなります。

道具は何でも大丈夫です。Canva、Figma、パワーポイント、iPadのアプリ。正方形のキャンバスが作れれば足ります。写真が要るならO-DAN、Unsplash、写真ACなどの無料素材から1枚だけ選んでください。

InstagramもXも、タイムラインでは画像が手のひらサイズまで縮んで流れていきます。文字を詰め込むと、その大きさでは読めません。入れる文字は要件に書いてあるぶんだけにして、自分で足さないでください。

要件の中でいちばん大事なのは「目的」の行です。「申し込みページを開いてもらう」。きれいに作ることではありません。迷ったらこの1行に戻ってください。

進め方（この順で90分）

作る順番を決めておくと、途中で迷子になりません。5つのステップに分けます。

ステップ1：情報を整理する（10分）

要件の文字を紙に書き出して、主役・脇役・補足の3つに振り分けます。主役は1つだけ。2つあると、どちらも伝わりません。

今回の主役は、迷ったらイベント名です。「何の会か」が分からないと、日付を見てもらえません。日時と場所が脇役、参加費と定員が補足。この並びが情報の優先順位になります。

順位のつけ方に自信がないときは視覚的階層（見る順番の設計）を先に読み直してください。

ステップ2：ラフを3案描く（15分）

いきなりツールを開かないでください。紙とペンでラフ（配置だけを描いた下書き）を5分ずつ3案描きます。四角の中に、どこに何を置くかの線を引くだけで十分です。

3案の違いは主役の位置だけで構いません。上に置く案、真ん中に置く案、写真に重ねる案。並べて見ると、いちばん強いものが分かります。

ここで1案に丸をつけてから、ツールに移ります。画面の上で悩む時間が半分になりますよ💡

ステップ3：文字を組む（25分）

色も飾りもまだ入れません。黒い文字だけで組みます。この段階で伝わらないものは、色を足しても伝わりません。

やることは4つです。

大きさの差のつけ方はジャンプ率、間隔の取り方は余白の使い方にまとめてあります。

ステップ4：色を決める（20分）

3色の役割を先に決めます。主色・補助色・差し色。面積は主色を広く、差し色はいちばん狭く使います。

今回の差し色は「申し込みはプロフィールのリンクから」の一言に使ってください。目的が申し込みなので、そこがいちばん目立つのが正解です。よく使うアプリの申し込みボタンだけ色が濃いのと同じで、押してほしい場所に強い色を1つ置きます。

色の選び方に迷ったら配色の基本とトンマナへ。パン教室なので、まずは温かみのある色から探すと外しません。

ステップ5：あしらいと見直し（20分）

あしらい（飾りのこと）は最後です。線を1本、四角を1つ、程度から始めてください。足りないと感じたときは、たいてい飾りではなく余白が足りていません。

最後に画面を縮小して、スマホで見るくらいの大きさにします。その状態で主役が読めれば合格です。あしらいの引き出しに使える型をまとめてあります。

この5ステップは、順番に意味があります。文字を組む前に色を選ぶと、必ずやり直しが出ます。形が決まっていないのに色だけ決めても、面積が変わった時点で合わなくなるからです。

手が止まったら、ここに戻る

作っている途中で「なんか違う」と感じたら、感覚で直さないでください。症状ごとに戻る場所を決めておきます。

気になること	戻るレッスン
全体が散らかって見える	デザインの4原則／余白の使い方
どこから読めばいいか分からない	視覚的階層／ジャンプ率
文字が読みにくい	視認性・可読性・判読性／行間の取り方
文字が詰まって見える	文字詰めの基本
色がまとまらない	配色の基本／配色の型
置き場所が決まらない	レイアウトの基本
書体が決められない	フォントの選び方

直す順番は上から下です。散らかりを直さないまま書体だけ変えても、印象は変わりません。

提出前のチェック

できあがったら、すぐ人に見せる前にここを確認してください。実際の現場でも、渡す前に自分でやる作業です。

1つでも引っかかったら、そこだけ直します。全部作り直す必要はありません。

余力があれば、2枚目

1枚で終わらせるより、条件を変えてもう1枚作ると身につき方が変わります。おすすめは2つです。

• 同じ内容で、印象だけ変える／「やさしい」で1枚、「本格的」で1枚。色と書体だけ差し替える
• サイズを変える／同じ内容を横長（1200×630px）で組み直す。正方形で成立していた配置が崩れるので、優先順位の理解が試されます

別のお題でも練習したくなったら、バナーデザインお題20選から選んでください。作る手順そのものはバナーデザインの手順とコツで工程つきに解説しています。

よくある質問

90分で終わりませんでした。遅すぎますか？

最初は3時間かかっても普通です。速さは作った枚数で上がるので、いま気にしなくて大丈夫。
ただし時間が伸びる原因は決まっていて、たいていステップ2のラフを飛ばしています。紙で決めずに画面で悩むと、いくらでも時間が溶けます。次の1枚では必ずラフから始めてみてください。

写真は使ったほうがいいですか？

どちらでも構いません。文字だけで組んだほうが、優先順位のつけ方はよく分かります。
使うなら、写真の上に文字を重ねるときだけ気をつけてください。背景がにぎやかだと文字が沈みます。写真を暗くする、白い帯を敷く、文字を写真の外に出す。この3つのどれかで解決できます。

できあがったものが良いのか悪いのか、自分で判断できません

そのための見方を次のレッスンでまとめました。自分の作品を客観的に見る方法は、慣れではなく手順です。
いますぐ試せるものを1つ挙げると、画面を1/4くらいに縮小して見ることです。細部が見えなくなるので、全体の形と主役だけが残ります。そこで主役が立っていないなら、細部を直しても変わりません。

この作品はポートフォリオに入れてもいいですか？

入れて大丈夫です。架空の依頼として自分で組んだものなので、模写とは違います。
載せるときは「架空のイベント告知として制作」と書き添えて、要件と自分の判断（主役を何にしたか、なぜその色か）も一緒に見せてください。見る人は、作品そのものより判断の理由を知りたがります。

次に学ぶこと

今日やったことを整理します。

• 要件を読んで、主役を1つ決める
• ラフを紙で3案。画面で悩まない
• 黒い文字だけで組んでから、色を足す
• 飾りは最後。足すより減らす
• 渡す前に自分でチェックする

作れたら、次は見直す力です。作品の見直し方（セルフチェック）で、自分の作品を客観的に見る手順をまとめました。「これで合っているのか分からない」を解決する回です。

コースを一通り終えた方は修了ページ（次のレベルの選択肢）へ。ここから先の進み方を並べています。

学ぶ順番の全体像はデザイン基礎コースの目次から確認できます。