第1章「デザインの要素」〜人工知能と商業デザイン

[非公開ページ]

確認用リスト:

※「関連タグ」は、作業用のタグです。パソコンを使う時間がなかなか確保できないため、スマートフォンで作業できるように一時的に付加しています。

更新日:2017年2月12日



1. レイアウト


レイアウト(Layout)は、雑誌、新聞、書籍などの印刷媒体からインテリア、建築などの空間デザインまで、さまざまな領域で実践されているデザインの一機能である。基本は「配置」することだが、複数の要素を空間に置きながら「秩序をつくる」ことで、機能性を高めたり、美しさを演出することができる。



【関連タグ】:整列ブロックカラム秩序


戻る


2. 空間レイアウト


平面のレイアウトはX軸(水平)、Y軸(垂直)上で配置していくが、空間のレイアウトにはZ軸(奥行き)が加わる。正面から見て均等に並んでいるように見えても、真上から見るとZ軸上では異なる位置に置かれている。平面レイアウトで奥行き感を表現したいときは、Z軸を頭の中で描き擬似3D化することになる。



【関連タグ】:回覧性


戻る


3. 回覧性


「回覧」とは移動しながら見て回ること。デパートやショッピングモールなどは、利用者の回覧性を重視する。例えば、人気の物産展や著名人のイベントなどを最上階で開催し、エスカレーターで昇り降りする際、店内を回遊してもらうための動線をつくる。購買行動を促進させるための「動線づくり」は空間レイアウトの基本である。



【関連タグ】:空間レイアウト動線


戻る


4. 動線


起床して洗顔、トイレ、食事を終えて外出など、家のなかで行ったり来たりする動きを線で示したデータを「生活動線」と呼ぶ。このデータを活用することで、使用頻度の高い経路を優先して廊下を短くしたり、リビングへの通路を複数用意するなど、住みやすい家に改善していくことが可能だ。商業施設でも動線計画が実行されている。



【関連タグ】:回覧性空間レイアウト


戻る


5. 秩序


一定の規則や関係のなかで調和が保たれている状態を「秩序」と捉えることができる。システマティック(systematic)なデザイン、つまり系統的もしくは体系的なデザインを語るときにも用いられる。新聞や雑誌レイアウトは、単に見映えよく要素を並べているのではない。そこには秩序があり、伝えたいメッセージが込められている。



【関連タグ】:レイアウト整列


戻る


6. 主見出し


記事で伝えたいことを訴える重要な見出し。脇見出しとセットで使う「2本見出し」の一要素。主見出しのみ使う場合は「1本見出し」となる。新聞は、書籍のようにじっくり読ませるより、流し読みを可能にするテンポ良い視線移動を考慮したレイアウト設計が求められる。“イチオシ”の情報は目立たせ、それ以外の情報は網羅性で引き付ける。



【関連タグ】:脇見出しレイアウト


戻る


7. 脇見出し


主見出しとセットで使う「2本見出し」の一要素。主見出しの補助的な機能を持つ。新聞紙面は、雑誌よりも広く、情報密度も高い。また、記事は矩形におさまらずデコボコした形で構成されている。トップニュースは、主見出し、脇見出しが並び、前文が付く。大きな事件ほど、主見出しが太く、より大きくなり、記事の重大性を読者に伝える。



【関連タグ】:主見出しレイアウト


戻る


8. 整列


「列」をつくり「並べる」こと。学校を例にすると、体育の時間におこなわれる整列教育がわかりやすい。数十名の生徒が「列をつくり」名前の順(もしくは背の順)に「並ぶ」。整列はレイアウトの最も基本的な技術である。整列には「揃え」があり、右揃え、左揃え、中央揃え、上揃え、下揃えなどで、秩序を生み出すことができる。



【関連タグ】:秩序整理整頓整理整頓


戻る


9. 整理


理(物事の筋道、理屈、理論)をもって整えること。必要なもの、不必要なものを振り分ける作業。一般的には、後に整頓を付けて「整理整頓」と呼ぶ。物が散乱している部屋を整理するとき、最初にやることは、必要・不必要の振り分け、除去、清掃などである。いらないものを捨てるまでが「整理」だと考えてよいだろう。



【関連タグ】:整頓整理整頓整列


戻る


10. 整頓


整った状態にすること。どこに何があるか、必要なものをすぐに取り出せるか、などの環境を整備する作業。一般的には、前に整理を付けて「整理整頓」と呼ぶ。部屋の掃除を例にすると、いらないものを捨てるまでが「整理」、取り出しやすいように機能性を高めて配置することを「整頓」と考えてよい。誰もが行う日常的な行為である。



【関連タグ】:整列整理整理整頓


戻る


11. 整理整頓


「整理」+「整頓」であり、整頓+整理でない。散らかったものを片づける場合、まず不必要なものを捨て、使用頻度や物の大きさ、形状を考慮しながら、並べたり収納する。片づけたあとに必要、不必要を分けるのは効率がよくない。どの国でも、子どもの頃から「整理整頓」の教育を受ける。整理整頓を学ぶことでレイアウト感覚も養われる。



【関連タグ】:整理整頓整列レイアウト


戻る


12. ヨゼフ・ミューラー=ブルックマン


Josef Müller-Brockmann(1914年〜1996年)は、スイスのデザイナーである。1953年作成のポスター「proteggete ibambini !」は、フォトモンタージュを使った斬新な表現でよく知られている。グリッドを使った要素配置を体系的にまとめた「Grid Systems in Graphic Design」は世界中のデザイナーのバイブルになっている。



【関連タグ】:ブロックカラムモジュールレイアウト


戻る


13. ブロック


ブロック(block)は、かたまり、まとまりを意味する。テキストのまとまりを「テキストブロック」と呼ぶなど。情報を積み上げていくイメージで捉えることもできる。文芸書などは1つのブロックに流し込むことで完成する。紙面が広い場合は、1行の文字数が増えて読みづらくなるため、ブロックを分割して調整する。分割された領域は「カラム」と呼ぶ。



【関連タグ】:カラムモジュールレイアウト


戻る


14. カラム


カラム「column」は列を意味する。グリッドには、横方向の「行」と縦方向の「列」があり、カラムは縦方向に分割された領域である。複数のカラムを構成していく手法を「マルチカラムレイアウト」と呼ぶ。2つのカラムで2カラム(2段組み)、3つのカラムで3カラム(3段組み)の段組みレイアウトが構築される。



【関連タグ】:ブロックモジュールレイアウト


戻る


15. モジュール


モジュール(module)は構成部品を意味する。電子機器などでは、規格化されている交換可能な構成部品をモジュールと呼ぶ。サイズや形状が異なる複数の要素を配置しなければいけない場合、カラムを増やして水平線(フローライン)を追加するが、この水平垂直のラインによって小さな区画ができる。この小さな区画が「モジュール」である。



【関連タグ】:ブロックカラムレイアウト


戻る


16. 錯視


同じサイズ・形状の要素を整列させる場合は均等配置でよいが、サイズや形状が異なる要素を等間隔に並べるには(等間隔に並んでいるように見せるには)、「錯視」を意識して配置しなくてはいけない。作図ソフトの均等配置機能で整列させることは簡単だが、錯視によって傾いているように見えた場合は、手作業によって位置を調整する必要がある。



【関連タグ】:整列地と図


戻る


17. 規則性


一定のルールに従っていること。日常生活で使われている「規則正しい」生活とは、起床や就寝、食事の時間などが一定で変わらないことを意味しているが、デザインの統一感についても同様の解釈でよい。規則性のあるデザインには安定感があり、機能美を生み出す。規則性が乏しいデザインは不安定な印象を与えてしまうことがある。



【関連タグ】:秩序ブロック整列


戻る


18. SN比


有効な信号(Signal)と雑音(Noise)の量の比率。電気工学などの分野で使われる用語だが、デザインの分野でも評価情報を表すときに使うことがある。雑誌などでは、記事コンテンツ以外の装飾情報が多いと、うるさい紙面になる。ページ全体が装飾パターンで敷き詰められていたり、罫線や飾りが必要以上に含まれているとSN比が高くなる。



【関連タグ】:ノイズ、スキュアモーフィックデザイン


戻る


19. ノイズ


ノイズ(Noise)とは騒音や雑音のこと。ノイズとなる成分を減少させることを「ノイズリダクション」と呼ぶ。ページデザインでは、視認性や可読性に影響が出てしまう過剰な装飾などをノイズ要素として判別することができる。総量を減らすこと以外では、装飾要素の彩度を下げたり、適度にデフォルメすることで軽減できる。



【関連タグ】:SN比、垢抜けない感じ


戻る


20. 地と図


背景領域と意味要素の関係(「ルビンの壷」が有名)。人は雑誌や新聞を読むとき、ぼんやりと全体を俯瞰しながら、特定の場所に注意を向けている。注意が向かない(明確な形がない)領域を「地」と捉えることができる。偶発的に発生した「余白」や、ページの視覚的な魅力を引き出す意図でつくり出す「ホワイトスペース」などがある。



【関連タグ】:重量


戻る


21. 重量


物の重さのこと。重みを感じさせる表現(配置や配色など)を「重量感」という言葉で表すこともある。球体を描き、一方を黒、もう一方を白にすると、前者のほうが重量感のある球体になる。ページデザインでも、本文に太字を多用したり、カラムとカラムの間隔が狭い場合、読者に対して圧迫感を与え、ページ全体も重たい紙面になる。



【関連タグ】:地と図カラムブロック


戻る


22. ポスター


壁や柱などに貼られる告知・宣伝のための媒体のこと。カタログやチラシのように手で持って見る配布物ではなく、掲示され、離れて見ても内容が理解できるようにデザインされている。広告・広報だけではなく、選挙ポスターやアイドルのグッズとしてつくられるポスターなどさまざま。都市部などでは、デジタルサイネージが普及している。



【関連タグ】:レイアウト地と図


戻る


23. 挿し絵


書籍や雑誌で使われる構成要素の一つ。小説などの文芸書では、作品の世界観を形づくる重要な要素となる。雑誌のコラムなどでは、補足要素や興味をひくためのビジュアル要素として使われることが多い。コンテンツを補助する「意味を持つ」挿し絵と、コンテンツとは結びつかない「イメージ」を与えるだけの挿し絵がある。



【関連タグ】:SN比、情緒的価値


戻る


24. 飾り罫線


部分を目立たせる目的で使われるが、情報を分割する「区切り線」としての機能も持つ。タイトルや記事の見出し、段落と段落の間などに置かれ、実線や破線、点線などがある。また、小さな図形やアイコンを水平(もしくは垂直に)並べて表現することも可能だ。ただし、過度に使いすぎると、ノイズになってしまうので注意が必要。



【関連タグ】:SN比ノイズ


戻る


25. デザイン構成力


雑誌の記事にはプロの写真家が撮影した高品質な写真が使われているが、素人が撮ったイメージ写真と入れ替えてみてほしい。印象がまったく異なるはずだ。記事の内容が同じでも、ビジュアルの品質が低いとコンテンツの信頼性にも影響を与える。どんなに素晴らしいテキストでもデザイン構成力が乏しいとすべてを台無しにしてしまう。



【関連タグ】:SN比、コンテキスト、”トンがった”雑誌


戻る


26. 比較広告


比較広告は家電製品や自動車、PCのアプリケーションソフト、健康食品、飲料水など、さまざまな分野で使われているアドバタイジングの手法。自社の古い製品と比較する広告も含まれる。有名な事例としては、ペプシコーラが展開したコカ・コーラとの比較広告など。自社製品の優位性を強調したいとときに大きな効果がある。



【関連タグ】:デザイン構成力、万人向け


戻る


27. 写植


写真植字の略称で、写真植字機によって文字を印画紙に写す仕組み(写研やモリサワなどが代表的なメーカー)。1980年後半からDTPが普及し始めるが、それ以前はデザイナーが写植を注文し、版下原稿に切り貼りしていたのである。当時は「日本の印刷レベルは高い、そう簡単にDTPは普及しない」といった否定的な意見も多かった。



【関連タグ】:CSSによる視覚表現、グレートデカップリング


戻る


28. メタモルフォーゼ


メタモルフォーゼ(metamorphose)とは、変形・変態の意味があり、カタチが次々と変化していくアニメーション技法でもよく使われる言葉。ウィンドウの大きさや比率に合わせてページレイアウトが変化していくWebレイアウト(Responsive Web Design)などは、まさにメタモルフォーゼを具現化したものだと言える。



【関連タグ】:伸縮可能なデザイン、Responsive Web Design


戻る