vol.01


   デザイナー未満のための
   Fireworksで作る
Webバナー広告のポイント
  r360studio 森 和 恵
今日の内容
• 文字の取り扱い
• カラーを合わせる
• 写真をまわりになじませる
• レイアウトの4原則
• ターゲットを主役にした広告
文字の取り扱い
サイズ・太さ・文字詰めを見ためで微調整
さっき、自己紹介にあったロゴ
文字を打った直後は、こんな感じ
文字の見ためが、ばらばら
数字に合わせて、英字を調節
太さでも、印象が変わる
フォントスタイルで、太さ違いを選択
文字詰めでも印象が変わる
文字詰めにとことんこだわる
Fireworksでテキスト調整をする



                                        文字サイズ指定
                カーニングで字詰


文字サイズ [Ctrl(Command)]+[Shift]+[,]で-10
      [Ctrl(Command)]+[Shift]+[.]で+10

カーニング    [Ctrl(Command)]+[←]で-10
         [Ctrl(Command)]+[→]で+10
文字の強弱・ジャンプ率




• 文字のサイズで強弱をつける
• 「」、。などは、字詰する
カラーを合わせる
しっくりくる、色の選び方
色の3つの要素

 明度         色相       彩度
(明るさ/暗さ)
           (色味の違い)   (鮮やかさ)
 (濃い/薄い)
Fireworksのカラーパレット

      [セレクター]を選んで
      [HSV]モードに変更すると
      現在の色をベースに
       H・・・色相
       S・・・彩度  数字で調節できる!

       V・・・明度
      を個別に調整できる
選ぶ基本カラーは、3色
• ベースカラー:使用する面積の広い色
• サブカラー:次に面積の広い色
• アクセントカラー:ワンポイントで使う色
同系色で選ぶ
• 無難で失敗が少ない
• 面白みや変化に欠ける
同トーンで選ぶ
• トーンとは、「明暗・彩度」が同じ色
  色相だけが異なる色
• 「トーン=調子」が同じ色
写真をまわりになじませる
 コントラストを周囲に合わせる
コントラスト高…強い印象
コントラスト低…やさしい印象
レベル補正でコントラスト調整

                      ハイライト(入力)
シャドウ(入力)              光の部分を増やす
影の部分を増やす




                      ハイライト(出力)
シャドウ(出力)              光の部分を減らす
影の部分を減らす


           中間調
           全体の明るさ調整
コントラスト高…強い印象
コントラスト低…やさしい印象
レイアウトの4原則
近接・整列・繰り返し・コントラスト
名刺を4原則でレイアウト
近接
• 関連する項目を近づけ、まとめる
• 逆に、違う項目は離す
• 項目ごとにグループ化
近接
整列
•   グループ化した中で揃える
•   左・右・上・下に揃える
•   ガイド線を引くとわかりやすい
•   中央揃えは避ける(わかりにくい)
整列
繰り返し
• デザイン要素を加える場合は、
  同じグループで繰り返して使う
• 繰り返すことで、グループ化を強調
繰り返し
コントラスト
• 大きさ、太さ、色などで
  画面に強弱をつける
• 文字のジャンプ率もコントラスト
• メリハリとリズムが生まれる
コントラスト
4原則を適応する前と後
参考書籍

  ノンデザイナーズ・
      デザインブック
  出版:
  毎日コミュニケーションズ
ターゲットを主役にした広告
 広告を見る人の目線になって考える
ターゲット
   広告の主役は、見る人
• 提供側の言葉ばかりを押しつけては、×
• 「誰に?」のターゲットを明確に
• 主語はいつも、ターゲット側
• ターゲットのトーンに合わせる
• 手に入れたら後の「結果」をアピール
ターゲットの違うバナーを比較

        セッション当日は、
 ニッセンのコーナートップバナーを比較しました。
      「ミセス」「ヤング」「メンズ」
      製品の直接的な宣伝ではなく、
 ターゲットが主役の共感できる内容だと推測しました。
ターゲットの
年齢・行動パターン・悩み
流行色・普段使いの言葉
  好きな雰囲気…
を考慮してデザインを考える
私の事例も1点…
先日書いた書店POPの例
      長く使える教科書
      すみずみまで教えます
      「現場でちゃんと役立つ
          テクをゲット!」
      「Web制作の流れが
           よくわかる!」
募集ページにあった例題を分析
A案…わかりやすいが男性的



  • 文言もレイアウトも読みやすい
  • 女性らしい、やわらかさに欠ける
  • コントラストが高すぎる
B案…雰囲気は○わかりにくい



   •   女性らしい、やわらかさがある
   •   低年齢層むけにレイアウトもアレンジ
   •   ななめにして写真を大きく
   •   コントラストも低くやわらかい
   •   「バーゲン」という目的がわかりにくい
基本がわかったら、次は実践
• いろんなものを見て、意図を分析
• 日頃から、レイアウトを集めておく
• 説明できない「何となく」デザインは×
• いろんなパターンを試し、
  よい結果のものを継続して採用する
今日のポイント
• 文字をなじませるために徹底的に微調整
サイズ・字詰め・フォント

• カラーは、トーンで合わせる
• 写真は、コントラストで調子を合わせる
• レイアウトの4原則
近接・整列・繰り返し・コントラスト

• 訴えかける相手の目線でデザインする
r360studio 森和恵 今後の予定




情報は、r360studyで発信   Eラーニング教材




メールマガジンに寄稿
                     セミナー
よくわかる
Fireworks の 教科書


             Fireworksの教科書
             https://www.facebook.com/
             FireworksBook/
ご清聴ありがとうございました!
slideshare.net/r360studio/fireworks3

デザイナー未満のためのFireworksで作るWebバナー広告のポイント