2025.05.23 バナーの作成について

<概要>

⚫︎バナーとは?
⚫︎レイアウトデザインのポイント
⚫︎バナー制作に向けて
⚫︎バナー制作に向けての情報収集


<講義のまとめ、ポイント、感想など>

・バナーを作る際は写真加工が多いためPhotoshopを使うことが多い。

・「どんなバナーが売れるのかな」「どんなバナーが目を引くのか」など、世にあるデザインを観察してみる、そして真似してみることが上達のコツ。

★制作時間は1時間(理想はリテイク時間含め)
見る人がバナーをクリックするかどうかの判断時間はおよそ3秒間。
作る側が1時間以上かけると目が慣れてしまい、「見る人の視点」ではなく「作り手のエゴ」「自分のデザイン性への依存」というマイナスな問題が発生してしまう。
ポイントは「手間」「無駄」「無理」をせず作ること。
実際のお仕事で「手間」がかかる作業は、作る前の打ち合わせで別途費用か時間がかかることを伝える必要がある。
「無駄」な作業は仕事として認められない(生産性の問題)ので、当然NG。
技術的に出来る事の理解とソフトの特長の理解が求められる。


【真似て覚える】
これまでに学んだ「文字の見やすさ」と「レイアウト」「文字」「配色」をしっかりと意識して真似をしてみる。

1.最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識
2.次に「文字」に注目
「読みやすさ」を徹底的に意識
3.最後に「配色」を見てみる
「読みやすさ」を維持しつつ「作品の世界観」を守れているか

◼︎レイアウトデザイン
「layout」は、デザインや建築設計、インテリア、書籍や雑誌などにおいて「何をどこに、どのように配置するか」を指す言葉。
レイアウトを変えることでデザインの伝わりやすさは変わる。

★面積の意識
①余白(ホワイトスペース)
作品の周りに余白を取る

各項目の周りにも余白を取る

枠の中は窮屈にしない


★配置した内容のグループ化
単調にレイアウトされると直感的に理解しにくい場合でも、内容に即してグループ化を行なうことで、全体の構成やロジックが理解しやすくなる。
関連の強い文章と写真同士を近くに配置(=グループ化)すると内容を直感的に理解しやすくなります。
また、関連の弱いものは少し離して配置する(上下でスペースを取る)ことで、グループ化が強調される。

グループ化のポイント
 ・近接 (Proximity)

 ・整列 (Alignment)

 ・反復 (Repetition)


★アクセント
デザインや文章・建築などの世界では、特に強調したいために周りと違ったアプローチをした部分をアクセントと呼ぶ。

アクセントのポイント
 ・コントラスト (Contrast)

 ・ジャンプ率を変える
「ジャンプ率」とは、本文の文字サイズに対するタイトルや見出しの文字サイズの比率のこと。
ジャンプ率が低いと落ち着いた印象になり、ジャンプ率が高いと躍動感のある印象になる。

 ・アイキャッチを考える


◼︎文字デザイン
・可読性:文章が読みやすいか
・視認性:パッと見た瞬間の認識しやすさ
・判読性:誤読がないか

◼︎配色
PhotoshopやIllustratorのようなソフト(アプリケーション)を扱う前提として、数値が一つ違えば、別の色になる。
例えば、赤と言っても、「色相」「彩度」「明度」が変われば、違う色。
そしてその違いは、「陰影」なのか「柄」なのかの判断と理解が必要。
 ・CMYK(印刷物)とRGB(Web)では色数が大きく異なる。
 ・色の3属性は「陰影」として表現するのか「柄」として
表現するのかをしっかりと見極めたうえで使い分ける。
 ・グラデーションの使い方は十分に気を付ける。
安易なグラデーションは違和感でしかなく、配色にも意味がある事をしっかりと意識する。
 ※例)りんご
 陰影:
 ・照明が当たった方向から見て、光と影の部分
 ・水滴に対して、光沢や凹凸の表現に当たる部分
 ・茎の部分の凹凸の表現に当たる部分
 ・りんごの下のまるい影の部分

 柄:
 ・りんごそのものの赤い柄
 ・熟している部分の皮の色と熟していない部分の皮の色
 ・りんごの茎の部分の皮の色
 ・茎の光の反射による色味


【実際に存在するバナーを真似てみる】
次回の講義で真似をするための素材集め、リサーチを行います。
私の目標は次回の講義中に3つ作ること!

参考:https://design-library.jp/23558
https://www.family.co.jp/campaign/spot/2504_cheese-sweets_cp_V3Vis.html
サイズ:992×666

選んだポイント
・前回学んだマスクツールで画像の切り抜きができそう
(しかもたくさんあるので練習になりそう)
・それ以外の素材や要素も、これまで学んだことを活かして0ベースで自分で作れそう
・要素が多く影をつけるなど細かいデザインのポイントもあるので、しっかりと観察して作り甲斐がありそう

参考:https://design-library.jp/23452
サイズ:1200×630

選んだポイント
・画像がない→Illustratorの練習になりそう
・トレースでイラスト、文字も作れそう
・シンプルでかんたんに見える分、配置や色味の学びになりそう

参考:https://design-library.jp/23479
https://www.instagram.com/p/DGDJGwfSozQ/?img_index=1
サイズ:1080×1350

選んだポイント
・グラデーションの練習になりそう
・マスクツールで素材を切り抜く練習ができる