NHK高校講座

社会と情報

Eテレ 隔週 金曜日 午前10:20〜10:40
※この番組は、前年度の再放送です。

社会と情報

Eテレ 隔週 金曜日 午前10:20〜10:40
※この番組は、前年度の再放送です。

今回の学習

第5回 情報の表現と伝達

情報デザイン

  • 北鎌倉女子学園理事長補佐 田邊 則彦
学習ポイント学習ポイント

情報デザイン

  • 緑川光さん
  • 松田好花さん

第5回のテーマは「情報デザイン」。
司会は緑川光さん、一緒に学んでいくのは日向坂46の松田好花さんです。

  • 戸谷さんが作成したポスター
  • 田邊則彦先生

まずは、ナレーション担当の戸谷公人さんが作成したポスターを見てみましょう。

戸谷さん 「僕はバスケットボールが大好きで、今度みなさんに僕のバスケットボールの試合を見に来てほしいと思って、ポスターを作りました。」

松田さん 「このポスター、あまりイケてないかなあ。」

今回は田邊則彦先生にお話を伺い、このポスターの問題点を修正していきながら、デザインの基本を学んでいきましょう。

見やすいデザインとは
  • 一文字ごとにフォントが違う
  • 同じフォントを使う

松田さん「このポスター、文字が見にくいかな…。」

まず「戸谷46」。
文字がやけに大きく、フォントが一文字ごとに違っています(画像・左)。
そこで、同じフォントを使うとまとまりが出ました(画像・右)。

  • 文字が小さい
  • 改行し大きい文字に

次に「第1回高校講座杯」。
顔にかからないように文字を小さくしてあり、文字と文字の間が詰まった印象を受けます。

文字は、情報の伝達に大きな影響を与えます。
例えば、この「第1回高校講座杯」の文字を“話し方”で説明すると、フォントを音色、文字のサイズを声の大きさ、文字の間を話すスピードとして考えたとき、左の画像の文字は、弱い音色・小さな声・早口で表現されます。
そこで、「第1回」のところで改行して文字を少し大きくしてみると(画像・右)、強い音色・大きな声・ゆっくりした口調で表現され、「タイトル」という印象が強くなります。

  • 明朝体・ゴシック体
  • 文字や行の間隔で印象が変わる

文字のフォント・大きさ・文字の間隔などによって、デザインの印象は大きく変わってきます。
一般的な文書には、明朝体とゴシック体のフォントがよく使われます。
明朝体は読みやすいので、長い文章に適しています。
ゴシック体はインパクトがあるので、短いタイトルなどに向いています。
文字や行の間隔などによってもデザインの印象が異なってくるので、読みやすくなるように工夫しましょう。

見やすいレイアウト
  • 見えにくいレイアウト
  • 右揃えから左揃えに変える

続いて、日時と場所を見てみます。
左の画像では目線が落ち着かない感じがします。
それは、日時と場所の右の端がそろっているからです。
このことを右揃えといいます。
これを逆の左揃えにすると(画像・右)、印象がだいぶ変わり、落ち着きが出ました。
フォントや大きさ、レイアウトを変えるだけで印象が大きく変わります。

見やすい色とは
  • 見えにくい色
  • 見やすい色

次に、色を見てみましょう。
左の画像は黄色の上に「頂上決戦」と書いてありますが、目立たない色の組み合わせになっています。
これは、明度差という色の明るさの度合いが問題になっています。
白と黄色は明度にあまり大きな差がありません。
明度の差が大きい色の組み合わせを使うと目立つようになります。
例えば、踏切のバーの黄色と黒は、明度差を利用して目立つようにしてあります。
右の画像のように、黄色を赤にしてみると見えやすく変わりました。

  • 見えにくい文字
  • 見えやすい文字

最後に、チケットの価格「全席500円」。
リーズナブルな値段で大事な情報ですが、目立っていません。
文字はそのまま生かして、赤い帯の上に文字をのせてみると、文字が浮かんできて目立たつようになりました。

  • 明度の差が小さい色立体
  • 明度の差が大きい色立体

色には色相・明度・彩度の3つの属性があります。
図は色の3つの属性を3次元で表現した色立体です。
明るさを表す明度の差が小さいと見づらくなり、明度の差が大きいと見やすくなります。
例えば左図のように黄色と白の組み合わせや黒と茶色の組み合わせは、明度の差が小さいため見づらくなってしまいます。
反対に、右図のように明度差が大きい色の組み合わせは見やすくなります。
文字の色と背景の色との明度差に気をつけて、色の組み合わせを考えましょう。

見やすいデザインとは
  • 改善したポスターとの見比べ

戸谷さんが作ってきたものと、改善してもらったのを見比べてみました。

田邊先生 「落ち着きが出ましたよね。」

松田さん 「修正したあとのほうが、一度にいろんな情報を理解できますね。」

田邊先生 「では、デザインのプロはどんなことを指摘してくれるのか、見てもらいましょう。」

デザイナーに学ぼう
  • 矢次悟郎さん
  • 佐伯奈緒美さん

訪ねたのは、東京都内にあるデザイン会社。
企業や商品を紹介するチラシやパンフレット、Webページなどを制作しています。
矢次悟郎さんと佐伯奈緒美さんに今回作ったポスターを見ていただきました。

矢次さん 「ぱっと見で何をいちばん訴えたいのか、明確にはわからない気がします」

佐伯さん 「背景の体育館がゆがんでいるので、写真の背景はないほうが、戸谷さんをメインで出せていいと思います。」

  • プロのアドバイス後のポスター
  • Webページ

プロのアドバイスをいただいて、ポスターはさらにグレードアップ(画像・左)。
また、バスケットボールの試合のWebページの試作版を作ってもらいました(画像・右)。

佐伯さん 「まず、ファーストビュー(最初に表示される部分)で戸谷さんの魅力が伝わるように、顔が映えるようなレイアウトにしました。また、頂上決戦という力強いキャッチコピーなので、インパクトのある形にデザインしてあります。」

  • 3つの購入ボタン
  • アニメーション効果

バスケットボールの大会なので、観戦チケットを売りたいという気持ちがあると考え、チケットの「購入ボタン」を3つ作りました。
また、ホームページを見た際もワクワク感や楽しみを持ってもらえるように、アニメーション効果をつけました。
文字と戸谷さんの写真を交互に出すことによって、アニメーションのリズムつけて、最終的に購入用の赤いボタンに視点がいくように動きをつけてあります。

ポスターと違って、Webページでは文字や画像に動きをつけることができるので、より効果的に情報を伝えることができます。

  • Webページづくりで大切なこと
  • 専門家の意見を聞いて作ったポスターとの比較

佐伯さん 「印刷物は基本的に見てもらうものなのですが、Webサイトになるとユーザーにボタンをクリックしてもらったり、文字を入力してもらったりと使ってもらうものなので、ユーザーの使いやすさ(ユーザビリティ)、アクセスのしやすさ(アクセシビリティ)がちゃんとできているかというのも、常に心掛けながら作っています。」

矢次さん 「Webページを見る人は、年代から男女まで、老若男女さまざま。いろんな人がいますので、Webページを見たときに、必要な情報を得られるという部分と使い勝手の部分で、どんな方が見ても使いやすいと思ってもらえるサイト作りをいちばん心がけています。」

それでは、戸谷さんが作成したポスターと、専門家の意見を聞いて新しく作ったポスターを比べてみましょう。
背景がなくなり、その分一気に情報が伝わってくる感じがしますね。

  • 改行しみやすくなった文字
  • 白いエフェクト

「バスケットボール日本一を決める」は改行したことによって見やすくなりました(画像・左)。
背景を黒にしたことによって、文字との明度差が出てわかりやすくなりました。
「戸谷46」も、白と黒の組み合わせになって浮かび上がって見えます。

緑川さん 「『VS緑川ブラザーズ』の白いエフェクトも面白いですね。(画像・右)」

見せ方ひとつでこんなにも変わってきます。

  • ポスターとWebページ

田邊先生に今回のまとめをしていただきました。

ポスターは貼ってある場所に人が行って見るものですが、一方でWebページは不特定多数がいつでも見ることができる、そういう違いがあります。
そして、Webページは情報を更新していくことが、印刷物より簡単にできます。
しかし便利さの一方で、例えば間違った情報を発信してしまったときなど、一度流した情報を回収することは難しくなります。
丁寧にデザインをして、慎重に情報を発信することが必要です。

松田さん 「受け手側の気持ちを考えるっていうのが、すごく大事だなって気づきました。」


それでは次回もお楽しみに!

科目トップへ

制作・著作/NHK (Japan Broadcasting Corp.) このページに掲載の文章・写真および
動画の無断転載を禁じます。このページは受信料で制作しています。
NHKにおける個人情報保護について | NHK著作権保護 | NHKインターネットサービス利用規約