内容
「動く図解の表現」のハードルは高い
グラフィックデザインの展望をまとめた1冊!
前書「図解力アップドリル」は、デザイナーやビジネスユースに“日常で本当に必要とされる図解”について、ドリル形式でステップアップを意識いただきながら解説しました。
本書は応用編として、そこに「動き」の表現を加えた際の知識や活用例をまとめています。動きの基本に触れていることはもちろん、その知識に辿り着くために必要な図解についても触れています。「図解力アップドリル」をお持ちの方は復習になりますが、見方を変えれば図解について知らなければ、その動きの表現について学ぶことは難しいとも言えます。平面、そして区切られたフレーム内で見えている世界で何が表現できるのか? コンテンツもさまざま。つまり目的もさまざまです。考えるだけでワクワクしませんか?
とはいえ、「動きの表現」について本の中で解説するのは難しいことです。でも、その解消は難しいことではなくなりました。Web上で動画として見ていただければ、それだけで納得いただけるはずです。本書が企画された意義もそうしたインフラが整ってきたことを背景にしています。
本書で解説していることは、基礎知識である方法論とその組み合わせによる応用、そして実際の何かに当てはめた際にデザインとしてどのようなケースが考えられるか(内容に準じ)ということです。グラフィックは、ユーザーインターフェイス、デジタルサイネージ、さまざまなモバイルアプリケーションなど、知らぬ間に身近になっています。そうした世の中だからこそ日々力を養っておき、必要な折にはすぐに新しいアイデアが浮かぶよう心がけておくべきではないでしょうか。
本書の使い方
本書は、「図解力アップドリル」(ワークスコーポレション刊)と同様に、読者自らが手を動かして図や絵を描き、さらに写真や動画を撮ってプレゼン資料や映像作品を作ることで、動く図解力を身に付けていくことを目的としています。
そのため、学ぶ前の準備体操としての「INTRODUCTION」に加えて、理解を深めて実践につなげる「ドリル」、巻末には「プラクティス」を用意しました。ぜひ積極的に取り組んでください。それぞれの動く解答例は、Facebook 内のファンページ「図解力アップシリーズ」(http://www.facebook.com/zukairyoku/)に順次アップしていく予定です。本書やFacebookにある解答例だけが答えではありません。
自分の頭や手を動かして動く図解をたくさん作り、図解力をアップしましょう。
INTRODUCTION
「図 グラフィック」+「動き」は求められている?
「動く図解」と聞いてあなたは何を想像するでしょうか? ここでは「図解力アップドリル」と同じ題材を動かしてみます。動く図解の実際と可能性に触れてみてください。
Lesson 01
表現としての動き
モノゴトを伝えるルールを知ってから表現方法について考えてみよう。人はさまざまな表現手法によって動いていない表現でも、動いているものとして認識します。そんな視覚表現を演出に採り込んでみましょう。
Lesson 02
既存の動きの表現に学ぶ
グラフィックレイアウト、映像表現、アニメーション…。これらは既にある「動く図解表現」方法にあらためて学ぶべきポイントが詰まっています。基本的なことこそ疎かにできません。
Lesson 03
動く図解のデザイン
平面の上でも「動き」の演出が加わった図には3次元空間でのオブジェクト、または視点移動の概念を採り入れることが必要です。また、舞台演出からも空間表現を学びます。
Lesson 04
体験的な図解の表現
動く図解表現が理解できましたね。プレゼン資料のような具体的な形に落とし込んだときに必要なボタンやスライダーなどを使った動かし方について考えてみましょう。インタラクションの活用が表現の幅を広げます。
Lesson 05
動く図解の活用
図解と動きの関係がわかったうえで、具体的に視覚化できる形にしたときの例を紹介します。また、「Introduction」で紹介した実例について、本書の知識を通じてさらなる応用ケースを紹介します。
本書では、読者のみなさんに手を動かして図や絵を描く、また写真や動画といった
コンテンツも利用してプレゼンスライドの資料や動画に活用いただくことで、
「動く図解力」を身につけていただくことを目的としています。
そこで、本書の冒頭に準備体操の代わりとして「例題」(INTRODUCTION)を。
また、本編には解説するうえで例題に動きがあったほうが理解を得やすいコンテンツ。
巻末には「プラクティス」を用意しました。ぜひ、積極的に取り組んでください。
なお、それぞれの解答例は「Facebook」内のファンページ「図解力アップドリル」シリーズ
Facebookファンページ
に順次アップしていく予定です。
このサイトにアップされた解答例だけが答えではありません。
本書からさまざまなことをじっくりと学び取って自分の手を動かして、
動く図解力をアップしましょう!
目次
INTRODUCTION 「図 グラフィック」+「動き」は求められている?
まずは、「図解力アップドリル」の応用編であることを理解いただくため、同書と同じコンテンツを「動き」を加えることでどのように表現できるかを作例で紹介します。本書で解説する「動き」を理解いただく序文と捉えていただけると幸いです。
- 作例A:プレゼンテーション資料のインデックス資料を作成する
- 作例B:3つの概念からなる経営理念をアニメーションで表現する
- 作例C:事業案内ページに表示する3つのサービスを動く図解で表現する
- 作例D:企業の沿革を表現する
- 作例E:会社のこれまでの事業成績と今期予想を表現する
LESSON 01 表現としての動き
最初に覚えるべきは表現方法について。人は何を「動き」と感じるのか。視覚心理に踏み込んで検証しています。難しそうですが、後でしっかり役立つ内容です。
- 1-1 視覚表現の課題
- 1-2 表現と解釈の循環
- 1-3 動きを表現する
- 1-4 表現としての動き
- 1-5 定点撮影/視点移動
- 1-6 動きの質と速さ
- 1-7 視覚表現の中の動き
Lesson 02 既存の動きの表現に学ぶ
動きの表現を具体化するにも、先人のさまざまな手法、そこから学ぶべき表現方法があります。温故知新、そこに未来のアイデアもあるはずです。
- 2-1 伝達の道具としての表現
- 2-2 外的識別と内的識別/li>
- 2-3 レイアウトのルール
- 2-4 動きを表現する準備
- 2-5 動きと時間軸
- 2-6 カメラワークのいろいろ
- 2-7 動画の編集
- 2-8 人工的に作られる動き
- 2-9 アニメーションを創る
- 2-10 パントマイムの動き
- 2-11 動くイラスト再生装置
- 2-12 動きの観察と表現
- 2-13 アニマシー知覚
- 2-14 モーショングラフィックス
- 2-15 視覚表現の融合
Lesson 03 動く図解のデザイン
図が動くと、それはときに立体化して見えることも自然なことです。見ているのは区切られた平面のフレームの外側からではありますが、中の立体物が動くとどうなるでしょう。
動きの表現に視点移動の概念は外せません。
- 3-1 動く図解の表現方法
- 3-2 動く図解の種類
- 3-3 オーディエンスと舞台
- 3-4 動く図解の空間設計
- 3-5 始まり・中間・終わり
- 3-6 舞台演出になぞらえる
- 3-7 音の効果的活用
Lesson 04 体験的な図解のデザイン
動く図解の表現が理解できたところで、表現を具体的なコンテンツに活用した際に必要になるボタンやスライダー。その意義と動かし方について解説します。「動き」が「操作」に変わることで、インタラクションの意味合いが大きくなります。
- 4-1 インタラクティブな図解
- 4-2 動く図解のインターフェイス
- 4-3 図の構造とインタラクション
- 4-4 物語の構造を体験す
- 4-5 データの視覚化と動き
- 4-6 プロダクトに利用する
Lesson 05 動く図解の活用
最終章では、ここまで学んだ内容の応用として視覚化できる例として紹介します。そして、日々目にする紙媒体を「動く図解」として表現した場合のケースを紹介。みなさんのアイデアに光が灯るきっかけになればと思います。
- 5-1 経験としての動き
- 5-2 動くピクトグラム
- 5-3 動くグラフ
- 5-4 動くチャート
- 5-5 動く地図
- 5-6 動く図解 イラストレーション
- 5-7 ナレーションに合わせる
- モーションロゴタイプ
- 道案内の地図
- Web サイトのトップページ
- PR記事ページ
- 商品のPRページ(Webサイト)