Webデザイナー3人「Youtubeサムネイル」のデザインプロセスを大公開！【デザイン作成→FB→完成まで】

こんにちは、「はやかわデザ部」です！

私たちは、横浜にあるWeb制作会社で、Webデザイナーとして日々の仕事に取り組んでいます。

はやかわデザ部は、3人のWebデザイナーと1人のWebプロデューサーというチーム構成。

自社サイトのデザイン業務に加え、大企業のLP制作やサイト更新依頼、中小企業や医療機関のWebサイト・LP・バナー制作など、デザインに関する様々な業務に取り組んでいます。

このブログは、私たちの日々のデザイン活動を発信に加え、Webデザイナーを目指している方やWebデザイナーとしてさらにスキルアップしていきたいと考えている方のために、様々なお役立ち情報を発信していきます。

是非定期的にチェック（フォロー）していただけると嬉しいです！

今回のブログでも、デザインの作成からフィードバック、そしてフィードバックを元にブラッシュアップを行い、デザインを完成させるまでの全てのプロセスを公開します。

※第1回「美容バナー」のデザイン作成プロセス記事はこちら

Webデザイナー3人のバナー作成プロセスを大公開！美容バナーのデザインとブラッシュアップ

自分で手を動かしデザインを作成すること、

そして経験のある先輩Webデザイナーからのフィードバック（アドバイス）を受けることは、デザイン力をアップさせる上で重要な役割を持ちます。

自分一人では到達できない様々な「気づき」が得られることはもちろん、他者の意見を聞き、考えに触れることは、Webデザイナーとしての視野を広げる効果も期待できます。

ただ、Webデザイナーを目指し、勉強に取り組んでいる途中の方や、雑用やルーチンワーク中心の駆け出しのWebデザイナー、担当者が自分だけという社内Webデザイナー等、フィードバックをもらうのが難しい環境の方も多いはず。

そんな方は、ぜひこの記事を読んでみてください。きっとWebデザイナーとしてスキルアップする上で役に立ち「気づき」が得られるはずです。

それでは早速本題に入っていきます。

今回の制作テーマは「Youtubeのサムネイルデザイン」。

Webデザインと動画制作は、別の土俵のものと思われがちですが、様々なWebメディア・媒体が動画チャンネルを立ち上げる中、Webデザイナーがその編集や、ビジュアルの作成を任されることはもはや珍しいことではありません。

本記事では、Webページのデザインを本業とする私たちが、Youtubeのサムネイル作成にどのように挑んでいるのか、その全行程をまとめました。

「デザイン力をもっとアップさせたい！」

「他のWebデザイナーのデザイン過程を知りたい！」

「現役Webデザイナーのフィードバックについて知りたい！」

と考えている方は、ぜひ本記事の購入をご検討ください。

1. はやかわデザ部のWebデザイナー紹介

まずはじめに、はやかわデザ部のWebデザイナー３名の自己紹介から。

全員がWebデザイナーとして一定の経験を積んでいますが、その経歴もデザインスタイルも異なります。

（※はやかわデザ部には、未経験からWebデザイナーを目指している方にとって、勇気をもらえる経歴の人間が揃っています。）

ぜひご自身の経歴や経験、デザインスタイルと比較してください！

経歴：

芸大最高峰の大学を目指し、3年ほど勉強しつつ飲食店でアルバイト生活を送る。

芸大の夢は破れたが新しい目標を「webサイトを作る仕事」に定める。当初はWebとプログラミングの違いもよくわからず、民間のプログラミング研修を受講し、javaを習う。始めて3日で「ワイがやりたいのはこれじゃないんや・・・」と気付き、その後独学でデザインを勉強。

紆余曲折を経て、美大を目指した3年間の努力と根性を高く評価してくれたはやかわデザ部にWebデザイナーとして雇ってもらえることに。

デザインの過程で好きな作業：

参考作品集め

最近ハマっていること：

インスタでサレ妻の投稿を読むこと

過去作品：

経歴：

趣味のWebサイト制作経験を活かし、事務職から人材派遣業向けコンサルティング会社のWEBデザイナーに転職するも、その会社は倒産。

その後スマホアプリ制作のベンチャー企業（超絶ブラック！）、アニメ・ゲーム関連グッズ販売の会社のWebデザイナーを経て、はやかわデザ部へ。

Webザイナーとして最も長い経験を持ち、修羅場をくぐってきている猛者。

デザインの過程で好きな作業：

明るさ・コントラストなどの調整

最近ハマっていること：

pinterestで可愛いウサチャンの写真を収集すること

過去作品：

経歴：

高校、大学と工業デザインを専攻。グラフィックデザインに関心を持ち、新卒で現在の会社に入社しWEBデザイナーとして勤務。メキメキと頭角を現し、はやかわデザ部の中心人物に。

そのデザイン力は大企業からも高い評価を獲得。別格の腕を持つ敏腕Webデザイナーとして部を引っ張っている。

デザインの過程で好きな作業：

文字組みを考えているとき。

綺麗な四角形にまとまると、とても幸せな気持ちになります・・・。

最近ハマっていること：

Apple watchの活用方法を調べること。

過去作品：

2. 制作課題＆完成サムネイル

今回Youtubeのサムネイル作成にあたり、設定した課題は以下の通りです。

【Youtubeのサムネイル】
◇動画タイトル：
　動画編集スクール3選！格安＆オンライン受講対応のサービスはどこ？
◇画像サイズ：1280×720px
◇素材について：
　イラストACより指定の画像を取得　※顔出ししていないYoutuberを想定
◇要望：
　「スタイリッシュな雰囲気を残しつつ、目を引くデザインにしてほしい」
◇制作時間：2時間前後

そしてこちらが完成版のサムネイルです！

▽みねたろの完成サムネイル

▽あめぞうの完成サムネイル

▽吉田リーダーの完成サムネイル

Youtubeのサムネイルということで、ビジュアルに配したテキスト（文言）は三者三様。一方で配色やフォントには一定の共通点がありそうです。

課題には記されていない要素に「なぜ共通点が生まれたのか」。

それぞれのデザイナーがどのようなアプローチでこのデザインを導き出したのか、ぜひ答えを探してみてください。

それでは、はやかわデザ部によるYoutubeサムネイルのデザインプロセス、フィードバックの様子を是非ご覧ください。

3-1. みねたろのサムネイル作成プロセス

①意気込み

スタイリッシュなデザインが作れるように頑張ります！

②テーマの設定

課題のテーマから、ペルソナとデザインのテーマを自分なりに設定します。思いつくままに書き出し、最終的に決まったのがこちら。

ペルソナ：動画編集の仕事をこれからしたい人。男性。30代。
テーマ：かっこいい、おしゃれな雰囲気

動画編集の仕事は男性がちょっと多めなようなので、ペルソナは男性に設定。

クライアントからの要望が「スタイリッシュな雰囲気を残しつつ目を引くデザイン」ということだったので、「スタイリッシュ＝かっこいい、おしゃれ」という解釈をし、テーマを設定しました。

ちなみに「スタイリッシュ」は結構幅広い表現なので、実際には、もう少しクライアントと事前に認識のすり合わせを行った方が良いと思います・・・。

この時点でサムネに入れる文言も一緒に決めておきます。

通常は「クリックしたくなる文言（煽りのような）」を入れるのが良いと思いますが、今回はおしゃれな雰囲気を作るので、あまり煽っているような文言は入れず、シンプルにタイトルを入れようと思います。

③ベンチマーク

YouTubeでおしゃれな動画（映像）編集関係のアカウントといえば、「高澤 けーすけ」さん。サムネの雰囲気がインスタみたいにとってもおしゃれです。

こちらの方の雰囲気を真似してみようと思います。

④1案目

顔出ししていないYouTuberなので、PCをモチーフに写真を選びました。

雰囲気が近そうな写真をセレクトし、少し映画風（おしゃれ）に写真を加工します。ハイパス、トーンカーブ、彩度あたりを調整すると男性が好きそうな雰囲気に近づきます。

ベンチマークに近い雰囲気を出したいので、文字は装飾せず、シンプルにのせてみました。

うーんシンプルすぎ？どうかな・・・

もうちょっと強い方がいいかなぁ。YouTubeっぽいサムネの方がいいかも？

⑤2案目

雰囲気はそのまま残しつつ、もう少しYouTubeらしいサムネを作ってみました。

この方向性で行ってみようかなぁ。悩みますね・・・。

⑥完成

「コスパ良し。」の主張がちょっと強かったので、フォントのウェイトを調整しました。あとは細かい調整を行い、こちらで提出してみます。

3-2.みねたろのプレゼン＆フィードバック

みねたろのプレゼン：

はじめは「おしゃれでカッコいい」イメージのサムネイルを作っていました。

ただ、Youtubeで「動画編集スクール」を検索すると、ザ・Youtube！という感じの圧の強いサムネが多くて、一覧で並べたときに「少し弱いかな？」と感じたのです。この問題を解消するため、並べても負けないサムネイルを意識して改めて作り直し、今回提出したものを作っています。

反省点は「文字が多かったこと」と「どっちつかず」になってしまったことです。もっと思い切って、「コスパの良い動画編集スクールはココ！」みたいに、動画のタイトルを入れず、サムネイルらしい文言を選んでも良かったかなと・・・。

メンバーからのフィードバック

あめぞう：

パッと見て「コスパ良し。」が目に入ってくるので、とてもキャッチーで良いなと思いました。さすがYouTubeに精通しているみねたろ！動画の編集画面が真ん中に来ているので、そこも分かりやすくて良いですね。

気になる点は・・・白の枠線があることで「コスパ良し。」が下がってしまい、全体のバランスを考えると、下の青い帯との間が少し詰まって見えるのが残念です。

あと、私も人のことは言えないのですが・・・右下には動画の時間が表示されるので、3選の文字が被ってしまうのではと思います。

【補足】
※Youtubeの検索画面では、PC・スマホともに、サムネイルの右下に動画の時間が表示されます。なのでYoutubeのサムネイルでは、重要なテキストや画像を右下のスミに入れるのは厳禁なのです！＞＜；

吉田リーダー：

気になった点は大体みねたろ本人に言われてしまいましたが・・・（笑）

やっぱり文字が少し多いので、ユーザーは「どこを読むべきか」迷ってしまうのかなと感じました。

キャッチも写真のセレクトもとても良いので、サムネイルには「コスパ良し。」だけを書いて、あとは動画のタイトルを読ませる、という見せ方でも成立しそうですね。

なので、修正版では「読ませたい文字」がどこか、分かる形になると良いなと思います。

======================

フィードバックの後、話は少し脱線・・・。

吉田リーダー：

以前から気になっていたので2人に意見を聞いてみたいのですが、

こういう短い縦書き文字、「左→右」に違和感を感じますか？

流れとしては正しいけど、日本語としては「右→左」ですよね。

みねたろ：

全然気にして無かったです・・・確かに。

あめぞう：

前の職場で話題に上がったことがありますが、若者たちは左から始まっても違和感なく読めるそうです。「だって視線は左からだから」とのこと。

逆に私より上の世代（アラフォー以上）は「右→左」じゃないと！と意見が分かれました。

吉田リーダー：

Webの世界の進化を感じますね・・・。

今のあめぞうの話を聞く限り、どちらでも「絶対にダメ」ということはなさそうなので、最終的にみねたろが何を選ぶのか、完成版が楽しみです。

3-3. 修正・完成版（Designed by みねたろ）

画像と文字の配置や「ユーザーにどこを読ませたいか」という点を意識して修正をしています。

右下に動画の時間がくることを想定して、文字は左に寄せることにしました。

縦書きの読ませ方が難しいと感じたので、文言を思い切って変更・・・。

あとは動画編集らしく、エフェクトっぽい効果を入れました。

これで完成です！

――― Attention! ―――

以下では、あめぞう・吉田リーダーのデザイン作成プロセス＆フィードバックを紹介しています。デザイナーごとに異なるデザインへのアプローチ方法をぜひチェックして頂ければ嬉しいです！

また、はやデザではココナラでもデザインのフィードバックサービスを行っております。

こちらではバナー・アイキャッチ画像・Webサイト・LPの添削を承ります。

現在、期間限定価格となっておりますので是非チェックしてみてください。