学科【オンライン】2025.10.23

授業内容

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

本日のツール

• アートボードツール
• レイヤースタイル

習得内容

• バナーとは？

バナー はウェブページ上で他のウェブサイトを紹介する役割をもつ画像のこと。本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。

■バナーを作るポイント
・目標は1つ作るのに60分以内
・簡易的な作成できるかが重要
・バリエーションで技術を証明

• レイアウトデザインのポイント

まずはそれぞれの「面積の意識」をしてみよう！伝えたい順番＝面積の大きさ

■余白
まずは「余白」を意識してみる。ホワイトスペースと呼ばれる何も配置していないところを言う。
むやみに文字を大きくしたりせず、ゆとりをもって配置できるようなスペースを取ってみる。「文字とスライドの端」、「文字と文字」、「文字と図」の間にはしっかりとスペースを空けよう。スペースが美しければ、作品も美しくなる。

□ポイント① 作品の周りに余白を取る
コンテンツの周りには、最低でも本文の文字の１文字分の余白を設けるようにしてみよう。２文字分くらいの余白をとると、かなりゆったりした作品になり、確実に見やすくなる。余白が多いほどオシャレな印象になりやすい。

□ポイント② 各項目の周りにも余白を取る
枠の中に単語や文章を入れることがある。
このとき注意したいのが「ニアミス」。文字が枠のギリギリになってしまうと、枠の近くの文字が非常に読みにくくなる。文字は線の要素で、枠線も線の要素であるため、互いに接近したときに干渉し合ってしまうため。「ギリギリだけど収まったからいい」なんてことはない。枠の中に、余裕をもって文章を配置する。

□ポイント③ 枠の中は窮屈にしない
枠の中の文字が窮屈すぎると読みにくい上に、印象もよくない。
どうしても枠を大きくできないとか、文字数を減らすことができない場合ならば、少々文字を小さくした方が読みやすいこともある。

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

□ポイント① 近接 (Proximity)
近接とは、関連する項目をまとめてグループ化すること。
切れ目のないテキストのままでは、文頭から文末まで読まなければ内容を理解できない。
それぞれのグループ間の距離を少し大きめに取ることで、直感的に情報の構成を理解できるようにして、同じ種類や系列の情報を近くに配置する。

□ポイント② 整列 (Alignment)
【近接】と同様に直感的に情報の構成を理解できるようになるのが【整列】。
整列を用いることでページの内容に一体感が生まれると同時に、組織化につながる。また、整列を利用するときは、目に見えない線を意識する。「写真画像とテキストの上辺」「タイトル文字と本文の頭」など要素や大きさ、色などを揃えることで生まれる、この目に見えない線を意識してみよう。

□ポイント③ 反復 (Repetition)
デザイン上のある特徴を繰り返し使用することを【反復】という。反復させるものは、太字体、罫線、色、アイコンなど様々なものがあり、要素を繰り返し用いることで一貫性や統一感のあるレイアウトを実現できる。また、一度理解したデザイン構造が他の要素にも適用されるため、情報をすばやく取得できるようになる。

■アクセント
デザインや文章・建築などの世界では、特に強調したいために周りと違ったアプローチをした部分をアクセントと呼ぶ。例えば、全体が真っ白なファブリックで覆われたソファに赤の縁取りを施したデザインは、赤を指して「アクセントカラー」と呼ぶ。

□ポイント① コントラスト (Contrast)
コントラストとは、２つの要素が異なる場合に見た目をはっきりと異ならせること。情報の優先度を考慮し、重要な要素はより目立たせるなど差別化させる。具体的にはフォントの大きさや形、写真のトリミングに変化をつけることで他の要素と対比させる。要素を「まとめる」近接や整列に対し、あえて差別化することで、要素間の関係性を表現する。

□ポイント② ジャンプ率を変える
「ジャンプ率」とは、本文の文字サイズに対するタイトルや見出しの文字サイズの比率のこと。ジャンプ率が低いと落ち着いた印象になり、ジャンプ率が高いと躍動感のある印象になる。タイトルのジャンプ率を高くすればするほど、タイトルが強調されていることがわかる。絶対的な大きさではなく、本文に対する相対的な大きさが、目立ちやすさや躍動感を決めている。コンテンツの意図に合わせてジャンプ率を変えてみよう。

□ポイント③ アイキャッチを考える
可読性を損なわずに、一瞬で人の目を捉えるための素材をアイキャッチャーと呼ぶ。文字や図形、イラスト、写真などを効果的なアイキャッチャーにしてみよう。文字の邪魔にならない範囲で背景に大きな絵を入れたり、ギザギザやふきだし等を配置することで、人の目を引くことができる。アイキャッチでより効果的にしてみよう。

• バナー制作に向けて

Photoshop（フォトショップ）を使って作成してみる。まずは、真似をしてみよう。世にあるデザインの「レイアウト」を分析しながら、その特徴を理解し、こうすると「かわいい」ああすると「かっこいい」を分析していこう。

■模写によるバナー制作（制限時間は1時間）
制作の制限時間を意識しよう。コツは「手間」「無駄」「無理」をしない。
最初は大変かもしれませんが、バナー作成は1時間以内での作成を目指そう。１時間以上かけると目がなれてしまうためサイトで見る人たちの感覚からずれてきてしまう。サイトで見ている人たちは３秒程度しか見ていない。理想は３０分で制作していく。ポイントは、ソフトの理解をしたうえで、「手間」「無駄」「無理」をせず作る事。実際のお仕事で「手間」がかかる作業は、作る前の打ち合わせで別途費用か時間がかかることを伝える必要がある。「無駄」な作業は仕事として認められないので、当然ダメ。「無理」なことは、無論出来ないので、事前に伝える。技術的に出来る事の理解とソフトの特長の理解が求められる。操作技術の復習も兼ねながら多くのバナーを作成してみよう。

■ワンポイントアドバイス
まずは、模写をして徹底的に真似をしよう。
そのバナーの制作者が、意図していていた技術・技能・表現などを、Photoshopのソフトでどのようにすれば再現できる考えながら作成してみよう。これまでの「文字の見やすさ」と「レイアウト」「文字」「配色」をしっかりと意識して真似をしてみよう。
１．最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識
2．次に「文字」に注目
「読みやすさ」を徹底的に意識
３．最後に「配色」を見てみよう。
「読みやすさ」を維持しつつ「作品の世界観」を守れているか

■模写バナーで便利なPhotoshop機能

□アートボードの複製

□レイヤーの描画モード

▢Tシャツの色替え

• バナー制作に向けての情報収集

■バナーデザインギャラリーからの収集
▢バナー
参考サイト　retrobanner.net 　Bannner.com
▢素材画像
参考サイト　Pinterest　O-dan.net　pixabay.com　pexels.com

■模写バナー手順

■模写バナー書出し