デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック

文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。

20 Design Rules You Should Never Break

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• 文字を美しくデザインするカーニング
• リーダビリティ（可読性）とレジビリティ（明瞭性）
• 一行の長さにはちょうどいい長さがある
• コンテンツの階層は目的をもってつくる
• 行間・単語間のスペース
• 整列の効果的な正しい使い方
• いろいろなグリッドを試してみよう
• デザインは常にユーザーのため
• 先頭と終わりの孤立行を避ける
• カラーは論理的に決める
• フォント選びも重要
• ボディコピーにディスプレイフォントを使わない
• フォントを伸縮して利用しない
• 合わない組み合わせのカラーは避ける
• 空白スペースをただの空のスペースと考えない
• トレンドは追うのではなく、人気の高い理由を考える
• ツールはそれに合った正しいものを使う
• メディアを考慮したデザイン
• プロなら文法の規則もしっかり身につける
• 多くのエフェクトを使いすぎない
• 終わりに

文字を美しくデザインするカーニング

カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。

カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。

• 20 Typography Mistakes Every Beginner Makes
• 基本的だけど大切なタイポグラフィのシンプルな14のルール

リーダビリティ（可読性）とレジビリティ（明瞭性）

デザインで最も重要な目的は何でしょう？ わたしはコミュニケーションであると確信しています。そのコミュニケーションを達成するためには、リーダビリティ（可読性）とレジビリティ（明瞭性）が大切です。

可読性と明瞭性を妨げる原因を考えてみましょう。多くのものが影響を与えますが、よく見かけるのはテキストと背景のコントラストが低いデザイン（図：左）です。もう一つよく見かけるのは、英語の大文字を過剰に利用する（図：左）です。大文字を使用するのは大声で叫んでるような目立たせるプラスの効果だけでなく、字形が区別しにくいため言葉自体を認識しにくいマイナスの効果もあります。

他にも、通常より小さいサイズの文字も可読性と明瞭性を妨げる原因となります。デザインする時には必ず、ユーザーのことを考えてください。コントラストが低い、大文字ばかり、サイズが小さいは読むのに苦労しませんか？
もし自信がないなら、印刷してチェックしてみたり、第三者の意見を求めてみてください。あなたの目では読めるかもしれませんが、他の人の目では読めないかもしれません。

一行の長さにはちょうどいい長さがある

ニュースサイトやブログなどの記事で、面白いけれど読むのに苦労したことはありませんか？ また次の行に移動しようとして、分からなくなったことはないですか？ これらの原因は一行の長さかもしれません。

文章であるボディテキストは、英文だとスペースも含めて30-40文字くらいが適切です。短くすればよいというものではなく、それ以下にしてしまうと途切れ途切れになってしまい、内容を理解するのが困難になってしまうでしょう。

コンテンツの階層は目的をもってつくる

多くの自然の秩序と同様に、デザインにおいても目的をもった階層はかなり強力なツールです。階層はコンテンツの重要性を意味するために、全てのビジュアル要素の配置に影響を与えます。特に重要なのはスケール、カラー、タイプで、最も少ない重要な要素がより大きな注目を与えられます。

階層が最も明らかに使われる要素がタイポグラフィです、上の図を参考にタイポグラフィを使った階層の例を見てみましょう。これは誕生日パーティの案内状で、左はすべての情報を階層無しで配置したものです。右は階層を使用しています。文字のカラーやサイズやウェイトを少し変えただけで情報が整理され、意味を理解しやすくなりました。

行間・単語間のスペース

デザイナーとして多くのタイプを扱うことはほとんど不可避で、常に簡単だというわけではありません。数多くのルールと守るべき基本があり、この単語間のスペースはその中でもかなり重要です。このスペースには大切な2つのポイントがあります、レディングとトラッキングです。

レディングとは行と行の間の垂直方向のスペースで、一行が長いほどより多くのスペースを必要とします。

文字間のスペースを調整するのは手作業のカーニングが一番ですが、時間がかけられない時があります。そんな時はトラッキングです。トラッキングは文字や単語間のスペースをカーニングより楽な方法で調整します。

もう一つ単語間のスペースを調整する有用なルールがあります。単語間に小文字の「i」を置き、スペースをそのサイズに調整することです（図の左）。しかしもちろんこの方法は書体や使い方に依存します。

整列の効果的な正しい使い方

整列には4種類あります、左揃え、右揃え、中央揃え、左右両端揃え。これらの揃えをどのように使うのが効果的なのか見てみましょう。

左揃え

左揃えは、すべてのテキストの左端を一列に並べることが大切です。これは最も簡単で読みやすく、テキストに美しいきちんとした左の端を与えます。

右揃え

右揃えは、文字を右に一列に並べます。主に出版物で装飾目的に使われます。文字を目で追うことは大変で、左端が揃っていないので次の行を見つけるのも非常に難しいです。

中央揃え

中央揃えは多種多様な用途を持っています。ポスター、招待状、ブランディングなど。真ん中に配置されてテキストは均衡を保ち、審美的に美しいデザインを簡単に実現します。しかし次の行へ目を動かすのには慎重を要します。

左右両端揃え

左右両端揃えは一見完璧な整列モジュールに見えます。左と右の端はきれいに揃い、小説などによく使われます。しかし問題がないわけではありません。図の左にあるように、最終行の単語が少ない場合、その行を左右両端で揃えるため文字間が広がりすぎてしまうことがあります。

いろいろなグリッドを試してみよう

基本的なグリッドを使いこなすスキルを身につけることは、どんな新人デザイナーでも着手すべき第一歩の一つです。しっかり実装されたグリッドは、普通のデザインをクリーンで、明確で、効果的なデザインに変えます。まるでおとぎ話にでてくる主人公をピンチから救う妖精のような存在です。

グリッドは多くのシェイプとサイズからできています。これをあなたのデザインに適するように自由に変更して利用できます。お互いの関係性を持ったページ上の要素を整列させ、論理的なデザインを生み出すこともできます。上の図はグラフィックを配置した2, 3, 4カラムのグリッドで、さまざまな方法で比喩的描写を整えるために使うことができます。

グリッドはカラム数がより少ないほど、デザインが均一されます。整列の強い印象をもった要素を多くのカラムがあるグリッドで使用すると、カスタマイズ性はあまりありません。図の右の4カラムのグリッドを見てみてください。いくつかの要素はグリッドを跨ぎ、いくつかはグリッド内に収まっています。異なるサイズのテキストボックスや画像をグリッドを使って整列させています。
グリッドをいろいろ試し、あなたのデザインに効果的なものを見つけだしてください。

デザインは常にユーザーのため

たいていのデザインはブリーフィングから始まります。それが個人プロジェクトだとしても、デザイナーはサイトの目的を説明できなければいけません。ブリーフィングの重要な要素の一つが、「私は誰のためにデザインをしていますか？」です。想定しているビジター、デザインを見てコミュニケーションを受けるであろうユーザーを考えることは非常に意味があります。

図は、特定のユーザーのためのデザイン例です。左はブリーフィングとユーザーに全く合わせていません。子供たちのコンサートのポスターで、対象は子供たちとその親です。左のような洗練されたブラックとホワイトのデザインは正しい注意を惹きつけることができず、正しいメッセージを送ることもできません。
右の例は、それよりもずっと良くコンテンツとユーザーに適しています。グラフィックは一目を惹き、イベントにあったトーンを備えています。

「デザインだけを見れば良さそうに見える」ではなく、ユーザーと最も良いコミュニケーションがとれるようにしてください。分からなくなった時は、常にブリーフィングに戻ってください。

先頭と終わりの孤立行を避ける

あなたのデザインを「素人くさい」ものから「洗練された」ものにする簡単な方法は、タイポグラフィの先頭と終わりの孤立行を認識して、排除することです。先頭と終わりの孤立行は、どんなタイプのデザインでも起こり、避けることはできません。しかしこのことを認識し、対応することが重要です。

先頭と終わりの孤立行を扱うにはいろいろな方法があります。まずはコンテンツの承認が得られたら、行の長さが問題ないように手作業でテキストを編集します。また、図左のように終わりの孤立行の前の言葉で「Shift+リターン」で改行し、行を下に持ってくることができます。また、テキストボックスやカラムのサイズを孤立行を追い出すように調整してもよいでしょう。

カラーは論理的に決める

カラーはデザインにおいて、非常に強力なツールです。すべてのデザインで重要なステップであるカラーパレットは、慎重に検討され、一貫していることで意味をなします。

カラーパレットをつくるときは、カラー理論やカラーの事例を参考にするとよいでしょう。ある特定の色合いがユーザ－にどのような効果を与えるか、例えばオレンジが食欲を促進するカラーで、そのことが理由でファーストフードのデザインでオレンジがよく使われています。

図は花束を専門に扱うフラワーショップとサバイバルゲームのペイントボールのロゴデザインです。左はカラースキームが機能していません。右は適切なカラースキームが与えられています。

使用したカラーがユーザーの気を散らせないか、メッセージを混乱させずに正しく伝えることができているか確認してください。

フォント選びも重要

カラーパレットを用意するのと同じように、フォントも慎重に選択されたパレットを用意するべきです。フォントもまたカラーと同様に、ある特定のフォントが特定の気分や感情を持っています。例えば法律事務所のブランディングにかわいいフォントは使わないですよね。

多くのデザイナーがデザインを過度に複雑にするのを避けるために、ほとんどの場合フォントは2, 3種類にすることを勧めます。論理的で効果的なデザインをつくるために、あなたのコミュニケーションと相互に補完するフォントを選んでください。

• 10 Golden Rules You Should Live By When Combining Fonts
• ウェイトが軽いフォントの効果的な使い方
• フォントの選び方の参考になる！世界で活躍している有名デザイナーたちが選んだフォントのランキング

ボディコピーにディスプレイフォントを使わない

ボディコピーにディスプレイフォントを使うことは、高級レストランに普段着で行くようなもので、適切ではありません。紛らわしくもあり、全くスマートではありません。

ディスプレイフォントは、ボディコピーよりもむしろ、文章などのより小さく使うところに適したフォントです。ボディコピーのためにデザインされたフォントより少し派手で、通常は短いタイトルや小見出しに適しています。

図で使用しているフォントは、ボディコピー用のディスプレイフォント「Yellowtail」です。この書体は明瞭性や可読性よりも審美的な価値を念頭においてデザインされているので、文章に使うと少し読みづらくなります。文章には「Georgia」のようなテキストのためにデザインされたフォントを使い、タイプフェイスのバランスを保つ方がはるかに良いです。ディスプレイフォントのための時と場所があり、ボディコピーの場所ではないということです。

フォントを伸縮して利用しない

これは非常にシンプルなルールです、覚えていることが簡単で、実行することも簡単、理解することも簡単でしょう。フォントを伸縮させないでください。フォントは各字形やプロポーションが注意深くデザインされています。これをゆがめることは、そのフォントの有効性を失わせることになります。

人々がそのフォントを伸縮させる理由の多くは、少し高さが欲しい、幅が欲しいです。これはフォントをゆがめないで解決する方法があります。フォントは現在さまざまな種類があり、その中にあなたが求めているものもたくさんあります。例えば、背が高いフォントであれば「Bebas Neue」、幅が広いフォントであれば「Silverfake」など、無料で使えるものがあります。手間が少しかかかるかもしれませんが、パーフェクトなフォントを見つけることには値段がつけられない価値があります。

合わない組み合わせのカラーは避ける

カラーには確かに「合わない組み合わせのカラー」が存在します。調和しない組み合わせのカラーは、それぞれのカラーの境目が見にくく、くすんだように見えます。図の左を見ると、そのように見えませんか？

合わない組み合わせのカラーを避けるシンプルな方法は、図の右のようにかなり高いコントラストを持った色相を使うことです。目はそれぞれのカラーの境目を容易に認識することができます。

人目を引くデザインをつくるためにこのカラーの不一致を好むデザイナー、特に広告主がいます。しかし審美的で美しいデザインのために、カラーの不一致を避けることは一般的に推薦されており、あなたがそれを支持するならカラーのルールを曲げることはできないと言うべきでしょう。

空白スペースをただの空のスペースと考えない

空白スペースはデザインに特別な何かを加えることができる効果的なツールの一つです。うまく使われた空白スペースはあなたのデザインに多くの有益な効果を与えます。
狙った場所に多くのフォーカスを導き、デザインを生き生きとさせ、要素のバランスを整え、デザインに洗練さを加えます。

空白スペースができるもう一つのことが、物理的な要素を加えずにデザインに意味を加えられることです。図はノイズキャンセリングのヘッドフォンのポスターで、左には空白スペースはほとんどなく、グラフィックと文字でスペースを満たしています。右は空白スペースを計画的に使用しています。たっぷりの空白スペースを使うことで、ヘッドフォンにフォーカスが向けられ、その下のテキストはよりいっそう注目されます。情報をまったく損なわずに、プロダクトがしっかりとフォーカスされます。

空白スペースをただの空のスペースではない、と認識することは重要です。グラフィックや文字やテクスチャなどで満たす必要はなくなります。空白スペースのアイデアを無視しないでください、スタディを重ねて空白スペースがどのように機能するか理解してください。

トレンドは追うのではなく、人気の高い理由を考える

デザインはファッションとちょっと似ています。新しいトレンドが生まれ、ちょっと人気が高くなり、廃れていきます。トレンドが過ぎ去ると時代遅れになり、効果がなくなります。

デザインも同様に、新しいスタイルやメソッドがしばらくの間人気が高くなり、みんなが飛びつきます。なぜなら、それは新しくて面白くて、使うことが簡単だからです。しかしトレンドは来るのも速いですが、去るのも同じくらい速いです。何年間か続くと思っていたトレンドが、突然時代遅れになることもあります。

けれど、これはトレンドを見て見ぬ振りをすべきだとはあなたは言わないでしょう。何がいつ人気が高いかチェックし、それがなぜ人気が高いのかを理解しようとしてください。図にあるロゴはXの周りに文字を配置したデザインで、これはシンプルで良さそうに見えたので、しばらくの間かなり人気がありました。しかし、広く使われるようになり、トレンドは登場したのと同じ速さで去ってしまいました。

トレンドから何を取り入れるか分析するのが大切です。なぜそのトレンドは人気が高かったのか、デザインのクオリティを高めるためにそのトレンドから何を得ることができるのか？
Xの形をしたロゴに関しては、おそらく図にあるように幾何学的なラインのアイデアを持ち帰ることができました。トレンドから多くを学び、それらのトレンドをぜひ試してみてください。くれぐれも時流に乗って振り回されないでください。

ツールはそれに合った正しいものを使う

ネジを締めるためにハンマーは使いません。それと同様にデザイナーもその状況にあったツールが何であるか正確に知っているべきです。

ツールの選択でよく見かける間違いは、ラスタライズされたロゴです。上の図にラスターとベクターの2つのロゴがあります。ラスターは多くのピクセルで形成されており、ベクターは多くのラインやパスで形成されています。この2つの一番大きな違いは、グラフィックのサイズを自由に変更できるかです。拡大した際、左のラスターはピクセルが汚くなってしまい、右のベクターにはこの問題はありません。

ベクターはクオリティを損なわずにサイズ変更できるので、こういったロゴなどに好ましい選択です。ラスターで作ったロゴは、まぁ普通に見かけますが、使用できるメディアを制限することになります。

本題に戻りましょう。良いデザイナーはこれらのフォーマットの違いを説明できるのではなく、何のツールをいつ使うのかを知っておく必要があります。ラスターはPhotoshopのようなツールでよいでしょう、ベクターはIllustratorがよいです。デザインを始める前にそのツールが何をして何を作りだすことができるのかマスターしておいてください。

メディアを考慮したデザイン

あなたのデザインはどこで使われますか？ ポスター、Webサイト、雑誌ですか？ あなたのデザインが使用されるメディアの仕様を知ることは、デザインがどのように見られるかより重要なポイントです。もしメディアの仕様を理解していないと、あなたのデザインは損なわれてしまうリスクを生じます。

例えば出版物だと、ノド余白に要素を含ませないようにデザインします。ノド余白は見開きページ間のスペースで、ここにはどんなグラフィックも文字も配置できません。図の右はノド余白を避けたデザインです。

私たちはこういった問題をどのように回避できるでしょうか？ 答えは良い意味での時代遅れのコミュニケーションです。印刷について話をするなら、クライアントや担当者にどれくらいのスペースが必要で、そこからどれぐらい動かす必要があるのか理解してコミュニケーションをとってください。

プロなら文法の規則もしっかり身につける

文法は慎重を要する問題です。指摘されるまで気がつかないといった文法の規則もたくさんあります。文法の規則に従ったデザインは、あなたのデザインをプロフェッショナルな状態にします。いくつか事例を見てみましょう。

まずは、アンパサンド、「and」の代わりに使う「&」のことです。組織のタイトル（Johnson & Johnsonなど）などにも使われ、ロゴやアイデンティティのデザインにもよく使われます。通常の文章の「and」には使用しません。

もう一つのよく見かける間違いは、句読点の後にスペースを2個使うことです。1個だと狭い？ いえいえ、1個のスペースで十分です。少し詰まったように見えるのであれば、トラッキングを調整したり、別のフォントに変えてみてください。

もう一つのポイントはハイフンとダッシュです。よく使うラインには3種類があります、ハイフン(-)とenダッシュ(–)とemダッシュ(—)です。ハイフンは2つの単語を繋げた複合形容詞などに使われます（例：custom-built）。enダッシュは期間を表現する時などに使われます（例：1984-1998）。emダッシュは文の途中で挿入句を入れる時などに使われます（例：Grammar is hard — or so I once thought）。

文法には知ることが重要ではないもののように思われるたくさんの規則がある、と多くのデザイナーが唱えるでしょう。それは些細なことですが、あなたのデザインを細部までしっかりと行き届いたプロフェッショナルのデザインに導く強力なツールです。

多くのエフェクトを使いすぎない

コミュニケーション デザインはシンプル・イズ・ベストが好まれ、これは「私のデザインにこれを加えることができるのを知っていますが、それを本当に加えるべきですか？」と尋ねることを意味します。ドロップシャドウ、ベベル、テクスチャ、グラデーションなどのエフェクト全て、その時そこに使うことが確かにできます。

多くのエフェクトをよく使われがちなのは、チャートとグラフです。図の左にある多くのエフェクト、多くの要素が含まれた棒グラフを見てください。右のグラフはデザインからいくつかのエフェクトや要素をなくし、情報を整理したもので、左よりずっと簡単に情報を理解でき、美しいデザインになっています。特定のラベルや値や要素を残し、コミュニケーションは妥協せずに同じくらい多くの情報を得ることができ、集中させることができます。さらに少なくしてもよいかもしれません。

終わりに

このリストを終えるにあたり最後に言わせてください、最後に大切な規則がもう一つだけあります。それは「デザインにルールはない」ということです。デザインの基本を学ぶことは確かに重要ですが、時にはチャレンジをしてみるということはより重要です。
規則を破ることは、長く語り継がれたり、伝説となるようなデザインを生み出すきっかけになることがあります。

デザインの規則を正しい方法で破ることができるように、全ての規則をしっかりと身につけてください。