ECサイトデザイン② OnLine
講師：平井美子先生
1限 バナー作成について
✎ܚ動画1「バナー作成について」
・バナー作りはいかがですか？(齋藤先生)→大事なポイント『気付き』
・商業デザインにおいて『何故それにしたのか？』常に理由が必要
→レイアウト ┐ ／
→フォント ｜ 常に意識！
→カラー ┘ ＼
✎ܚ動画2「実例①」
・ファイル名『02.jpg』は× 最低限 会社名_内容_日付を！→『samplesdl_bnr_20230000_01.jpg』
・あまり違いのない2つのバナー→提案が弱い→メリハリ！
・忠実に参考を再現する→再現出来る力を見せる→再現力！
・余白の使い方を徹底的に整える
・アイキャッチの調整
・文字の配色バランスを合わせる
・境界線の太さを合わせる
・より良いデザインを再現
*提案力！を見せてデザイン力を見せる
→レイアウトの提案 →フォントの提案 →カラーの提案
*特に可視性を高める提案を意識
*裏で5、6個作っておくくらいで良い
2限 バナーについて続き
✎ܚ平井先生アドバイス
・提案は3つあるとクライアントが『選んだ感』があり、方向性が早く進みやすい要素がある
・4つ以上になると迷う要素が増える
✎ܚ動画3「調整依頼」「実例②」
・目立たせたい所を大きくする→周りを小さくする手段もある
・次の依頼はクライアントも内容が不透明 別のデザイナーに依頼→いっぱいくれました笑
✎ܚ動画4「クライアント様に考えてもらう」
・最初からゴールを目指さないこと！
→まずは提案！ 提案！！ とにかく提案！！！
・依頼内容が弱いため、参考に忠実に再現＆多すぎないように絞って提案→齋藤先生「洋服選びと一緒」
*レイアウトはほぼ同じにして二次案に備える
*フォントは無難な物に 明朝/ゴシックだけ変えた物を提案
*ベースが不透明なのでベースカラーも無難な白で背景の表現を変える
→クライアントから具体的な内容が来たのでブラッシュアップ→完成
✎ܚ動画5「慣れた方からの依頼」スムーズにスタート
・文字数が多いので複数の見せ方を提案
→クライアントより基本は青の方で コピーをもっと目立たせて
モデルさん下部はテキストかぶりOK 等の詳しい指示
→ジャンプ率を意識 目立たせたい所80：目立たせないでいい所１くらい
✎ܚ平井先生アドバイス
・やりすぎてみて^^
3限 バナーについて続き
✎ܚ動画6「こんなのも来ました 初稿」
・コラボ企画のバナー
→初稿① 参考を忠実に再現
→初稿② コラボを考慮して左右対称レイアウトの提案
✎ܚ動画7「二次提案」
・希望に合わせて更に提案 可読性UP
✎ܚ動画8「オマケ」
・クライアントとの積み重ねで見せて行かなきゃいけないこと→再現力
→基本が出来てこそそれ以上の物を提案できる
*必ず複数作って提示しましょう
✎ܚ動画9「まとめ」
・製作過程を明確にして成長力もアピール
・忠実に再現できること それ以上のことができること、提案→次の仕事に繋がってゆく
・PFに数を増やす為に→に色んなバナーを作るよりも同じバナーでもブラッシュアップして数多くして行く
✎ܚ平井先生アドバイス
・基本的に文字は左上から右下の順
・人間の目には右の方が大きく見える特性がある 気持ち右に寄せると真ん中に見える
*写真の著作権は必ず意識する。
4限 各自作業
✎ܚ今後の予定→2/6バナー作成実習 →2/7成績考査
・2/6のバナー作成時、作ったバナーを1枚のWebページ内に当て込む→違和感がない様に
・どこかのサイトページを決めて馴染むバナーを作る 出来れば2枚以上
✎ܚページ1枚を画像で保存する方法
→デベロッパーツール(Ctrl+Shift+I)/検証ツール(F12)→プリント(Ctrl+Shift+P)→RUN＞の部分に『full』入力
*縦に長～い画像が保存されます
・参考サイト→電脳情報局
✎ܚやった事
・バナー作成参考サイト閲覧
→初心者でも「45分」で作れる！ 高品質バナーの作り方！
→勝てるバナーレイアウト20選！効果を上げるバナーの基本・コツ
→初心者でも簡単！効果的なバナーの作り方のポイントとは
・載せるページ探し→ひたすら長いページが多く、保存したら途中で切れてたりして意外と難しい…💦
・バナー作成用の画像探し
バナー作成について
長年の現場を経験されている先生から
具体例を聞かせていただく事が出来てとても有難いです😊
クライアント様とのやりとりって本当重要
特に齋藤先生が動画で仰っていた
【再現性】【提案力】【最初からゴールを目指さない】
ここはものすごく大切ですね
心にしっかり刻んでおこうと思います✨
そして次回成績考査は2/7
バナー作成翌日にすぐ成績考査って
スケジュール急すぎひん？(꒪ꇴ꒪ ; )💦
