2025/4/29 「ECサイトデザイン基礎②【オンライン】」の記録です。
講師：アキヤ先生
Photoshopでバナー制作を学ぶ
まずは「真似」を通して学びます。
世の中にあるデザインを模写しながら、かわいい／かっこいいなどの特徴を分析していきましょう。
- 最初は時間がかかっても大丈夫。慣れてきたら1時間以内の完成を目指します。
- ポイントは「手間・無駄・無理をしない」こと。
- 実務では「手間」は事前に伝え、「無駄」は禁止、「無理」はできないと伝えます。
Photoshopの操作理解と並行して、たくさんのバナーを作成していきましょう！
レイアウトデザインの基本
「レイアウト」は、何をどこにどう配置するかを決める作業です。
- レイアウトには正解はありません。目的に合う配置を試していきましょう。
- まずは「面積の意識」から始めます。
余白を意識する
- 文字・画像の間にはゆとりあるスペースを取りましょう。
- 本文1～2文字分の余白を取ると見やすく、オシャレな印象に。
- 枠の中もギリギリにしない。ニアミス（枠と文字の接触）を避ける。
グループ化（近接・整列・反復）
- 近接：関連する要素をまとめて配置
- 整列：見えない線を意識して揃える
- 反復：デザイン上の特徴（色・形・アイコンなど）を繰り返す
これにより、構成が直感的に伝わるデザインになります。
アクセントをつける
- コントラスト：重要な要素は目立たせる
- ジャンプ率：見出しと本文の文字サイズに差をつける
- アイキャッチ：写真や図形で瞬間的に注目させる
作品にリズムと強弱を生み出しましょう。
文字デザインの基本
デザインが整ったら、文字の見やすさを意識しましょう。
可読性・視認性・判読性
- 可読性：読みやすさ（ゴシック体は画面向き、明朝体は印刷向き）
- 視認性：パッと見て認識できる（タイトルなどは太字・シンプルに）
- 判読性：誤読・誤解を防ぐ（伝えたい意味を正確に伝える）
配色の基本
PhotoshopやIllustratorでは、色の違いを厳密に扱う必要があります。
CMYKとRGBの違い
- CMYK：印刷用。重ねると暗くなる（減法混色）
- RGB：Web用。重ねると明るくなる（加法混色）
RGBは色域が広く、印刷時に色がくすむことがあるので注意しましょう。
色の3属性
- 色相（Hue）：赤・青・緑など色味
- 彩度（Saturation）：鮮やかさ
- 明度（Brightness）：明るさ
これらを組み合わせて色は決まります。
トーン（色調）
明度と彩度の近い色をまとめたものをトーンと呼びます。
トーンで配色を考えると、まとまりが出て表現したいイメージが伝わりやすくなります。
グラデーションと陰影・柄
- 陰影：光や影による立体感（例：りんごの影）
- 柄：模様や色の違い（例：りんごの赤い皮）
安易なグラデーションは避け、陰影と柄をしっかり見極めて使い分けましょう。
