タグ: バナー

2023年2月7日 コメントする

2月7日（火）－ECサイトデザイン実習④バナー制作

メモ

・バナー作成の作業中、文字がジャギジャギするので、作業中は150dpiで、別名保存で72dpiで書き出しでもOKとのこと（必ず別名保存後に、イメージタブ→画像解像度で変更）

【アートボードごとに書き出しする方法】
・新規ファイル作成時、「方向」横のアートボードにチェックを入れておくと増やしやすい
↓
◆「アートボード」文面クリックで増やして、プロパティでサイズ変更
or
◆レイヤーパネル右上メニュー→「アートボード追加」

【サイズ違いのバナー作成する際】
・大きいバナーから作成して、小さいバナーを作成していくと、情報をそぎ落としていく感じで作業しやすい

オリジナルバナー作成練習（サイズ違い）

使用ソフト｜Photoshop（作業時間：約180分）

750px × 290px
250px × 250px
320px × 100px
320px × 50px
120px × 600px

▼借用元元画像
・コピック アルコールインクアートセット商品ページ
https://gtoo-event.com/hobby2020/item/20210112-135900.html

・アルコールインクアート素材（写真AC）
https://www.photo-ac.com/main/detail/3876852?title=%E3%82%A2%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%AB%E3%82%A4%E3%83%B3%E3%82%AF%E3%82%A2%E3%83%BC%E3%83%88

https://www.photo-ac.com/main/detail/24132816?title=%E3%82%A2%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%AB%E3%82%A4%E3%83%B3%E3%82%AF%E3%82%A2%E3%83%BC%E3%83%88%20%E6%B0%B4%E5%BD%A9%20%E3%82%B0%E3%83%AA%E3%83%83%E3%82%BF%E3%83%BC

2023年2月4日 コメントする

2月4日（土）－ECサイトデザイン実習③バナー制作

メモ（仕事での制作物提出について）

（先生の場合）
・ラフを出すときにはイラレやフォトショではなく、ExcelやXDを使用した簡素な配置メモを渡すとのこと（文言などが決まっているときは入れ込む）
・その際には文字の大きさ、スタイルなども考えて清書直前の配置メモにする

・参考画像で、DLしたバナーなども添えて説明している（競合他社のバナーでも、理由を添えて）
例：「このレイアウトのバナーですが、調査したところ売上が上がっているようで、サイトTOPにもありましたので、似た雰囲気で作成しました」など

オリジナルバナー作成練習（埋め込み）

使用ソフト｜Photoshop（作業時間：約160分）

埋め込みで並べた際に浮かないよう、書体や文字色などを合わせました。
ぼんやり発光する感じでくらげのイラスト（パス）を入れて、ふわふわ感を出すために円弧と、メインタイトルはゆらゆら漂うイメージで波形フィルターを使用しました。

▼借用元元画像
・サンシャイン水族館（スクリーンショット）
https://sunshinecity.jp/aquarium/

・くらげ素材（写真AC）
https://www.photo-ac.com/main/detail/24764880?title=%E3%82%AF%E3%83%A9%E3%82%B23

他バナーの雰囲気に合うようにシンプルな配置にしました。
テーブル素材はそのままだときつく感じたので、雰囲気に合うよう白基調にして、遠近法ツールで食器の角度に合わせ、ドロップシャドウやブラシで影を付け足しました。

▼借用元元画像
・KEYUCA（特集一覧ページスクリーンショット）
https://www.keyuca.com/shopping/user_data/special.php

・KEYUCA　離乳食皿
https://www.keyuca.com/shopping/products/detail.php?product_id=43576&category_id=552

・テーブル素材（写真AC）
https://www.photo-ac.com/main/detail/25195459?title=%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E6%9C%A8%E7%9B%AE

2023年2月2日 コメントする

2月2日（木）－ECサイトデザイン実習②バナー制作

デザイン素材の権利について

バナーなどの制作物のデータは、当然二次利用が可能です。データ納品となる場合は権利やデータの内容などの事から、価値が変わります。
初期の契約内容や会社での方針などしっかり確認しデータのやり取りをしましょう。

【実際仕事する際、要確認】参考サイト

・デザインの著作権は、デザイナーと依頼者どちらにあるのか？譲渡はできるのか？ | デザインのコト。
・デザイナーが知っておくべき「法律」の基礎知識。商標、著作権、特許の違い、知ってる？ | キャリアハック
・デザインデータは無償で渡すべき？デザインの著作権とデータ譲渡の対策について考えてみた | MTFC

オリジナルバナー作成練習

使用ソフト｜Photoshop（作業時間：約160分）

▼借用元元画像
・チョコレート（楽天市場）
https://item.rakuten.co.jp/morozoff/1865/

・リボン（写真AC）
https://www.photo-ac.com/main/detail/25143983?title=%E3%82%AE%E3%83%95%E3%83%88_%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8

2023年2月1日 コメントする

2月1日（水）－ECサイトデザイン実習①バナー制作

・フリー素材でもルールがあるので、使用するときに都度確認
　以前使用したものでもルール変更している可能性があるので、毎回確認

・授業の練習は参考画像のURL（+TOPなどどこかに謝辞）載せていればOK（営利目的ではないのでグレーゾーン）の認識でよいとのこと

バナー練習作品

使用ソフト｜Photoshop（作業時間：約160分）
模写と商品入れ替え（左側参考画像／右側作成画像）

▼借用元元画像
◆【午後の紅茶】バナー（参考画像／BANNER LIBRARY）
https://design-library.jp/14961
・日本地図（差し替え素材／写真AC）
https://www.photo-ac.com/main/detail/4067906?title=%E6%97%A5%E6%9C%AC%E3%81%A8%E3%83%8F%E3%83%BC%E3%83%88%E3%81%A8%E9%9B%BB%E5%8D%93

▼借用元元画像
◆【名古屋のそば特集】バナー（参考画像／BANNER LIBRARY）
https://design-library.jp/15045
・うどん（差し替え素材／写真AC）
https://www.photo-ac.com/main/detail/3499116?title=%E3%81%96%E3%82%8B%E3%81%86%E3%81%A9%E3%82%93

https://www.photo-ac.com/main/detail/3499113?title=ざるうどん

https://www.photo-ac.com/main/detail/25318632?title=%E3%81%8D%E3%81%A4%E3%81%AD%E3%81%86%E3%81%A9%E3%82%93

2023年1月23日 コメントする

1月23日（月）－ECサイト運用基礎②バナー/レイヤー効果

参考サイト

・Photoshopのレイヤースタイルの使い方【全種類一覧解説】 | 321web
・【Photoshop】描画モードの基本と効果的な使い方 | デザナビ
・Photoshop で塗りつぶしツールを利用して色を変更する方法 | IT/Web 総合情報サイト – Webolve

レイヤー効果

・レイヤー右クリック→レイヤー効果→ドロップシャドウ（影）や境界線（切り抜いた写真や文字にふちどり）など付けられる
（または、【fx】からもOK）

・レイヤー一枚一枚は面倒なので、レイヤーグループにして一括で効果をつけると楽

・Photoshopのオブジェクト（シェイプ？）は後から色を変更するのが大変なので、【カラーオーバーレイ】または【グラデーションオーバーレイ】を使うと楽とのこと
→プロパティから色変更できるっぽい

例）ドロップシャドウ

レイヤー効果【応用】外枠の作り方

新規レイヤー作成→バケツで何色でもいいので塗りつぶし→レイヤー効果→【境界線】→内側・塗りをなしで線のみにすればOK

バナー【メモ】

・1時間1個での作成が目標
・文字のみのバナー練習がある程度済んだら画像付きバナー模写の練習
・白黒で配置してから色をつけるとイメージしやすいとのこと
・Photoshopで文字の一部を消す場合、レイヤーマスクで黒で塗りつぶせばOK
・Photoshopで文字幅を【B】以上に太くする場合、レイヤー効果【境界線（外側）】で太くできる
・Photoshopで文字をふちどる場合、レイヤー効果【境界線】で外側or内側設定、+文字色を変更すればOK

文字のみバナーの模写練習作品

使用ソフト｜Photoshop（作業時間：約150分）
3つ目の画像はボーダーの背景がうまくできなかったため、パターンで修正しました。
参考サイト：【かんたん】Photoshopで斜めのストライプを作る方法 | ゆずゆろぐ。

▼借用元元画像（BANNER LIBRARY）
1枚目：https://design-library.jp/10108
2枚目：https://design-library.jp/12771
3枚目：https://design-library.jp/13069
4枚目：https://design-library.jp/11946

パターン【応用】

ストライプのパターンを文字で試してみました。（Photoshop）
黄色の文字色→・パターンオーバーレイ（ピンクのストライプパターン）
　　　　　　　・境界線（赤色で外側2px）
　　　　　　　・ドロップシャドウ（暗い赤色）

2023年1月20日 コメントする

1月20日（金）－ECサイト運用基礎①バナー

◆「デザインの考え方」の教科書④参照

◆まずはたくさん真似（模写）してデザインのコツを分析、理解すること
・無意識にコツが蓄積されていく
・トレースは勉強にならないので、横に並べて目視や定規で測ったりしながら模写する
【先生よりおすすめの練習順】
①インスタとかで流れている文字のみのバナーの模写
②画像の入ったバナーの模写（画像は似ているもので代用）
③構成を真似して別のバナーへの変換（例：コーヒー広告のバナーの要素は丸パクりで、緑茶のバナーに転換するなど）

◆授業外でも練習してコツを覚えていく＆ポートフォリオに載せられる作品数を増やすのがおすすめ
※学校のフォントは数に制限があるので、似ているフォントで代用する
・家で好きなフォントを使用して、アウトライン化して持ってくるのもあり

◆なるべくいろいろな種類のテイストのバナーを作成する
（和→洋、お堅め→やわらかめ、かっこいい→かわいいとか）
何種類か違うテイストも作成できるアピールができる
ただ、得意なテイストも多めに作ってアピールする

◆バナーは最新トレンドを使った方がいい（ずっと使われるものではなく一過性の消耗品なので）

◆最初のうちは色数を抑えた方が色の組み立てをしやすい
メインカラー、補色、アクセントカラー+白地など背景色の4色など

◆バナーはweb用なのでRGBで作る

◆修正しやすいデータ作りを心がける（リテイクありき）
リテイクにも時間をかけないようにする

◆バナーはサイズが決まっていない（案件ごとにサイズが異なる）

◆バナーの作業は1時間を目標にする
・目が慣れて沼にはまってよくないので時間をかけすぎない
・実際見る人は1～3秒ほどしか見ない
・1時間以上は予算と生産性が合わないと実際のweb業界でも言われる（理想は30分～1時間）
・バナーの単価は2～3,000円などで安い（初心者だと更に1,000～1,500円など低くなる）ので、早くさばけないと割に合わない
・Photoshopの画像処理とかまだ慣れずに時間がかかるのは大丈夫（1時間に含めない）
・慣れて作業がサクサクできる状態での1時間が目安

◆先生よりおすすめ参考サイト
・バナーライブラリー（模写した場合そのページもメモしておく）
・ピンタレスト
・Instagram