ＷＥＢデザイナー講座その⑤ 各要素の性格性や重要度を考えて装飾する
前回の講座では、デザイン物を構成する各要素の配置や、バランスについて解説しました。
今回は、ついにいよいよ、デザインらしい装飾についての解説をします。
あと、組合員限定とさせていただきますが、「進藤さんここが分からない！」「もっとここを教えて！」という事があれば、お気軽におたずねください。加えて、本講座の反響があれば「webデザイン勉強会」を開催したいなーとも考えています。
エクセルやワードの講座も声が多数あれば、開催を検討します。話が少し脱線しましたが、それでは講座を始めます。
デザインを構成する各要素の性格性や重要度を考える
さて、前回の講座で使用したこのデザインを基に、各要素の重要度を考えていきます。
デザイン物は、そのデザインが「何を1番伝えようとしているか？」を考えて、重要度を割り出していくことになります。
まずは、各要素がどういった性格の要素なのかを仕分けする作業から、はじめましょう。
各要素の性格性を考える
このデザイン物の各要素の性格性を考える場合、おおまかに私であればこう仕分けします。
- 街のゴミ拾い … 商品名、イベント名
- 絶対痩せる … キャッチコピー
- 感謝されて健康に！ … サブキャッチコピー
- 体験者の95％が実感！ … サブキャッチコピー
- あなたもこの～ … 説明文、リード文
と、このように仕分けしました。
この中で、このデザインが「1番伝えたいことは何か？」「見る人が目につくものはなにか？」を考えて、各要素の重要度を考えます。
余談ですが、この重要度の選択は、webやチラシ広告（ＤＴＰ）の現場では、事前に入念な打ち合わせをして検討することもありますが、基本的にどこの現場でも「デザイナーに丸投げ」→「ケチをつけられて作り直し」が殆どなので、プロを目指される方はこの辺の感覚を養うことが大事です笑 だけども、結構腕の見せ所だったりもします。
各要素の重要度を考える
僕が考える、このデザイン物の各要素の重要度は以下の通りになりました。
- 街のゴミ拾い … 商品名、イベント名
- 絶対痩せる … キャッチコピー
- 体験者の95％が実感！… サブキャッチコピー
- 感謝されて健康に！ … サブキャッチコピー
- あなたもこの～ … 説明文、リード文
やはり、デザイン物が１番伝えなければならないものは、「そのデザインが何を伝えるものなのか？」となりますので、商品名やイベント名が、重要度１位となります。
その他の優先順位ですが、このデザインの場合は、広告になりますので「読者の飛びつきそうな話題」を意識して、順位付けをすることになります。
このデザインの内容だと、「絶対痩せる」というのは、読者の心に響きそうなワードなので、2位としました。「体験者の95％が～」というサブキャッチコピーは、「感謝されて健康に！」というワードよりも、「わかりやすい表現」だと感じたから、順位を３位とした次第です。この様に、そのデザイン物が「何を目的として作られるものか？」を考えて、重要度は考えましょう。
しかーし！これはあくまでも基本です。「その使用用途や使用方法は何か？」を考えると、重要度の選択方法は、また変わってきます。これはwebデザイン広告作成のテクニックかつ、実践的な分野なので、皆さんがwebサイトを作れるようになったであろう段階まで講座が進んだ段階で解説をします。今のところは、基礎的な重要度を意識して考えることにまずは慣れましょう。
各要素の重要度を考えて、装飾をほどこす
さて、いよいよ、デザイナーらしい話になってきました。一番デザイナーとして楽しい作業分野であり、腕が問われるところでもあります。それでは、色付け、装飾などについて基本を学んでいきましょう。
デザインは「迷宮入り」しやすいので、正直終わりのない作業です。
しかし、様々なテクニックを知ることで、その作業時間は大幅に短縮されます。このデザインの引き出しをたくさん持つようになるためには、様々なデザインを真似ることが一番の早道です。デザインに悩んだ場合は、チラシや記事などから、「これは良い！」と思う手法をどんどん真似しましょう。
文字の色を変えてみる
重要度を意識して、まずは各要素を色付けしてみましょう。
■ビフォー
■アフター
上記は、各重要度を考えて色付けした結果です。
「商品名」「痩せる」「大変身」は強調したいので、色付けをして目立たせるようにしました。また、体験者の95％～は目立たせたいが、それが大きな売りではないので、背景色の色で文字を中抜きにして、印象を少し弱めてみました。
ただ、見てのとーり、これだけじゃ、いまいちだし、下手したら元より悪くなったりもしてますよね。しかし、色付けをしてみると、重要な要素が見分けやすくなることがわかります。そして、その結果、「ここがいまいち！」と気付ける点が多々あったりします。
配色やカラーバランスについては、先に決めてもいいですが、デザインの最終段階で微調整を行うことをお勧めします。それは何故かというと、配色は限りないパターンがありすぎて「迷宮入り」する可能性があるからです。
まずは、シンプルな色を用いて、基本レイアウトをしっかり作りあげてから→配色の流れが作業効率を高めるコツです。
マーカーをつけてみる
目立たせたい要素や項目にマーカーを引くことも、簡単に重要な要素を際立たせることができます。また、このマーカーにより、各要素の「独立性」が増して、視認性が良くなる効果も得られたりもします。
■マーカーを引いてみた
背景を考えてみる
背景が、ベタ1色のほうが良ければ、良くないパターンもあります。背景を使ってうまく各要素の「独立性」「視認性」を高めることが出来ることもあったりします。
■背景を変えてみた
さて、どうでしょう？幾分か、さらにスッキリしたのではないでしょうか？
いくつか、変更点があります。そこに全部気づけたあなたは、デザイナーセンス◎です。変更点は以下の通りです。
- 背景を2トーンカラーに
- 体験者の9５％～を、白抜き文字に
- 左側ブロックのバランスの見直し
この、左側ブロックのバランスの見直しがポイントなんですが、デザインを施していく過程で、「あれ、なんだかバランスが…」という点が出てくることが、よくあります笑。その場合は、その都度再調整を行っていく必要があります。
この再調整の数は、スキルが上がれば上がるほど感覚が研ぎ澄まされて増える傾向にあるので、違和感に気づけたときはレベルアップを喜んで、素直にめんどくさくても、再調整を行いましょう笑
影を付けてみる
要素に影をつけることで、立体的な視覚効果を得ることができます。影は、うすーくつけることがコツです。
しかし、影はつけないほうがよいパターンもあるので、影をつけてみて違和感がある場合は素直に消したほうがよいです。影が必要なデザイン、要らないデザインについては、本講座の中でいずれ別記事で解説をしたいと思います。
- 街のゴミ拾いと、体験者の95％～の要素に影をつけました。
配色・グラデーションを再検討する
配色を整えて、グラデーションをつけることによって、立体感を演出出来たり、より強調を行ったりすることができます。しかし、グラデーションを行うデザインは、過度に行いすぎるとダサさを招きますので、ほんのりやる程度がよいです。
この辺こそが、まさにセンスなのですが、私はグラデーションを施すデザインがあんまり好きではないです。グラデーションを行うデザインは重厚感が増す反面、柔らかさが失われます。やわらかく、やさしい人間の僕はグラデーションが苦手です。
- 絶対痩せる！を縁取り文字に
- 95％の丸をグラデーション化、文字色を2トーンカラーに。
- 街のゴミ拾いをうすーくグラデーション
書体（フォント）を考える
フォントの選択は物凄く大事な要素です。ゴシック体、明朝体、フォーク体、ポップ体などなどで、大きく印象が変わります。数字が意外と印象が大きく変わるので、気をつけましょう。
基本的に、ゴシック体と明朝体のミックスはしないほうがよいです。また1つのデザインに、たくさんのフォントを使うとすごく読みづらいです。フォントワークについては次回の記事で解説を行いたいと思います。
■様々なフォントを使うと、見づらい
■フォントは統一感を持たせたほうがよい。
- 95％の数字だけ、フォント変更。さらにグラデーションを見直し。
- 街のゴミ拾いの文字をもう１サイズフォントを大きくした。
- 感謝されて、健康に！をポップ体に。
デザインは無限大ですが、ある一定のルールがある
■原型
■一旦の完成形
さて、色々とデザイン例を出してきましたが、デザインにはある一定のルールがあり、過剰な装飾は逆にイメージを悪くすることもあります。なので、うすーくデザインを施していくことが何気にコツだったりします。デザイン論については、のちのち講座を開きます。
デザイン初心者の方は、まずは大きく
- 揃え
- 余白
- フォント
- 配色
この４つを意識して、レイアウトをデザインしましょう。色々テクニックがありますが、これが原則的に基本となります。今回の題材のようなデザインをいくつか作成して、練習をしましょう。
組合員に限り、練習ご希望の方は進藤までお話ください。毎月定例の機関紙編集委員会の際に、レイアウトのレクチャーを行います。希望者多数の場合は、「デザイン講座」も開設しますので、反響の声はどしどし御寄せください。講座の存続にも関わります笑
次回は、本格的なwebレイアウトの作業を行う前に、「フォントワーク」について解説を行います。