平島功晴/情報デザイン研究II

Design

見やすいデザインをモーショングラフィックスで

• Hirashima Kousei
• Keywords：motiongraphics,infographics,visibility

Overview

What is this?

視認性などのデザインの見やすさについてのモーショングラフィックス

Background and Purpose

背景:デザインを制作する上でどのようにデザインを制作すれば見やすいか、伝わりやすいか気になり調べているとwebサイトでは見やすさ伝わりやすさについて記載されているのですが画像のみの掲載で映像で表現すると変化がよりわかりやすく知ることができるのではないかと思いこのテーマで研究をすることにした。

目的:私と同じようにデザインの見やすさ、伝わりやすさについて知りたい人むけの動画を制作すること。

Concept

デザインの見やすさを映像で表現

Outputs

3分程度の動画をyoutubeにアップロード

Tools

Illustrator
Aftereffects
Premire pro

Term

2022.09.21-2022.12.21

Conclusion

• 絵コンテ

• 中間まとめ
  現状では絵コンテに3つのアイディアを掲載
  今後はアイディアを5個程度増やしてモーショングラフィックを作成

• まとめ

• 最低限形にすることができた。

• デザインの見やすさ伝わりやすさを映像で表現しても変化がよりわかりやすくなるわけではないと分かった。むしろ画像での比較の方が簡潔で伝わりやすいと分かった。

• 動画の構成としては自分が考えていることが表現できていると感じている。

• 今後は動画にBGMを付けることと、時間の調節などのブラッシュアップをさらに行っていく必要がある。

Research

Current Situation

Precedent

• 視認性
  →目で何かを見た時に、対象物やその対象物がもつ意味合いについて、正しく確認・理解ができるかどうかの度合い。見やすいかどうか。瞬間的な認識を指す。

• 可読性
  →読み取れる性質、読み取れる度合などを表す言葉。正確に早く、読み続けても疲労を感じないか。視認性が瞬間的な認識を指すのに対し、可読性はその先を指す。

• 判読性
  →判読とははっきりしない文字、わかりにくい文意などを前後の関係などから推測しながら読むことであるため、判読性とは文章の分かりやすさを指す。見ている人に正確に文章の意味が伝わるかどうか（＝誤読・誤解をさせないかどうか）。対象物への「判断」まで含む。

• 視認性・可読性・判読性・・・似た意味を持つ言葉の違いを調べてみた

• カラーリテラシー

• インフォグラフィックス

Technology

Project Management

Schedule

• スケジュール
  
  

ToDo

• テーマ決め
• 視認性、可読性、判読性の意味について調査
• モーショングラフィックについての調査
• 絵コンテ
• 試作
• 本制作
• op,enの制作

2023.1.15

指摘された点を修正

• 背景の色を黄色から白に変更
  
  
• opをタイトル名と同じになるように修正
  
  
• 目次にそれぞれの項目に対しての簡単な説明を追加
  
  
• 字詰め
  
  
• BGMを追加
  
  
  
  

2022.12.21

取り組み

指摘された点の確認、修正すべき点の確認

2022.12.14

取り組み

• アニメーションの作成
  ヘッダーの作成
  
  
  
  

2022.12.6

取り組み

• アニメーションの作成

• 二つを比べた後に変化するモーショングラフィックスをつけることにした。

2022.11.30

取り組み

• アニメーションの作成

• オープニングとエンディングの作成

2022.11.23

取り組み

• アニメーションの作成

• 誘目性→stopの標識を色の変化によって誘目性を表現した。

• 識別性→冷たい飲み物に対して青と赤を使い識別性を表現した。

2022.11.16

取り組み

• アニメーションの作成

• 視認性→見やすい文字と見にくい文字を交互にアニメーションさせ、変化を表現した。

• 可読性→明朝体とゴシック体を交互に出すことで文章の見やすさを表現した。
  
  
  
  

2022.11.9

取り組み

• アニメーションの作成
  ヘッダーの作成
  
  
  
  

2022.11.2

取り組み

• アイディアの見直し、指摘された点の見直し
  
  
  
  

2022.10.26

取り組み

• 中間報告の準備
• 絵コンテ制作
  
  
  
  

2022.10.19

取り組み

• メインビジュアルの作成

2022.10.12

調査

• 視認性
  →目で何かを見た時に、対象物やその対象物がもつ意味合いについて、正しく確認・理解ができるかどうかの度合い。見やすいかどうか。瞬間的な認識を指す。

• 可読性
  →読み取れる性質、読み取れる度合などを表す言葉。正確に早く、読み続けても疲労を感じないか。視認性が瞬間的な認識を指すのに対し、可読性はその先を指す。

• 判読性
  →判読とははっきりしない文字、わかりにくい文意などを前後の関係などから推測しながら読むことであるため、判読性とは文章の分かりやすさを指す。見ている人に正確に文章の意味が伝わるかどうか（＝誤読・誤解をさせないかどうか）。対象物への「判断」まで含む。

• 視認性・可読性・判読性・・・似た意味を持つ言葉の違いを調べてみた

• カラーリテラシー

2022.10.5

テーマ案決定

視認性などについてのインフォグラフィック動画を作成

2022.09.28

テーマ案に対する調査

• 視認性について

• WEBデザインで重要な視認性の意味とデザイン制作時のポイント

• 視認性を高くする文字デザイン

• 優れたUIデザイン（ユーザインターフェース）を作るために意識すべき、たった1つの原則

• UI（ユーザーインターフェース）デザインとは？

• 色覚について

• 配色のバリアフリー

• 色弱でも見やすい色とは？

• ユニバーサルデザインについて

• ユニバーサルデザイン

2022.09.20

テーマ案

• 視認性の良いデザイン、悪いデザインとは
• 色覚障害の方でも見やすい色の表現とは
• グラフィックデザインにおけるユニバーサルデザインとは
  これらのテーマをどのように表現するか検討