2025.11.14 学習記録 ～バナー①～
Kumiko Okawaraバナーとは？
バナーとは、ウェブページ上で他のウェブサイトを紹介する役割をもつ画像のこと。
本来は旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。
バナー制作のポイント
- 最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識 - 次に「文字」に注目
「読みやすさ」を徹底的に意識 - 最後に「配色」を確認
「読みやすさ」を維持しつつ「作品の世界観」を守れているか
レイアウトデザイン
それぞれの面積の配分を考えること。レイアウトを変えることでデザインの伝わりやすさが変わる。
レイアウトにもセオリーは多数あるものの、「正解」はない。
デザインの目的により合うものを試してみることが大切。
余白
ホワイトスペースと呼ばれる何も配置していないところ。
むやみに文字を大きくせず、ゆとりをもって配置できるようなスペースを取る。
「文字とスライドの端」「文字と文字」「文字と図」の間にはしっかりとスペースを空ける。
余白のポイント①作品の周りに余白を取る
コンテンツの周りには、最低でも本文の文字の１文字分の余白を設けるようにする。
２文字分くらいの余白をとると、かなりゆったりした作品になり、確実に見やすくなる。
余白のポイント②各項目の周りにも余白を取る
枠の中に単語や文章を入れる際に注意したいのが「ニアミス」。
文字が枠のギリギリになってしまうと、枠の近くの文字が非常に読みにくくなる。
（文字も枠線も「線の要素」であるため、互いに接近したときに干渉し合ってしまう。）
枠の中に、余裕をもって文章を配置する。
※「ギリギリだけど収まったからいい」なんてことはない！
余白のポイント③ 枠の中は窮屈にしない
枠の中の文字が窮屈すぎると読みにくく、印象もよくない。
どうしても枠を大きくできなかったり文字数を減らすことができない場合ならば、少々文字を小さくした方が読みやすいこともある点に気を付ける。
配置した内容のグループ化
内容に即してグループ化を行なうことで、全体の構成やロジックが理解しやすくなる。
関連の強い文章と写真同士を近くに配置（＝グループ化）、関連の弱いものは少し離して配置する（上下でスペースを取る）ことで、グループ化が強調される。
グループ化のポイント①近接(Proximity)
直感的に情報の構成を理解できるようにして、同じ種類や系列の情報を近くに配置する。
グループ化のポイント②整列(Alignment）
「写真画像とテキストの上辺」「タイトル文字と本文の頭」など要素や大きさ、色などを揃えることで生まれる、目に見えない線を意識して配置する。
グループ化のポイント③反復(Repetition）
デザイン上のある特徴（太字体、罫線、色、アイコンなど）を繰り返し使用すること。
一貫性や統一感のあるレイアウトを実現できるうえ、一度理解したデザイン構造が他の要素にも適用されるため、情報をすばやく取得できるようになる。
アクセント
特に強調したいために周りと違ったアプローチをした部分のこと。
アクセントのポイント①コントラスト(Contrast)
情報の優先度を考慮し、重要な要素はより目立たせるなど差別化させる。
具体的にはフォントの大きさや形、写真のトリミングに変化をつけることで他の要素と対比させる。
アクセントのポイント②ジャンプ率を変える
「ジャンプ率」とは、本文の文字サイズに対するタイトルや見出しの文字サイズの比率のこと。
ジャンプ率が低いと落ち着いた印象になり、ジャンプ率が高いと躍動感のある印象になる。
絶対的な大きさではなく、本文に対する相対的な大きさが、目立ちやすさや躍動感を決める。
アクセントのポイント③アイキャッチを考える
可読性を損なわずに、一瞬で人の目を捉えるための素材をアイキャッチャーと呼ぶ。
文字の邪魔にならない範囲で背景に大きな絵を入れたり、ギザギザやふきだし等を配置することで、人の目を引くことができる。
アイキャッチの例)
- 大きく太い文字
- 雰囲気のあるイラストや写真
- ギザギザやふきだしなど
文字デザイン
文字デザインで意識するポイント
- 可読性
…文章が読みやすいか - 視認性
…パッと見た瞬間の認識のしやすさ - 判読性
…誤読がないか
書体による可読性、視認性の違い
- ゴシック体
…視認性は高いが、可読性は明朝体に劣る。
「読む」というよりは「見る」という意味合いの強い要素に使うのが向いている。 - 明朝体
…線に強弱があるため、ゴシック体よりも可読性が高い。
ただし、解像度が低いと線がかすれて読みにくくなってしまう点に注意。
配色
色の3属性は「陰影」として表現するのか「柄」として表現するのかをしっかりと見極めたうえで使い分ける。
安易なグラデーションは違和感のもと。グラデーションの使い方は十分に気を付けること！
色は作り手側は意図して配色するが、見る側にはそれを「意識させない」色使いにする！
見る側が違和感なく自然に見られることが大切。
色の三属性
- H 色相(Hue)
- S 彩度(Saturation)
- V 明度(ValueもしくはBrightness)
「陰影」と「柄」の使い分けについて
| 陰影 | 柄 |
| ・照明が当たった方向から見て、光と影の部分 ・水滴に対して、光沢や凹凸の表現に当たる部分 ・茎の部分の凹凸の表現に当たる部分 ・りんごの下のまるい影の部分 | ・りんごそのものの赤い柄 ・熟した部分の皮の色と熟していない部分の皮の色 ・りんごの茎の部分の皮の色 ・また、茎が光の反射による色味 |
備考・メモ
制作の制限時間を意識すること！
コツは「手間」「無駄」「無理」をしない！
実際のお仕事では…
「手間」がかかる作業は、作る前の打ち合わせで別途費用か時間がかかることを伝える必要がある。
「無駄」な作業は仕事として認められない。
「無理」なことは、出来ないので事前に伝える。
★1時間以上制作に時間をかけるのは要注意！（技術的な面は除く）
→1時間以上没頭してしまうと「デザインに依存」しすぎてしまう！（お客さんが実際に見るのは３秒）
まずはバナーを模写してみる。
→そのバナーの制作者が、意図していていた技術・技能・表現などを、Photoshopのソフトでどのようにすれば再現できる考えながら作成する。
バナー参考サイト…バナー広場、BANNER LIBRARY
