このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない基本原則4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古い本ですが、とっても素晴らしい本で今では新装増補版となって発行されているようです。
今回、Webデザインレシピのデザインをガラッと変えてみました。これを機会にちょっとデザインの基本というか、デザインをするときにガイドとなる4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトをつくるとかじゃなくても知っておいて損はないかもしれませんね。
せっかく書いた報告書やレポートも読んでもらわなければ意味がないですし、どうやって読みやすくてかっこいいデザインのページを作れるようになるのかっていう基本をしっかり押さえておけば、それはとっても読みやすくて素敵なページになると思います。
学校でこういうことを習った人もたくさんいると思うので、デザインの勉強をしたことがない人が対象です。私のつたないデザインを事例として取り上げるので、あくまでも参考としてくださいね。
また、この記事を書くにあたり、「ノンデザイナーズ・デザインブック」の著者、Robin Williams氏、株式会社毎日コミュニケーションズ 書籍編集のA.Kさんには大変お世話になりました。ありがとうございました！
見やすく素敵なデザインをつくるには
まず、紙の報告書でもレポートでも、名刺でもWebサイトでもデザインをするならそこに機能がないとデザインと呼べないかもしれないなーと私は思っています。
デザインとは、それを使う人、読む人がいるからあるのであって、使いやすいとか、読みやすいとか、見やすいとか、そういう機能のような要素がくっついているんじゃないかなーと。ここがデザインとアートの違いなんじゃないかなーとも考えたり … 私は芸術家じゃないので漠然ですが …。
さて、私が言いたいのは、ページをデザインをするときには、それを読む人のことを考えて作るのがいいかもしれませんねーということです。
過去記事：ちょっと（かなり）考えさせられるデザイナー、アーティストの深〜い名言集で紹介したデザイナーの言葉にも、そんな言葉が多いように思います。それでは具体的にみていきましょう。
デザインの4つの基本原則 目次
- 近接
- 整列
- コントラスト
- 反復
1. 近接
近接の原則とは、関連する要素と要素は近くに配置して、関係の薄いものは遠ざけるという原則です。人はページを見たときに近いものは関係があって、離れているものは関係が薄いと自然に思います。見た目だけでなく、視覚的な配置の関係から情報を組織化して考えてくれるんです。
これは離れてるからあんまり関係ないんだなーとか、近くにあるからこれは関係があるんだとか。言葉では難しいので画像を使って紹介します。
こんなピザ屋さんのメニューがあったとします。あなたは Pizza #5 のピザが上のピザなのか下のピザなのかぱっと見て分かりますか？
上の写真とも、下の写真ともテキストが同じくらいの距離でどっちのピザの名前なのかわかりません …。これは実際のお店のメニューでもあるお話。頼んで出てきたものと、自分が思ってたものが違う … なんてことにもなってしまいますねー。
これを近接の原則にあてはめると、次のようになります。
ショコラ"をestrelasが行う"
上の写真に名前を近づけると、上のピザの名前だということが一目瞭然です。逆に下の写真とは離れているので関連がないと思う訳ですね。構造がとっても明確になって、これなら迷うこともなくなります。
ポイントは要素間に悪い例のような均等な空白を作らないこと。複数の要素でかたまりをつくればそこは関連性が強くて、離れてれば関連が薄いという構造の組織化が簡単にできちゃいます。このブログのトップページの記事一覧を例にとると、
こんな感じで画像、見出し、本文をそれぞれ近づけてひとかたまりをつくり、他の記事とは距離をとってます。こんなの当たり前だよーって声が聞こえてきそうですが、もうちょっと見てみましょう。
今度はブログの文章の中、見出しと段落を例にとると、見出しは当然下の段落と近づけ、上の段落とは離します。こうするだけでぐっと読みやすいページのデザインになります。ピザ屋さんのメニューの時と同じです。
見出しと段落、段落とリスト、見出しとリストなど、それぞれの要素の関連性で距離を決めていきます。
ちょっと小技
近接というルールにしたがってきれいにデザインされているからこそ、それを破ったときに新しい効果が生まれます。下の画像のうち3つのかたまりから、ひとつだけ他のかたまりから距離がとられてます。
こうすると何となくそのひとつだけ特別な感じがしませんか？レイアウトだけでひとつだけ特別扱いできるのも、近接というルールをしっかり守ってデザインしてこそですね。ルールを破るためには、まずルールを知らなくてはならないって言葉通りな感じです。
近接のポイント
- 関連するものは近づけて、関連の薄いものは離す。
- 要素間に均等な空白を作らない（ピザ屋さんのメニュー）。
- 関連するものはグループ化してまとめる。
- 視覚的に構造化されるだけでなくて、見る人が情報を組織化できる。
近接の視覚的な構造、グループ化されているかどうかをチェックするのには、目を細めたり、少し離れてデザインを見るとわかりやすいです。
近接の原則は、勉強してなくてもみんな自然と使ってると思うんですけど、これをきちっと意識して使うと今より全然読みやすいページが作れるようになると思いますよー。私ももっと勉強しなくちゃなんですけど …
2. 整列
整列とは読んでそのままですけど、各要素はきちんと整列して配置するということ。基本的にこれは全ての要素に当てはまります。ちょっとここに隙間ができたから何かを置こうとか、何となくもうちょっと右へずらそう … とかはなしです。
たとえ要素と要素が距離的に離れていても、きちんと整列していれば要素と要素を結びつける透明な線が生まれます。過去記事：ミニマルなWebデザインをする時に心がけたい注意書きの中でも見えない力線という言葉で紹介しましたが、この透明な線を意識して各要素を配置します。
この見えない線を見つけて、その線にこだわって全ての要素を配置してみるときれいに整列されたデザインができます。
整列は誰でも自然とやってるとは思うんですけど、もっと見えない力線にこだわってみてはどうでしょう。例えば下の例では要素がセンター揃えできちんと整列されています … でも見えない力線がないというか弱いです。
私にできることすべてはあなたのために私のベストです
そこで左揃えにしてみると、左側に透明な線ができるはずです。
左側、各列の文字の頭がそろってるのでそこに透明な線が生まれました。
中央揃えのときにもっと見えない力線を印象づけたいなら目印になるようなオブジェクトを置くといいかもしれません。下の例では真ん中にハートのマークを置いてみました。こうすると不思議と真ん中に一本の線が生まれます。クリスマスツリーの幹の部分をイメージしてもらうと分かりやすいかもしれません。
こんな風に整列を意識してみると、デザインの見方がちょっと変わるかもしれません。それをふまえていろんな名刺とかを眺めるのも面白いですよー。
整列のポイント
- ページ上の全てのものを意識的に配置する。
- 整列の基準になる線を探してそれにこだわる。
- ページ上の全てのもが視覚的なつながりを持つように意識する。
例では縦の線しか紹介してませんが、横の線や斜めの線などいろんな線があるので探してみてくださいね。整列の基本的なポイントはページの統一感と組織的に構造化すること。さっきの近接と合わせてページを組織的な構造にしてくれます。
このあと他の原則も紹介しますが、気を付けるのは、ひとつの原則だけが独立して成り立つことはまれで、４つの原則が互いに相乗効果を生むということです。今まで紹介した「近接」「整列」を踏まえながら続きを読んでみてください。
3. コントラスト
コントラストにはいろんな種類がありますね。色の濃淡、フォントの大小、線の太さ、余白の大きさなどなど。見出しや中見出しを本文の文字より大きくしたり、太字にしたりということは誰でもやっていることだと思います。
コントラストのコツ … それは、ふたつの要素ははっきりと違わせること。思い切り大胆に違わせちゃいましょう！
私はよく大胆すぎると言われるのでやりすぎな感じも否めませんが w 見出しは見出しとはっきり分かるように、大きく（もちろん他の方法でコントラストをつけることもありです。）という感じです。
長い文章では全文を読まずに見出しから中見出しへと流し読みする人もたくさんいます。そんな時、中見出しのコントラストがはっきりしている文章は読みやすいですよね。
コントラストの本当に簡単な例をご紹介します。コントラストの威力（笑）を確認してもらえればいいかなーと思います。近接の時と同じように、目を細めて見たり、少し離れてみたときに違いがはっきり分かればいいと思います。
見出しを16pt 本文を12pt で作ってみました。コントラストが十分とは言えませんね。
今度は見出しを 24pt にして太字にしてみました。本文は同じ12ptです。十分コントラストがついてると思います。
最後は上のサイズで背景を入れて白抜き文字にしてみました。とっても強力なコントラストがついたと思います w
目立つコントラストは見る人の目を引きつけます。そしてデザインのセンスの見せ所じゃないかな？ w
大きなフォントサイズと大きすぎる余白のWebデザインレシピの見出し … 大胆すぎるかな w
期待する何演技オーディション
フォントの種類でコントラストをつける
Webデザインにおける日本語フォントはコントラストという面で難しい部分があるのですが（ゴシックと明朝くらいだし）、アルファベットの場合はフォントの種類でコントラストをつけるのも面白いです。
ちょっとその前に欧文フォントの種類を簡単にご紹介します。欧文フォントはざっくり分けると次のような感じです。
Old style
Old style は手書き文字をお手本にしたフォントで、長文でも読みやすい欧文フォントです。手書きの文字を手本にしているので、ハネがついてます。
このハネをセリフって言って、Old style はセリフフォントの仲間という訳です。Old style の小文字のセリフは傾いてるのが特徴的。また、文字の太いところ、細いところの変化があって、細いところ同士を結ぶと斜めになるのも特徴です。
Modern
Modern もセリフフォントの仲間です。でもセリフが水平になって、文字の細いとこをつなぐと垂直になります。
セリフが細くて、太いところは極端に太い感じが特徴的です。ちょっとエレガントな雰囲気を持ってますが、長文には向きませんね。
Slub serif
Slab serif もセリフがあるのでセリフフォントの仲間ですね。Modern の形から太さの変化を少なくしたのがスラブセリフです。可読性もいいので長文にも向いています。スッリキして読みやすいので大きな見出しにもよく使われています。
Sans serif
サンセリフはセリフ（ハネ）のないフォントです。サンというのはフランス語で 〜がないっていう意味だそうです。また太さの変化がほとんど一定なのが特徴です。（もちろん例外もあって、このブログのロゴやサイドバーの見出しで使っているフォントのように太さの変化のあるサンセリフもあります。）
日本語のWebサイトで使われるゴシックもこのサンセリフの仲間ですね。
他にもScript（続き文字、筆記体）、Decarative（飾り文字）なんていうカテゴリーもあります。
こんな風にフォントについて少し知っていると、フォントを組みあわせてコントラストをつける時などに参考になります。ちょっとフォントのコントラストが素敵なサイトを紹介します。
Shaping the Page
Webデザイナーさんのポートフォリオサイト。すっきりしたサンセリフのサイトロゴと、黒いセリフフォントのコントラストが素敵です。その下は同じセリフフォントを白い斜体にしてコントラストをつけています。… かっこいいです XD
Shelly Cooper Design
こちらもデザイナーさんのポートフォリオサイトです。見出しは Lobster というスクリプトフォント、ロゴと本文にはサンセリフが使われてます。こんな風に違うフォントを組み合わせるのが基本です。同じカテゴリーのフォントでは、形が似ているのでコントラストがつきにくいです。
N Design Studio
Webデザイナー Nick La さんのブログ & ポートフォリオサイト。ロゴは太いサンセリフと、オールドスタイルフォントとの組み合わせ。その下の Welcome のタイポグラフィーはスラブセリフとスクリプトフォントの組み合わせでデザインされてます … 格好良すぎます！
フォントのコントラスト、ちょっと面白いですよね！
コントラストのポイント
- 2つの要素が同じものでないなら、はっきりと違わせる。
二つの要素を同一ページに配置する時は似せてはダメ。 - ページ上のコントラストは読者の目を引きつけます！
コントラストはデザインに面白みを加えるしデザイナーのセンスが光るところかも。他の原則と組み合わせて、ページの組織化の役割をします。
この世の全ては性質は単にコントラストによって成立している。
それ自体で存在するものはなにもない。
なんて言葉もあります … コントラスト … 深いです。
4. 反復
最後の4つ目の原則は反復です。これはデザインの中の何かしらの特徴をページ全体、作品全体を通して繰り返すことです。色や形、テクスチャやレイアウトなどなど、視覚的に認識できるものなら何でもOKです。こうするとページ全体に一貫性が生まれてます。
反復を漠然と使うんじゃなくてページ全体を統合するようなポイントとして効果的に使うのがポイントです。例えばこのWebデザインレシピではいくつかの要素で反復を使っていますが、色やテクスチャは置いておいて、特徴あるロゴのフォントのデザインをあちらこちらで使ってみたので紹介します。
こんな風にハート、吹き出し、アイコンやボタンなどを特徴あるフォントのデザインを踏襲してデザインしてみました w うまく伝わればいいのだけれど … w ひとつの形を反復するだけでなく、こういった特徴を反復するのも有効な手段ですね。
他にもグレーの透過レイヤーを画像の枠やフッター、コメント欄などで使っています。
ボーダーはピンクの点線に統一してみたり …
こんな風に一貫性を演出すれば、ページのどこか一部を見ただけでも、これはWebデザインレシピのページだーって分かってもらえるかもしれませんね w とにかく反復を効果的に使って一貫性を作り上げましょう。
強い一貫性がないとその中に何か特別なものを入れたときに、それが特別だってことを見分けられません。一貫性というルールがあるから、何か違う驚くような特別な要素を入れ込むこともできるようになりますね。
反復のポイント
- デザインの中から特徴的な何かをポイントとして効果的につかう。
- 反復を利用して全体に統一感、一貫性を作る。
でも、要素を反復しすぎて煩わしい感じというか、くどくならないように注意も必要です。
4つの原則が生み出す相乗効果
近接、整列、コントラスト、反復と4つの基本を見てきましたが、どれかひとつということではなくて、4つの原則を絡めながら相乗効果を狙って上手にデザインしていきましょう。近接だけではダメだし、整列だけではいいデザインはできません。4つを意識しながらデザインすれば、きっと読み手にも優しい素敵なデザインができると思います！
それから … これらはあくまで基本です。あとはセンスで素敵なデザインに仕上げてください。もちろんこの基本を破るのだってありです … でもルールを破る前に基本を知っているのといないのでは違うかなーと思います。
ルールを破るなら、意識的でなきゃ意味ないよ。
ルールを破れるようになるにはね、まずルールを知らなければいけないんだよ。
こんな風にデザインをすれば、きっと楽しくもっと素敵なデザインができると思います！… つたない私のデザインを例にしちゃいましたけど、世の中には素敵なデザインがたくさんあふれてます。そういうデザインを見るときに、基本を踏まえて見直すと今までとは違った見え方がしてくるかもしれませんよー！
ページをデザインするとき、こんな過去記事も参考になると思います。
0 件のコメント:
コメントを投稿