「デザインの論理的な言語化」を得意とするデザイナー

デザイナーとして、Webデザイン会社の部長を経て独立したYUCOdesignさん。現在は、デザイン講座などの主催会社である株式会社レフロマの代表を務め、デザイナーやディレクター、デザイン講師として幅広い活動を続けています。

SNSではデザインの理論的な解説や考え方を発信し、開始から数カ月で約8万人以上のフォロワーを獲得。デジタルハリウッド大学やサンクチュアリ出版で登壇した際の受講者数は各社の歴代最高数を記録しています。

下の化粧品のバナー広告は、Before画像は必要な要素を体裁よくレイアウトしたデザインですが、このデザインの要素はそのままに、Photoshopを使ってさまざまな演出効果を加えることで、よりクオリティの高い画像に仕上げています。まずはYUCOdesignさんのInstagramの投稿作品をご覧ください。

画像を生成して写真を拡張する

Beforeのデザインでは、タイトルまわりのピンクの帯が、モデルのまぶたのギリギリのところまで被っています。これは、元のモデルの写真がまぶたの少し上のところでトリミングされているためです。なんとなく画面も窮屈な感じになっています。そこでまず、Photoshopの生成AI機能を使ってトリミングされたまぶたから上の部分を生成してみましょう。

※追加するか要検討※

（1）切り抜きツールを選択し、上部のハンドルを上方向にドラッグしてキャンバスを広げる
（2）選択ツールで余白の部分を選択
（3）コンテキストタスクバーの「生成塗りつぶし」をクリックし、テキストは入力なしで「生成」をクリック

しばらくすると、モデルのまぶたから上の部分が自動的に生成されます。もともと隠れていたのではないかと思えるくらい、自然な仕上がりです。

さまざまな演出効果を加えるタイトル周りを調整する

せっかくモデルの画像が拡張されたので、タイトル周りをもう少し自由にデザインしてみましょう。

（1）ピンクの帯はモデルの画像にかからないように、曲線を使用した面に変更。ペンツールで曲線を描き、アンカーポイントの切り替えツールでカーブを調整
（2）テキストの「生チーク」は「生」と「チーク」を分けて打ち、フォントの種類と大きさを変えてメリハリをつける。「生」を強調するために円で囲むのも効果的
（3）商品画像を楕円ツールで選択して複製し、“生”の文字の上に重ねる。描画モードのオーバーレイを適用すれば、“生”の文字に商品の質感がプラスされ、より効果的なアクセントに

さまざまな演出効果を加える

商品の画像にも、ひと工夫。Beforeのデザインのようにドロップシャドウは使わず、より自然な影を作成してみます。

（1）商品画像のレイヤーを複製し、レイヤースタイル／カラーオーバーレイで明度と彩度を落としたカラーを適用
（2）フィルター／ぼかし（移動）で自然な角度にぼかしを入れる
（3）レイヤーを商品画像の下にして、描画モードの乗算を適用し、自然な影になるように位置を移動

全体に光をあてて完成

いよいよ最後の仕上げです。窓から差し込む日差しを表現してみましょう。これをするだけで、全体の印象がガラリと変わります。

（1）光の素材をデザイン全体に重ねる。光の素材は、ストック素材などを利用
（2）光のレイヤーに対して、描画モードのソフトライトを適用
（3）光が自然に当たるように、位置や大きさ、角度などを調整

BeforeとAfterを比較してみましょう。デザインの要素は同じでも、その差は一目瞭然ではないでしょうか。SNSでは、まず見た目の印象が第一。Photoshopを使えば、デザインの自由度もクオリティも大幅にアップします。みなさんもぜひやってみてください。

次回は、soda design・柴田ユウスケさんのAI活用法です。AIで効率化した、撮影カンプづくりを具体例としてご紹介しますのでぜひお楽しみに！

YUCOdesign
https://x.com/yucodesign
https://www.instagram.com/yucodesign_k/

Adobe blog
https://blog.adobe.com/jp/