デザインの基礎力をワンランクアップしたい私(Webデザイナー)の注意書き

Posted under - Web Design

64

Webデザインは、紙の上のデザインと違うところも多いと思います。でも同じデザインですから、歴史ある DTP デザインから学ぶことはいっぱいあります。デザインの基礎の基礎、レイアウトについて、デザインするときに気をつけたい基礎の部分の注意書きです。

I love design

毎日インターネットを見ていると、素敵なデザインの Webサイトに出会います。ときにはひと目惚れしちゃうようなこともあります。そんなデザインにあったとき、どうして素敵なのかなーと考えるのも勉強のうち。そう思って素敵なデザインはストックしておいて、自分なりにそのデザインが素敵な理由を考えてたりします。

デザインの理由

どうしてそういうデザインをしたのか … デザインには理由があります。気まぐれに色を選んだり、要素を配置したりしないからです。なので自分のデザインの理由、どうしてそういう風にしたのかということを、口で説明できないとダメだと言われます。もちろん自分でしたデザインなら、ちゃんとそういうデザインにした理由もあるし、いいか悪いかは別として口では説明できます。

もっとデザインの基礎力というか、基本的な部分の力をつけて、表現の引き出しを少しずつ増やしていきたい。基礎力をアップして引き出しが増えてくると、好きなデザインに出会った時、デザイナーさんがそのデザインをした理由が少しずつ見えてきたりします。もちろんデザイナーさんのセンスや感性の部分が大きいので、単純な話ではないんですけど、デザインの基本・基礎 – 自分の引き出しが増えてくると、だんだん見えてくるものもあったりします。

基本的な部分だけ見てても、オシャレなデザインにはオシャレに見える理由があるし、かわいいデザインにはかわいい理由があったりするんですよね。

デザインの基礎の基礎

ターゲットは女性、男性?カジュアルな感じ?高級な感じ?レイアウトは?色は?などなど、Webデザインをするには、決めなきゃならないことが多いです。カジュアルっぽいデザインをするには、カジュアルっぽく見せるためのテクニック?があるし、高級そうに見せるにはそういうやり方があります。

間違ったやりかたをすると、高級感のあるデザインにしたいのに安っぽくなってしまうとか、イメージしたものより高級感がですぎて、クライアントさんのイメージと合わない …ということになってしまいます。

たくさん見て触って、そして自分でも作ってみないと、そういうデザインの引き出しが増えていきません。誰だって最初は失敗してあたりまえ。いつになっても失敗してる私の、デザインの基礎の基礎の注意書きです。

デザインの基礎 目次

  1. デザインの基本原則のおさらい
  2. 配置、レイアウトの仕方の基本
  3. Webサイトのイメージに合わせた選択:レイアウト
  4. デザインの印象にふさわしいフォントを選ぶ
  5. 余白、ホワイトスペースに意識を向ける

1. デザインの基本原則のおさらい

デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則でも学んだことですけど、まずは見やすいページを作る上での原則をおさらい。

1.1. 意味的にグルーピングしながら優先順位を作る

レイアウトに入る前に、まずはデザインするものの要素を意味的に分類します。それから関係のあるものは、グループ化してまとめます。同じグループのものは、視覚的、デザイン的には近くに配置して、関係の薄いものは離して配置します。

グループ(必ずしも複数入る訳じゃないけど)を作った上で、何と何を近づけ、何を離すかを選択します。優先順位をつける感じ。それだけで見る人にしてみれば、視覚的な配置から、情報を組織化して捉えてくれます。近接の原則です。

等間隔に並べた配置

等間隔に並べた配置

グルーピングして配置

グルーピングして配置

1は何も考えずに、ただ並べただけのレイアウト。優先順位も関係性、グルーピングもしないで、等間隔に並べただけです。これだと何を一番に言いたいのかも伝わってきません。

2では、サイト名と名前、URL とメールアドレスの 2つのグループに分けて、近づけるものは近づけ、離すものは離しました。たったこれだけのことだけど、情報が組織化されました。もちろんサイト名、名前の方が優先順位が高いので、とりあえず上に配置しました。

1.2. 揃える

左で揃えたレイアウト

基本的には要素は揃えて配置します。上の例でもセンター揃えになってはいますけど、揃っているという強い線は見えません。バランスがいいとは言えないかも。バランスよく見せて、まとまりよく見せるためには、揃えることが大事。整列の原則です。

単純に左揃えにしただけですけど、左側が揃っているので、そこに 1本の線が生まれます。バランスもさっきに比べてよくなりました。

1.2. ちょっと寄り道

ひとつ目の「Web Design Recipes」を配置することで、次の「Nori Takahashi」を置く位置を選べるようになりました。ちょっと分かりづらいですね …。図にすると、こんな感じ。

線で結ぶ

ひとつ目の要素を置くと、ふたつ目の要素を置けるようになります。その時の選択肢はいっぱいあって、その中からひとつ選びます。ひとつ置けば次が置けるようになって、ふたつ目を置けばまた次を置けるようになります。

今回は揃える線を強調するために、左揃えで少し行間をあけて配置するという選択肢、ルールを選びました。視覚的なつながり、見えない線を左側に作っていきます。

1.3. 繰り返す

上の例では揃えるというルールを作りました。でもルールは繰り返さないとはっきりしません。

2つの繰り返し

2つの要素の繰り返し

4つの繰り返し

4つの要素の繰り返し

1 のようにふたつ並んでいるだけだと、いまいち揃ってるというルールがはっきりしません。でも 3つ、4つと繰り返して行くとルールがはっきりしてきます。

2のように 4つ並べると、離れていても左で揃えてるんだなーというルールが明確になりました。またデザインの中の視覚的な特徴のある何かを繰り返すことで、ページ全体にまとまり感がでます。反復の原則です。

1.4. 主役は何か … コントラスト

大きくしてコントラストをつけてみた

デザインの中で主役、見せたいものは目立たせなくちゃいけません。そこでコントラストをつけていきます。コントラスト対比 …。当たり前なんですけど、コントラストは相手があってのこと。その相手とはっきり違わせることがコントラストのポイント。

単純に大きさだけでコントラストをつけてみました。優先順位を高くしたいサイト名だけ大きくして、他を小さく、対比をつけました。こうするとなんとなくデザインらしくなってきますね。

1.5. 基本原則のまとめ

  • グルーピングして近づけるものは近づけ、離すものは離す – 視覚的な情報の組織化
  • まずは揃える – 揃えてレイアウトの基礎のルール作りをする
  • ルールは繰り返す – 繰り返すことでより一層ルールが明白になる
  • コントラスト – 主役はきっちり目立たせる。優先順位がはっきりする

2. 配置、レイアウトの仕方の基本

デザインのレイアウト、配置も選択肢。繰り返しになっちゃいますが、まずひとつ何かものを置いてみます。すると次に何かを置くための線ができます。その見えない線で要素同士をつないでいきます。

ロゴを置けばナビゲーションが置けるようになって、ナビゲーションを置けば検索フォームを置けるようになるといった感じで、次から次へと線でつないでいきます。どの線でつないでいくかの選択肢は、たくさんあります。

要素と要素をつなぐ線

こんな風にひとつ要素を置くと、次々に要素を配置できるようになります。どうやって配置していくかという選択、ルール作り。デザインのルールを少しずつ作っていきます。

意識したいのは、要素と要素は視覚的につながっているということ。上記の例でもお互いの辺を延長していけば見えない線でつながっていきます。

2.1. 繰り返してルールを明確にする

前述しましたけど、繰り返していくとルールが明確になります。2つだけだとはっきりしないルールも、3つ、4つと増やしていけばだんだんはっきりしてきます。

同じ大きさ・形・色のものを並べてみた

色、形、大きさが全く同じものを、横、縦、2つ並べてみたのに、いまいちルールがはっきりしません。

同じ大きさ、色、形のものを4つ並べてみた

そこで 3つめ、4つめにも、同じルールを使ってみるとはっきりしてきます。同じ色だし、同じ形だし、大きさも同じで一直線に並んでいるルールです。繰り返せばルールはどんどん明白になります。当然次ぎにくる 5つ目も同じ風にすれば、きれいで問題のないデザイン、レイアウトになりますよね。繰り返された強いルールは、ページをまたいでも通用します。

ずっと左揃えにしてきたのに、別のページでは全部センター揃えになっていると違和感がありますよね。もちろんそういう風に、わざと特別感を出すのもアリだとも思いますが、その演出をするのも左揃えというルールがしっかりしていればこそです。

2.2. リズムを作ってみる

繰り返すことによって明確なルールができました。でもこれだと単調でつまらなく感じることもあるかもしれません。

そこでちょっとルールを破ってリズムを作ってみます。基本的なルールがはっきりしていると、リズムを簡単につくることができるし、アクセントにもなります。

色、形、大きさに変化をつけるとリズムができた

ひとつだけ色・形・大きさを変えてみました。すると変化、リズムが生まれてアクセントにもなりました!

色だけじゃなくて、大きさ、形、枠からはみ出させたり、角度を変えたり、余白を多きくしてみたり …。とにかくルールを破るとリズム、変化が生まれます。

リズムとか、アクセントとかいうと難しそうに聞こえるかもしれません。でもそのまま音楽の楽譜を想像してみると分かりやすいですね。

楽譜

五線譜というルールがあって、そこにずっと同じ四分音符ばっかり並んでたら退屈です。たまには音階を変えてみたり、長さを変えてみたりって感じです。

列からはみ出たレイアウト

左揃えのルールを破って、ひとつだけ名前を列からはみ出させて配置してみました。揃えるところから始まって、こんな風に発展というかアクセントをつけられるのも、最初に左揃えっていう基本のルールがあったからですね。こんどは名前の方を目立たせてみました。さっきはサイト名だったのに … 優先順位をはっきりさせてない悪い例です X(

z-index | Portfolio

正方形というルールがあって、その中に長方形(黒いロゴの部分)がアクセントになっています。また背景の青い部分は、大きさの違う正方形が並んでいて、リズム、変化があって楽しいです。四角形の中で、唯一ロゴだけが丸いのもコントラストがついて目立ちますね!

Bärnt & Ärnst

こっちは四角をランダムに並べてとっても楽しげな感じ。同じ四角、同じ大きさ、同じトーン(色あい)というルールがあるし、四角同士、隙間を空けずにくっつけてあるので、強力な線を意識せずにはいられません。

かちびと.net

最近リデザインしたかちびと.netさん。うっすらと見えるか見えないかのボーダー、全体的にミニマルでとっても素敵です。

中でもとっても気に入ったのが、記事の中の見出しのデザイン。テキスト自体はずーっと続いてきた段落と揃ってて、アクセントの赤いボーダーだけが飛び出してます。とってもカッコいいデザインですね XD

2.3. レイアウトの基本のまとめ

  • 要素と要素は視覚的につながっている – ひとつ要素を置くから、次の要素が置けるようになる
  • 視覚的なつながりを繰り返してルールを明確にする – 2つより 3つ、3つより 4つ
  • ルールを破ってリズムを作る – 退屈な印象を壊して変化、メリハリを作ることも大事

3. Webサイトのイメージに合わせた選択:レイアウト

とりあえず基本的な並べ方、ルールの作り方ができれば思うようなデザインになるのか … というとまだまだ道のりは遠い … X( 問題なのは、自分がイメージしたものを実際の画面、デザインに落とし込めるかどうかです…。

高級そうに見えるように作ったつもりでも、いまいち品がないとか、オシャレな大人の女性をターゲットにしたいのに、エレガントさを表現できないとか …。デザインの幅を広げていきたいんですけど、これにもある程度指針があります。

もちろん色使いも大事ですが、レイアウトの段階で意識しておきたい基本を再確認。どういう選択をするかで全体のイメージも変わってきます。

3.1. 版面率

版面率の高い新聞のデザイン

版面率というのはページに対して、写真や文章が占める割合のこと。版面率が高いページは、文字や写真がたくさんあって余白も少ないので、情報量が豊富、たくさん掲載されていそうな印象を受けます。

最も身近にあって、版面率がとっても高いデザインといえば、新聞があります。新聞は余白がほとんどなく、文字や写真で誌面全体が埋め尽くされています。ぱっと見ただけで、情報がたくさん掲載されてそうな印象を受けます。

版面率が高い Webサイトも、画面から受ける印象は同じ。ニュースサイトやポータルサイトなどは版面率が高く、それだけで掲載されている情報がたくさんあるっていう印象を受けます。

逆に版面率が低くて、ホワイトスペースが多いとどんな印象になるでしょう。どことなく高級とか、品がいいというか、オシャレかっこいい … そんな印象を受けます。ホワイトスペースが多めで、素敵なデザインの Webサイトといったら、アップルが有名ですよね。

高級な感じにしたいなら余白、ホワイトスペースを広めにとってみるといい感じになります。余白を作ればいいってものじゃないから難しいんですけど …。

アップル

ちなみに今回の Apple のトップページは iPad。アクセスすると、まず iPad の写真がフェードしながら表示されて、次に iPad のタイポグラフィー、最後にナビゲーションの順番で時間差をつけて表示されます。iPad のイメージ写真を一番に見せたいっていう作りになってますね!

紙と違ってこういう事ができるのも、Webデザインならではですねー。フォーカスで広くなる検索フォームなど、学ぶ所が多いです …

3.2. 図版率

版面率は、ページ全体に対してどれくらい文字やテキストがあるか、つまり余白が多いか少ないかでした。図版率というのは文章と図形や写真の割合のこと。図版率 0% – 文字しかないと、ちょっと読むのに勇気がいる感じです。版面率が低くて、余白が大きくても、テキストだけのページと、少しでもでも図や写真があるのとでは、受ける印象はだいぶ違いますよね。

図版率 0%

図版率 0%

図版率 0% – テキストしかないページ。上のサンプルだと、文字がずらーっと並んでる感じと大きな余白から、ちょっと小難しいまじめなことが書いてある印象を受けます。ちょっと近寄りにくいかも。かわいいとか、くだけた感じを出したいなら、上の様にすると上手くいかないと思います。

図版率は上げていくにしたがって、親しみやすくなって、読みやすくなります。下の図を見てみると …。

図版率 25%くらい

図版率 25%くらい

さっきと受ける印象がだいぶ違います。写真と文章、フォントのイメージが全然あってないので、訳がわからないページになってますが … とりあえず、図版率の説明ってことで許してくださいね!

図版率は上げていくと親しみやすくなる、簡単に言えばとっつきやすくなります。でも図版率を上げすぎると、あるところでその印象はで逆転して、親しみやすさというより突き放した印象を受けます。

ちょっと言葉だと難しいんですけど、テキストが少なくて写真ばかりになると、これなんのページ?っていう風になるというか … まるで全く言葉がわからない知らない外国に来たような気分になるというか …

図版率 95%くらい

図版率 95%くらい

カメラマンさんのギャラリーページのように、はっきりとしたコンセプトが伝わるページならいいと思うんですけど、イメージ先行で写真やイラストが大半を占めるページを作るときには、少しでも文章を入れておきたいですね。

3.3. 文字のジャンプ率

ジャンプ率というのは、一番小さいものと一番大きいものの差がどれくらいかということ。文字のジャンプ率は、そのページの一番小さい文字と、一番多き文字の差がどれくらいあるかということです。

文字のジャンプ率、文字の大きさの差が大きいと、活発で元気だとか、子どもっぽい、若者っぽい印象を受けます。また手軽な感じも出てくるので、ヘタをすると安っぽくなってしまいます。

版面率のところでも、新聞を例にあげましたが、普通の新聞とスポーツ新聞 …。普通の新聞も十分ジャンプ率が高くって、見出しと文章の差は大きいですが、スポーツ新聞のほうがもっと大きいです。普通の新聞とスポーツ新聞。やっぱりスポーツ新聞の方が手軽っぽい感じがします(もちろんカラフルな見出しとかもあるんですけど)。

逆にジャンプ率が低め、文字の大きさの差が小さいと高級な感じ、格調高い、大人っぽい感じが出ます。気軽さはちょっとなりを潜めて、信頼感が増してきます。

ジャンプ率高め

ジャンプ率高め

洋服のセールの広告っぽいデザインしたいとき、Sale の文字を目立たせたいとします。Sale の文字、コントラストをつけて大きくしようって普通にやりますよね。これくらいだとまぁまぁ普通にセールかなーって感じでしょうか …。

シャンプ率がとっても高い場合

ジャンプ率がとっても高い場合

さらにジャンプ率を上げてあげると、同じフォント、写真なのに、すごく大安売りな感じがしませんか?よくいえば親しみやすくなった、若者っぽくなった … その反面安っぽくなった感じもします。大きすぎ?

ジャンプ率低め

ジャンプ率低め

ジャンプ率低め。こうすると同じセールでも、あんまり安い気がしません … 。気安さはちょっとなくなって、逆に高級感というか、そんな感じになります。写真と色がちょっとアレですけど、高級ブランドのセールならしっくりくるかもしれないジャンプ率ですね!

高級なイメージで要素を目立たせるためには、余白などを上手に使っていきたいところです。上品に目立たせるって難しいです X(

デザインする Webサイトが、どんなジャンプ率の持ってるイメージに合っているか … 間違えるとうまくデザインのイメージが伝わりません。間違えないで選択したいですね!

3.4. 写真のジャンプ率

写真にもジャンプ率があります。そのページの中で一番大きな写真と一番小さな写真の差です。写真のジャンプ率の場合は、文字のときと違ってジャンプ率が大きいと元気がでるとかではなく、普通に写真のもつイメージそのままです。では、ジャンプ率で何が変わるかというと、ジャンプ率が大きい – 差が大きいとメリハリがでます。大きいのと小さいのが一緒のページにあるので当たり前といえば当たり前ですね!

ジャンプ率が低い、写真の大きさに差がないと落ち着いた穏やかな感じです。

ジャンプ率 0% – 同じ大きさの写真

写真のジャンプ率 0%

同じ大きさだと、ページが落ち着いた雰囲気です。ゆったりした感じですよね。そんな印象をつけたい時は、写真のジャンプ率 – 大きさの差を小さくしたほうがよさそうです。

ジャンプ率高め

写真のジャンプ率高め

大きさに差を付けると、当然メリハリがでます。ページがシャープな印象になりますよね。見せたいものがはっきりしてたり、ちょっと退屈な印象を避けたい時はメリハリ、大事ですね!写真のジャンプ率、版面率や文字のジャンプ率と合わせて、間違えないように選択したいです。

3.5. 写真のトリミング

また、写真のジャンプ率と一緒に言われるのがトリミングの仕方。写真の中、被写体自体のジャンプ率にも気をつけたいです。

顔の大きさはあまり変わらない

写真の大きさは全然ちがうんですけど、顔の大きさは似たような感じです。なのでせっかく写真のジャンプ率を大きくしてメリハリを付けたのに、効果が薄いです。

メリハリがついて緊張感のあるページに!

写真を入れ替えると、写真の大きさ以上に顔の大きさに差がついて、メリハリがものすごくでました!人の顔はとっても印象に残りやすいそうです。なので人物の写真を扱う時は、こんな所にも気をつけたいですね。

もちろんこういうトリミングは人物だけじゃなくて、お料理やファション、小物など、ありとあらゆるものに気をつけたいポイントです。対比、コントラストは本当にデザインのポイントですね!

上の例では写真のジャンプ率が高い、写真の大きさの差が大きい場合でした。ジャンプ率の低いときは、似たような大きさの写真になります。その時でもトリミングに注意して、被写体自体のジャンプ率を大きめにするとメリハリがでます。

3.6. イメージに合わせたレイアウトのまとめ

  • 版面率(余白の大きさ)でイメージは変わる – 高級感を出したいなら余白を大きくとるなど
  • 図版率で親しみやすさ、とっつきやすさが変わる – 写真や図形を入れると親しみやすいが、写真ばかりだと突き放した感じにもなる
  • 文字のジャンプ率でイメージは変わる – ジャンプ率が大きいと気軽さ、元気な感じ。小さいと高級な感じ
  • 写真のジャンプ率でメリハリをつけられる – 写真の大きさだけじゃなくて、トリミングにも注意!

4. デザインの印象にふさわしいフォントを選ぶ

フォントには色んな種類があって、それぞれいろんな雰囲気を持っています。太いフォント、細いフォント、形が美しいフォント、可愛らしいフォント。どのフォントを選ぶかもデザインの選択 … 雰囲気にあったフォントを選びたいです。

4.1. セリフ

セリフというのはハネのついた書体(セリフの中にも Old Style、Modern、Slab serif などいろんな種類があります)。セリフフォントは一般的に、細い部分(横の線)と太い部分(縦の線)があって、きれいな形をしています。太さの変化があるのでメリハリもあります。

フォントとデザインについては、デザインを勉強したことがない人でもデザインできるようになるかもしれない 4つの基本原則のコントラストのところでも少し触れてます。

どちらかというと細いイメージがあるので、女性っぽさをを感じます。あと、きめ細かい精密精悍な感じ、大人っぽさエレガント穏やか落ち着いてるなどのイメージも。

また伝統的古風、昔からある感じ、ちょっと固い感じまじめ信頼できそう … そんな感じもします。日本語の場合は明朝体がセリフの仲間ですね。

明朝体

明朝体

フォント – ヒラギノ明朝 ProN W3

太い明朝体

太い明朝体

フォント – ヒラギノ明朝 ProN W6

明朝体は、太さにメリハリがあって美しい感じです。でも大きく、太くしても、細い部分があって面積自体が大きくならないので、いまひとつ力強い感じはしません。

4.2. サンセリフ

セリフに比べてモダンなイメージのあるサンセリフ。新鮮、理性的なイメージがあります。「サン」というのは、フランス語で「~がない」という意味で、セリフ(はね)がないのがサンセリフです。基本的に太さは一定です。

サンセリフ

歴史的にもセリフに比べて後発。なのでデザイン的にもセリフに比べると新しく、モダンなイメージがあります。太さの遷移もないし、形もシンプル。日本語では、ゴシック体がサンセリフの仲間です。

ゴシック体

ゴシック体

フォント – ヒラギノ角ゴ ProN W3

太いゴシック体

太いゴシック体

フォント – ヒラギノ角ゴ ProN W6

ゴシック体も太さに変化はなく一定の太さ。シンプルで分かりやすい形で、小さくても読みやすいです。ゴシック – サンセリフは、大きく、太くしていけば、比例して面積が増えます。なので大きく、太くしていくと元気で力強いイメージにもなります。明朝体に比べると男性的なイメージが強くなります。

細いゴシック体

細いゴシック体

フォント – 小塚ゴシック Pro EL

細いゴシック、サンセリフは、男性的なイメージからは遠くなって、女性っぽく、エレガントな雰囲気になりますね。少し冷たい雰囲気もあります。

明朝体とゴシック体

明朝体とゴシック体の比較

話はかわりますが、iPhone 4 のホワイトモデルが出ましたね!単純に明朝体とゴシック体で、同じように書いてみました。革新的な新製品には、やっぱり伝統的な明朝体よりも、ゴシックの方が合うかもしれませんね。逆に伝統的な老舗旅館などでは、明朝体の方がしっくり来るのは誰が見ても明らかです。

欧文フォントまで考えると、同じフォントファミリーに Italic 体があったり、Script(筆記体)などのカテゴリーもあって、受けるイメージはいろいろです。Webサイトのイメージにあったフォントの選択も大事ですね。

5. 余白、ホワイトスペースに意識を向ける

版面率のところで、余白、ホワイトスペースがでてきました。ホワイトスペースは目を休める意味でも大切ですけど、余白にはいろんな意味があります。

分ける余白 … 要素と要素を分けるのに余白はよく使われます。近接の原則で関連性の薄いものは離すと学びましたから、離せば当然余白が生まれます(もちろん線を使って要素を分けるという選択もあります)。

普通に要素を分ける目的で余白を使ってみたら、こんな風に余白ができてしまいました。

あちこちにできてしまった余白

何となく、バラバラにできてしまった余白

5.1. 余白を活かす

余白はただの余白です。余白を活かすも殺すもデザイナー次第って教わりました。余白は余白だけでは存在しなくって、必ず相手がいます。余白を上手に使うと相手を目立たせることもできるし、見る人の視線、流れを作ることもできます。といっても私の苦手なところで課題にしてる部分です … 難しい …

余白を上手に活かせるようになるとメリハリ、強弱が出せるようになってデザイン力をワンランクアップさせられるかも!

バラバラにあった余白をまとめて、こんな風においてみました。Web Design Recipes のタイトルがポツンとある感じで、とっても目立つようになりました。同じ版面率ですけでど、ホワイトスペースがまとまって大きく見えるので、どことなく高級感?も出た気がしませんか?

一カ所にまとめた余白

バラバラだった余白をできるだけまとめてみた

余白と要素の対比

ライム

何もない所にポツンとあると、そこに目がいくし、空間の広がりも見えてきます。写真のライムは全体(丸)を写さなくても、隠れてる部分は簡単に想像できるので、隠しても平気なんですねー。その分ホワイトスペースも大きくとれてて余計にすっきりです。

5.2. 視線や流れに気を配る。

配置、要素を置くのには、いろんな選択肢がありました。ひとつ要素を置くと、いろんな選択肢ができ、次の要素を置くとまた選択肢が増えます。なので例えば左の図のように置くこともできます。

でもちょっと視線、全体の流れに戸惑うかもしれません。優先順位もはっきりしないので、ちょっと混乱しそうですね。別の方法でコントラストをつけて優先順位の差をはっきりさせるなど、もうちょっと工夫したいです。

視線の流れ

5.3. ホワイトスペースのまとめ

  • ばらばらの余白はまとめてみる – 余白を使って何を目立たせるかが重要!
  • 余白によって生まれる流れを考慮 – コントラストをつけて優先順位をはっきりさせないと混乱する

6. DTP、誌面デザインから学ぶこと

Webデザインを勉強しようとすると、XHTMLCSS、Javascript などのスキルに目が行きがちです。デザイン自体も色の使い方、カラーコーディネイトやテクスチャなど、目立つものに注目しちゃう …。今回まとめてみたことは、DTPデザイナーさんたちにとってはあたりまえのこと。もちろん Webデザインには紙ではできないこともあるし、新しい技術も勉強しなくちゃなりません。

でも Webデザインよりもずっと歴史がある誌面デザインからは、本当に学ぶことが多いです。今回はカラーについては何も触れてないけれど、それ以前にイメージにあったレイアウト、デザインってあるんですよね。一行の文字数や行間ひとつとっても、ゆったりした感じは出せたりします。

6.1. こんな本がおすすめです

デザインについてもっと勉強したい人には、こんな本がおすすめです!一応私は全部読みました … 今でも継続して読んでる本ばかりです。

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

以前にも紹介した、とっても素晴らしい一冊です。近接、整列、コントラスト、反復という 4つの原則を使って、ページのデザインの仕方を学べます。私が読んだのは古い本ですが、現在ではフルカラー新装増補版になっているようです。

7日間でマスターするレイアウト基礎講座

7日間でマスターするレイアウト基礎講座 (Design Beginner Series)

平成 10年の本ですが、今でも十分参考になる、レイアウトの基本的なことが学べます。デザインの様式、視覚度、グリッド拘束率など、なるほどーと思うものばかりです。もちろん版面率や図版率など、基本的なことも詳しく載ってます。5年ほど前に買って今でも読み返してるので、7日間以上長持ちしてます!

7日間でマスターする配色基礎講座

7日間でマスターする配色基礎講座 (Design Beginner Series)

こちらも同じ出版社から出ている配色についての基礎講座。イメージに合わせた配色はもちろん、主役色、引き立て色、背景色、なじませ色、アクセント色など、配色の役割など、いい例、悪い例のたくさんの事例で学べます。平成 12年の本ですが、これも今でも読み返しています … 配色苦手だし。

Comments

Thank you for the comment.