1.
vol.01
デザイナー未満のための
Fireworksで作る
Webバナー広告のポイント
r360studio 森 和 恵

2.
今日の内容
• 文字の取り扱い
• カラーを合わせる
• 写真をまわりになじませる
• レイアウトの４原則
• ターゲットを主役にした広告

3.
文字の取り扱い
サイズ・太さ・文字詰めを見ためで微調整

4.
さっき、自己紹介にあったロゴ

5.
文字を打った直後は、こんな感じ

6.
文字の見ためが、ばらばら

7.
数字に合わせて、英字を調節

8.
太さでも、印象が変わる

9.
フォントスタイルで、太さ違いを選択

10.
文字詰めでも印象が変わる

11.
文字詰めにとことんこだわる

12.
Fireworksでテキスト調整をする
文字サイズ指定
カーニングで字詰
文字サイズ [Ctrl(Command)]＋[Shift]＋[,]で-10
[Ctrl(Command)]＋[Shift]＋[.]で＋10
カーニング [Ctrl(Command)]＋[←]で-10
[Ctrl(Command)]＋[→]で＋10

13.
文字の強弱・ジャンプ率
• 文字のサイズで強弱をつける
• 「」、。などは、字詰する

14.
カラーを合わせる
しっくりくる、色の選び方

15.
色の３つの要素
明度 色相 彩度
（明るさ/暗さ）
（色味の違い) （鮮やかさ)
(濃い/薄い)

16.
Fireworksのカラーパレット
[セレクター]を選んで
[HSV]モードに変更すると
現在の色をベースに
H・・・色相
S・・・彩度 数字で調節できる！
V・・・明度
を個別に調整できる

17.
選ぶ基本カラーは、3色
• ベースカラー：使用する面積の広い色
• サブカラー：次に面積の広い色
• アクセントカラー：ワンポイントで使う色

18.
同系色で選ぶ
• 無難で失敗が少ない
• 面白みや変化に欠ける

19.
同トーンで選ぶ
• トーンとは、「明暗・彩度」が同じ色
色相だけが異なる色
• 「トーン＝調子」が同じ色

20.
写真をまわりになじませる
コントラストを周囲に合わせる

21.
コントラスト高…強い印象

22.
コントラスト低…やさしい印象

23.
レベル補正でコントラスト調整
ハイライト（入力）
シャドウ（入力） 光の部分を増やす
影の部分を増やす
ハイライト（出力）
シャドウ（出力） 光の部分を減らす
影の部分を減らす
中間調
全体の明るさ調整

24.
コントラスト高…強い印象

25.
コントラスト低…やさしい印象

26.
レイアウトの４原則
近接・整列・繰り返し・コントラスト

27.
名刺を４原則でレイアウト

28.
近接
• 関連する項目を近づけ、まとめる
• 逆に、違う項目は離す
• 項目ごとにグループ化

29.
近接

30.
整列
• グループ化した中で揃える
• 左・右・上・下に揃える
• ガイド線を引くとわかりやすい
• 中央揃えは避ける（わかりにくい）

31.
整列

32.
繰り返し
• デザイン要素を加える場合は、
同じグループで繰り返して使う
• 繰り返すことで、グループ化を強調

33.
繰り返し

34.
コントラスト
• 大きさ、太さ、色などで
画面に強弱をつける
• 文字のジャンプ率もコントラスト
• メリハリとリズムが生まれる

35.
コントラスト

36.
４原則を適応する前と後

37.
参考書籍
ノンデザイナーズ・
デザインブック
出版：
毎日コミュニケーションズ

38.
ターゲットを主役にした広告
広告を見る人の目線になって考える

39.
ターゲット
広告の主役は、見る人
• 提供側の言葉ばかりを押しつけては、×
• 「誰に？」のターゲットを明確に
• 主語はいつも、ターゲット側
• ターゲットのトーンに合わせる
• 手に入れたら後の「結果」をアピール

40.
ターゲットの違うバナーを比較
セッション当日は、
ニッセンのコーナートップバナーを比較しました。
「ミセス」「ヤング」「メンズ」
製品の直接的な宣伝ではなく、
ターゲットが主役の共感できる内容だと推測しました。

41.
ターゲットの
年齢・行動パターン・悩み
流行色・普段使いの言葉
好きな雰囲気…
を考慮してデザインを考える

42.
私の事例も1点…

43.
先日書いた書店POPの例
長く使える教科書
すみずみまで教えます
「現場でちゃんと役立つ
テクをゲット！」
「Web制作の流れが
よくわかる！」

44.
募集ページにあった例題を分析

45.
Ａ案…わかりやすいが男性的
• 文言もレイアウトも読みやすい
• 女性らしい、やわらかさに欠ける
• コントラストが高すぎる

46.
Ｂ案…雰囲気は○わかりにくい
• 女性らしい、やわらかさがある
• 低年齢層むけにレイアウトもアレンジ
• ななめにして写真を大きく
• コントラストも低くやわらかい
• 「バーゲン」という目的がわかりにくい

47.
基本がわかったら、次は実践
• いろんなものを見て、意図を分析
• 日頃から、レイアウトを集めておく
• 説明できない「何となく」デザインは×
• いろんなパターンを試し、
よい結果のものを継続して採用する

48.
今日のポイント
• 文字をなじませるために徹底的に微調整
サイズ・字詰め・フォント
• カラーは、トーンで合わせる
• 写真は、コントラストで調子を合わせる
• レイアウトの４原則
近接・整列・繰り返し・コントラスト
• 訴えかける相手の目線でデザインする

49.
r360studio 森和恵 今後の予定
情報は、r360studyで発信 Eラーニング教材
メールマガジンに寄稿
セミナー

50.
よくわかる
Fireworks の 教科書
Fireworksの教科書
https://www.facebook.com/
FireworksBook/

51.
ご清聴ありがとうございました！
slideshare.net/r360studio/fireworks3