サムネイルのデザイン制作過程を赤裸々に語ってみた
Webデザイナーのこばやす(@kobayas_s)です。
この記事では、私が朝までフォトショ2に登壇することになり、自分の登壇サムネイルのデザイン制作をして完成するまでを語りました。
バナー制作の話はよく記事で出てきますが、登壇のサムネイル制作についてはどんな考えで制作しているのかあまり語られることがなく、良い機会になったので記録に残したいなと思いました。
ボツ案まで赤裸々に公開していくので、普段デザイナーがどんな風に考えて制作しているのか知る機会になれば幸いです。
朝までフォトショとは
デザイン界隈では有名なイベントではありますが、まだ知らない方のために概要を紹介します。
このイベントはDTP Transitの鷹野さんが主催で行うオンラインセミナーの一つです。
今回はAdobe Photoshopというアプリにある生成AI機能をテーマにさまざまなクリエイターが出演し、それぞれ考えたことを発表しました。
私は「服装の生成から学ぶAI破綻を軽減するレタッチ方法」という内容で登壇させていただきました。
当日の登壇詳細や感想はこちらのページにまとめています。
このほかにも、参考書には載っていないようなとっておきの技や考えを現場で活動する有識者が発信しています。
LIVE配信は無料で見られるため、気になる方は下記のリンクを登録しておくと見逃さずに情報がキャッチできますよ！
デザインの課題
自分が登壇するサムネイル（カバー画像）は各自で作っています。
作成したサムネイルはイベント告知ページ、YouTubeサムネイル、SNSでの発信、スライドの表紙に使用されるので、これらを想定したデザインを考えることになりました。
また、作成仕様は以下のように指定されました。
制作ルール
サイズ：1920×1080px
必須内容：朝までフォトショのロゴ、登壇タイトル、登壇者の名前、登壇者のアイコン
これ以外は基本的に自由に考えてデザインするような雰囲気でした。
作る上で考えたこと
「自由に作ってよい」ってすっごい、難しいよね…！！！
普段やっているクライアントワークでは細かな指定があったり、自由に作ってと言われつつもだいたい完成までに色んな希望や要望が相手から出てくるので、完全に自分の自由で良いはずがありません。
制約がある中でのデザインは窮屈でありながらも、制限があるから風呂敷を広げすぎずにまとめることができるのだなと感じます。
今回は自分で内容を決めて、自分でサムネイルをデザインする。
クライアントワークでは人の問題に対してデザインの提案をするので客観的に見られるのですが、自分自身の問題を客観的に見るのって、できますか…？
挙句の果てには「いったい、自分はこの登壇で最終的に何を言いたいんだ？？」と自問自答しながら作るので、さらに難易度が高くなります。
このようなことを悶々と考えながらも自分を無理やりクライアントに見立て、次を課題解決をゴールすることにしました。
期待値調整をする
私のセッションは他の方と比べて地味な内容のため、大げさにアピールしてしまうと期待して聞いてくれた方をガッカリさせてしまう。だけど生成AIを使う人なら一度は通る悩みの解決にはなる。
期待を上げ過ぎず、かといって下げ過ぎて出オチさせないために、ちょうど良いラインを目指しました。
オンラインセミナーはある程度時間を作って見に来る人が大半のため「聞いた時間が無駄になった」と思われるのは低評価になる問題の一つです。
なので告知ページに掲載されるサムネイルを見た時点で判断できると、そのユーザーにとって聞くべき内容なのか、そうで無いのかが分かるので、そもそも内容に興味が無いと判断すればその時間を別のことをする時間に充てられるのです。
というわけで今回のサムネイルを作る時は以下の3点に注意することにしました。
❶セッションに出てこない要素（画像やイラストなど目立つもの）は入れない
❷このセッションを〈聞く前〉と〈聞いた後〉でどう変わるかを伝える
❸対象者の〈聞いてみたい〉を刺激する
この課題に対して、デザインの過程を話しながら解説していきたいと思います。
デザイン制作の過程と気にしたポイント
ここからは実際に0からデザインをしていく過程です。
登壇テーマになっているのがPhotoshopのため、今回のデザイン制作は全てこのツールを使って行っています。
❶必要な要素をすべて規定の枠に入れ、優先順位を決める
この工程はバナーを作るときと一緒で、まずは全体的な情報量を把握するためにする作業です。
まずは必要なテキスト、素材を枠内に仮置きします。
そして、ぱっと見た時に知ってほしい順番で要素を大・中・小とざっくり分けます。
①主タイトル、サブタイトル
②ロゴ、登壇者のアイコン
③登壇者の名前、肩書
以上のように大きく分け、複数ある場合はどちらの項目が優先かも決めました。
❷レイアウトを仮決めする
こんな感じにしようかな～というユルめな気持ちで考えます。
色を入れてしまうと迷いやすいので白黒で作るのですが、微妙に濃淡が違うのは以前ポストでつぶやいたので、そちらを参照してください。
バナーデザインをする時、初めから色を入れてしまうと色に引きづられてデザインが迷走してしまう時がある。
— こばやす🍟現場のWebデザイナー (@kobayas_s) May 11, 2024
なのでレイアウトを組むまではモノクロの状態でデザインすると良いんだけど、それでも迷ってしまう。
そんな時は明暗を付けると目立たせたい部分やレイアウトの見当をつけやすくなるよ。 pic.twitter.com/Y3Y96G2Zpb
動画のサムネイルにもなり原寸より小さくなる可能性があること、ほかの動画と並んだときのことを考え、フォントは太めで視認性が高くなるものを意識して選びました。
また、前述の「このセッションを〈聞く前〉と〈聞いた後〉でどう変わるかを伝える」「対象者の〈聞いてみたい〉を刺激する」を意識して、以下を入れようと決めていました。
・生成AIを使って加工する前後の状態
・失敗例、成功例の画像
❸写真素材を決める
登壇では生成AIで作成した画像がいくつかあるのですが、どれを入れようか検討しました。
以下はボツにしたデザインです（若干次の工程まで進めてしまっている部分があります）
なぜボツにしたか
・眼鏡の生成が今回の目玉ではあったけど、「服装の生成から学ぶ」のにこれをサムネイルにするとタイトルとずれてしまう
・モデルの顔が大きく変わってしまうため、ご本人が見つけたら嫌な気分になってしまうかな…と考えたので、サムネイルのように人がよく見るような部分には使うべきではないなと思った
最終的にはこの画像にすることを決めました。
❹デザインを調整する
現状のデザインで気になる点を改善してブラッシュアップしていきます。
メインの色
Photoshopのアイコンカラーである青色（ロゴの色でも使われている）を採用しました。
背景は色を入れてしまうと写真が目立たなくなってしまうのでシンプルな白を採用し、SNSでの投稿やイベント告知ページに入れた時に背景と同化しないよう枠を付けました。
写真のトリミング
モデルの目を入れると服よりも目に視線がいってしまうので、モデルの目を隠すようにトリミングしました。
顔のために確保したスペースも使えるようになったので、写真を拡大して服をもっと全面的に見せられるようにもなりました。
文字や要素が直線的な配置で単調になり、視線の動きが散漫になるため、メインで見て欲しい画像を斜めにトリミングして動きをつけました。
あしらい
矢印が太いと野暮ったくなるので細めのものを選定したうえて、自分のアイコンに合わせイラスト調を採用しました。
〈OK〉と〈NG〉のあしらいは距離が離れるとどこに違いがあるのか瞬時の判断で迷うため、違う部分に視線がいきやすくなるよう、尖がりがある吹き出しを採用しました。
ロゴ
写真と重ねて奥行きを出し単調にならないようにしました。
ロゴに影を付けたらよいと考えるかもしれませんが、影を付けるとロゴが沈んでしまうので使いませんでした。
アイコン
アイコンは当初の段階では背景あり円形のものを使用しようと思いましたが、before要素と配置したい場所の余白とのバランスを考えて無しにしました。
これは些細な部分の調整なのですが、解説しようとしている部分をポテトの指し棒で指そうとしている動きをよりつけたかったので、キャラクターを少し上向きに傾けています。
とても細かい変更ですが、キャラクターを生かしたかったので、こだわったポイントです。
完成デザイン
以上のように試行錯誤して、このデザインができました。
デザインを調整していく段階で特に動きが分かると思いますが、デザインを作る時はこっちとこっち、どちらが最適かな…と検証しながらデザインを作っています。
この記事を読んで面白かったよ、役に立ったよ、という方は❤ボタンを押して応援していただけると次の記事を書く活力になりますので、ぜひよろしくお願いします！
デザイン制作に挑戦してみたいと思ったら
デザイン初学者向けに架空のバナー制作お題を用意しています。
いきなり大きなものをデザインするのは時間がかかるし大変…という方へ、最初の一歩としておすすめの学習課題なので、ぜひ挑戦してみてください。
いいなと思ったら応援しよう！
