学科 ECサイトデザイン基礎②【オンライン】

1限目
学科 ECサイトデザイン基礎②
バナーとは？

2限目
学科 ECサイトデザイン基礎②
レイアウトデザインのポイント

3限目
学科 ECサイトデザイン基礎②
バナー制作に向けて

4限目
学科 ECサイトデザイン基礎②
バナー制作に向けての情報収集

5限目
学科 ECサイトデザイン基礎②
バナー制作に向けての情報収集

本日のテーマ

今後のバナー制作に向けて情報収集をしましょう。

バナーの作成
レイアウトデザイン

バナーの作成

バナー広告とは？

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

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

まずは模写によるバナー制作です。

制限時間は1時間です。

制作の制限時間を意識しましょう。コツは「手間」「無駄」「無理」をしない

最初は大変かもしれませんが、バナー作成は1時間以内での作成を目指しましょう。
ポイントは、ソフトの理解をしたうえで、「手間」「無駄」「無理」をせず作る事。
実際のお仕事で「手間」がかかる作業は、作る前の打ち合わせで別途費用か時間がかかることを伝える必要があります。
「無駄」な作業は仕事として認められないので、当然ダメです。
「無理」なことは、無論出来ないので、事前に伝えましょう。
技術的に出来る事の理解とソフトの特長の理解が求められます。
操作技術の復習も兼ねながら多くのバナーを作成してみましょう

そのバナーの制作者が、意図していていた技術・技能・表現などを、
Photoshopのソフトでどのようにすれば再現できる考えながら作成してみましょう。
これまでの「文字の見やすさ」と「レイアウト」「文字」「配色」をしっかりと意識して
真似をしてみましょう。

１．最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識

2．次に「文字」に注目
「読みやすさ」を徹底的に意識

３．最後に「配色」を見てみましょう。
「読みやすさ」を維持しつつ「作品の世界観」を守れているか

レイアウトデザイン

まずはそれぞれの「面積の意識」をしてみましょう！

「余白」

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

余白のポイント① 作品の周りに余白を取る

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

余白のポイント② 各項目の周りにも余白を取る

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

余白のポイント③ 枠の中は窮屈にしない

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

「配置した内容のグループ化」

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

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

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

グループ化のポイント② 整列 (Alignment)

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

グループ化のポイント③ 反復 (Repetition)

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

「アクセント」

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

デザインの特徴、作品の象徴的な部分を考えてみましょう

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

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

アクセントのポイント② ジャンプ率を変える

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