レイアウトデザイン、 情報デザインのロジックを学 …layout design...
TRANSCRIPT
ジャグラBＢ番組視聴用資料
レイアウトデザイン、情報デザインのロジックを学ぶ
講 師スタジオ・ファクトリーツー高柳ヤヨイ氏
2
おことわり
本番組の映像・音声ならびに配付資料に関する全ての権利は、夫々の著作権者が有しており、
これらは「ジャグラBB」の契約者のみに視聴・閲覧が許されています。
従って該当著作物の全てあるいはその一部分でも、複製、改変、放映、有線放送などすることは、
権利者に多大な損害を与えるため、法律により固く禁止されています。
レイアウトデザイン、情報デザインのロジックを学ぶ
Table of Contents01 レイアウトデザイン序論 02 情報デザインの情報の特徴 03 情報の整理と編集 04 レイアウトのロジック、レイアウトのさまざまな表情
■ 講師・高柳ヤヨイ氏のプロフィール
スタジオ・ファクトリーツー代表取締役。東京外国語大学卒。コロムビアレコード勤務後、米国へ留学。California Institute of the Arts映像学科を経て、School of Visual Arts MFA Computer Art学科修士課程を卒業。帰国後、数々のデジタルメディア制作に携わり、2003年、スタジオ・ファクトリーツー設立。各種教育機関での講師経験も豊富で、現在、東海大学短期大学部 情報・ネットワーク学科非常勤講師を務める。デザイン関連の書籍執筆も多く（現在までに14冊刊行）、Webデザインに関した「ひらめきブック」の2冊は台湾でも翻訳刊行されている。最近の著書は「DREAMWEAVER8による至極のCSSレイアウトデザイン！パーフェクトブック。」。
※本番組の内容は「レイアウトのデザインを読む。情報デザインのロジックを学ぶ」（高柳ヤヨイ著、ソシム刊行）からの抜粋になります。© 高柳ヤヨイ
3
01 レイアウトデザイン序論
01-1 「レイアウトをする」行為01-2 レイアウトデザインについて
01 レイアウトデザイン Layout Design -Introduction
■ レイアウトとは？紙面やホームページに、情報を文字やイメージに変換し、配置する技術。
■ 上手なレイアウトとは？ 伝える相手に伝わりやすく、適切なムードで情報内容が伝達できるレイアウト。
■ レイアウトデザイン 紙面やホームページを通して、伝える相手に内容を伝達するコミュニケーションデザイン。
01-1「レイアウトをする」行為Introduction
「レイアウトをする」行為は、情報を伝える相手との、コミュ二ケーションを図る行為。レイアウトされた紙面はコミュニケーションの設計図面となる。
Point !
レイアウトデザイン、情報デザインのロジックを学ぶ
5
「レイアウト」は、情報というコンテンツが宿る家の役割。「デザイン」は、①誰に ②何を ③どう伝えるか 考える行為。レイアウトデザインは、情報の意を解釈し、相手によりよい対話を促進。
Point !
■ 上手なレイアウトのために必要なことは？ コミュニケーションを円滑に図るための創意工夫を考えること。
■ レイアウトとは？ 情報というコンテンツが宿る家のような役割。
■ デザインとは？①誰に ②何を ③どう伝えるか考える（プランニングする）行為であり、意匠とも呼ばれる。
■ レイアウトデザインの作業とは？情報をよく理解し、構造化した上で、デザインという意匠によって組み立てられていく作業。
01-2 レイアウトデザインについて Introduction
レイアウトデザイン、情報デザインのロジックを学ぶ
6
02 情報デザインの情報の特徴
02-1 情報とは？02-2 情報の特徴、モテる情報02-3 情報の目的02-4 宣伝する情報02-5 説明する情報コラム 媒体別情報とレイアウトの特徴
02 情報デザインの情報の特徴 Characteristics of Information Design
「情報」とは、断片的データからターゲットを必要とするものまで多岐。レイアウトデザインのファーストステップは、情報の要点をつかみ、重要性を構造化し、情報提供の目的を確認。編集において「質」を作る。
■ 情報とは？ブログのように明確なターゲットを必要としないデータ的なものから、ターゲットに対して提供するコンテンツまでを含む。
■ レイアウトデザインのファーストステップは？ ①情報の要点をつかむ、②情報の重要性を構造化する、③情報提供の最終目的の確認
■ 情報編集の作業の必要性明確なターゲットがいる場合において必要不可欠な作業。情報は、その事実をそのままに述べるのではなく、
「質」を提供し、受け手の情動を動かすようにアレンジする。
Point !
02-1 情報とは？ Information
レイアウトデザイン、情報デザインのロジックを学ぶ
8
モテる情報とは、ターゲットに対して情報の脚色がある。「伝わるための情報」とは、ターゲットとのコミュニケーションを前提として、受け手の興味度、理解度を意識した情報。
■ 情報の「質」とは？ 情報が（ターゲットにとって）「面白い」「わかりやすい」「納得できる」といった興味度、理解度を喚起できるもの。
■ 口述で可能な情報提供方法は？ ターゲットの趣味嗜好に合うように、モノの価値をウケるように説明できる。脚色が可能。
■ レイアウトの中の情報はどうあるべきか？ ターゲットにウケる、モテるように魅力あるように情報をまとめる。
■ 伝わるための情報」とは？コミュニケーションのために、受け手の興味度、理解度を意識した情報。
Point !
02-2 情報の特徴、モテる情報 Characteristics of Information
レイアウトデザイン、情報デザインのロジックを学ぶ
9
情報の「目的」とはターゲットに何らかの価値を与えるためのゴール。コミュニケーションのために情報がもっている目的は、情報がもっている内容を「 宣伝する 」と「 説明する 」に大別することができる。
■ 情報の「目的」とは？情報の「質」で与えられた理解に対して、相手が何らかの価値を受け取ることができるというそのゴール。
■ コミュニケーションのために情報がもっている「目的」には？ 情報がもっている内容をターゲットに「宣伝する」と「説明する」の2つに大別できる。
■「宣伝する」目的をもった情報は？ターゲットに商品を広め、売るという意図ある広告に密接。ぱっと見でアトラクションを引く必要がある。
■「説明する」目的をもった情報は？受け手の理解度をステップバイステップでチェックし、最終ゴールまでガイダンスする。
Point !
02-3 情報の目的 Goal of Information
レイアウトデザイン、情報デザインのロジックを学ぶ
10
「宣伝する」目的をもった情報は、商品を売るための広告と結びつく。消費者の心理過程の仮説を表した法則が「 AIDMAの法則 」。このタイプのレイアウトでは、消費者の心理をぐっと掴む必要がある。
■「宣伝する」目的をもった情報は何と結びつく？ターゲットに商品を広め、売るという意図ある広告と結びつく。
■ 消費者の心理過程の仮説を表した法則は？AIDMA（アイドマ）の法則。（右図）
■「宣伝する」目的をもった情報で、レイアウト上必要なことは？デザインの特異性、新しさ、視覚的造形の面白さが必要。
Point !
02-4「宣伝する」情報 Information to Advertize
レイアウトデザイン、情報デザインのロジックを学ぶ
11
「説明する」目的をもった情報のレイアウトには情報編集の作業が必要。「 わかりやすく、見やすく、読みやすい 」レイアウトがベスト。情報編集とレイアウト造形でこれらを作っていく。
■ 「説明する」目的の情報、三大指針とそれを支える各項目 「わかりやすく、見やすく、読みやすい」
02-5「説明する」情報 Information to Explain
Point !
① 情報の「質」の提供② 文章の整理③ 理解度の確認④ 重要点の強調
⑤ 読む順序⑥ 情報の適切な変換⑦ 感性の提供
情報そのものの問題 レイアウト造形の問題
※各項目の詳細は 次ページ参照
レイアウトデザイン、情報デザインのロジックを学ぶ
12
■「説明する」目的の情報、三大指針とそれを支える各項目
「わかりやすく、見やすく、読みやすい」
①情報の「質」の提供内容がターゲットに向けて提供されていること
②文章の整理種類や時間順・重要性・難易度等が検討されている
③理解度の確認情報がステップバイステップで読み手の理解度を確認
④重要点の強調読み返した際に重要なポイントがすぐキャッチできる
⑤読む順序読む順序が読み手が把握しやすく、レイアウトがヘルプ
⑥情報の適切な変換情報伝達のために文字やイメージが適切に調整
⑦感性の提供内容を気分よく理解できるようフィーリングが提供されている
情報そのものの問題 レイアウト造形の問題
レイアウトデザイン、情報デザインのロジックを学ぶ
13
ポスター
コラム 媒体別情報とレイアウトの特徴①Characteristics of Layout on Various Media
ぱっと見て面白い、目立つと思わせる情報デザインに。イメージとロゴとキャッチが主役となる。
14
チラシ
コラム 媒体別情報とレイアウトの特徴②Characteristics of Layout on Various Media
人を集める情報に。信頼感と親しみやさを作り、商品パッケージを魅力的に見せる。
15
カタログ
コラム 媒体別情報とレイアウトの特徴③Characteristics of Layout on Various Media
パンフレットなどは品目がわかりやすい情報に。複数の情報を落ち着いてわかりやすく見れる安定感が必要。
16
書籍、雑誌
コラム 媒体別情報とレイアウトの特徴④Characteristics of Layout on Various Media
書籍は、読む順序をわかりやすく整理した情報に。雑誌は、読者層に「刺激のある」情報に。ムード作りも大切。
17
03 情報の整理と編集
03-1 情報を編集する① 長い文章をリズムよくまとめる03-2 情報を編集する② リストを作る03-3 情報を編集する③ グループを作る03-4 情報を編集する④ ストーリーを作る03-5 情報の整理方法まとめ
03 情報の整理と編集How to Edit Contents and the Editorial Tips
■ 読み手を飽きさせない文章の一番のポイントは？文章を読んでいくテンションを最後まで保つ。
■ 文章構造の上でチェックすべきことは？読み手の理解力と興味を持続させ、アトラクションや休憩をいれるなど、読むリズム作りをする。
■ 文章のブロック化とは何？文章を小見出し、段落としてひとまとまりにし、読むテンポを同じにしながら、文章構成していくテクニック。小見出しはない場合もある。
03-1 情報を編集する①長い文章をリズムよくHow to Edit Contents –Rhythm of Sentence
Point !
読み手を飽きさせない文章の構造にすることが大切。「理解力」と「興味」を最後まで持続するように構造化する。読むテンポ作り のための 文章のブロック化 と 小見出し の設置。
読み手を飽きさせない文章の構造にすることが大切。「理解力」と「興味」を最後まで持続するように構造化する。読むテンポ作り のための 文章のブロック化 と 小見出し の設置。
レイアウトデザイン、情報デザインのロジックを学ぶ
19
03-1 情報を編集する①長い文章をリズムよくHow to Edit Contents –Rhythm of SentenceC
レイアウトデザイン、情報デザインのロジックを学ぶ
20
箇条書きは情報を記録し、見返す必要がある場合に行なう。リスト は読み手への 情報の重要性 を考慮して作る。リスト内文章は記憶し易く、最後にコンタクトがとりたくなるように。
箇条書きは情報を記録し、見返す必要がある場合に行なう。リスト は読み手への 情報の重要性 を考慮して作る。リスト内文章は記憶し易く、最後にコンタクトがとりたくなるように。
■ リスト作りで一番大切なポイントは？ 情報の重要性を考慮して作る。リスト順は丁寧に考える。ターゲットの理解度を考慮しながら作る。
■ リスト作りで大切なことは？ 読み手にとって論旨がつかみやすく、記憶しやすいということ。
■ どうしてリストは必要？箇条書きに情報をまとめるのは、その情報を見返す必要がある場合。重要性順に並べたものがリスト。
03-2 情報を編集する②リストを作るHow to Edit Contents –Making “Lists”
Point !
レイアウトデザイン、情報デザインのロジックを学ぶ
21
03-2 情報を編集する②リストを作るHow to Edit Contents –Making “Lists”
レイアウトデザイン、情報デザインのロジックを学ぶ
22
■ 情報のグループ化とは？ 複数のアイテム（項目）があり、それぞれに対して情報がある場合、それをグループとしてひとつにまとめる編集方法
■ グループ化で一番大切なポイントは？ 読み手が他情報と同じ情報を比べやすいように首尾一貫性のあるまとめ方をすること。
■ どんな場合にグループ化は必要？グループ化される情報は、読み手にとって、どれかを選ばせるような場合であり、イメージや文字から情報が構築されている場合。
03-3 情報を編集する③グループを作るHow to Edit Contents –Making “Group”
Point !
複数のアイテムに対して同類情報がある場合 に行なう。他情報と比較がしやすいようにスタイルを統一する。首尾一貫性を保ったスタイル重視のグルーピング
複数のアイテムに対して同類情報がある場合 に行なう。他情報と比較がしやすいようにスタイルを統一する。首尾一貫性を保ったスタイル重視のグルーピング
レイアウトデザイン、情報デザインのロジックを学ぶ
23
03-3 情報を編集する③グループを作るHow to Edit Contents –Making “Group”
レイアウトデザイン、情報デザインのロジックを学ぶ
24
ストーリーとは手順などを 一定のリズムのブロック で区切って説明する方法。通常 番号が冒頭 に。コツは手順が難しくないよう読み手を導くこと。
ストーリーとは手順などを 一定のリズムのブロック で区切って説明する方法。通常 番号が冒頭 に。コツは手順が難しくないよう読み手を導くこと。
■「ストーリーを作る」とは？ 操作手順をステップでまとめて、一定の操作をあるところで区切り、ブロック化して、通常冒頭には番号をつけて見出しを設定する。
■「ストーリーを作る」編集で大切なことは？ 手順がむずかしくないよう、心理的複雑さを与えないような見出し設定。
■ どのようなものが「ストーリーを作る」情報編集にふさわしい？読み手が難解なものを覚える場合、それを手順化するとやさしい流れができる。始めて何かにトライするような場合も同様。
03-4 情報を編集する④ストーリーを作るHow to Edit Contents –Making “Story”
Point !
レイアウトデザイン、情報デザインのロジックを学ぶ
25
03-4 情報を編集する④ストーリーを作るHow to Edit Contents –Making “Story”
レイアウトデザイン、情報デザインのロジックを学ぶ
26
「宣伝する」部分と「説明」する部分に気をつけて、4つの方法で情報編集整理
情報の整理方法
宣伝する要素が入る内容をアピールするための工夫を作る。読み手をひきつける導入部分を作る。
説明する要素が主体「情報の種類・時間順・重要度・難易度などを主旨に応じて整理する。そしてリスト化する。
説明する要素が主体リスト化した情報に時間順序がある場合はストーリーを作り手順解説する。
説明する要素が主体情報内に同類情報がいくつかある場合はそれぞれの情報をブロック化する。
情報を編集するということは、情報をさまざまな尺度でまず 批判 してみることが大切。説明目的の情報 と 宣伝目的の情報 を見分けて、情報整理 する。
情報を編集するということは、情報をさまざまな尺度でまず 批判 してみることが大切。説明目的の情報 と 宣伝目的の情報 を見分けて、情報整理 する。
03-5 情報の整理方法まとめSummary of How to Edit Contents
Point !
レイアウトデザイン、情報デザインのロジックを学ぶ
27
04 レイアウトのロジック、レイアウトのさまざまな表情
04-1 版面率と余白04-2 仮想のグリッドライン04-3 グリッド拘束率04-4 文字組04-5 イメージ04-6 レイアウトの表情コラム レイアウト制作のフロー
04 レイアウトのロジック、レイアウトのさまざまな表情 Logic of Layout, -the feelings
Point!
04-1 版面率と余白Layout: The Space of Contents
矩形の紙面に、どの位の情報量を盛り込むかを考える。
版面はレイアウトの基本フォーマットであり情報量の調整と余白により、レイアウトの演出が可能
矩形の紙面に、どの位の情報量を盛り込むかを考える。
版面はレイアウトの基本フォーマットであり情報量の調整と余白により、レイアウトの演出が可能
Point !
レイアウトデザイン、情報デザインのロジックを学ぶ
29
上マージン
下マージン
右マージン
左マージン
04-1 版面率と余白Layout: The Space of Contents
レイアウトデザイン、情報デザインのロジックを学ぶ
30
04-2 仮想のグリッドラインLayout: Grid
Point !
グリッドによりレイアウトに規則正しい文章のブロックが生まれる。
機能的な造形パターンを作ることができる。
グリッドによりレイアウトに規則正しい文章のブロックが生まれる。
機能的な造形パターンを作ることができる。
レイアウトデザイン、情報デザインのロジックを学ぶ
31
04-3 グリッド拘束率Layout: Grid
Point !
グリッドに拘束するとはグリッドに忠実に文字やイメージを配置すること。
グリッド拘束率が高いか低いかで、レイアウトの印象が変わる。
グリッドに拘束するとはグリッドに忠実に文字やイメージを配置すること。
グリッド拘束率が高いか低いかで、レイアウトの印象が変わる。
レイアウトデザイン、情報デザインのロジックを学ぶ
32
04-4 文字組Layout: Balance of Each Letters
どのような文字の種類とサイズ・行間など、情報を文字で表現する技術が文字組。
本文を中心として、わかりやすさと雰囲気を提供できるよう配慮。
どのような文字の種類とサイズ・行間など、情報を文字で表現する技術が文字組。
本文を中心として、わかりやすさと雰囲気を提供できるよう配慮。
Point !
レイアウトデザイン、情報デザインのロジックを学ぶ
33
04-5 イメージLayout: Image
Point !
イメージには強弱があり被写体の大きさ、コントラストなどには注意。イメージに方向がある場合は、配置に注意する。
イメージには強弱があり被写体の大きさ、コントラストなどには注意。イメージに方向がある場合は、配置に注意する。
レイアウトデザイン、情報デザインのロジックを学ぶ
34
レイアウトの印象
版面率 余白量 グリッド拘束率
文字組 イメージ レイアウトの印象
版面率 余白量 グリッド拘束率
文字組 イメージ
すっきりした
大きくしない程度にまとめる
比較的とる
ある程度はグリッドに拘束
ジャンプ率は小さく
図版の数は少なめ
男性的 大きくしない程度にまとめる
比較的少なめ
グリッド拘束率は高めにする
現代的書体とジャンプ率は大
ジャンプ率は大きくてよい
上品な 小さくする
たっぷりとる
ある程度はグリッドに拘束
ジャンプ率は小さく
ジャンプ率は小さくまとめる
シンプルな 大きくしない程度にまとめる
比較的とる
グリッド拘束率は高めにする
現代的書体と規則性を出す
ジャンプ率は小さくまとめる
高級感のある
大きくしない程度にまとめる
たっぷりとる
グリッドに拘束させる
高級感のある書体を使用
ジャンプ率は大きくてもいい
にぎやかなカジュアル
大きくする
少なめにする
グリッドフリーの方がよい
ジャンプ率は大きく
切り抜きなどを自由に使う
やさしい、ソフトな
大きくしない程度にまとめる
比較的とる
ある程度はグリッドに拘束
ジャンプ率は小さく
ソフトなイメージで左揃え
楽しい、ポップな
大きくする
少なめにする
グリッドフリーの方がよい
文字よりはイメージを多用
ジャンプ率を大きくフリーに
穏やかな 大きくしない程度にまとめる
ゆったりとした量をとる
ある程度はグリッドに拘束
ジャンプ率は小さくソフトに
図版数は少なく、小さめに
力強い 大きくする
比較的とる
グリッド拘束させた方がいい
ジャンプ率は大きく
ジャンプ率は大きく中央揃え
かたい、フォーマルな
大きくしない程度にまとめる
比較的少なめ
グリッド拘束率は高めにする
現代的書体と規則性を出す
図版の強弱やリズムを出す
インパクトのある
大きくする
コンセプト次第どちらでもOK
コンセプト次第どちらでもOK
ジャンプ率は大きく
ジャンプ率は大きく中央揃え
04-6 レイアウトの表情Feelings of Layout
レイアウトデザイン、情報デザインのロジックを学ぶ
35
コラム レイアウト制作のフローFlow of Making Layout ( DTP )
1
2
36
3
コラム レイアウト制作のフローFlow of Making Layout ( DTP )
4
37
レイアウトのデザインを読む。情報デザインのロジックを学ぶ
高柳ヤヨイ 著
38
Theory of Information Design and LayoutWritten by Yayoi Takayanagi
参考書籍のご案内
発行：ソシム体裁：A5判、264ページ価格：1995円（税込）
ISBN4-88337-399-1
目 次01 情報を考える02 情報を編集する03 レイアウトの基礎知識04 レイアウト制作のフロー05 レイアウトの造形的視覚美06 レイアウトのデザイン実践