デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

Posted under - Web Design

56

このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基本原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古い本ですが、とっても素晴らしい本で今では新装増補版となって発行されているようです。

I don’t think that design needs theory, but I think designers need theory.

今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基本というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。

せっかく書いた報告書やレポートも、読んでもらわなければ意味がないですし、どうすれば読みやすくてかっこいいデザインのページを作れるようになるのか … っていう基本をしっかり押さえておけば、それはとっても読みやすくて素敵なページになると思います。

学校でこういうことを習った人もたくさんいると思うので、デザインの勉強をしたことがない人が対象です。私のつたないデザインを事例として取り上げるので、あくまでも参考としてくださいね。

また、この記事を書くにあたり、「ノンデザイナーズ・デザインブック」の著者、Robin Williams氏、本の出版元である株式会社毎日コミュニケーションズの書籍編集部の A.K さんには、大変お世話になりました。ありがとうございました!

参考書籍 – ノンデザイナーズ・デザインブック [フルカラー新装増補版]

私が読んだのは、これの古い本です。今では新装増補版となって発行されているようですね!

見やすく素敵なデザインをつくるには

まず、紙の報告書でもレポートでも、名刺でも Webサイトでも、デザインをするならそこに機能がないと、デザインと呼べないかもしれないなーと私は思っています。

デザインとは、それを使う人、読む人がいるからあるのであって、使いやすいとか、読みやすいとか、見やすいとか、そういう機能のような要素がくっついているんじゃないかなーと。ここがデザインとアートの違いなんじゃないかなーとも考えたり … 私は芸術家じゃないのでアートのことはわかりませんが …。

さて、私が言いたいのは、ページをデザインをするときには、それを読む人のことを考えて作るのがいいかもしれませんねーということです。

過去記事:ちょっと(かなり)考えさせられるデザイナー、アーティストの深〜い名言集で紹介したデザイナーさんの言葉にも、そんな言葉が多いように思います。それでは具体的に、4つの基本原則を見ていきましょう!

デザインの4つの基本原則 目次

  1. 近接
  2. 整列
  3. コントラスト
  1. 反復
  2. 4つの原則が生み出す相乗効果

1. 近接

近接の原則とは、関連する要素と要素は近くに配置して、関係の薄いものは遠ざけるという原則です。人はページを見たときに、位置的に近いものは関係があって、離れているものは関係が薄い … と自然に思います。キレイなデザインの見た目でなく、視覚的な配置の関係から情報を組織化して考えてくれるんです。

これは離れてるからあんまり関係ないんだなーとか、近くにあるからこれは関係があるんだとか。言葉では難しいので画像を使って紹介します。

とあるケーキ屋さんのメニュー

距離が同じような位置関係

こんなケーキ屋さんのメニューがあったとします。あなたは CAUPCAKE#5 のケーキが、上のケーキなのか下のケーキなのか、ぱっと見て分かりますか?

上のケーキ、下のケーキとも、テキストが同じくらいの距離で、どっちのケーキの名前なのかわかりません …。これは実際のお店のメニューでもあるお話。頼んで出てきたものと、自分が思ってたものが違う … なんてことにもなってしまいますねー。

これを近接の原則にあてはめると、次のようになります。

近接の原則にあてはめると …

上のケーキに名前を近づけると、上のケーキの名前だということが一目瞭然です。逆に下のケーキとは、離れているので関連がないと思う訳ですね。構造がとっても明確になって、これなら迷うこともなくなります。

ポイントは、要素間に悪い例のような均等な空白を作らないこと。複数の要素でかたまりをつくれば、そこは関連性が強くて、離れてれば関連が薄い … という構造の組織化が簡単にできちゃいます。このブログのトップページの記事一覧を例にとると …

近接の原則の例

こんな感じで画像、見出し、本文をそれぞれ近づけてひとかたまりをつくり、他の記事とは距離をとってます。こんなの当たり前だよーって声が聞こえてきそうですが、もうちょっと見てみましょう。

今度はブログの文章の中、見出しと段落を例にとると、見出しは当然下の段落と近づけ、上の段落とは離します。こうするだけでぐっと読みやすいページのデザインになります。ケーキ屋さんのメニューの時と同じです。

文章中の見出しの位置

見出しと段落、段落とリスト、見出しとリストなど、それぞれの要素の関連性で距離を決めていきます。

1.1. 近接のちょっと小技

近接というルールにしたがってきれいにデザインされているからこそ、それを破ったときに新しい効果が生まれます。下の画像の3つのかたまりから、ひとつだけぽつんと距離がとられてます。

ひとつだけ遠ざけると …

距離をとるだけでなく、色や形、大きさなどを、合わせて変えてあげると効果的です!

こうすると何となくそのひとつだけ特別な感じがしませんか?レイアウトだけでひとつだけ特別扱いできるのも、近接というルールをしっかり守ってデザインしてこそですね。ルールを破るためには、まずルールを知らなくてはならないって言葉通りな感じです。

1.2. 近接のポイント

  • 関連するものは近づけて、関連の薄いものは離す。
  • 要素間に均等な空白を作らない(ケーキ屋さんのメニュー)。
  • 関連するものはグループ化してまとめる。
  • 視覚的に構造化されるだけでなくて、見る人が情報を組織化できる。

近接の視覚的な構造、グループ化されているかどうかをチェックするのには、目を細めたり、少し離れてデザインを見るとわかりやすいです。

近接の原則は、勉強してなくてもみんな自然と使ってると思うんですけど、これをきちっと意識して使うと、今より全然読みやすいページが作れるようになると思いますよー。私ももっと勉強しなくちゃなんですけど …

2. 整列

整列とは読んでそのままですけど、各要素はきちんと整列して配置するということ。基本的にこれは全ての要素に当てはまります。ちょっとここに隙間ができたから何かを置こうとか、何となくもうちょっと右へずらそう … とかはなしです。

たとえ要素と要素が距離的に離れていても、きちんと整列していれば、要素と要素を結びつける透明な線が生まれます。この透明な線(私は見えない力線って呼んでます)を意識して、各要素を配置します。見えない線を見つけて、その線にこだわって全ての要素を配置してみると、きれいに整列されたデザインができます。

整列は誰でも自然とやってるとは思うんですけど、もっと透明な線にこだわってみてはどうでしょう。例えば下の例 1では要素がセンター揃えできちんと整列されています … でも見えない力線がないというか弱いです。

センター揃えと左揃え

センター揃えでの整列

左揃えでの整列

そこで 2左揃えにしてみると、左側に透明な線ができるはずです。左側、各列の文字の頭がそろってるのでそこに透明な線が生まれました。

中央揃えのときに、もっと見えない力線を印象づけたいなら、目印になるようなオブジェクトを置くといいかもしれません。右の例では真ん中にハートのマークを置いてみました。こうすると不思議と真ん中に一本の線が生まれます。クリスマスツリーの幹の部分をイメージしてもらうと分かりやすいかもしれません。

こんな風に整列を意識してみると、デザインの見方がちょっと変わるかもしれません。それをふまえていろんな名刺とかを眺めるのも、とっても面白いですよー。下記リンクでは、素敵なビジネスカードのデザインがまとめられています!

2.1. 整列のポイント

  • ページ上の全てのものを意識的に配置する。
  • 整列の基準になる線を探してそれにこだわる。
  • ページ上の全てのもが視覚的なつながりを持つように意識する。

例では縦の線しか紹介してませんが、横の線や斜めの線など、いろんな線があるので探してみてくださいね。整列の基本的なポイントはページの統一感組織的に構造化すること。さっきの近接と合わせて、ページを組織的な構造にしてくれます。

このあと他の原則も紹介しますが、気を付けるのは、ひとつの原則だけが独立して成り立つことはまれで、4つの原則が互いに相乗効果を生むということです。今まで紹介した「近接」「整列」を踏まえながら続きを読んでみてください。

3. コントラスト

コントラストにはいろんな種類がありますね。色の濃淡、フォントの大小、線の太さ、余白の大きさなどなど。見出しや中見出しを本文の文字より大きくしたり、太字にしたりということは誰でもやっていることだと思います。

コントラストのコツ … それは、ふたつの要素ははっきりと違わせること。思い切り大胆に違わせちゃいましょう!

私はよく大胆すぎると言われるので、やりすぎな感じも否めませんが …。見出しは見出しとはっきり分かるように、大きく(もちろん他の方法でコントラストをつけることもありです。)という感じです。

長い文章では全文を読まずに、見出しから中見出しへと流し読みする人もたくさんいます。そんな時、中見出しのコントラストがはっきりしている文章は読みやすいですよね。

コントラストの本当に簡単な例をご紹介します。コントラストの威力(?)を確認してもらえればいいかなーと思います。近接の時と同じように、目を細めて見たり、少し離れてみたときに違いがはっきり分かればいいと思います。

コントラストのポイント

コントラストには色んな種類がありますね!色の濃淡、フォントの大小、線の太さ、余白の大きさなど。見出しや小見出しを本文の文字より大きくしたり、太字にしたりということは、誰でもやってることだと思います。コントラストのコツは、ふたつをハッキリと違わせること。思い切り大胆に違わせちゃいましょう!

見出しをほんの少し大きくしました …。でも、これではコントラストが十分とは言えませんね。

コントラストのポイント

コントラストには色んな種類がありますね!色の濃淡、フォントの大小、線の太さ、余白の大きさなど。見出しや小見出しを本文の文字より大きくしたり、太字にしたりということは、誰でもやってることだと思います。コントラストのコツは、ふたつをハッキリと違わせること。思い切り大胆に違わせちゃいましょう!

今度は見出しを大きくして、さらに太字にしてみました。本文はさっきと同じ大きさです。十分コントラストがついてると思います!

コントラストのポイント

コントラストには色んな種類がありますね!色の濃淡、フォントの大小、線の太さ、余白の大きさなど。見出しや小見出しを本文の文字より大きくしたり、太字にしたりということは、誰でもやってることだと思います。コントラストのコツは、ふたつをハッキリと違わせること。思い切り大胆に違わせちゃいましょう!

最後はさっきと同じサイズの文字に背景を入れて、白抜き文字にしてみました。とっても強力なコントラストがついたと思います!

目立つコントラストは、見る人の目を引きつけます。そしてデザインのセンスの見せ所じゃないかなーと思います。

このブログの見出し

大きなフォントサイズと、大きすぎる余白の Webデザインレシピの見出し … 大胆すぎるかな?

3.1 フォントの種類でコントラストをつける

Webデザインにおける日本語フォントは、コントラストという面で難しい部分があるのですが(ゴシックと明朝くらいだし)、アルファベットの場合は、フォントの種類でコントラストをつけるのも面白いです。

ちょっとその前に、欧文フォントの種類を簡単にご紹介します。欧文フォントはざっくり分けると次のような感じです。

1.Old style

font – Times New Roman

Old style は、手書き文字をお手本にしたフォントで、長文でも読みやすい欧文フォントです。手書きの文字を手本にしているので、ハネがついてます。

このハネをセリフって呼んでいて、Old style はセリフフォントの仲間 … という訳です。Old style の小文字のセリフは、傾いてるのが特徴的。また、文字の太いところ、細いところの変化があって、細いところ同士を結ぶと斜めになるのも特徴です。

2. Modern

font- DubiePlain

Modern もセリフフォントの仲間です。でもセリフが水平になって、文字の細いとこをつなぐと垂直になります。セリフが細くて、太いところは極端に太い感じが特徴的です。ちょっとエレガントな雰囲気を持ってますが、長文には向きませんね。

3. Slab serif

font- Museo Slab

Slab serif も、セリフがあるのでセリフフォントの仲間ですね。Modern の形から、太さの変化を少なくしたのがスラブセリフです。可読性もいいので長文にも向いています。スッリキして読みやすいので大きな見出しにもよく使われています。

4. Sans serif

font – Helvetica

サンセリフは、セリフ(ハネ)のないフォントです。サンというのはフランス語で 〜がないっていう意味だそうです。また太さの変化がほとんど一定なのが特徴です(もちろん例外もあって、このブログのロゴやサイドバーの見出しで使っているフォントのように太さの変化のあるサンセリフもあります)。

日本語の Webサイトで使われるゴシックも、このサンセリフの仲間ですね。

他にも Script(続き文字、筆記体)、Decarative(飾り文字)なんていうカテゴリーもあります。

こんな風にフォントについて少し知っていると、フォントを組みあわせてコントラストをつける時などに参考になります。ちょっとフォントのコントラストが素敵なサイトを紹介しますね!

SHAPING THE PAGE

Webデザイナーさんのポートフォリオサイト – SHAPING THE PAGE

Webデザイナーさんのポートフォリオサイト。すっきりしたサンセリフのサイトロゴと、黒いセリフフォントのコントラストが素敵です。その下は同じセリフフォントを白い斜体にしてコントラストをつけています。… かっこいいです XD

SHELLY COOPER | DESIGN

Webデザイナーさんのポートフォリオサイト – SHELLY COOPER | DESIGN

こちらもデザイナーさんのポートフォリオサイトです。見出しは Lobster というスクリプトフォント、ロゴと本文にはサンセリフが使われてます。こんな風に違うフォントを組み合わせるのが基本です。同じカテゴリーのフォントでは、形が似ているのでコントラストがつきにくいです。

N Design Studio

Webデザイナー Nick La さんのブログ & ポートフォリオサイト – N Design Studio

Webデザイナー Nick La さんの、ブログ & ポートフォリオサイト。ロゴは太いサンセリフと、オールドスタイルフォントとの組み合わせ。その下の Welcome のタイポグラフィーはスラブセリフとスクリプトフォントの組み合わせでデザインされてます … 格好良すぎます!

フォントのコントラスト、ちょっと面白いですよね!

3.2. コントラストのポイント

  • 2つの要素が同じものでないなら、はっきりと違わせる。
    二つの要素を同一ページに配置する時は似せてはダメ。
  • ページ上のコントラストは読者の目を引きつけます!

コントラストはデザインに面白みを加えるし、デザイナーのセンスが光るところかも。他の原則と組み合わせて、ページの組織化の役割をします。

この世の全ての性質は単にコントラストによって成立している。
それ自体で存在するものはなにもない。

なんて言葉もあります … コントラスト … 深いです。

4. 反復

最後の4つ目の原則は反復です。これはデザインの中の何かしらの特徴を、ページ全体、作品全体を通して繰り返すことです。色や形、テクスチャやレイアウトなどなど、視覚的に認識できるものなら何でも OK です。こうするとページ全体に一貫性が生まれてます。

反復を漠然と使うんじゃなくて、ページ全体を統合するようなポイントとして効果的に使うのがポイントです。例えばこの Webデザインレシピでは、いくつかの要素で反復を使っていますが、色やテクスチャは置いておいて、特徴あるロゴのフォントのデザインをあちらこちらで使ってみたので紹介します。

反復を利用したエレメント

特徴的なフォントに合わせて、いろんなエレメントを作ってみました!

こんな風にハート、吹き出し、アイコンやボタンなどを、特徴あるフォントのデザインを踏襲してデザインしてみました ;D うまく伝わればいいのだけれど …。ひとつの形を反復するだけでなく、こういった特徴を反復するのも有効な手段ですね!

グレーの透過レイヤーをあちこちでつかってみた

グレーの透過レイヤー

グレーの透過レイヤーを、画像の枠やフッター、コメント欄などで、繰り返し使っています。

グレーの透過レイヤーを、ページャーをはじめ、画像の枠やフッター、コメント欄、サイドバーなどあちこちで使っています。

ボーダーは破線で統一

ボーダーはピンクの破線に統一してみたり …

こんな風に一貫性を演出すれば、ページのどこか一部を見ただけでも、「これは Webデザインレシピのページだー」って分かってもらえるかもしれませんね!とにかく反復を効果的に使って、一貫性を作り上げましょう。

強い一貫性がないと、その中に何か特別なものを入れたときに、それが特別だってことを見分けられません。一貫性というルールがあるから、何か違う驚くような、特別な要素を入れ込むこともできるようになりますね。

4.1. 反復のポイント

  • デザインの中から特徴的な何かをポイントとして効果的につかう。
  • 反復を利用して全体に統一感、一貫性を作る。

でも、要素を反復しすぎて、煩わしい感じというか、くどくならないように注意も必要です。

5. 4つの原則が生み出す相乗効果

近接整列コントラスト反復と、4つの基本を見てきましたが、どれかひとつだけ使う … ということではなくて、4つの原則を絡めながら、相乗効果を狙って上手にデザインしていきましょう。近接だけではダメだし、整列だけではいいデザインはできません。4つを意識しながらデザインすれば、きっと読み手にも優しい素敵なデザインができると思います!

それから … これらはあくまで基本です。あとはセンスで素敵なデザインに仕上げてください。もちろんこの基本を破るのだってありです … でもルールを破る前に基本を知っているのといないのでは違うかなーと思います。

ルールを破るなら、意識的でなきゃ意味ないよ。
ルールを破れるようになるにはね、まずルールを知らなければいけないんだよ。

こんな風にデザインをすれば、きっと楽しくもっと素敵なデザインができると思います!… つたない私のデザインを例にしちゃいましたけど、世の中には素敵なデザインがたくさんあふれてます。そういうデザインを見るときに、基本を踏まえて見直すと今までとは違った見え方がしてくるかもしれませんよー!

参考書籍 – ノンデザイナーズ・デザインブック [フルカラー新装増補版]

私が読んだのは、これの古い本です。今では新装増補版となって発行されているようですね!ここで紹介したこと以外にも色についてのことなどが追加されているようです。デザインの基本4原則を、さらに詳しくを勉強したいなーという人にはオススメの一冊です!

Comments

Thank you for the comment.