RSS非デザイナーのためのデザイン基本テクニック その１
デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。
デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、
実はデザインというものは数々のルールによって成立しています。
そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。
デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、
今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。
記事内ではphotoshopを使用していますがphotoshopが使える方は少ないかもしれません。
ですがfireworks、パワポやwordでも要点をおさえれば「極端にダサくない」程度のデザインはできます。
まずはラフ
まずは作りたいものの原稿を用意しましょう。
今回はサンプルとして
「ヘアサロンのＤＭ」と「フットサル大会のチラシ」を作ってみます。
ラフすぎるにも程があるラフのできあがり。
イメージを決める
ただキャンパスを開いても何も思いつかないと思います。
まずは作りたいもののイメージを確定することからはじめましょう。
下図のような反対の意味を持つイメージをならべて、どちらに近いかをチェックしていくやり方は、
数値的に後述の配色やフォントを決定しやすいので、イメージが固まりやすいです。（クリックで拡大）
イメージからフォントを選ぶ
フォントから伝わるイメージは強いです。
フォントは大きく分けて「明朝体」と「ゴシック体」に分類することができます。
【明朝系】 女性的、高級感、繊細（可読性が弱めなので多用には注意）
【ゴシック系】 男性的、モダン、信頼感、シャープ
【丸ゴシック系】 ポップ、やわらかい、チープ
【行書体など】 和風、伝統的
また、ウェイトによっても太くなれば力強いイメージに、細くなれば繊細なイメージになります。
フリーでも多数のフォントが配布されているので、イメージに近いフォントを選びましょう。
以下は私がよくお世話になっているフォント配布サイトやまとめ記事です。
マニアッカーズデザイン
フォント・マネージメント 日本語フォント 欧文フォント | DesignWalker
Top 28 Free Font Directory Resource Sites :Speckyboy Design Magazine
街でみかけた書体
ドケチなのに良質な無料漢字フォントを探している人向けフォント大全集｜| ＾＾ |秒刊SUNDAY
ヘアサロンは明朝系、フットサルはウェイトが太いゴシック系にすることにしましょう。
※商用利用不可のフォントもあります。ダウンロードの際はリンク先の規約を必ず一読した上で従ってご利用ください。
イメージからメインカラーを選ぶ
配色はデザインにおいて、とても重要な要素です。
大きくわけて、「色相」と「トーン」でイメージが決定します。
色相によるイメージ
【■赤】 原始的、野性的、生命、性、生きる、情熱、怒り
【■橙】 現実的、活動的、人間的、家庭的、明快、労働、嫉妬
【■黄】 好奇心、知性、注意力、向上心、欲求、希望、光明
【■緑】 社会性、調整、平和、バランス、協調、新鮮、安全、青春
【■青】 理性的、抑制、理解、思慮深さ、悠久、清澄、厳粛、誠実
【■青紫】 精神的、孤独、気品、高貴、安定、洗練
【■紫】 非現実的、霊的、神秘、死、高位、優美、魅惑
トーンによるイメージ
【■ビビッド・トーン】 冴えた、鮮やかな、派手な目立つ、活き活きした
【■ブライト・トーン】 明るい、健康的な、陽気な、華やかな
【■ストロング・トーン】 強い、くどい、動的な、情熱的な
【■ディープ・トーン】 深い、濃い、充実した、伝統的な、和風の
【■ライト・トーン】 浅い、澄んだ、子供っぽい、さわやかな、楽しい
【■ソフト・トーン】 柔らかな、穏やかな、ぼんやりした
【■ダル・トーン】 鈍い、くすんだ、中間色的
【■ダーク・トーン】 暗い、大人っぽい、丈夫な、円熟した
【■ペール・トーン】 薄い、軽い、あっさりした、弱い、女性的、若々しい、優しい、淡い、かわいい
【■ライトグレイッシュ・トーン】 明るい灰みの、落ち着いた、渋い、おとなしい
【■グレイッシュ・トーン】 灰みの、濁った、地味な
【■ダークグレイッシュ・トーン】 暗い灰みの、陰気な重い、固い、男性的
[引用元]IROUSE/色彩・カラーコーディネート・ファッションイメージの情報サイト
[参考]What’s Color?-色のしくみ/色相とトーン
[参考]トーン別のカラーチャート
ヘアサロンは女性的で高級感のあるイメージなので「少し濁ったピンク系」
フットサルは元気でにぎやかなイメージなので「幼く明るい水色系」を使うことにしましょう。
イメージから配色を選ぶ
配色を行う際はメインカラー以外にもサブカラー２、３色・アクセントカラー1色くらいを決めておくといいでしょう。
配色には小難しい名前の方法が色々あるのですが、あくまで非デザイナーのためのまとめなので、飛ばします。
[参考]COLOR NOTE > 配色のコツ > 配色技法①
配色の知識がなくても下のような配色サイトを使えばチートできます。
kuler
私がよく使っているのはkulerというサイトで、検索ボックスに「woman」などとイメージを入力すれば女性的なイメージの配色がズラズラと出てくるのでとても便利です！
COLOURlovers
こちらもおすすめ。配色サイトは多数ありますので、ぜひ活用してください。
ヘアサロンはCOLOURloversにて「salon」で検索、
フットサルはスカイブルーのカラーコードで検索して出てきた配色の中から以下の配色に決定しました。
次回はいよいよ制作編！
イメージ・フォント・配色が決定したところで長くなってしまったので次回に続きます！
⇒非デザイナーのためのデザイン基本テクニック その２へ
追記
はてなのホットエントリにあがったようで、想像をはるかに超えたアクセスがあり、驚いています。ありがとうございます。
沢山の人が閲覧することを想定しておらず、言葉足らずな部分もありましたので追記いたします。
※まず、いつも私が感覚でやっていることを無理矢理説明してるので、
他のデザイナーさんから見ると違和感があると思います。
デザイナーによって作り方はだいぶ異なりますので、もちろんこれが正解ではありません。
あくまでも「私のやり方を説明するとこうなる」と思ってください。
※フォントについて
リンク先にも注釈がありますが、商用利用不可のフォントもあります。私の思慮不足です。
ダウンロードの際はリンク先の規約を必ず一読した上で従ってご利用ください。
[...] This post was mentioned on Twitter by れな, Kazuaki KURIU and wobiwan, webデザインに関する情報を紹介. webデザインに関する情報を紹介 said: ブログを更新しました。【非デザイナーのためのデザイン基本テクニック その１】http://07design.net/blog/?p=237 [...]
31 7月 2010 at 10:19 PM