07design.blog

RSS
Home » designtips, topics

非デザイナーのためのデザイン基本テクニック その2

2010年 12月 27日 月曜日


前回の投稿からかなり空いてしまいました。
はてブ砲によりかなりアクセスが伸びてしまい、プレッシャーでいい記事を書こうと思えば思うほど腰が重くなってしまいました。というのはウソでずっとときメモやってました。
次回からはもったいぶらないで何かエントリを書く際は一気に書こうと思います…。

さて続きです。
前回非デザイナーのためのエントリーだからwebサイトじゃなくてチラシにしよう、と思って記事を書いたんですが
駆使するツールがもちろんweb上にあるものなので、カラーもweb用になってることを失念していました。
紙媒体とwebの違いはかなりあって、それこそレイアウトの方法も変わってくるので重要なところなんですが、
書くと長い上、デザインとは別の話になっちゃうので、
今回はweb上に表示するDMとチラシを作る方法ってことにしておきます。無理があるけど・・・
印刷物を作りたい方は「DTP」とか「CMYK RGB」とか「web 紙 解像度」とか「トンボ」とかそのへんのワードで検索してください。
CMYKと解像度の違いが理解できれば、以下の方法で進めても大きな失敗はないと思います・・・

レイアウト

さて本題です。


前回用意したラフです。

まずは画像編集ソフトで適当な大きさのキャンパスを作ります。
ここでは600pixel×400pixelのキャンパスを作ってみました。

1・イメージ画像を決める

1番最初に目に入ってくるのは文字情報よりイメージ画像です。
「目に留めてもらう」という意味で、イメージが伝わりやすい画像を選びましょう。
また、配置も目立つ場所にしましょう。
写真素材やイラスト素材を購入またはダウンロードして、
(そのへんは紹介してるブログ等がいっぱいあるので探してみてください)
イメージの選定が難しかったら、似たような内容のサイトやチラシを見るといいかもしれないです。パクリはダメですが。
私の中でヘアサロンは裸の外国人女性みたいなイメージがあるので、今回は市販の写真素材CDから下の写真を選びました。写真の左側が切れてるので左寄せにしました。

このままだと右側に空白が入っていて変ですね。
イメージを押し出すような写真では境界線が直線だとダサくなりがちなので写真が背景となじむようにします。


写真をレベル補正してコントラストを調整し、背景を白く飛ばしたり…


消しゴムやフィルタで境界が見えなくなるようボカしたり・・・


パスで切り抜いて背景を削除したり・・・
(参考)Photoshopのクリッピングパスによる写真切り抜き – 独学WEBデザイナーの覚書


いっそキャンパス全体に背景として配置してみたり…


個人的にはキャンパス全体に写真が入ってるのが好きなのですが、文字を入れたら顔にかぶってしまうので、まぁ適当にぼかしておきました。

2・文字要素の配置

文字を入れていきます。

前回配色を決定しましたが、とりあえず一旦色のことは忘れてください。
デザインに慣れてると気にならないのですが、
レイアウトする際に最初から配色を取り入れると色のイメージに左右されてうまくレイアウトできなかったりします。
なので、ここでのデザインは白と黒の2色だけ使ってすすめます。

文字要素を入力しました。

レイアウト

レイアウトは奥が深く、とても難しいのですが、
ある程度技法を覚えてしまえばイメージに沿って当てはめていくことで、それっぽいものが出来上がります。

ちょっと字が小さくて申し訳ないです。ここでは、

■余白をたっぷりと意図的に取る
■字と字の間隔をあけて、密度感を低く
■大見出しはもっとも目立たせる
■サブタイトルを入れて写真やタイトル部分を洗練させる
■情報部分はゴシック体にして差別化
■罫線を使って情報を整理
■文字のサイズ差をあまりつけないことで、落ち着いたイメージに

こういった技法を使っています。
特に余白は大事なので、ぜひ試してみてください。
他にも、

■背景と文字のコントラストは低めに
■色の彩度は低めに
■同系色でまとめる
■斜体を使う

などの手法も、シンプルで洗練されたイメージになります。縦書きなんかも効果的です。

配色

レイアウトしたら、色をつけていきます。

これが前回選んだ配色です。

配色ツールに頼った理由は2つあるのですが、
1つは非デザイナーのためのエントリなので、感覚ではない方法で配色を決定させたかったのと、
もう1つはデザインしながら色を変えていくと「アレ…これもいいな…こっちのがいいかな?」と
選べなくなってしまいがちだからです。なので慣れないうちは決め打ちしていく方法のが楽です。
少なくとも極端にダサくなることはなくなると思います。


色を入れてみました。いかがでしょうか。
やわらかく、女性的で落ち着いたイメージのデザインになりました。
同系色なので、ボンヤリした印象になりがちですが、
ピンクのラインを入れることで、白とピンクの面積比に差をつけ、メリハリが出ます。
また上下に同じ色を使うと、字を読む時のリズムが出るそうです。
差し色で1色だけ系統以外の色を入れたりしてもメリハリが出て強い印象になりますよ。

もうひとつ

フットサルのチラシもデザインしました。

まずは白黒で文字いれ。
(イラスト素材は イラスト無料素材 子供や赤ちゃんのイラストわんパグ からお借りしました。)


配色とレイアウト技法を追加。
この例では

■使用する2つの絵の大きさに差をつけ、メリハリのある印象にする(ジャンプ率を高く)
■文字もタイトルと他の文字の大きさをかなり変えて、活動的なイメージに
■背景と文字の明度差を高くし、視認性を高めて強い印象に
■タイトルをグリッドに沿わずにナナメにすることで、遊び心のある活発なイメージに

こんな技法を使っています。
他にも、

■袋文字(フチドリ)
■色数を増やす
こういうデザインも、活動的な印象になるので有効ですよ。

まとめ

とにかく重要なのは、イメージを決定することです。
まずイメージを決めて、そこに色や技法を当てはめていけば、
非デザイナーでも感覚を使わずにある程度デザインできるのではないでしょうか。
そして、電車の広告や、街で見かける看板、チラシなどのデザインを「逆引き」してみてください。
普段からデザインされたものに印象を左右されてることに気付くと、デザインはとても面白いです。

⇒非デザイナーのためのデザイン基本テクニック その1へ

▼どうせ買うならAmazonアソシエイトで私に貢ごう!

レイアウトデザインのルール ―目を引くページにはワケがある。 レイアウトデザインのルール ―目を引くページにはワケがある。

オブスキュアインク

ワークスコーポレーション 2008-02-05
売り上げランキング : 22006

Amazonで詳しく見る by G-Tools

▼どうせ買うならAmazonアソシエイトで私に貢ごう!

新人デザイナーのためのデザイン・レイアウトが上手になる本 新人デザイナーのためのデザイン・レイアウトが上手になる本

柘植 ヒロポン

ソシム 2008-07
売り上げランキング : 107361

Amazonで詳しく見る by G-Tools

5 Comments »

  1. […] This post was mentioned on Twitter by nyontan, nyontan, きゅび情報索敵部隊, 권 태호 (権 泰浩), webdesignStatio and others. webdesignStatio said: 非デザイナーのためのデザイン基本テクニック その2 | 07design.blog 前回の投稿からかなり空いてしまいました。はてブ砲によりかなりアクセスが伸びてしまい、プレッシャーでいい記事を書こうと思えば思うほど腰が重くなってし…http://bit.ly/hrIjJB […]

  2. […] 非デザイナーのためのデザイン基本テクニック その2 | 07design.blog […]

  3. […] ネタ元:非デザイナーのためのデザイン基本テクニック その2( 07design.blog) […]

  4. […] | 07design.blog 非デザイナーのためのデザイン基本テクニック その2 | 07design.blog […]

Comments

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.