はじめに
前回は、「情緒」をテーマに、見た目やスタイリングについて整理しました。
見た目は、ただの飾りではありません。
文字、写真、色、余白、ロゴ、音、トーンなどは、機能を伝える入口になります。
ただし、その情緒がきちんと機能するためには、それを支える骨組みが必要です。
どれだけ見た目が整っていても、情報の順番が分かりにくければ、相手は理解しにくくなります。
写真が良くても、どこで何を伝えたいのかが曖昧であれば、印象だけで終わってしまいます。
言葉が良くても、読む順番や配置が整理されていなければ、判断しにくくなります。
そこで今回は、「構造」について考えていきます。
ここで言う構造とは、制作物の形だけを指すものではありません。
誰に対して、何を、どの順番で伝えるのか。
どこで概要を理解してもらい、どこから詳細に入るのか。
どこで疑問が生まれ、どこで判断してもらうのか。
そうした理解の流れを、あらかじめ組み立てることです。
構造化とは、情報をきれいに並べることだけではありません。
相手が理解し、疑問を持ち、判断できる順番に物事を組み立てることです。
第1章 構造化とは、理解の順番を設計すること
構造化というと、複雑なものを整理することだと思われるかもしれません。
もちろん、それも大切です。
情報を分ける。
重複をなくす。
必要なものと不要なものを分ける。
全体を見やすくする。
そうした整理も、構造化の一部です。
ただ、それだけではまだ足りません。
大切なのは、相手がどの順番で理解するのかを考えることです。
作り手が伝えたい順番と、受け手が理解しやすい順番は、必ずしも同じではありません。
作り手は、すでに全体を知っています。
背景も知っています。
細かな事情も分かっています。
だから、いきなり詳細から話しても、自分の中ではつながっているように感じます。
しかし、受け手はそうではありません。
まず、何の話なのかを知る必要があります。
自分に関係があるのかを判断する必要があります。
全体像をつかんだ上で、少しずつ中身を理解していきます。
その順番を間違えると、情報そのものは正しくても、相手には伝わりにくくなります。
構造化とは、相手が理解できる順番に整えることです。
何を最初に見せるのか。
何を次に説明するのか。
どこで詳しく伝えるのか。
どこで判断材料を出すのか。
どこで行動につなげるのか。
この流れを設計することが、構造を作るということです。
この章の要点
構造化とは、情報をただ整理することではありません。
相手が理解しやすい順番に、情報を組み立てることです。
作り手の都合ではなく、受け手がどの順番で理解し、判断していくのかを考える必要があります。
第2章 まず大枠が見えなければ、細部は理解しにくい
構造を考える時に分かりやすいのが、新聞の見出しです。
新聞には、大見出しがあります。
中見出しがあります。
そして本文があります。
大見出しを見れば、まず何の話なのかが分かります。
中見出しを見れば、話の方向や内容のまとまりが分かります。
本文を読むことで、詳しい内容を理解していきます。
いきなり本文だけを読まされるよりも、先に大枠が見えている方が、読み手は理解しやすくなります。
これは、パンフレットでも、Webサイトでも、提案書でも、説明でも同じです。
最初に、何についての話なのか。
誰に関係する話なのか。
何を理解すればよいのか。
どこに向かって読めばよいのか。
そうした大枠が見えていないと、細部の情報は受け取りにくくなります。
逆に、大枠が見えていれば、細かな情報も理解しやすくなります。
たとえば、サービスの説明をする場合でも、いきなり機能の詳細を並べると、
相手は何を判断すればよいのか分かりにくくなります。
まず、このサービスは何のためのものなのか。
誰に向いているのか。
今までの何を変えるものなのか。
どのような流れで使うものなのか。
そうした全体像が見えてから、機能、料金、導入方法、
アフターサービスなどの詳細に入る方が、相手は理解しやすくなります。
構造を作る時には、まず大枠を見せることが重要です。
その上で、少しずつ中身へ進めていく。
概要から詳細へ。
全体から部分へ。
理解から疑問へ。
疑問から判断へ。
この流れを作ることで、相手は迷わず情報を受け取ることができます。
この章の要点
細部を理解してもらうためには、先に大枠を見せる必要があります。
新聞の大見出し、中見出し、本文のように、まず全体像を見せ、その後で詳細へ進むことで、相手は理解しやすくなります。
構造は、概要から詳細へ進む流れを作るための設計です。
第3章 台割りやサイトツリーは、構造化の具体例である
構造化について、まず制作物を例にして考えてみます。
パンフレットであれば、台割り。
Webであれば、サイトツリー。
画面設計であれば、ワイヤーフレーム。
動画編集であれば、構成台本、絵コンテ、カット割り。
これらは、いずれも完成形を作る前に、情報の流れや役割を整理するためのものです。
冊子やパンフレットでは、台割りを作ります。
台割りとは、どのページに、どんな内容を入れるかを整理する設計図です。
1ページ目では何を伝えるのか。
次のページでは何を補足するのか。
どこで詳しい説明に入るのか。
どこで実績や比較を見せるのか。
最後にどの行動へつなげるのか。
そうしたページごとの役割や流れを、あらかじめ整理しておきます。
似た考え方としてページネーションという言葉が使われることもありますが、
この回では細かく分けず、ページ全体の順番や構成を設計するものとして「台割り」として扱います。
Webであれば、サイトツリーがあります。
トップページに何を置くのか。
どの情報を下層ページに分けるのか。
サービス、実績、会社情報、問い合わせ、FAQなどをどう整理するのか。
相手がどの順番でページを見て、どこで判断するのか。
こうした情報の階層やページ同士の関係を整理します。
画面設計であれば、ワイヤーフレームがあります。
見出しをどこに置くのか。
本文をどこに置くのか。
写真や図版をどこに配置するのか。
ボタンをどこに置くのか。
どこで理解させ、どこで行動してもらうのか。
ワイヤーフレームは、完成デザインではありません。
色や装飾を決める前に、役割や配置、導線を確認するための骨組みです。
動画編集でも同じです。
構成台本や絵コンテ、カット割りによって、どの順番で何を見せるのかを整理します。
最初に何を見せるのか。
どこで説明するのか。
どこで感情を動かすのか。
どのタイミングで印象を残すのか。
動画も、ただ映像をつなげるだけではありません。
理解や感情の順番を設計する必要があります。
こうした制作物の例を見ると、構造とは、完成形を作る前の単なる下準備ではないことが分かります。
構造とは、情報や体験を、相手が受け取りやすい順番に組み立てるための設計です。
この章の要点
台割り、サイトツリー、ワイヤーフレーム、構成台本、絵コンテ、カット割りは、構造化の具体例です。
これらは、完成形を作る前に、情報の順番、役割、配置、導線を整理するためのものです。
制作物を例にすると、構造化とは、相手が理解しやすい流れを先に設計することだと分かります。
第4章 入れるべき要素を洗い出し、整理する
構造を考える時、いきなり順番を決めようとすると、途中で抜けや偏りが出やすくなります。
まず必要なのは、入れるべき要素を洗い出すことです。
たとえば、サービス紹介であれば、
サービスの全体像。
誰に向いているのか。
どんな課題を解決するのか。
どのような流れで使うのか。
導入前と導入後で何が変わるのか。
料金はどうなっているのか。
アフターサービスはあるのか。
困った時はどこに問い合わせるのか。
よくある疑問には何があるのか。
こうした情報を、まず一度出していきます。
この段階では、まだ順番を細かく決めなくてもよいと思います。
大切なのは、何を伝える必要があるのかを把握することです。
そして、洗い出した後には整理が必要です。
同じ内容が重複していないか。
別々の項目に見えて、実は同じ話をしていないか。
逆に、一つの項目にまとめているけれど、本来は分けた方がよい情報ではないか。
中心に置くべき情報なのか。
補足に回すべき情報なのか。
後半で扱うべき情報なのか。
Q&Aとして見せた方が分かりやすい情報なのか。
ここを整理していきます。
情報は、多ければよいわけではありません。
これまでの回でも触れてきたように、デザインでは、必要なものを残し、
不要なものを減らすことが大切になります。
ただし、それは単に少なくすればよいという意味ではありません。
情報が多すぎれば、何を見ればよいのか分かりにくくなります。
反対に、情報が足りなければ、相手は判断できません。
大切なのは、過不足なく揃っていることです。
必要な情報が、必要な場所に、必要な量で置かれているか。
説明しすぎていないか。
省きすぎていないか。
相手が理解し、判断するために必要な情報が残っているか。
ここを見ていく必要があります。
デザインは、余計なものを足して飾ることではありません。
必要なものを見極め、不要なものを減らし、過不足なく構成することです。
構造を考える時も同じです。
必要な情報が抜けていても成立しませんし、同じような内容が何度も出てきても、相手は理解しにくくなります。
また、作り手の中では違う情報だと思っていても、受け手から見ると同じ話に見えることがあります。
反対に、作り手の中では一つの話として扱っていても、受け手にとっては分けて説明された方が理解しやすい場合もあります。
だから、まず要素を出す。
そのうえで、重複、分離、統合、優先順位を整理する。
構造化とは、いきなり完成形を決めることではありません。
まず要素を見える状態にする。
そのうえで、役割と順番を整理する。
この段階を飛ばしてしまうと、見た目は整っていても、伝えるべきことが抜けていたり、読む人が判断しにくい構成になったりします。
この章の要点
構造を考える時は、まず入れるべき要素を洗い出す必要があります。
ただし、洗い出して終わりではありません。
重複している情報はないか、分けた方がよい情報はないか、中心に置くべき情報と補足に回す情報は何かを整理します。
情報は、多すぎても伝わりにくくなり、少なすぎても判断しにくくなります。
必要なものを見極め、不要なものを減らし、過不足なく構成することが大切です。
第5章 理解が進むと、疑問が生まれる
構造を考える時には、相手がどの段階で疑問を持つのかも考える必要があります。
人は、最初から的確な質問ができるわけではありません。
たとえば、先生が生徒に説明した後で、
「ここまでで何か質問はありますか」
と聞く場面があります。
説明会やセミナーでも、登壇者が参加者に向けて、
「ここまでの話で、何か質問はありますか」
と聞くことがあります。
もちろん、その時点で質問できる人もいます。
しかし、多くの場合、すぐには質問が出ないこともあります。
それは、疑問がないからとは限りません。
まだ、理解がそこまで追いついていない場合があります。
何が分からないのかが、まだ分からない場合があります。
自分に関係する話なのか、どこを判断すればよいのか、まだ整理できていない場合があります。
つまり、疑問は、理解が進んだ後に生まれることがあります。
ある程度話を聞く。
実際に手を動かす。
使ってみる。
比較してみる。
自分の状況に置き換えて考えてみる。
そうして初めて、
「これはどうなるのか」
「自分の場合はどうすればよいのか」
「もし壊れたらどうするのか」
「どこに問い合わせればよいのか」
「費用はどこまで含まれるのか」
という疑問が出てきます。
だから、情報を構造化する時には、最初から細かな疑問への答えをすべて並べればよいわけではありません。
まず概要を伝える。
次に中身を理解してもらう。
その後で、理解が進んだ人が持ちやすい疑問に答える。
この順番が大切です。
そして、ここには布石の考え方も入ってきます。
質問が出たら答えるのではなく、相手が後から考えそうなことを先回りしておく。
きっとここで不安になるだろう。
ここまで理解したら、次に料金が気になるだろう。
使い方を理解したら、導入後の流れを知りたくなるだろう。
購入や申し込みを考え始めたら、保証や問い合わせ先が気になるだろう。
そうした疑問を想定し、必要な場所にあらかじめ答えを置いておく。
これは、相手の身になって構造を作るということです。
たとえば、サービス紹介であれば、最初から料金、保証、細かな条件、
注意事項を並べすぎると、相手は全体像をつかみにくくなります。
まず、何のサービスなのか。
誰に向いているのか。
どんな課題を解決するのか。
導入すると何が変わるのか。
そこを理解した後で、料金、流れ、アフターサービス、保証、よくある質問、
問い合わせ方法などを見せる方が、相手は判断しやすくなります。
構造とは、情報を全部並べることではありません。
相手の理解がどこまで進んだ時に、どんな疑問が生まれるのか。
その疑問に、どの順番で答えるのか。
どこに先回りした説明を置いておくのか。
そこまで含めて設計することです。
この章の要点
人は、最初から的確な質問ができるわけではありません。
理解が進んで初めて、疑問が生まれることがあります。
だから構造化では、概要から詳細へ進み、理解が進んだ段階で出てくる疑問に答えられる順番を設計する必要があります。
想定できる疑問に先回りして答えを置くことは、相手の身になった提案につながります。
第6章 構造化は、言葉や提案にも使える
台割り、サイトツリー、ワイヤーフレーム、構成台本などは、制作物を例にした構造化です。
ただ、この考え方は、言葉や提案にも使えます。
たとえば、何かを提案する時に、いきなり
「これを作りましょう」
と言っても、相手は判断しにくいことがあります。
なぜそれが必要なのか。
今、何が問題なのか。
その問題はどこから生まれているのか。
どのように整理すればよいのか。
その結果、何を作る必要があるのか。
作った後に、何が変わるのか。
この順番があることで、相手は提案を理解しやすくなります。
文章でも同じです。
思いついた順番で言葉を並べると、書き手の頭の中ではつながっていても、
読み手には分かりにくくなることがあります。
まず結論を出すのか。
背景から入るのか。
具体例を先に見せるのか。
理由を説明してから提案するのか。
補足はどこに置くのか。
最後に何を判断してもらうのか。
この組み立てによって、同じ内容でも伝わり方は変わります。
抽象的な考えも同じです。
たとえば、「デザインは見た目ではない」とだけ言っても、人によって受け取り方は変わります。
なぜ見た目だけではないのか。
では、何を見ているのか。
目的、対象、認知、意図、順序、情報、識別、情緒はどう関係しているのか。
最終的に何を成立させるためなのか。
こうして分解し、順序立てて説明することで、抽象的な考えも理解しやすくなります。
言葉を伝える時。
提案を組み立てる時。
抽象的な考えを説明する時。
相手に判断してもらう時。
そこにも、構造が必要になります。
この章の要点
構造化の考え方は、制作物だけでなく、言葉や提案にも使えます。
何を先に伝え、何を後に説明し、どこで理解してもらい、どこで判断してもらうのか。
その順番を整えることで、伝わり方は大きく変わります。
第7章 構造があるから、情緒が機能する
前回の「情緒」では、見た目やスタイリングが機能を伝える入口になることを整理しました。
ただし、その情緒が機能するためには、支える構造が必要です。
どれだけ写真が良くても、どこで何を伝える写真なのかが曖昧であれば、印象だけで終わってしまいます。
どれだけ書体や色が整っていても、情報の順番が悪ければ、相手は理解しにくくなります。
どれだけ余白が美しくても、何を見ればよいのか、どこへ進めばよいのかが分からなければ、行動にはつながりません。
情緒は、構造の代わりにはなりません。
構造があるから、情緒は役割を持てます。
どこで印象を作るのか。
どこで概要を理解してもらうのか。
どこで詳細に入るのか。
どこで疑問に答えるのか。
どこで判断してもらうののか。
どこで行動につなげるのか。
その骨組みがあるから、写真、文字、色、余白、トーン、ロゴ、音などの情緒的な要素も、意味を持ちます。
情緒が入口だとすれば、構造はその奥にある道筋です。
入口が魅力的でも、奥の道筋が整理されていなければ、相手は途中で迷ってしまいます。
逆に、道筋が整理されていれば、情緒はより強く機能します。
見た目が良いだけではなく、理解しやすい。
印象が良いだけではなく、判断しやすい。
雰囲気があるだけではなく、次の行動へ進みやすい。
その状態を作るために、構造が必要になります。
この章の要点
情緒は、構造の代わりにはなりません。
構造があるから、情緒は役割を持ちます。
見た目やスタイリングを機能させるためには、理解、疑問、判断、行動へつながる骨組みが必要です。
第8章 構造は、関係性を見るための土台になる
構造を作ると、次に要素同士のつながりが見えてきます。
見出しと本文。
写真とコピー。
概要と詳細。
疑問と回答。
ページとページ。
Webとパンフレット。
説明と行動。
それぞれが、単体で存在しているわけではありません。
見出しは、本文へ入るための入口になります。
写真は、コピーの理解を助ける役割を持つことがあります。
概要は、詳細を理解するための前提になります。
Q&Aは、理解が進んだ後の疑問に答える役割を持ちます。
問い合わせ導線は、判断した後の行動につながります。
構造を作ることで、こうした要素同士の関係が見えやすくなります。
逆に、構造がないまま進めると、要素が単体で置かれやすくなります。
写真は写真。
文章は文章。
見出しは見出し。
ボタンはボタン。
それぞれが別々に存在してしまうと、全体としての流れが弱くなります。
構造は、要素を並べるためだけのものではありません。
それぞれの要素が、何のためにそこにあり、前後の情報とどうつながり、
最終的にどの理解や行動へ向かうのかを見えるようにするものです。
そのため、構造を考えることは、次の「関係性」を見るための土台になります。
第12回では、この「関係性」についてさらに整理していきます。
文字、写真、色、コピー、媒体、導線などが、それぞれどのように噛み合っているのか。
単体では良くても、全体としてつながっていなければ成立しない、ということを考えていきます。
この章の要点
構造を作ることで、要素同士の関係性が見えやすくなります。
見出し、本文、写真、ページ、導線、Q&Aなどは、それぞれ単体ではなく、理解や判断の流れの中で役割を持っています。
構造は、次の「関係性」を見るための土台になります。
おわりに
今回は、「構造」をテーマに、情緒を支える骨組みについて整理してきました。
前回の「情緒」では、見た目やスタイリングが、機能を伝える入口になることを扱いました。
ただし、その入口が機能するためには、情報の流れや役割が整理されている必要があります。
何を最初に伝えるのか。
どこで概要を理解してもらうのか。
どこから詳細に入るのか。
どの段階で疑問が生まれるのか。
どこで判断してもらうのか。
どこで行動につなげるのか。
こうした流れを組み立てることが、構造を作るということです。
構造化とは、情報をきれいに並べることだけではありません。
相手が理解し、疑問を持ち、判断できる順番に物事を組み立てることです。
パンフレットであれば、台割り。
Webであれば、サイトツリー。
画面設計であれば、ワイヤーフレーム。
動画編集であれば、構成台本、絵コンテ、カット割り。
これらは制作物の例ですが、考え方としては、言葉や提案にも使えます。
思いついた順番で伝えるのではなく、相手が理解できる順番に整える。
情報をすべて並べるのではなく、必要なものを過不足なく配置する。
理解が進んだ時に生まれる疑問を想定し、先回りして答えを置いておく。
そうすることで、伝わり方は大きく変わります。
構造は、表に見えにくいものです。
しかし、構造があるから、情緒は役割を持ちます。
構造があるから、情報は流れを持ちます。
構造があるから、相手は理解し、判断し、次の行動へ進みやすくなります。
情緒を支える骨組みを設計する。
それが、今回扱った「構造」です。
補足｜チェック項目
構造を考える時は、以下の項目を確認してみてください。
すべてを完璧に順番通り確認する必要はありません。
ただ、情報の流れが分かりにくい時や、提案が伝わりにくい時には、どこで構造が弱くなっているのかを見る手がかりになります。
- 何を伝えるものなのか、大枠は見えているか
- 誰に向けた内容なのかが明確になっているか
- 最初に伝えるべきことは整理されているか
- 概要から詳細へ進む流れになっているか
- 情報が思いついた順番で並んでいないか
- 入れるべき要素は洗い出されているか
- 必要な情報に抜けはないか
- 同じような情報が重複していないか
- 分けた方がよい情報を、無理に一つにまとめていないか
- 中心に置く情報と、補足に回す情報は分かれているか
- 情報量は多すぎないか
- 情報量は少なすぎないか
- 相手が判断するために必要な情報は残っているか
- 理解が進んだ後に出る疑問を想定できているか
- Q&Aや補足を置く位置は適切か
- 料金、保証、問い合わせ先などを見せる順番は適切か
- 台割りやページ構成で、ページごとの役割は整理されているか
- サイトツリーで、情報の階層は整理されているか
- ワイヤーフレームで、見出し、本文、写真、ボタンの役割は見えているか
- 動画の場合、構成台本やカット割りで理解や感情の順番は設計されているか
- 言葉や提案も、相手が理解しやすい順番になっているか
- 情緒的な要素が、構造の中で役割を持っているか
- 構造によって、要素同士の関係性が見える状態になっているか