みなさんこんにちは！無事大学の卒業が確定して一安心のmegです。今回は初心者向けの記事としてデザインの基本についてまとめてみました。デザインに興味はあるけれど何を勉強すればよいのか分からない方、これからデザインについて学ぼうと思っている方の参考になれば幸いです♪

目次

1. デザインとは何か
1. 「デザイン」という言葉の意味
2. ソール・バスとスティーブ・ジョブズの言葉
2. デザインの４つの基本原則を知る ‐『ノンデザイナーズ・デザインブック』より
1. 近接
2. 整列
3. 反復
4. コントラスト
3. まとめ – 【2014年3月9日18時27分「概念とテクニックは繋がっている」を追記しました】

１、デザインとは何か

１－１、「デザイン」という言葉の意味

皆さんは「デザイン」と聞くとどんなことをイメージしますか？オシャレなこと？洗練されていること？私たちはなんとなく見た目が美しいことや、ぱっと目を引くものなどを想像しがちですが、まずは「デザイン」という言葉の意味についてきちんと考えてみましょう。何事も基本が肝心です！しばらく概念的な話が続きますが、どうかお付き合いくださいませ。

デザインとは

作ろうとするものの形態について、機能や生産工程などを考えて構想すること。意匠。設計。図案。「自分で―した服」

‐ 大辞林

デザインは日本語では「設計」にもあたり、「形態」や「意匠」と訳されてきたが、それだけに限らず、人間の行為（その多くは目的を持つ）をより良いかたちで適えるための「計画」も意味する。人間が作り出すものは特定の目的を持ち、それに適うようデザイナー（設計者）の手によって計画されるのである。

‐ Wikipedia

デザインという言葉には、設計・意匠・計画・構想・機能といった意味合いがあるようですね。見た目に関する記述がないことに気が付きましたか？では、デザインの語源についても考えてみます。

デザインの語源

デザインの語源はデッサン(dessin)と同じく、“計画を記号に表す”という意味のラテン語designareである。つまりデザインとは、ある問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。

‐ Wikipedia

「計画を記号に表す」という表現は少し難しいですが、言い換えると「デザインは思考というプロセスを経た結果としての表現」ということでしょうか。デザインの見た目の素晴らしさはあくまで結果であり、目的ではないのです。デザインのためのデザインにならないようにしたいですね。デザインは問題解決のための手段です。

１－２、ソール・バスとスティーブ・ジョブズの言葉

デザインの意味が掴めてきたところで、ある２人の有名な人物のデザインに対する考え方を紹介したいと思います。

「デザインはどう機能するか」

Design is not just what it looks like and feels like. Design is how it works.
デザインとは、単にどのように見えるか、どのように感じるかということではない。どう機能するかだ。

‐ スティーブ・ジョブズ

この言葉はとても有名ですし、スティーブ・ジョブズ自身についても説明する必要もないかと思いますが、やはり彼も「機能」を重要視していますね。

「思考の密度が高ければ、デザインの密度も高くなる」

デザインを支える「思考」は、目に見えない部分であるけれども、形として表されたデザインと同様に重要なものです。デザイニングという仕事は、思考を目に見える形に練り直す作業そのものといえます。（中略）考え、そして表す。形にする以前の思考の密度が高ければ高いほど、デザインの密度も高くなる、ということでしょう。

– ソール・バス　『Saul Bass: A Life in Film and Design』 343ページより一部引用

この言葉は私の大好きなアメリカのグラフィック・デザイナー、ソール・バスによるものです。（ソール・バスって誰？という方はこちらをご覧ください。公式サイトはこちら。）

彼はメディアや表現の形がどうであれ、デザインの本質は変わらないと言っています。たとえWebや紙媒体、その他様々な表現手法であっても、デザインは「思考を目に見える形に練り直す作業そのもの」なのです。

プロのデザイナーによる作品が素晴らしいのは、先述の通り「思考というプロセスを経た結果としての表現」だからなのですね。といってもやはり初心者には難しいですし、私もできているわけではありません。しかし初心者のうちからこういった意識を少しでも持つことは私はとても大切なことだと思います。

では、デザインについての心構えがわかったところで、デザインの４つの基本原則について説明したいと思います。ここまでは概念的な話でしたが、次項からはデザインのテクニックに関する話になります。

２、デザインの基本原則を知る – 『ノンデザイナーズ・デザインブック』より

『ノンデザイナーズ・デザインブック』

皆さんは『ノンデザイナーズ・デザインブック [フルカラー新装増補版]』という本をご存知でしょうか？この本は、「デザインについて正式に学んだことがないけれども、デザインする必要がある人たち」や、「デザインやタイポグラフィーの学習に割く時間もお金もないものの、自分の作るページを見栄えよくする方法を知りたい」という人向けに書かれた本です。

『ノンデザイナーズ・デザインブック』は、初心者向けにイラストと具体例を示しながら書かれているので、とてもわかりやすい内容となっています。今回はこの本の内容に即して説明していきたいと思います。

デザインの４つの基本原則

著者のRobin Williams氏によれば、デザインにはどの作品にも共通する４つの基本原則があります。これら４つは互いに関連しており、どれかひとつの原則しか使わないのはごくまれだということです。

1. 近接 Proximity
2. 整列 Alignment
3. 反復 Repetition
4. コントラスト Contrast

※『ノンデザイナーズ・デザインブック』では、カラーとタイポグラフィについても説明がなされていますが、この記事では４つの基本原則に絞って書いています。

２－１、近接 Proximity

情報のグループ化をする

近接とは、関連する項目をまとめてグループ化することです。関連する項目（情報）は空間的に近づけ、逆に関連しない項目は離して配置する必要があります。視線の流れを意識し、どこから見始めてどういう道筋をとり、どこで見終わるのかを考えます。この時、見終わった後どこに目が行くのかも考慮する必要があります。全体の論理的な流れが目で追えるようにしましょう。

上の図では、２つの名刺を並べています。どちらが読みやすいですか？上の名刺はどこから読めばいいのか分からず、視線がさまよってしまいませんか？一方下の名刺では、「その人を表すもの」（＝名前と職業）のグループとその人との連絡手段（＝Webサイト・メールアドレス・電話番号）の２つにグループ分けをしました。こうすることで、２つのグループの間に余白が生まれます。この余白があることによって、２つのグループは独立したものとなるわけです。また、視線の流れも上から下へとまっすぐなものになります。

近接の目的は情報の組織化です。関連する情報を近づけてグループ化すると、組織構造ができあがります。つまり、似た者同士の集まりが生まれるということですね。情報の組織化をすることで、意味のある余白が生まれ、人に読んでもらいやすいデザインになります。文字がカツカツに詰め込まれていると読みにくいですよね。情報のグループ化はとても重要なのです。

２－２、整列 Alignment

透明な線をつくる

ページ上のものを左揃え、あるいは右揃えというように意識的に配置すると、目に見えない透明な線が生まれます。これが整列です。この時、すべての要素が視覚的なつながりをもつようにします。

ここでもまた２つの名刺を例に挙げています。上の名刺は、近接によってグループ化された名刺です。確かにきれいに整列していますが、文字列は中央揃えになっています。これはこれで悪くはないのですが、レイアウトに「強さ」を今一つ感じることができません。では下の名刺はどうでしょうか？近接に加え、文字列は右揃えになっています。このように意図的に文字を整列させることによって、強い透明な線が生まれ、レイアウトに「強さ」を与えます。これに対して中央揃えの名刺では透明な線が弱いことがわかります。

このように整列を用いることでページの内容に一体感が生まれると同時に、組織化につながります。意識的な強い整列によって、洗練された、格調ある表現が可能になります。

２－３、反復 Repetition

デザイン上のある特徴を繰り返す

反復は、デザイン上のある特徴を作品全体を通して繰り返すことです。反復させるものは、太字体、罫線、色、アイコンなど様々なものがあります。ある要素を繰り返して用いることで、作品全体に一貫性や統一感が生まれます。

例が名刺ばかりになってしまいますが、この名刺では反復の例をいくつか挙げることができます。この名刺で使われているフォントは、基本的にはすべて同じです。名前の部分だけ、太字のイタリック体にしています。また、フォントサイズも統一しています。アイコンに関しては、一つ一つの内容は違いますが、背景をピンクの●で囲むことによって統一感を出しています。反復では必ずしも完全に同じものを繰り返さなくても構いません。ただし、「変化のある一体性」を心がけましょう。

同じことを繰り返しますが、反復を用いることで作品に統一感が生まれます。統一感があると、情報がよりわかりやすくなりますね。

２－４、コントラスト Contrast

臆病にならず、違いをはっきりさせる

コントラストとは、２つの要素が異なる場合に見た目をはっきりと異ならせることです。例えば見出しと本文の違いを視覚的に際立たせたい場合、見出しの文字サイズを大きくし、ウェイトを太くします。それに対して本文の文字サイズは小さく、ウェイトは細いままにします。こうすることでコントラストが生まれ、その要素が見出しなのか、本文なのかが一瞬で判断できるようになります。このようにして、ふたつの項目をはっきりと異ならせるのです。

上の図の左の例は近接と整列、そして反復も用いられていますね。でも見る人の目を引きつけるものがありません。右側の例ではコントラストを用いているのでとても目につきやすくなっています。例えば、ヘッダーとフッターの部分には濃い青の背景色を使用し、コントラストを強調しています。ヘッダーの背景色をつけたために、見出しの文字が白抜きになり、見出しがぱっと目に入ってきますね。また「Four」の部分を黄色にしたので、「４つ」であることが強調されています。見出しと小見出しの部分には太字を使用しているので、「Four Design Principles」は「Proximity」、「Alignment」、「Repetition」、「Contrast」の４つであることがすぐにわかります。

ページ上にコントラストがあることで、見る人の目をひきつけます。コントラストがはっきりしている方が、デザインにメリハリが生まれ、私たちの目は自然と引き込まれていくのです。さらに、コントラストには情報の組織化を支援する効果があります。ある項目から次の項目へと視線が移るとき、情報の組み立て（＝論理的な流れ）が見る人にとってわかりやすいものになります。

３、まとめ

いかがでしたか？ではここでデザインの基本についておさらいをしておきましょう。

デザインの意味・概念

1. デザインには、設計・意匠・計画・構想・機能といった意味合いがある
2. デザインは「思考というプロセスを経た結果としての表現」である
3. デザインは問題解決のための手段

デザインのテクニック – ４つの基本原則

1. デザインの基本原則は、近接・整列・反復・コントラストの４つ
2. 近接は情報をグループ化すること
3. 整列は透明な線をつくること
4. 反復はデザイン上のある特徴を繰り返すこと
5. コントラストは臆病にならず違いをはっきりさせること
6. これら４つをうまく組み合わせることで、説得力のあるデザインが可能になる

概念とテクニックは繋がっている – 【2014年3月9日 18時27分追記部分】

前半では「デザインとは何か？」という概念的な説明、後半ではデザインのテクニックに関する説明をしました。この記事の総まとめとして、概念的な部分とテクニックのつながりを私なりに考えたいと思います。

例えばこの記事でも例に挙げた「名刺」ですが、名刺の機能はなんでしょうか？「自分の名前と連絡手段を相手に伝える」ことです。では、適切に自分の名前と連絡手段を相手に伝えるにはどうすればよいでしょうか？つまり、名刺としての役割を機能させるためにはどうすればよいか？と考えるわけです。これが名刺のデザインを考えるということなのですが、ここでデザインのテクニックが登場します。先述の通り要素がばらばらに配置された名刺と、きちんと整列された名刺では、どちらが見やすいかというと間違いなく後者の方です。いくらデザインの概念を理解していても、テクニックの部分を知らなければ適切なデザイン表現はできないと思います。重要なのは、問題解決のための手段として、どのようなデザインのテクニックを使い、表現するかだと思います。思考というプロセスの中で、例えばこの記事で紹介したようなテクニックを使い、その結果として洗練されたデザインの名刺が出来上がるのだと思います。

デザインの概念を理解することと、テクニックを理解することは相互に関連していると私は考えています。概念やその時どきのデザインの目的（ゴール）を把握したうえで、テクニックを使い、状況にあった適切なデザイン表現を心がけたいものです。

参考書籍

• 『Saul Bass: A Life in Film and Design』
• 『ノンデザイナーズ・デザインブック [フルカラー新装増補版]』

デザインの基本の関連記事

• まゆげさん「デザインに説得力を！！基本のレイアウト表現のやり方４つ」
• mususさん「【初学者向け】WEBデザイナーが紙のデザインをする時に知っておきたい7つの注意点」

ぜひこちらもあわせて読んでみてくださいね！ではまた！