「レイアウト・デザインの教科書」を読んだ

投稿時刻2024年11月26日 16:06

「レイアウト・デザインの教科書」を 2,024 年 11 月 26 日に読んだ。

目次

メモ

②レイアウトの型を知る p16

レイアウトには型があります。
型通りに作ることでレイアウトをすばやく、読みやすく、高品質に作ることができます。
本書のChapter2以降にはたくさんの型がぎっしりと詰まっていますので参考にして作ってみるとよいでしょう。
実作業では、写真のサイズや構図、テキストの長さなど素材によって型通りに作ることはできないかもしれません。
しかし、型に合わせて大枠を作ってみた後に、素材に合わせて調整していくと比較的早くわかりやすいレイアウトが完成します。

型を暗記するよりは、レイアウトを制作する時に随時あてはめて合うものを探すのがおすすめです。
実際に何度も試行錯誤を行いさまざまな型を使ってみると、このデザインにはこのレイアウトの型が合うということが体験として自然にわかるようになります。

COLUMN 優れたデザイナーはデザインのコレクター p24

例えば「○月○日に社会人向けワークショップを開催するので人を募集するポスターを作って欲しい」という依頼がクライアントからあったとします。

それに対してデザイナーはクライアントの要望に沿ったデザインを作っていくわけですが、いきなり完成形となるデザイン案がひらめく訳ではありません。
まず「イベントの募集」が目的であれば、クライアントの要望を正しく把握した上で、イベントの過去の制作物や関連するジャンルのデザインを収集して傾向をリサーチします。

また「社会人向け」「ワークショップ」というキーワードを元にイベント以外でもサンプルを探し集めてそれぞれのデザインを検証していきます。
どのような写真が効果的か、どんなレイアウトや配色、フォントがターゲットに魅力的な印象を与えるのかなど事例を整理分類しながら傾向と対策を考えていくのです。

このことからもわかるようにデザイナーという職種は日々デザインの収集が必要です。
どのような傾向のデザインを依頼されたとしても、収集したサンプルに参考となりそうなものがあれば、アイデア出しのヒントにすることができます。
デザイナーにはアーティストのようなひらめきや特殊な才能よりも、情報収集のスキルが求められています。

また、才能と混同されるやすいキーワードとして「センス」という言葉があります。
実際にデザインの経験が少ない人でもセンスがあればそこそこ良いデザインを作る場合があります。
それはなぜでしょうか。

センスとは「優れたデザインと、そうではないものを見極めるスキル」です。
普段から優れたデザインをよく見ている、もしくは優れたデザインに囲まれている環境にいれば、自然にセンスが磨かれていきます。
デザインの未経験者でもそういった人は、全くの素人よりも良いものを作る傾向があります。

これからデザインを勉強する人には普段から優れたデザインを見て集めていく習慣をつけることをおすすめします。

日常的に優れたデザインを見て分析することで「良し悪し」の判断が蓄積されて見極めができるようになっていくでしょう。
さらに収集を積み重ね集めたサンプルを深く知ることによって自然にセンスは磨かれていきます。

要素に適した整列にする p28

商品写真・商品名・価格を並べるようなレイアウトがあった場合には、商品の特徴を考えて整列するポイントを検討しましょう。

例えば、カメラ・ノート・時計のように机やテーブルに置くようなモノであれば下端で揃えると自然に見えます。

見る人は複数の商品を並べて比較するので、異なるグループであっても、商品同士を揃え、テキスト同士でも揃えると見やすくなります。

情報に区切りをつける p30

例えば、何かを説明する長い文章があったとします。
区切りのない文章は最初から最後まで読み終わらなければその内容は読む人は理解できません。

そこで長い文章を文の「まとまり」ごとに区切って見出しをつけてみます。
そうすると一気に文章が読みやすくなります。
見出しをつけるという手法は、情報を区切り読む人に「まとまり」の中身をわかりやすく伝える効果があります。

レイアウトでは関連のある要素をグループにまとめ近づけ、関連のないものを遠ざけることを「近接」と呼びます。
要素同士の近接を明確にすることによって見る人が情報をすばやく理解できるようになります。

情報の階層と余白をつける p30

例えば、オンラインショッピングでシャツを探しているとします。
この場合、まず男性か女性かという大きなグループから自分が該当するものを選びます。
次にトップスかボトムスかという中グループから前者を選び、さらにトップスの中にあるTシャツ・セーター・シャツなどの小グループから目的のものへと選択することになります。

情報は多くなればなるほど、大きいグループから小さいグループまで細かい階層に分ける必要があります。
見る人にとっては階層で分けた方が、目的に合った情報が探しやすく導くことができるからです。
さらに目的ではない情報をあえて読む必要がなくなることも見る人にとってはとても有益です。

近接を使ったグループの作り方 p32

近接を使い商品という「まとまり」のグループを作ります。
商品の「まとまり」の中で情報をグループに分けると、イラストとテキストのグループA、Bに分かれます。

次に商品名と値段・サイズは同じ階層になりますが、サイズの中に「XS/S/M/L」という小さなグループがあります。
大きなグループは距離が遠く、小さなグループは距離が近いというのが近接の原則です。

イラストとテキストのグループが最も遠く①、次に商品名と値段とサイズのグループが同じ間隔②、最も小さい「XS/S/M/L」のグループのサイズ内が一番近い間隔となります③。

グループ間の距離 p32

近接を使って1つの商品の「まとまり」ができたら次に他の商品との距離を検討します。
他の商品との距離はさらに遠い間隔で配置する必要があります。

右の上の図のように、もし「Blouse Black」のテキストと「Blouse White」のイラストが近づいてしまうと見る人は白いブラウスの便格を「¥10,000」と勘違いしてしまうおそれがあります。
もちろん冷静に内容を見ればそのような判断にはならないのですが、見る人が瞬時に判断できるように配慮しなければいけません。

近接による空間美 p32

右図の左の例は情報の階層と近接の距離がバラバラです。
どの階層に親子関係があり、「まとまり」がどのグループに属しているのか判断ができません。

一方、右の図の例は情報の階層に合わせて近接を施した例です。
一瞬で全体の階層が理解できるようになっています。
左の例は、わかりにくさ・不安定さを表しています。
右の例は見る人に優しく、空間バランスとしても美しく安定しています。

線による区切り方 p33

これまでの近接は要素と要素の間の余白で「まとまり」を作ってきましたが、この他にも近接を取る方法はあります。
罫線で区切る方法です。
要素間の間に罫線を挟むと両隣の要素は別のグループになります。

また、罫線は要素そのものを囲むことでより強く「まとまり」を表すことができます。
ただし罫線を多用すると二重の囲みになってしまい、見る人にとって非常にわかりづらいデザインになります。
全ての「まとまり」を罫線で囲むのではなく部分的に検討するとよいでしょう。

面による区切り方 p33

別の方法として、背景の面を色で塗る区切り方もあります。
「まとまり」毎に背景の面を塗り、グループ間に余白が入れば明確に区切られていることが見る人に伝わります。
背景の色は要素の色と混ざらないような配色を心掛ける必要があります。

情報の階層が深くなれば、その分区切る工夫が必要になります。
余白罫線・面をうまく使い分けて近接のレイアウトを作りましょう。

Webデザインの反復 p37

Webデザインでは1つのWebサイトの中で共通の要素を反復しています。
一般的にはヘッダと呼ばれるグローバルエリアです。
この部分がどのページにも同じ位置に配置されていることで見る人は迷わずにページを移動していけます。
またナビゲーションと呼ばれるリンクメニューも移動先の反復です。
ボタンが並ぶことで見る人は移動先の一覧だと認識します。

COLUMN 文字のカーニングを使った調整 p40

文字数を少なめにして、文字間のカーニングを狭めに詰めてあげると強調を作ることができます。
対して文字間のカーニングを広めに組んであげるとゆったりと見せることができます。
ジャンプ率に合わせて文字のカーニングを調整するとよいでしょう。

ジャンプ率が大きい場合はカーニングも詰めて組むことでコピーを強調できる。

ジャンプ率が小さい場合はカーニングをゆったり組むことで全体の統一感を出せる。

Webサイトの目的に合わせた優先 p45

Webデザインでは通常見る人にページの内容を読んでもらうだけでは目的を達成したことにはなりません。
例えば、オンラインショッピングのWebサイトがあったとします。
優先の順番としては、使う人に「どんなサービスなのか」、そして「どんな商品があるのか」といった説明をしていきます。
ただここまで誘導してもこのWebサイトのゴールは紹介ではありません。
購入してもらうことです。
使う人が購入ボタンを押して自分の情報を登録してもらうところまで誘導の先を考える必要があります。
つまり、購入ボタンを優先的に目立たせるレイアウトにすることがとても重要になってきます。

人物の目線 p48

レイアウトの中に人物の顔を配置した場合、その人物の目線とキャッチコピーの配置する場所によって見る人に伝わるメッセージが変化していきます。

右図の上の例では女性モデルの目線の先にアクセサリーの商品とキャッチコピーが配置されています。
このような配置の場合は、女性が商品に対してキャッチコピーを直接言葉で語っているような表現に伝わります。

一方、下の例では女性モデルの目線の後ろにキャッチコピーとアクセサリーの商品が配置されています。
このような配の場合は女性が頭の中でこの商品に対してキャッチコピーを想像しているような表現に伝わります。

同じようなデザインであったとしても人物の目線の前と後ろでは見る人への伝達の意味が異なっていきます。

数字による視線の誘導 p49

見る人への視線の誘導の仕方として、各要素グループに数字を割り当てる手法があります。
仮にそれぞれの要素グループがバラバラに配置されていても数字が割り振られていれば、見る人は順番にその要素グループをたどって読んでいきます。
例えば順番に読んでいくことでストーリーが進んでいくような内容の場合には、決まった順番にレイアウトを見てほしいのでこの手法は有効的です。

Webデザインの目線の流れ p49

Webデザインでは「ブラウズ」という言葉があります。
これは「流し読む」という意味で、Webデザインを見る人は、まずページの中から見出しだけをざっと流し読みして、興味のある部分だけを詳しく読むという流れになります。

Webサイトを訪れた人は、まず左上に視点が集まりやすいと言われています。
その理由から一般的なWebサイトはほぼ左上にロゴマークが配置してあります。
見る人は文章を左から右へ読んでいき、ページ全体として左上から右下へ向かって読んでいきます。
これに加えてWebデザインではクリックするという動作が加わります。
一般的に右利きの人が多いので、クリックしやすい場所は右側になります。
ボタンやリンクが右側に多いのはこの理由からです。

余白の詰まりを流す p52

熟練したデザイナーはレイアウトの中にある余白を「水の流れ」に例えて見ることがあります。
レイアウトに窮屈な箇所があると、その部分で流れが悪くなり水が詰まるイメージです。
その結果、詰まった場所は水が澱んでいくような例え方をします。

右図の上の例では矢印の部分が窮屈なので、ここで水の流れがせき止められています。
右図の下のように要素のサイズを小さくしたり、意図的に余白を作ってあげると流れが良くなり見た目にもスッキリとしていきます。

囲まれた余白と抜ける余白 p53

P.041で余白が多く集まるとそこに視線が向かうという説明をしました。
ただ不必要に余白を多く使ってしまうと意味のない視線を集めたり寂しい印象を与えてしまう可能性もあります。

右図の上の例では要素と要素の組み合わせで、結果的に中央に囲まれた余白ができあがっています。
このことで意味のないスペースに視線が集まってしまいます。
また囲まれたスペースは窮屈な印象も与えてしまいます。

右図の下の例では要素の配置を見直して、余白を外側にできるように変えてみました。
外側に抜ける余白は開放的な印象を与えることができます。

ページを分割する p54

ページの中の要素を「写真」と「テキスト」という風に大きなグループでエリアを区切って配置するレイアウトを「分割」と呼びます。

ページの中を分割することで対比の効果が生まれ見る人の視点も明確になります。

分割の組み合わせによっては要素の優先順位もつけやすく、見る人からすればわかりやすい親切なレイアウトと言えるでしょう。

見る人は写真を見ながらテキストの内容を読むことになります。
例えば写真の内容が人物や商品のような明確なものであれば、見る人は写真の内容を頭にいれて、その解説としてテキストを読んでいきます。

対して写真の内容が抽象的なイメージであれば、テキストの意味を補足する形でその雰囲気をイメージとして受けとっていきます。

分割のパターン p54

最もシンプルな分割のパターンは二分割です。
ページのレイアウトを半分にわけることで見る人は瞬時に配置された内容を理解して視点を流しながら読んでいきます。
一般的には二分割には上下の分割と左右の分割があります。
上下と左右の違いは配置する内容によって使い分けていきます。

違う分割方法として三分割もよく見かけるパターンです。
三分割は写真の構図にも使われる安定感のあるレイアウトと言われています。
分割の効果としては二分割とほぼ同じですが、三分の二の領域を使う内容は面積に比例してより強調されます。

カラム間の余白 p67

次に2つのカラムの間に余白を入れます。
この間の余白が狭すぎると、見る人は文章を読む際に段落で折り返されずに、横に流れてしまう可能性があるので、読みやすさを十分に考慮して、カラム間の余白を入れましょう。

余白の長さは少なくとも本文の2文字分以上の余白が必要です。
カラム間の余白は文字サイズの倍数で決めます。
ここでは文字サイズが7ptで3文字分の21pt(7.4mm)の余白を入れます。

ブロックの作成 p67

次にカラムを縦に分割していきます。

ここで4等分にします。
縦に分割していくとマス目のような箱ができあがります。
これを「ブロック」と呼びます。

次にブロックの上下の間にも余白を入れます。
この余白は流し込んだ本文の行送りを目安にして作ります。
ブロックの境目に当たる行の1つ前の行のベースラインから、次の行の頭まで入れるとよいでしょう。
ブロックとブロックの間の余白を「マージン」と呼びます。
ブロックの上下にも余白が生まれるとガイドラインが格子状(グリッド)になりました。

グリッドのパターン p67

これで2カラム・4ブロックができあがりました。
ブロックの数を合計して8ユニット(単位)と呼びます。

この方法でさまざまなパターンのグリッドを作ることができます。
ブロックの数が少ないとレイアウトは容易ですが要素を配置する選択肢は少なくなります。

一方ブロックの数が増えると選択肢が増える分、自由度はあがりますが、レイアウトは難しくなっていきます。
最初は少なめのブロックで慣れて、段々とブロック数を増やしていき、自由で高度なレイアウトにチャレンジするとよいでしょう。

グリッドを使った写真の配置の仕方 p69

写真や図版、イラストなどもグリッドを目安にして配置します。
ブロックのサイズに合わせて写真をトリミングしたり、場合によってはキャプションもブロックの中に収めたりしてバランスを整えて配置します。

写真を広くみせたければ、右図の中段上のグレー部分のようにブロック・マージンを横断して写真を配置してもよいでしょう。
さらにラフスケッチの段階ではグリッドに収まるように書いていましたが、グリッドを超えて紙面いっぱいまで範囲を広げてあげることも効果的です。
目的によってはグリッドを外すことも検討しましょう。

軸を作る p80

ここで紹介する「中軸」と呼ばれるレイアウトの手法は前項で解説したシンメトリーの考え方を応用しています。

シンメトリーのよい点はレイアウトの中に大黒柱となる「軸」があり、それを基準に配置することで乱雑にならない安定したレイアウトができることでした。
逆に悪い点は軸を中心に左右の中央で揃えるために毎回同じレイアウトになりやすいことです。
そこで軸の存在は引き継ぎつつ、左右の中央に揃えることから開放されてみると新しい表現が生まれてきます。

軸を樹木と考える p80

これから学ぶ中軸のレイアウトはシンメトリーと同様に1本のガイドラインを「軸」と考えますが、必ずしも軸を中心に左右の中央で揃える必要はありません。

例えるなら、レイアウトの中心軸を樹木の幹と置き換えます。
そして配置する要素を幹の周りに生えていく、たくさんの枝の存在として配置していきます。
この手法はシンストリーの安定感を持ち合わせつつ、より自由な配置が実現できます。

中軸を使った配置の方法にはたくさんの選択肢があります。
中軸を基準にして左揃えや右揃えといった「整列」の考え方を適応させるとベーシックなレイアウトになります。

もっと面白みを求めるなら軸を中心にアシンメトリーな配置を意識すると躍動感のある魅力的なレイアウトになるでしょう。

COLUMN 似た雰囲気のデザインが生み出される理由 p113

複数のデザイナーに同じ素材、同じ条件でデザインを発注しても、全く同じものができあがるわけではありません。
デザインにはデザイナーの個性が反映されるからです。
しかし、似た雰囲気のデザインができることはあります。

これはなぜかと言うと、1つの理由として本書で紹介しているようなレイアウトの基本のルールに沿ったデザインになっているからです。
美しいデザインには共通のルールがあります。
ルールが同じであればデザインも似てきます。

デザイナーはルールを知った上で、活用し、組み合わせつつ、個性を反映した作品を作っていくのです。

COLUMN レイアウトはデザインの重要な要素の一つ p135

この本は「レイアウト」を主軸として基本ルールや応用テクニック、事例の紹介をしています。
レイアウトは「デザイン」の中でも最も重要な要素の1つであり、これを学ぶだけでも十分に作品を生み出すスキルが身につくでしょう。

ただ、デザインにはレイアウトの他にも、書体や配色、画像加工などさまざまな要素も絡んできます。
この本を学び終わったらそれらのことについてもより深く学んでいくとよいでしょう。

デザインの制作進行 p161

①クライアントと打ち合わせ、ターゲットを決める
誰に伝えるかを決めることです。
ターゲットを決めることでデザインのゴールが見えてきます。

②デザインの目標、コンセプトを決める
①で決めたターゲットに、いつ、どこで、何を、どのように伝えるのかを決めます。

③要素を洗い出す
情報を整理していきます。
文字、画像などを決めていきます。
要素の洗い出しを行わないとレイアウトする時のスピードがかなり落ちます。
やり直しが多くなってしまうこともあります。

④レイアウトのパターンを出す
③で決めた大事な要素を優先の順番に目立つように、かつターゲットに伝わるコンセプトでレイアウトを作っていきます。
アイデアスケッチを描き整理する方法が有効です。

⑤書体のパターン出し
レイアウトを決めたら、書体を出していきます。

⑥配色のパターン出し
書体が決まったら、配色のパターンを出していきます。

⑦装飾のパターン出し
書体と配色が決まったら、装飾をしていきます。
装飾によって、足りない部分を補足したり、わかりやすさを調整したりすることができます。

⑧クライアントのチェックと正
クライアントにデザインの提出と説明を行います。
何回か修正が入ることもあります。

⑨完成

※基本的にはこの順番に行いますが⑤→⑥→⑤のように戻る時もあります。
なるべく順番通りに進めることで高クオリティのレイアウトをすばやく作ることができます。

順序通りに作るのが一番の近道 p172

ここまで順序通りにデザインを制作してきました。
しかし実際の制作の現場では順番が前後したり、何度も戻ったりすることもあります。
1度も戻らず順序通りに進められることの方が少ないでしょう。

だからと言って最初にコンセプトの設計をせずに作り始めると必ずどこかでズレが起きてしまいます。
ズレがでてくると修正するのに多くの時間がかかります。
結果的に遠回りになってしまうのです。

デザイン作りはたくさんの辻褄を合わせることが必要です。
格好よくすると見づらくなり、どこかを目立たせると、何かが目立なくなります。
そんな調整をしているうちに、当初目的だったことからデザインがずれていってしまうことも多くあります。

必ずコンセプトを定め、順序通りに進めるようにしてください。
それが遠回りのようでいて、1番早く進めていける近道です。