月: 2023年1月

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

1月27日（金）－ECサイトデザイン基礎②サムネイル

Photoshopでアートボードを並べる方法（見本を横に置く場合など）

①ファイル新規作成
例）楽天サムネイルなら275×275pxなので、アートボードは500×500pxとかで作成

②見本ファイルを配置or貼り付け、レイヤーに透過部分ある場合は塗りつぶしレイヤーなどとレイヤー統合して右クリック→【レイヤーからのアートボード】

③上部に「アートボード1」と出るのでクリック→アートボードの周りに＋マークが出るので、追加したい位置の＋をクリックでアートボードが追加される

Photoshopメモ

・トーンカーブは基本S字のグラフにすると綺麗に見えやすい、慣れない内はトーンカーブよりレベル補正が簡単

・レベル補正（トーンカーブ）などの色調補正はレイヤー全体にかかる？ので、大体の場合は画像をもらった最初の時点でやっておいてから、それを使って作業していく方がいいとのこと
※当たり前だけど、プロの写真家の写真などは加工しないこと（常識的に）

ポートフォリオメモ

・バナーやサムネイルの模写などは「模写しました」と添えて、比較画像や借用元記載で載せてOK
・「このデザインのあしらいの意味は～です」のような感じで工夫した点を添えるといいとのこと（田中先生より）

楽天サイズサムネイル練習作品

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

工夫点：ワンピースのカラーバリエーションの調整を色相で調整し、ワンピース・モデルにドロップシャドウで影をつけて存在感を出しました。
「1kg」の文字やロゴマークの金色に輝く感じをグラデーションで調整し、「1kg」は2重に境界線縁取りに加えて後ろに黄色のシェイプを置きました。
また、先生にアドバイスいただき「オホーツク産」を太字に、「ホタテ玉冷大」の文字間隔を調整しました。

▼借用元元画像
◆大人の楽ちんワンピース（参考画像）
https://item.rakuten.co.jp/outletruckruck/wfs01077/

◆お肉（参考画像）
https://item.rakuten.co.jp/f413275-yoshinogari/fbx001/
・ホタテ（差し替え素材）
https://www.photo-ac.com/main/detail/3917766?title=%E5%B8%86%E7%AB%8B%E8%B2%9D%E6%9F%B1%E3%81%AE%E5%88%BA%E8%BA%AB

◆すらっと上品見え　大人のキャミワンピ（参考画像）
https://item.rakuten.co.jp/galstar/120799/
・背景（差し替え素材）
https://www.photo-ac.com/main/detail/23415310
・チェスト（差し替え素材）
https://www.photo-ac.com/main/detail/22881708



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

1月25日（水）－ECサイトデザイン基礎①サムネイル

※デザインの教科書⑤参照
（以下は教科書外のメモ）

・サムネイルはバナーよりも消費され簡単なものが多いので、1個40分くらいの作業時間が理想

・サムネイルは小さく表示されるが、表示の2倍くらいの大きさで作業し、最後にリサイズすると良いとのこと
例：楽天のサムネイルサイズ275×275px、作業時は最低500×500px以上にする

・授業ではBtoC（Business＝企業、Customer＝客）を想定したバナー作り

・ランサーズやココナラなどで副業する場合も安いので、サクサク作業できるようにする

・文字だけのバナーはイラレが便利だが、画像＝フォトショ→文字・レイアウト＝イラレとデータを移していく時間がロスなので、できればフォトショで完結させる方が良いとのこと（サムネイルは簡単なものが多いので）

・バナーは規約あまりない（バナーは競合他社と羅列されず単体や自社ページで表示されるもの。サムネイルはバナーの一種だが検索などで競合他社と羅列されるものなので、極端に目を引くなどの画像は禁止されている。）

・ECサイトの求人は「WEBデザイナー」より「販売業」のカテゴリーで求人掲載されていることも多いとのこと

サムネイル画像の規約

・サムネイルはECモールにより規約があるのでよく読む
・Amazon＞楽天くらいでAmazonの方が規約が厳しい

例）楽天　参考サイト
・楽天のサムネイル作成には注意？ガイドラインの詳細と罰則も紹介 | ピュアフラット
・【保存版】楽天「商品画像登録ガイドライン」対応！実例付き24の対策まとめ | コマースデザイン
先生より、楽天は基本合成NG（色違いや商品展開画像、会社ロゴはOK）、撮ったままの背景か、切り抜き白背景か白基調の背景、枠も囲みはもちろん、L字（2線）もアウトで1線もアウト寄りグレー（まったく同じ商品を並べてライン風にするのも×）とのこと

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

1月24日（火）－Photoshop練習

練習作品

使用ソフト｜Photoshop（作業時間：約30分）
写真のアザラシが三角から飛び出るように画像を作ってみました。

▼借用元元画像
・至福の顔でお昼寝中のアザラシ１ – No: 24991833｜写真素材なら「写真AC」無料（フリー）ダウンロードOK

練習作品

使用ソフト｜Photoshop（作業時間：約30分）
シルエットを使った画像を作ってみました。
・五重塔のシルエット切り抜き、侍の写真レタッチ
・五重塔でクリッピングマスク
・レイヤー効果とブラシで色調補正

▼借用元元画像
・日没と浅草寺の五重塔のシルエットの写真素材 – ぱくたそ
・迫りくる灰色の雲と侍の後ろ姿の写真素材 – ぱくたそ

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月22日 コメントする

1月22日（日）－Photoshop練習

練習作品

使用ソフト｜Photoshop（作業時間：約20分）
写真の一部を文字に置き換えました。

▼借用元元画像（ぱくたそ）

カフェでラテアート写真素材

練習作品

使用ソフト｜Photoshop（作業時間：約5分）
写真の空部分を別の空に置き換えました。
（空の置き換え機能+色味調整）

▼借用元元画像（ぱくたそ）

紅葉の奥に見える仁和寺の金堂写真素材
剣山の山頂から撮影した天の川写真素材

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

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

1月19日（木）－写真合成・補正加工実習②

パペットワープツール（イラレ）

参照：https://helpx.adobe.com/jp/illustrator/using/puppet-warp.html
ピクトグラムの変形のような作業が簡単にできるので、動物や人など関節を動かしてコピペで量産する場合などに便利

ツールバーのピン止めのようなマーク（パペットワープツール）で、オブジェクトをクリック、点を何個か打ち（固定点？）、最後に打った点が可動点になる

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

1月18日（水）－写真合成・補正加工実習①

DM・ハガキ

・新規ファイル作成→A4→裁ち落とし0（A4サイズのものを作るときに裁ち落としつける）、CMYK、300dpiで作成

トリムマークについて

必ず線なしの四角形をもとにトリムマークを作成する
（→線幅込みでトリムマークが作成されてしまうため数ミリ単位でズレる）
①元となる基準の四角作成、トリムマーク作成
②+3mm、-3mmでオフセット作成
③元の四角・+3mm・-3mmの3つの四角を選択し、右クリック→ガイド作成

デザインのコツ

・使う色は少なくし、ガチャガチャしないようにする
背景含め4色くらい（テーマ色・補色・アクセント色・背景色）
（白黒グレーの無彩色は色数に含めない）

Photoshopでの画像データの扱い
（画像解像度、CMYK）

【画像解像度】
画像が小さいときは大きくする必要がある
イメージタブ→画像解像度
→幅・高さを「mm」で必要な大きさを入力、解像度を印刷の場合300（webの場合72で十分）にする
→再サンプルに☑し、【ディティールを保持2.0】でOK

【CMYK】
Photoshopで画像を開くとRGBになっているので、印刷物を作成する場合CMYKに変換が必要になる
【注意】
先に色調補正やゴミ除去など、編集作業を終えて、RGBデータでオリジナルデータを保存後に、必ず別名保存でCMYKカラーデータを作成する
→イラレに印刷物用としてリンク・埋め込みする場合は、CMYK後のデータを使う

◆方法①
イメージタブ→モード→CMYKカラー→アラート出てもOKで大丈夫

◆方法②
編集タブ→プロファイル変換→変換後のカラースペース・プロファイル→【Japan color 2001 coated】がおすすめとのこと
プレビューで他のと比較できる
→OKでCMYK変換される

イラレでのリンク・埋め込み

◆先生より、作業が重くなるので、埋め込み予定でもリンクで作業し、最後に埋め込みがおすすめとのこと

【流れ】
①作業終了後、
・画像リンクのまま
・文字のアウトライン化前
・アピアランスの分割前
で一旦オリジナルデータとして保存

②別名保存し、下記処理をしておく
・画像埋め込みにする場合埋め込み
・文字アウトライン化
・アピアランスの分割
保存名は必ず小文字英数字+ハイフン+アンダースコアのみ（文字化けするとリンクエラーになるため）

メモ

・ゴールド文字の参考サイト：高級感のあるゴールドのロゴデザインの作り方｜【動画解説】初心者OK! イラストレーターの使い方

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

1月17日（火）－DTP基礎

※デザインの教科書③再確認しておく！！！

DM 制作のポイント

・可視性と配色を意識する
写真に文字を乗せる時はとにかく可視性に気を付ける。
配色のバランスや影を付けたり、ぼかしやオーバレイなどの工夫を考え、写真の世界観を壊さないように表現すること。

参考サイト：画像の上に文字を載せる5つのテクニック～Webデザインのためのタイポグラフィ｜成果につながるWebスキルアッププログラム

【アイデア】
・文字の下の写真にオーバーレイをかけ暗く表示し、文字を見やすくする
・写真に白色などの半透明オブジェクトを乗せ、文字を見やすく
・背景をぼかす
・文字の直下部分の背景のみ一部ぼかす（Photoshop：フィルタ→ぼかしギャラリー→虹彩しぼりぼかし）
・文字にドロップシャドウ（影）をつける（影色は写真に含まれる色を使用し、あるかないか分からないくらいさりげなく入れるのが良い）
・文字に外側光彩（発光）をつける
・文字に境界線（ふちどり）のレイヤー効果をつける（色は写真に含まれる色を使用）
・文字にラインマーカーのように帯をつける

CMYKとRGB

RGBカラーは、光の三原色「R（赤）・G（緑）・B（青）」のことを言う。
PCのモニターやデジカメ、スキャナなどは、このRGBカラーで色が表現されており、これらは混ぜれば混ぜるほど色が明るくなり、白色に近づいていくため『加法混色』と言われている。

CMYカラーは、色料の三原色「C（シアン）・M（マゼンタ）・Y（イエロー）」のこと。これらは混ぜれば混ぜるほど色が暗くなり、理論上は黒色に近づいていくため『減法混色』と言われている。実際にはどんどん濁った灰色になっていくが、一般的にイメージする『黒色』にはならない。 プロセスカラー印刷では、黒の部分を引き締めるために、シアン(C)・マゼンタ(M)・イエロー(Y)にブラック(K)のインキを加えた4色（プロセスカラー）でフルカラーを表現している。

ざっくり言うと
・RGB＝web用
・CMYK＝印刷用

【色パレットHSBについて】
・H→色相（hue）カラーホイールの位置として測定され、0～ 360度の範囲で示される。
・S→彩度（saturation）
・B→明度（brightness）