このポスター、何のお知らせ?
ある部活の、新入部員のポスターを思いうかべてください。
文字は全部同じ大きさです。色は五色もあります。日時も場所も、あちこちにばらばらに書いてあります。
見た人は、何のポスターか分からず、通りすぎてしまいます。今日は、伝わるポスターの作り方を学びます。
今日のキーワード
| ことば | いみ | れい |
|---|---|---|
| デザイン | 目的に合わせて、見た目や使いやすさを考えることです。 | ポスターの文字の配置 |
| レイアウト | 文字や絵を、紙や画面のどこに置くかの決め方です。 | 題名は上、日時は下 |
| そろえる | 文字や絵の左端などを、同じ線に合わせることです。 | 左端をそろえる |
| 近づける | 関係のあるものを、近くに置くことです。 | 日時と場所を並べる |
| くらべる | 大事なものを大きくして、差をつけることです。 | 題名だけを大きくする |
| 余白 | 何も置かない、空いている場所のことです。 | 文字のまわりのすき間 |
学生が入力するセルは、このプレビューでは空白です。
デザインは、飾りではない
デザインの目的は、きれいにすることだけではありません。伝えたいことを、すぐに分かってもらうことです。
そのために、三つのコツがあります。そろえる、近づける、くらべるです。
小さな確認: どのコツ?
やってみよう
小さな確認: どのコツ?
3問挑戦してみましょう。回答はここで採点され、その後は保存されません。点数を残したい場合や、続きから再開したい場合はログインしてください。ログインして点数を保存
答えはここで採点され、保存されません。アカウントがあれば、結果が残ります。
例: ポスターの直す前と後
| 直す前 | どのコツ | 直した後 |
|---|---|---|
| 文字が全部同じ大きさ | くらべる | 題名を大きく、説明を小さくした |
| 日時と場所が、あちこちにある | 近づける | 日時と場所を、ひとまとめにした |
| 文字の左端がばらばら | そろえる | 全部の左端を、一本の線に合わせた |
| すき間がなく、ぎっしり | 余白をとる | まわりに空きをつくって、読みやすくした |
学生が入力するセルは、このプレビューでは空白です。
やってみよう: 近づけると、まとまる
<div class="group">
<p class="title">バスケ部 体験会</p>
<p>日時: 5月10日 放課後</p>
<p>場所: 体育館</p>
</div>
<div class="group">
<p class="title">持ち物</p>
<p>体育館シューズ、タオル</p>
</div>
三つのコツを使う
そろえる: 左端をそろえると、きちんとした感じになります。真ん中にそろえるなら、全部を真ん中にします。
近づける: 関係のあるものは近く、ないものは遠くに置きます。
くらべる: いちばん大事なものだけを大きく、または太くします。全部を目立たせると、何も目立ちません。