同じ要素で何パターンも違うレイアウトを試したこと。こういう経験が大切。
なんのためにデザインするかを理解しないままで手を動かしてしまうととても危険。デザインの迷宮入りにまっしぐら。
もしこれが「家を建てる」という話であれば、柱の場所を間違えたりしたら大問題ですから、守るべきルールや手順というものがある。でもデザインには、何をどこにどうやって置くかという問いに対して絶対的な正解がない。王道はあるが王道通りにすればパーフェクトなものができるというわけではない。
良いデザインをするためには、まずはその目的について深く考えるようにしましょう。
誰に何をどんな風に伝えたいのか。編集意図、世界観、コンセプト、切口、メッセージ。デザインの目的について理解し、それにふさわしい姿は何かを追求することにあります。
ケーススタディ
初心者向け：シンプルな構成、大きな完成写真、大きな文字サイズ、ポイントを強調、手順は簡潔に、くせのない書体
楽しさ重視：にぎやかな印象、写真のめりはり、最小限のテキスト、種類別の色使い、可読性よりリズム、書体でも遊びを
デザインの手順
STEP０：図解とラフ
STEP１：方向性を決める
STEP２：骨格をつくる
STEP３：キャラを立たせる
STEP４：足し算と引き算
STEP５：ブラッシュアップ
STEP０：図解とラフ
デザインしたいことが整理できているか確認するため、図解やラフを書いてみましょう。もし上手く掛けなければ、どこかあいまいな部分が残っているということ。始める前から完成デザインが目に浮かぶくらいじっくり考えてみましょう。
図解：図解といっても大げさなものは必要ありません。確認したいのは、情報の階層構造。親子関係なのか、並列関係なのか、等しく扱うべき内容なのか、特定の1つを目立たせた方が良いのか。デザインが進んでから「そもそも構成から違っていた！」という失敗を起こさないためにも、不明点をなくしてから進めます。
ラフ：いきなりアプリケーション上で、作業をはじめると、出来ることが多すぎて肝心の構成を見落としがち。手描きのラフを描くと、迷子にならずにすすむことができます。色も書体も変えられないラフだからこそ、内容の理解と整理に役立ちます。
STEP１：方向性を決める
内容が理解出来たら、おおまかな方向性を、表現と構造の両方から考えます。ある程度、デザインが進んだあとで構造から考え直すことになると大幅な修正が発生してしまうことに。ざっくり配置した状態で、どの方向性で進めるかを先に検討しましょう。
表現の方向性 例
・配置はランダムで動きを出していく
・色は多めに使ってカラフルな楽しさを
・角版写真よりも切り抜きでにぎやかに
構造の方向性 例
写真を左にまとめる？中央に写真をまとめる？写真をランダムに散らす？
STEP２骨格を作る
色や書体を変えたりするのは、まだまだ我慢。ディテールに惑わされて、肝心の構造がつくられているのかが見えづらくなります。色や書体に頼らなくても成立する配置なら、言葉が無くても伝わわる、直観的な分かりやすさが生まれます。
例
・タイトルとリードは頭にまとめて
・バランスよく写真を配置
・コラムはぺーじの最後に
・写真とレシピのかたまり感を
STEP3 キャラを立たせる
「デザイン＝あれこれ飾り付けること」ではないということを忘れないでください。飾りをあれこれと足さなくても、書体/組み/カタチ/配置などに気を配り、ひとつひとつの要素に個性を持たせるだけで、十分印象を変えることができる。
例
・タイトル回りを中央揃えに
・和文書体を変更
・レシピ名の時間を空ける
・材料とレシピの調整
STEP4 足し算と引き算
ここまでデザインを進めてなお、狙った印象に届いていない場合には、足し算をします。一方で、実はなくなっても問題ない要素が見つかったら、引き算。今回の例では方向性として「楽しく」「にぎやか」なので足し算多めですが、匙加減が重要です。
・リボンのようなあしらいを足す
・レシピ名や番号に色を足す
・背景に紙の質感を出す
・タイトル回りの欧文を引く
STEP5：ブラッシュアップ
ゴールは間近。細部の完成度を上げていきます。全体を眺める引いた目線と、細部を観察する寄りの目線、その両方を持ってデザインをチェックしましょう。デザインの意図がちゃんと伝わっているか、それをさらに強めるために出来ることはないか、探してみましょう。
・紙色さらに濃く、白フチを追加
・文字を加工して丸みをつける
・タイトルに止めを作る
・コラムはケイがなくてもOK
デザイナーの7つの道具
１：大事度天秤
２：スポットライト
３：擬人化力
４：連想力
５：翻訳機
６：虫眼鏡
７：愛
１：大事度天秤
デザインをすることは、時に「伝えたい量」と「伝わる量」との戦いになります。言いたいこと同士がケンカしたり、多すぎたりすると、表現がどんどんぼやけてしまう。あれもこれもそれも、全部入れたい！と欲張った結果、要素が多くてごちゃごちゃになり、結局見る気を失わせてしまうかもしれません。全てを伝えようとするデザインは、結局のところ、何も伝わらないデザインにしかなりえない。「何が大事なんだっけ？」を考えることを忘れずに、伝えたいことの取捨選択と協調をしましょう。
STEP1 伝えたいことを整理
天秤にのりきらないくらいたくさんの伝えたいことがあったら数を絞り込む
STEP2 どっちがよりダイジ？
両方同時に実現できないことは、天秤の左右にのせてみて、優先順位をつける
STEP3 大事な方を強調
より大事な方を強調するため、サイズや分量、強さや色を調整していく。
２：スポットライト
大事な主役が他の脇役たちに埋もれてしまわないように、スポットライトを当てましょう。読み手の目線が迷わず重要な場所で向かうように、デザインで舞台を整理整頓してあげる必要があります。その1の「大事度天秤」が意味の優先付けなら、こちらは見た目の優先付けと言えます。
デザインした本人が、「主役」の要素がすぐにわかるとしても、それはすでに内容を理解しているからにすぎません。予備知識のない人が初めて見た時、同じようにすぐ理解してもらえるとは限らない。そのチェックには、離れた場所からデザインを眺める方法が有効です。
通常よりも大幅に離れた、文章が読めないくらいの距離からデザインを眺めてみて、それでもなお「主役」がちゃんとわかればOK。「机で見た時は良さそうだったけど、離れてみたらわからなくなった」ならまだまだライトが弱い証拠。次のページからは、スポットを当てるためのいくつかのライトをご紹介します。
STEP1 離れてみてみる
いつもの数倍離れた距離からデザインを見てみて、どう感じるかチェックする
STEP2 ライトを当てる
主役にすぐ目が向かわなかったら、何らかの方法でライトを当てていく
STEP3 もう一度離れてみてみる
主役っぽくなったかな？離れたところから確認
色のライト
色がないなら、足し算で目立つ。色がありすぎなら、引き算で目立つ
基本的には、白・黒・グレーなどの無彩色よりも、なんらかの色味があった方が目立ちやすい。ただし、目立たせたいからといって使いすぎてしまうと、今度は、色があることが「ふつう」になるため、かえって特別感が出なくなります。スポットライトがライトとして機能するためには、周囲が暗くなければ意味がない。必要最低限の数と量を使うようにしましょう。
※色が全くないフラットな状態でしたが、花の名前にのみ色を足し算。花がテーマの特集であるという意図を強調。
※駅のホームはひとも色もたくさん。注目させたい老夫婦以外の色を引き算することで自然に目が行くようになる
地のライト
地を作ることで、図を弱める。図を作ることで、地を弱める。
図と地という概念があります。図は形のあるもので、手前に出てきやすい。その図の背景に当たるのが地で、奥まって感じられやすい性質があります。この2つにはシーソーのような相関関係があり、図に意識がいくと地への認識は弱くなります。この性質を生かしたのが地のライト。たったひとつ「地」があるだけで、他への意識が弱まり、主役がふっと浮かび上がります。
色ベタという地に変えると断然目立つ。
※グリッドを生かしたデザインですが、すべてが図の状態。カテゴリ名が埋もれています。
※カテゴリ名を反転させて「地」に。他のコマへの意識が相対的に弱まったのがわかりますか？
サイズのライト
画面に占める面積≒重要度。主役よりも脇役の大きさも影響
目立たせたい要素を一番大きくするのも素直で有効な方法です。面積を占める割合が多いほど、目立ち、重要度が高く見えてきます。どのくらい大きくしたら「主役」に見えるのか？そのバランスは脇役が握っています。他の要素がごくごく小さく並んでいるのであれば、ほんと少し大きくするだけで十分。一方、脇役の存在感が強いときは、やりすぎなくらいにガツンと大きくいきましょう。
※スパイスのうち2つを特別扱いしたいけれど、文字を加えるだけだと弱くて目立ちません。
※主役の2つを思い切った大きさに、その分他の写真をやや小さくしてバランスを取っています。
余白のライト
おおまかに眺めてもわかるくらいの余白の差をつくる
脳の神経細胞には、おおまかな空間に反応する細胞と、細かい情報に反応する細胞の2つがあります。そのため、おおまかな空間認識でも分かる「差」の方が認識されやすい。下図のように、境界線を入れるより、余白で作った境界線の方が分かりやすいのは、細かい情報が見えなくても区別できるため。離れたところから眺めれるとその差がよくわかるため、埋もれた主役の救出に役立ちます。
※ケイ線で囲んで作ったグループは、瞬間的には、認識しづらいことが分かります。
※余白をとってグループを作ると、ぼんやりと眺めただけでも差がはっきりします。
※季節ごとの旬の野菜や果物を紹介。数が多く形もまちまちなので、境界線をいれていますが、、
※パズルを組み替えるように、なるべく余白を境界線に集めてくると、線を引かなくてもまとまりが出ました。
揃えないライト
まっすぐにはナナメを。整列にズレを。秩序を作ってからあえて乱すという方法
脳の神経細胞は異なる包囲に対してよく反応する性質を持っています。まっすぐに反応する細胞とナナメに反応する細胞があり、それぞれ別々に処理されるために、異なる方向性の要素は違うものとして目立ちやすくなる。ただし秩序があってはじめて、イレギュラーが利いてくるもの。最初からランダム配置するより、基本ルールを作ってから崩した方が、バランスを取りやすくなります。
※たくさんの言葉で構成。メリハリのない文字のカタマリの圧力が強く、重たい印象です。
※揃えない場所を作ることでリズムが生まれ、インタビュー内容がより目に飛び込んでくるようになりました。
擬人化力
鳥獣戯画が生まれた平安の昔から、萌えキャラが大人気の現代に至るまで、日本人の手にかかれば擬人化できないモノなんて世の中にないのかもしれません。この擬人化できる想像力（というか妄想力？）はデザインでもとても役立ちます。
要素をきっちりただ並べただけだと、まとまってはいるけど「なんかさみしい」感じがする。じゃあ「もっとにぎわった感じ」にするため、要素をずらしたり増やしたりして、がやがやさせてみようかな？ドレスアップした女性らしくしたいけど、現状は淡白で、すっぴんみたい。メイクを濃くするようにあしらいを「盛って」みようなかな？
あの人らしいねという言葉は、人間だけでなくデザインに対しても言えること。良いデザインには、人格みたいなものがあり、だからこそ心に残るのだと思います。世の中のデザインを人にたとえまくるという「勝手に擬人化遊び」はとてもおすすめです。生き生きしたデザインをするヒントが見つかりますよ。
いいなと思うものに出会ったら、じっくり観察してみる。人物に例えるなら誰？どんな人？と勝手にキャラ化してみて、自分のなかにキャラクターのアーカイブをつくろう。
書体を声色に例えてみる
おなじおはようという挨拶でも、満面の笑顔と弾んだ声で言われるのと、にこりとせず低い声で言われるのとでは、含まれるメッセージはまるで変ってくる。書体と文字の大きさを変えただけで、おなじ言葉でもそれぞれ違う声色で聞こえてきます。
組みを話し方に例えてみる
字間と行間は、離すスピード。アケればのんびりゆっくり、ツメれば早口な印象になりやすい。行の長さは話すリズム。長いと重厚感ある落ち着いた感じ。短いと視線の折り返しが多くなるため、軽快＆テキパキした印象
※話が長くてちょっと単調な大学教授の講義
※保育士さんによる絵本の読み聞かせ
※プレゼンでの理路整然としたワーク
※軽快にいつまでも続く女性同士のおしゃべり
配置を人々に例えてみる
真っ白な紙の上に文字や写真を並べていくと、そこに空間や奥行きが生まれていきます。人が立つ姿からも人格が伝わるように、要素の置き方や並び方からキャラクターがわかる。同じ写真や文字であっても、配置によって受ける印象が変わります。
①真面目に列を乱さずに並ぶ、朝礼のサラリーマンたち
②肩の力を抜いてゆるーくラフに立つ人々
③存在感のある主役と、遠く控えめな脇役
④スクランブル交差点を行きかう人の群れ
あしらいを女性に例えてみる
人は見た目が9割と言いますが、初めて出会った女性でも、服装や持ち物、髪型やメイクでその人のスタイルを感じとれるもの。書体・色・ライン・アイコン・テクスチャなどを使って、服を選び化粧をするように、デザインもスタイリングしよう。
色を年代に例えてみる
淡い/明るい色からは若々しさを、渋い/暗い色には、年を重ねた風格を感じる。多少個人差はあっても、色には一定の共通イメージがあります。ここでの年代は、年齢だけでなく、カルチャーから生まれたその時代らしさでもある。
４：連想力
デザインに必要なカタチ・書体・色・質感などのいろいろな要素は、デザイナーが自分で決めるよりも、伝えたい内容やテーマから「自然に導かれていく」「勝手に決まっていく」のが理想。その方がより直観的で、内容に寄り添った、人に伝わりやすいデザインにすることができるからです。
まずはテーマについてじっくり考え、連想される言葉やモノをたくさん出してみる。それってどんなカタチ？色？におい？手触り？イメージの世界に浸って、思いつくものを並べているうちに、デザインの方向性がおぼろげながら見えてきます。
「海だから、青！」のような直接的な連想も悪くはありませんが、それしかないと面白みに欠けたり、分かりやすすぎてそこが浅い印象になってしまうこともあります。正反対のモチーフ2つをぶつけてみたり、寄り道OKの連想ゲームを続け、思いもよらないジャンプにたどり着くことも楽しみましょう。
STEP1 言葉の連想
コンセプトから連想される言葉やモチーフ名をたくさん書き出してみる
STEP2 イメージの連想
写真を眺めたり、場所に行ったり、記憶を思い出したりして、イメージに浸る
STEP3 ヒントを引き出す
実際にデザインに取り入れられそうな色やテクスチャ、カタチなどを引き出す
例
リゾートに着ていきたくなるような、色鮮やかなワンピースやアクセサリーを取り扱うアパレルブランドのコンセプトビジュアル
STEP1 言葉の連想
海・波・砂浜・ヤシの木・トロピカル・南国・ビーチチェア・強い陽射し・リラックス・のんびり
STEP2 イメージの連想
画像
STEP3
水彩のテクスチャや、力の抜けたラフなイラスト表現、軽やかな書体でリゾートらしいビジュアルに。
５：翻訳機
コミュニケーションの方法には、大きく分けて2種類あると言われています。1つ目は会話する・文章で伝えるなどの「言葉を使った」言語コミュニケーション。2つ目は顔の表情・視線・身振り・声のトーンなど「言葉以外を使った」非言語コミュニケーションです。
例えば、ある街の風景の美しさを伝えたいとき。言葉を尽くして文章で語り下ろすのか、美しさがわかる写真1枚だけをポンと置いておくのか。同じ伝えたいことに対して、言語/非言語のどちらを選ぶかで大きく意味が変わってきます。著名な作家旅エッセイであれば前者の文章は似合い増すし、その町の見どころを紹介する旅のガイドブックなら、後者の写真を見せてしまう表現が適しているでしょう。この章では、ほぼ同じ内容で、「言語多め」と「非言語多め」の両端のデザインをご紹介します。それぞれ得意不得意があり、どちらか一方が優れているというわけではない。翻訳機を使いこなして、言語と非言語の行き来ができるようになりましょう。
STEP1 要素を並べてみる
要素をすべて並べて俯瞰してみる。翻訳できそうなポイントを見つける
STEP2 非言語に翻訳
同じ内容でも表現を変えたほうがよいところは非言語に翻訳をかける
STEP3 バランスと調整
言語と非言語の適切なバランスは、デザインの目的次第で調整していく
この章での「言語コミュニケーション」は、言葉・文章などの文字による表現のこと。
良いところ
・媒体を問わず表現を揃えやすい
・受け取り方の個人差が比較的少ない
・物事を深く細かく説明しやすい
悪いところ
・同じ言語を理解できないと使えない
・伝わるまでに時間がかかる
・言語だけだと見た目に退屈になりやすい
「非言語コミュニケーション」は、写真・図版などのビジュアル表現のこと。
良いところ
・伝達スピードが早くなる場合が多い
・同じ言語を持っていない人の間でも通じる
・非言語でしか伝えられない情報がある
悪いところ
・色や媒体の制約を受けやすい
・伝わる情報があいまいになりやすい
・受け取り方の個人差が大きい
※誤訳には、要注意！
非言語要素を使うと伝達スピードが向上し、直観的に伝わるようになるケースは多いのですが、非言語であれば必ずしも分かりやすくなるとは限りません。
伝わる意味が限定的になったり、逆広がったりしています。デザインには、言語から非言語へのジャンプが求められることが少なくありませんが、深く考えずに翻訳すると、語訳を生んでしまうかもしれません。その翻訳で意味がどのように変化するかに注意しましょう。
６：虫めがね
デザインの最終的なクオリティを決めるブラッシュアップ。そこで使用する虫めがねはデザイナーにとっての最終兵器です。一つ目は、「視覚の解像度を上げる」。色やカタチに対しての見方は、細かければ細かいほどクオリティが上がります。2つ目は、「神は細部に宿る」細部をおそろかにしては、全体の美しさは得られないということ。もともと建築デザインの世界で生まれた言葉とされていますが、広くデザイン全般に当てはまる考え方です。3つ目は「見た目で考える」。主に「人間の目が起こす錯覚」や「作ったデータと実際の見え方のズレをなくす」こと。地道な調整の繰り返しになるので、普段からよいものをたくさん見ることで、調整したほうが良い場所に気付けるようにしておくのが大切。
ただし最初から細かいところばかり気にしてしまうと、それ以前の大きな構造を見落としてしまいがち。虫めがねはデザインに必須ではありあすが、使うタイミングが重要です。もう大きな路線変更はなさそうだなと思えるまでは、ふところにこっそり隠し持っておくのが良いでしょう。
最初は荒く見る。大枠が固まるまでは使わないで我慢。大きな構造や方向性を優先して。
最後は細かく見る。仕上げに取り掛かるときに初めて、デザインの見方を細かくしてブラッシュアップ
デザインの最後のブラッシュアップの過程は基本的には、「ちょっとしたこと」の積み重ねです。１つだけでは大きな印象の変化にならないものの、細かい調整を数多く行うと、最終的には明らかにクオリティが上がって見えてくる。そんなブラッシュアップポイントに気づくために、この虫めがねという道具があります。
※色の解像度
わずかな色味の差であっても、並べてみると印象はかなり違ってくることが分かります。
※書体の解像度
※同じ明朝体でも先端のカタチや骨格、ふところの大きさで表情は様々です。
※形の解像度
先端パーツのカタチ/軸の太さやカタチ、長さ/角の丸み/質感/など矢印にもディテールは無限大
※文字の細部
①見出しの句読点は詰める。 本文ではなく、大きく見せる文章の場合は、句読点の前後は空きすぎないように詰める。
②全角と半角に注意する。 英数字の中に全角のコロンや記号が入ると、前後にアキができて間抜けな印象に。
③文字詰めを変えたらダーシに注意。 文字と文字の間をパラパラさせたときは特に、「開くとマヌケ」な記号には注意しよう
④ルビをバランス良く付ける。 ルビの付け方にはいくつかルールがあるが、なるべく元の文章の組に影響が出ない方法を。
⑤マヌケな引用符を使わない。 似ているけど意味が全然違うこの引用符、うっかり間違えるととてもマヌケ。ダブルミニュート→ダブルクォーテーション
⑥1文字だけの最終行は避ける。 校正用語で首つりとも呼ばれる状態。こんな風にぶら下がると、バランスが悪いし読みにくい
⑦パラパラ空き行ができないようにする。 途中で切れない英単語が多いときにありがちないまいち状態。1文字単位で改善を。
⑧分離禁止文字が分離してはダメ。 ……やーーーやひとまとまりの数字は途中でぶつ切りにならないように。
⑨2桁の数字は回転＆文字幅を変える。 数字が横倒しではみづらいので回転しよう。書体が専用数字を持っている場合もある。
色の細部
①グラデーションは両端だけでなく途中も綺麗に。 グラデーションは変化の途中の色にも注目。自然につながるように両端の色を調整しよう
②濃度変更だけでなく個別に色を作る。 濃淡だけで展開すると薄い色が間の抜けた色味になることがある。微調整で彩度をプラス
③オーバープリントや半調表現の精度を高める。 透明度の表現に役立つこれらの表現、意図に合わせて使いこなすようにしよう
※写真の細部
①写真と文字のコントラストを調整する。 写真上の文字が読みづらいときは、周囲に同色の影を落とすと可読性がアップする。
②丁寧にトリミングをする。 写真はトリミング次第で良くも悪くもなる。ひと手間をかけてベストなバランスを目指そう。不要な要素、傾き、端に接する。切れているなど。
※カタチの細部
①狙いたい印象とケイの太さを揃える。 ケイ線の太さは占める面積の割に大きく左右する。太さや種類に注目しよう。
②オブジェクトと文字の距離は丁寧に整える 端の距離が近すぎると窮屈な印象に。オブジェクトに対して文字をバランスよく入れる。
③点線の切れ目を整える。 かなり細かいものの、表組などケイ線を使う要素が多いときには気を使おう。
④不格好なリサイズをしない。 無理に変形するとバランスが崩れる。手間でも形を崩さず拡大縮小を。
⑤意味が同じオブジェクトは形を揃える。 矢印の先端のデザインは「意味が一緒なら」揃えよう
⑥荒れたエッジ表現は拡大率に注意。 アナログ感の表現に便利だが、荒れ加減の調整は必須。大げさすぎるとわざとらしい
⑦角の丸みを揃える。 角丸を複数重ねる場合、丸みの設定を変えないと、見た目には揃って見えないので注意
⑧現実の光を意識する ドロップシャドウやグラデーションは現実の光をイメージしながら方向や強さを調整しよう。
※データ⇔見た目
コロンやハイフンはそのままだと下がって見えてしまう。ベースラインを上げて見た目を揃える
文字の形が違うため、データで左揃えにしても見た目がずれてみえることが多い。調整。
高さを数値できっちり揃えても、同じサイズには見えない。図形の形に合わせて変えよう。
色には面積効果という錯覚があり、面積が小さいほど、色が暗く見えやすい。広い色面と、小さい文字色では、同じ色に見えなくなることも。個別の色を設定して調整しよう。
数値上のきっちり天地中央配置あ、目にはやや下がって見える。少しだけ上げると中央に見える。
７：愛
７つの道具の最後は、「愛」。デザイナーが持っていたい愛には2種類あって、ひとつは「内容」への愛、もう一つは「届ける相手」への愛です。
内容への愛とは、お決まりのパターンに内容を後からはめ込むのではなく、内容そのものからデザインを見つけ出すということ。デザイナーが作りたい、やりたい表現からスタートすると、内容の良さを犠牲にしたデザインに陥りがち。内容を深く理解すればするほど、優先すれば良いことがわかり、要素を取捨選択できるようになります。「内容のことを考え抜いて作っていたら、勝手にデザインはこうなってました」というのが理想のアプローチだと思います。
デザインを受け取る人の身になって考えてみる、それが「届ける相手への愛」です。同じコンテンツであっても、相手に知識があるのかないのか、興味があるのかないのかによって、適切なアウトプットの形はまるきり違います。どんな人に、なにを、どんな気分で伝えるのかを考える。言葉にするとなんとも当たり前ですが、多分それがデザインをする上でいちばん大事なことなのです。
①内容への愛
デザインする対象を深く理解し、良いところを確認し＆見つけ出し、一番ふさわしい姿にしたいという気持ち
②届ける相手への愛
届けたい相手になりきったつもりで興味や知識、気分を想像し、それに寄り添うアウトプットを考えよう、という気持ち
チャプター３ デザインの素
１：文字と組み
２：言葉と文章
３：色
４：写真
４：グラフとチャート
１：文字と組み
布地を織り上げるように組む。
文字組を解剖する
書体を楽しむ
そろえる・差をつける
文字組みを構成する要素たちをひとつひとつ解剖して観察してみよう。
①余白：紙面の天地左右をつくるアキ。
ノドより小口のアキを広く、天より地のアキをやや広めにとることが多い。雑誌は書籍に比べて全体的にアキが狭くなりやすい
②柱：内容を端的に示す 統一で入る言葉
③組方向：文字を連ねる方向。日本語は縦にも横にも組めるというのが特徴のひとつ。基本的には横組みのほうがカジュアルな印象になりやすい
④ノンブル：ページ順を表す数字。読んでいる最中に意識が向かないようにシンプルにすることが多いがあえて個性を出すことも。
⑤行長：1行あたりの文字数。長さによって文章の重さが変わる。長すぎると目が迷子になりやすく、短すぎるとせわしない。一般的には40から50字が最長。13から15時程度が最小とされている。長いとしっかり語る感じで、重厚感が出る。短いとテンポの速い、軽やかな印象に。
⑥行間：行と行の間隔。文字サイズや行長に合わせて決める。文字の大きさや行長によって適切なアキは変わるが、一般的には文字サイズの50％から75％程度を基準に考える。広くすると、ゆったり穏やかなリズムに。狭くするとぎゅっとしたまとまり感が出せる。
⑦字間：文字と文字のアキのこと。本文組の場合は「０」が基本。本文組の場合、ベタ＝字間ゼロが基本。書体や用途によっては、少し詰めたりあけたりして印象を調整することも。
⑧文字サイズ：文字の大きさを表す単位は主に、級・歯・ポイントが使われる。
文字サイズと対象年齢：幼児 20～32Q 小学生 16～24Q 青年 10～13Q 高齢者 13～16Q 子供向け・高齢者向けは文字が大きい方が読みやすい
⑨ウエイト：文字の太さのこと。同じ書体で太さが違う集まりをファミリーと呼ぶ。
L Light →本文・キャプション
M Medium →本文・キャプション
B Bold →大タイトル・中見出し
H Heavy →大タイトル
小さい文字は太すぎても細すぎても読みづらくなるので注意。大きい文字は素直に太くしても、あえて細くしても、狙いに合わせて。
⑩文字の種類：日本語は印象が違う文字が含まれているのが特徴
カタカナ：直線的なライン。現代的でシャープ
ひらがな：曲線が多いため、やわらなくて優しい
漢字：密度のある形で、重たくて真面目な印象
⑩ボディ：原稿用紙のマス目のように、文字がおさめられているハコ。
⑪字面：ボディの中の文字が入っている領域
⑫ふところ：文字が抱える、内側の空間。
⑬骨格：文字の中心線。印象を決める骨組み。骨格は書体によって大きく違う
⑭エレメント：はらいやはねなど、文字を装飾する細部のかたち。
【書体を楽しむ】
明朝体：線の端に「はね」や「はらい」などがある書体のこと。書体によって違う骨格で様々な表現を見せる イメージ：落ち着いた・信頼感のある・日本的な・しなやかな
ゴシック体：直線的な形状を持ち、線がほぼ同じ太さの書体。力強い印象で視覚性、可読性に優れている。 イメージ：力強い・はっきりした・モダンな・無骨な
丸ゴシック体：ゴシック体の角を丸めた書体。柔らかく優しい印象の曲線が特徴でかわいさなどの演出に向いている。 イメージ：かわいい・やさしい・こどもっぽい・柔らかい
楷書体：書道の手本としても使われている書体。字画を続けたり省略せず一画一画筆を離して書いたもの イメージ：伝統的な、歴史のある、正式な
装飾書体：見出しやロゴでの使用を想定された装飾の強い書体。手描き風、カリグラフィーなど様々な個性がある。
セリフ体：大文字が古代ローマで誕生した欧文書体の中でもっともスタンダードな書体。セリフを持つ書体をローマン体と言う。 イメージ：伝統的な・信頼感のある・品格のある
サンセリフ体：フランス語で「ない」という意味の「サン(sans)」はセリフのない書体。装飾的な要素のないもの イメージ：力強い・幾何学的な・現代的な（モダン）
スクリプト体：手描きの流れを残した、続け文字になるよう設計された筆記体の書体。 イメージ：高級感のある・フォーマルな
スラブセリフ体：セリフの形が四角くてとても厚い書体。 イメージ：力強い・目立つ
ラウンデット体：エレメントに丸みがある書体。柔らかい優しい印象の曲線が特徴でかわいらしい文字。 イメージ：柔らかい・かわいい・こどもっぽい
デコラティブ体：装飾的な要素が強い書体。印象はしょたいによってさまざま。目を引かせたいときに。
【揃える←字間→差をつける】
文字と文字の間の空間を均一にする。
文字はそれぞれ独自の形を持つため、ただ並べるだけでなく、見た目でアキが揃うように調整すると、美しい仕上がりになります。
意図的にアケると、言葉の意味が変わる。
極端な差をつけると、普通に組んだ文字とは別の存在として認識されやすくなります。意味の違う言葉を組み合わせるときに有効です。
【揃える←書体→差をつける】
似たエレメントを組み合わせるとまとまる。
和文のゴシック体と欧文のサンセリフ、和文の明朝体と応分のセリフ体など、パーツが似ている書体で組むと相性が良くなります。
一つの書体だけではできない演出のしかた。文字に強弱をつけて一部を目立たせたり、主従関係をつけたり。複数の書体を組み合わせると、いろいろな表情を演出できます。
【揃える←文字サイズ→差をつける】
もっとも大きい文字に他の文字を揃える。漢字とかなの大きさに差がある書体が一般的ですが、長文を組むとよみやすいものの、短文を大きく組む時には調整が必要です。
特定の文字を強調してメリハリをつけられる。
協調したい言葉を大きく、もしくは重要でない文字を小さくすることで、読ませたいところに目が届きやすくすることができます。
【揃える←文字の太さ→差をつける】
見た目の黒っぽさを揃えていく
級数や書体に差があっても、黒さが似ているとまとまりが良くなります。書体のウェイトを上げたり、太らせたりして調整します。
同じスペースで強弱をつける方法。
強調したい言葉を太く、重要でない言葉を細かくすることも有効。必要なスペースが変わらないというメリットがあります。
【コラム】
書くように組む
特にスクリプトや筆文字など手描き文字から生まれた書体を組む時は、実際に書くときの筆のつながりを意識して組むとキレイに仕上がる
筆致を強く感じさせる書体は、あまり詰めすぎると窮屈な印象に。
文字間隔をあけてしまうと線の流れがぶつぶつと切れてしまうので注意。
【コラム】
約物やくもので遊ぼう
カッコや記号、感嘆符など、書体に含まれている約物たち。あえてサイズを変えたり色を変えたり、デザイン要素として使うのも面白い。
２：言葉と文章
タイトルらしさ
リードらしさ
本文らしさ
データ・キャプションらしさ
見出し・キーワードらしさ
あしらいらしさ
BEFORE
言葉はそれぞれの役割を持っていますが、書体やサイズが全く同じで、違いが見えてきません。
AFTER
文字のサイズや組み方を変えるだけでも、一つ一つの言葉にらしさ」が生まれました。
タイトルらしさとは、主役感である。
ページ全体の内容を端的に伝えるのがタイトル。真っ先に目が行くような存在感を出すことで、短時間でパッと伝わりやすくなる。顔となる言葉なので、言葉の切れ目を気持ちよく、強弱を丁寧につけるなど、細かく気を配ろう。
リードらしさとは、イントロ感である。
タイトルで簡潔に内容を宣言した後、本文に入る前の繋ぎ役となるのがリード。タイトルでは伝えきれない具体的な内容を入れつつも、情報量は少なく、とどめて本文への誘導につなげる。デザインもタイトルと本文に合わせてバランスを取ろう。
本文らしさとは、下地感である。
ページの骨格となる本文だが、タイトルやリード、キャプションなど他の要素と比べると、「こうすれば本文らしい」という特徴は持ちづらい。言うならば「個性が強くないのが個性」。とはいえ、設計の際は慎重に。ページに占める面積が広いため、ページの印象を大きく左右するからだ。
データ・キャプションらしさとは、黒子感である。
プロフィールやクレジットなど、内容のメインではないものの、入っている必要はある、という情報によく使われるキャプション。写真の説明に添えられることも多い。主役を邪魔しないよう、さりげなく入れるのがコツ。存在をどこまで消せるか、書体や級数だけでなく場所や文字の面積にも気を配ろう。
見出し・キーワードらしさとは、言い切り感である。
本文やコラムなどの内容を要約したり、なにか伝えたいことを箇条書きにしたりと、ページの内容によっていろんな使い方ができる見出しやキーワード。なるべく簡潔に言い切り、短い言葉にすることでらしさが出やすい。デザイン的には、自由度が高いため、ページ全体のバランスをみて、ほどよく「浮いた」存在に仕上げよう。
あしらいらしさとは、読む＜見る感である。
レイアウントデザインにアクセントや装飾をもたらす要素。らしさを出すコツは文字ではなく絵のように見えるようにデザインすること。本文や見出しなどの文字とは異質なものとして感じられるよう、書体を変えたり組み方を変えたり、可読性を度外視して絵になりきろう。
３：色
STEP1 色を知る
STEP２ 色を作る
STEP3 色を使いこなす
STEP1 色を知る
すべての色は、3つの属性から成り立つ。
無限に広がる色をどのように測るのか。その基本となるのが色相・彩度・明度の3属性。どんな色であっても、この3つの属性で表すことができるのです。
※色相
どんな色合い？
赤・黄・緑・青などの色味のこと。自然界の虹色を環のようにつなげると、色相を表す基本となる、色相環ができます。環の反対側に位置する2色は、補色と呼ばれます。赤に対する緑、青に対する燈などが補色です。
彩度
どのくらい鮮やかか？
最も鮮やかな色のことを、混じりけのない純粋な色＝純色と呼びます。反対に、グレー・白・黒などの色味がまったくない色は、無彩色。純色に近ければ近いほど彩度が高く、無彩色に近づくと彩度が低くなります。
明度
どのくらい明るい？
色を100、黒を0としたときの明るさを表すのが明度。城に近づくほど、明るく＝明度が高くなり、黒に近づくほど暗く＝明度が低くなります。色の中で最も明度が高いのが白、逆に最も低いのが黒。
全ての映像は、3つの光からできている。
ディスプレイを拡大してみると、3色だけで表現されていることが分かります。赤R・緑G・青Bの3色を光の三原色と呼び、三原色をすべて重ねると最も明るい色＝白になり、逆に光がゼロになると暗い色＝黒になります。
すべての本は3つの色からできている。シアン・マゼンタ・イエローの3色を色の三原色と呼びます。印刷用のインクや絵の具などの色材で使われ、混ぜるほど暗い色になってゆきます。実際の印刷では、この三原色に黒Kを加えたCMYKを使用して色を表現します。
混色
この3色の組み合わせで狙った色を作る方法
思い描いた抽象的な色を、いきなり数値で指定するのは結構難しいもの。最初からぴったりの色を作ろうとするのではなく、色相→明度→彩度の順で調節していくと、狙った色をスムーズに作ることができる。
STEP1 色相を決める
まずはイメージに一番近い色みからはじめよう。CMYの3色を100％か50％で組み合わせることで、ほぼすべての色相を表現することができます。
②明度を決める
絵の具の場合は、白色を足せば、明るくなりますが、CMYで指定するときは白を足す代わりにインク量を減らせば明るくなります。
③彩度を決める
色を混ぜれば混ぜるほどくすむので、鮮やかにしたい場合は何も足さない。鮮やかすぎるときは、使っていない色を少しずつ足して濁らせていきます。
④仕上げの調整
おおよその目指す色ができたら、最後に仕上げを。少し色を足し引きするだけで、印象が変わることがあるので、イメージに近づくよう調整しましょう。
【トーン】
同じ青でも性格いろいろ
ただの「青」よりも「明るい青」「淡い青」「地味な青」など、形容詞を付けたほうが色味がイメージしやすくなります。
「明度」×「彩度」の組み合わせで色の調子を表現したものが、「トーン」で配色を考える際によく活用されます。
配色
イメージ通りの配色は、「色の数」と「色の差」で作り出せる。
Qなじみの良い配色にするには？
色相・明度・トーンなど、何かひとつでも揃える。
①ドミナント・カラー
色相を同一か少し変えるだけでまとめた配色。色の持つイメージがストレートに表現できます。
②トーン・オン・トーン
色相の数を絞り、明度に多少差をつける配色です。基本の色味はそのまま、トーンに差をつけることでリズムが生まれます。
③ドミナント・トーン
トーンを統一した配色のこと。色相は変わってもまとまりが感じられ、トーンが持つ印象を強く押し出すことができます。
Qパキッとひきしめたいときは？
正反対の色を少しだけ使う。
①アクセントカラー
全体のイメージを作るベースカラーを7割程度、同系色のアートカラーを2割程度加え、ベースと正反対の色を1割くらいアクセントとして入れる。
②セパレーション
色と色との間に、ほんお少し別の色を差し込むことで、もとの配色を引き立てる。セパレーションカラーは黒や白、灰色などの無彩色が中心。
Q繊細なニュアンスを出すには？
Aほんのわずかな差で繊細さを出せる。
カマイユ・フォアマイユ
カマイユ配色（左）とは、色相を揃えてトーンを少しだけ変える、または色相をほとんど差のない組み合わせにするなど、遠くからみたら1色に見間違えるほどにさりげなく色を変える配色です。
その変化に幅を持たせたのがフォカマイユ配色（右）。どちらも繊細なニュアンスを出すのに有効です。
Q色数が多くてもまとまりを出すには？
A赤みと青みを揃えるのがポイントです。
ウォームシェード
クールシェード
Q統一感を出しつつ単調にしないためには？
A似ている・差がある色を両方合わせ持った配色
グラデーション
色を規則的に・少しずつ変化させる配色方法。となりあう色同士は似ているけれども両端の色には、差が出せるので、統一感と変化の両方のバランスがとりやすい配色です。自然界のなかでも良くみられる配色のため、なじみやすいというメリットもあります。
Q自然で落ち着く配色にするには？
A黄色に近い色は明るく、青紫に近い色は暗くする。
ナチュラルハーモニー
ヒカリの当たる樹木を良く観察すると、光が当たった場所の方が黄色がかって見え、逆に暗いと青みがかかって見えることが分かります。明度と彩度をこのバランスにすると、自然で受け入れられやすい配色になります。
Q人工的で斬新な配色にするには？
A黄色に近い色は暗く、青紫に近い色は明るくする。
コンプレックスハーモニー
STEP３
色を使いこなすコツは、右脳と左脳で考えてみること。いま使おうとしている色の目的はどっち？を考えよう。
【左脳】
説明や強調するために使う
機能的な色
・差をつける
・見やすくする
・注目される
・記号として認識させる
・グループ分ける
・階層を分ける
【右脳】
・一目見た時の印象を左右する
・情緒的な色
・視覚に訴える
・味覚に訴える
・嗅覚に訴える
・聴覚に訴える
・触覚に訴える
・記憶に訴える
４：写真
STEP1 構図を見る
STEP2 写真を選ぶ
STEP3 写真を配置する
STEP1 構図を見る
写真が持つ構図を理解することは、写真の配置やトリミングをする上でとても重要。まずは写真がどんな意味で撮影されたのかを感じ取りましょう。
【主役に集中】
写真のどこに主役がいるのか、比較的はっきりしている写真たち。主題と背景のバランスや、どこに主役を配置しているかなど、意図を感じ取り、それを遮らないようにデザインしたい。
①点構図
シンプルな空間にぽつんと「点」を置いたように被写体が配置された構図。一目見ただけで必ずそこに目がいく、くらいに潔い画面は、被写体に注目させるだけでなく、空間の広さを伝えることができます。
②日の丸構図
日の丸のように画面の中央付近に主題がおかれた構図。何も考えずに撮る陥りがちな悪例ともいわれますが、つたえたいものがはっきりしているときには有効です。ただ多用すると単調になりやすいので注意。
③フレーム構図
窓から、樹木の間から、トンネルの向こうに。四隅を囲まれた中から奥を写す方法は、メインの被写体を強く印象に残すことができます。被写体を引き立てるために、フレーム部分は多すぎず、重たすぎない割合で。
【シンプルライン】
写真のどこかにラインが見える写真たち。シンプルですっきりした印象を与えることができるため扱いやすさが、単調にならないように注意
①シンメトリー
上下・左右で対象になっている構図。画面の半分が同じ要素で構成されるため、シンプルで整理された印象になります。日常生活で身近には見つかりにくい風景で、非日常の美しさを感じさせることができます。
②二分割構図
画面を上下左右で二分割し、シンプルで見やすく。典型的なのは、水平線や地平線などを活かした構図で、遠景風景や街のスナップで良く使われます。自分自身で明確にラインを作って構成する必要があります。
③三分割構図
画面の縦横を三分割してできたラインを参考にしてつくる構図。三分割したラインを整理してバランスよく空間を作ることが大事。二分割よりも複雑な構成ができるため、バリエーション豊かな表現ができます
【動きが生まれる】
放射線を作るとダイナミックになり、曲線を活かすと優しく広がる印象に。写真そのものが持つ「動き」を活かそう。
①曲線構図
丸みや曲線のある被写体の造形を取り入れたもの。川や地形、植物といった自然のなかにある曲線だけでなく、人工的な造形物の中にも曲線は見つかるもの。動きを出したり柔らかい印象に仕上げることができます。
②放射線構図
放射線の抜きを取り入れた構図。放射線の向きが上のときは、「雄大で開放的」に、下向きのときは「神秘的でドラマチック」な印象になります。光のラインの取り入れ方次第で、様々なシーンを演出できます。
③三角形構図
三角形のラインに合わせて構成した構図。真上に頂点のある末広がりの構図は利便性があって安定感抜群。建物や風景が末広がりでリアルに描写されるため、ダイナミックな仕上がりになります。
STEP2 写真を選ぶ
写真を選ぶことはメッセージを決めることと等しい。伝えたいことが伝わるように、写真を選ぶことがポイント。
感じる写真と読む写真。
情緒を伝えることを優先した「感じる写真」と正確に伝えることを優先した「読む写真」の2つに分けて考えてみよう。
【感じる写真】
①主に絵を味わるために向いている写真
②被写体を正確に写すことよりも写真全体の雰囲気を優先
③生々しい印象にならないようブレやボケなどで抜けを作る
【読む写真】
①主に説明をするのに向いている写真
②被写体そのものを過不足なくとらえている
③ボケ・ブレ・色被りなどはノイズになるので少なめに
対比によって、ストーリーが生まれてくる。複数の写真があると、自然とそこになんらかの関係性が生まれます。どんな写真を対比させるかで生まれる印象の違いを見てみる。
3枚以上を組む時には、ストーリーを描くように伝えたいメッセージに合わせてひとつひとつ選ぶ。どの写真を主役にするかを意識することも大切。
STEP3 写真を配置する
写真をどのように配置するかによって、見る側と写真の距離感や、写真から受ける印象が変わります。
【入りこむ】
余白を撮らずに配置すると主観的に写真に入り込める。
余白ゼロにして配置すると、まるでその風景に自分が入り込んだかのような印象になります。写真の終わる場所を見せないことで、まるでいつまでもその世界が続いているかのよう。写真と現実の境界線をあいまいにさせることができます。
【冷静に見る】
余白を取って配置すると、客観的に写真を観察できる。
写真の周囲にホワイトスペースがあればあるほど、「誌面に写真が置かれている」ことがハッキリしてきます。冷静に写真を観察するようなレイアウト。やや距離を保って被写体と接してほしい場合に適している配置方法です。
【一般的な比率】
写真の定番縦横比で配置すると、素直な印象になる。
３：２や４：３など、一般的な写真サイズの比率をそのまま活かした場合、写真のサイズが一般的なので、クセがなく写真そのものに集中しやすい。撮影時の構図を素直に活かせる配置ですが、単調になりやすいというデメリットもあります。
【意図を感じる比率】
定番の縦横比から変えるとデザインの意図が強調される。
正方形、横長、縦長など、意図的にトリミングしない限りは出てこない比率。あえて」このカタチにしたいという発信側の意図が強く伝わります。撮影時の意図にばらつきがある写真たちでもまとまりをだすことができますが、主張が強くなるため注意が必要です。
【写真家が主役】
撮影者の写真の方を大きくすることで作品＜撮影者だということがわかる。
2つのレイアウトで使用している写真はまったく同じですが、伝えたい切口に合わせて写真の配置が変わるという例です。著名人や話題の人などを紹介する場合には、その人の写真を一番大きく、かつ一番最初に目が行く場所に配置することでメイン感を出します。
【写真が主役】
作品写真の方をおおきくすることで撮影者＜作品だということがわかる
一方、こちらは写真家自体はまだまだ無名で、写真賞のほうがメジャーな場合のバランスです。あくまでメッセージは「今回の大賞作品が決まりました！」なので、最も大きくするのは受賞作品そのもの。人の写真をある程度内容を読み進めてから初めて登場します。
４：グラフとチャート
STEP1 メッセージを決める
全てのデータをそのまま入れると情報が多すぎてよみとりづらい。
来店のピークはいつ？ランチセットはどのくらい注文されている？昼間の客単価は何時ごろがたかい？デイナーとランチの売り上げはどのくらい？
メッセージを分解してかんがえると？
メッセージを決めるとつたわりやすいグラフができる。
STEP2 グラフを選ぶ
割合→円グラフ
大小→横棒グラフ
増減・安定・変動→縦棒グラフ＆折れ線グラフ
集中・分散・範囲・頻度→縦棒グラフ＆折れ線グラフ
STEP3 伝わりやすく
POINT1 意味を強調する
濃淡をつけて強調。
グループに分けて強調。
レンジを変えて強調。
データ数を変えて強調。
POINT2 ノイズを減らす
その他にしてノイズ減。
文字を削除してノイズ減
使いすぎノイズ注意報
POINT3 直観的にする
マイナス値は赤＆下
みらいは薄い色か破線
円グラフは12時スタート
項目のイメージ色に
POINT4 ミスリードしない
直径ではなく面積で。基準値は0からスタート。
メモリで意味が変わる
立体表現に注意
POINT5 見やすく整理する
なるべく重ねない。
なるべく簡潔に
なるべく距離を近く
線の太さにメリハリを
データがビジュアルに変わるとき。
細く！軽く！もっともっと薄く！
引いて・足して・例えて
写真に力を貸してもらおう
テクスチャは言葉を発してる。
コメントを残す