2023/11/13 学科 ECサイト運用基礎①【オンライン】

Diary

この日のアイキャッチはこちらの画像を模写させていただきました。
犬は自身が撮った実家の犬、サンタ帽・雪はイラストACさん、犬の背景は元画像が小さすぎてよくわからなかったので、ぱくたそさんで借りたクリスマス柄のセーターの画像を使用しています。

1限目:バナーとは?
2限目:レイアウトデザインのポイント
3限目:バナー制作に向けて
4限目~5限目:バナー制作に向けての情報収集

この日はバナーについて教わった後に、明日の授業でバナーの模写をするためのバナー選定や素材集めの時間に充てられました。

今日教わったこと

・まずは人のまねをして世にあるデザインのレイアウトを分析していく
・サイズはサイトごとに違う
・バナーは1時間で作る。「手間」「無駄」「無理」をせず作る事。
・1時間以上かけると目が慣れて慣れたことに依存していって沼にはまってく。バナーは3秒程度しか見られてないので1時間やって上手くいかないなら別案にした方がいい
・予算の面の問題もある。生産性が悪いことになるのでよろしくない。
・真似をして文字の見やすさ、なぜそのレイアウト、フォント、配色になっているのかを意識する
・レイアウトはまず面積の意識をしてみる
・余白を美しければ作品も美しくなる。心に余白があればデザインの余白もきっちりとれる…
・作品の周りに余白を取る(見やすくなる)
・各項目の中にも余白を取る。枠の中も窮屈にしない(文字が読みやすくなる)
・配置を内容によってグループ化することで分かりやすくなる
(見出し、テキスト、画像で1グループにしたうえでグループを整列させる)
・同じサイト、ブランドの商品なら同じレイアウトで作ったほうがいい(反復)
・これらをすべてきちんとした上でアクセントをつけて目を引く
 ・フォントの大きさや形、写真のトリミング、別の配色などでコントラストをつける
 ・ジャンプ率(本文の文字サイズに対するタイトルや見出しの文字サイズの比率)を変える。
 ・アイキャッチを考える
 (太い文字、イラスト、雰囲気のあるイラストや写真、ギザギザや吹き出し)
・いくら良い雰囲気でも読みにくかったら意味がない。可読性、視認性、判読性をここでも意識する
・最後に色を確認する。ちょっと色相や彩度、明度が違うだけで印象が変わってしまう。同じ赤だからいいでしょでは無い
・バナーのサイズはフォトショの画像解像度やファイルのプロパティで見れる

今日の参考サイト


▼バナー選定・素材収集サイト

コメント