Logo

サムネイル|Webデザインスクール

クレジット
サムネイル|Webデザインスクール-1
シェア

サムネイル|Webデザインスクール

【制作概要】 WebデザインスクールのYouTubeサムネイルオーディションで制作した作品です。 チャンネル内の既存サムネイルや過去の講評を分析し、複数回の審査を通過して、279名の中から最終審査10名に選出されました。 一般的なWebデザインで重視される美しさや余白だけでなく、YouTubeの一覧画面で瞬時に内容が伝わり、思わず動画を見たくなることを最優先に設計しています。 【ターゲット】 Webデザインを学びたい初心者や、未経験から副業・フリーランスを目指して情報収集している方 【制作で重視したこと】 ・感情や具体的なメリットを刺激する言葉をフックにする ・コピーを必要最小限まで絞り、最重要ワードを極端に大きく見せる ・黒・赤・黄・白など、一覧画面でも埋もれにくい高コントラストな配色を使用する ・人物の表情やポーズを大きく見せ、動画に対する感情を視覚的に伝える ・情報の優先順位を明確にし、スマートフォンの縮小表示でも内容が伝わるようにする ・不要な装飾は減らしながら、文字加工や光、影、背景表現によって奥行きをつける ・チャンネルの既存トンマナを踏襲しつつ、動画ごとに新しい切り口を加える 単に派手に装飾するのではなく、「何を伝えたい動画なのか」「誰に届けたいのか」を整理し、クリックにつながるコピー・表情・配色・レイアウトの組み合わせを検討しました。 【担当範囲】 既存サムネイルの分析/課題抽出/コピーの整理・提案/情報設計/レイアウト/人物切り抜き・画像加工/文字装飾/ブラッシュアップ 【使用ソフト】 Adobe Photoshop ✦01|WEBデザイン独学 最初の7日間でやること ゼロイチWEBデザインの既存サムネイルに合わせ、青系の幾何学模様を背景に、黄色・白・黒・赤〜オレンジを使用しました。 コピーの中では「7日間」と「やること」が最も興味を引く要素だと考え、この2つを大きく配置。文字サイズに大胆な差をつけ、縮小表示でも重要なキーワードから認識できるようにしています。 人物はPCを抱えながら視聴者へ呼びかけているように配置し、「一緒に始めよう」という前向きな印象を表現しました。 カレンダーや鉛筆、足跡のあしらいによって、独学を始めてから7日間、一歩ずつ学習を進めるロードマップのイメージを補強しています。 ✦02|Canva初心者OK バナー作成 全工程解説 「全工程解説」という動画最大のメリットが瞬時に伝わるよう、極太ゴシック体と強いジャンプ率を用いて構成しました。 初稿ではネオン・サイバー系の表現を採用しましたが、ブラッシュアップでは、より幅広い初心者に届くよう、店頭POPのようなポップでインパクトのあるデザインへ変更しています。 「バナー作成」「全工程解説」には放射状に広がる立体的な加工を加え、青・紫の背景に黒・白・黄を組み合わせることで、スクロール中でも目に留まりやすい配色にしました。 Canvaの公式ロゴは使用せず、ロゴの改変や公式コンテンツとの誤認を避けながら、グラデーションカラーによってCanvaを想起できる表現にしています。 既存チャンネルでよく使われるレイアウトを踏襲することで統一感を保ちつつ、文字加工によって新鮮さを加えました。 ✦03|WEBデザイナー オワコンかも 元のサムネイルは動画のテーマ自体は伝わる一方で、人物の表情やコピーから危機感が伝わりにくく、視聴者が自分事として捉えるための感情的な引きが弱いと分析しました。 そこで、WEBデザイナーが特に不安や関心を持ちやすい「オワコン」を最大のフックとして配置。危機感のある人物の表情と組み合わせ、「自分の仕事も今後なくなるのでは?」と感じてもらうことを狙いました。 背景は黒をベースに変更し、黄・赤・黒・白の高コントラストな配色で危機感を強調しています。 また、過剰に見える装飾を削り、「オワコン」→「WEBデザイナー」→「助けて社長」の順に内容が伝わるよう、コピーの大きさと配置を整理しました。
クレジット
シェア
だりえ|Design Role Encoreの他の作品
画像
作品を見る
LP|動画編集スクール募集ページFV+特典
画像
作品を見る
LP|クマ取り美容クリニックFV
画像
作品を見る
LP|Webデザイナー働き方セミナー集客
foriio

あなたのforiioを無料で作成

fori.io/
サムネイル|Webデザインスクール-1

サムネイル|Webデザインスクール

【制作概要】 WebデザインスクールのYouTubeサムネイルオーディションで制作した作品です。 チャンネル内の既存サムネイルや過去の講評を分析し、複数回の審査を通過して、279名の中から最終審査10名に選出されました。 一般的なWebデザインで重視される美しさや余白だけでなく、YouTubeの一覧画面で瞬時に内容が伝わり、思わず動画を見たくなることを最優先に設計しています。 【ターゲット】 Webデザインを学びたい初心者や、未経験から副業・フリーランスを目指して情報収集している方 【制作で重視したこと】 ・感情や具体的なメリットを刺激する言葉をフックにする ・コピーを必要最小限まで絞り、最重要ワードを極端に大きく見せる ・黒・赤・黄・白など、一覧画面でも埋もれにくい高コントラストな配色を使用する ・人物の表情やポーズを大きく見せ、動画に対する感情を視覚的に伝える ・情報の優先順位を明確にし、スマートフォンの縮小表示でも内容が伝わるようにする ・不要な装飾は減らしながら、文字加工や光、影、背景表現によって奥行きをつける ・チャンネルの既存トンマナを踏襲しつつ、動画ごとに新しい切り口を加える 単に派手に装飾するのではなく、「何を伝えたい動画なのか」「誰に届けたいのか」を整理し、クリックにつながるコピー・表情・配色・レイアウトの組み合わせを検討しました。 【担当範囲】 既存サムネイルの分析/課題抽出/コピーの整理・提案/情報設計/レイアウト/人物切り抜き・画像加工/文字装飾/ブラッシュアップ 【使用ソフト】 Adobe Photoshop ✦01|WEBデザイン独学 最初の7日間でやること ゼロイチWEBデザインの既存サムネイルに合わせ、青系の幾何学模様を背景に、黄色・白・黒・赤〜オレンジを使用しました。 コピーの中では「7日間」と「やること」が最も興味を引く要素だと考え、この2つを大きく配置。文字サイズに大胆な差をつけ、縮小表示でも重要なキーワードから認識できるようにしています。 人物はPCを抱えながら視聴者へ呼びかけているように配置し、「一緒に始めよう」という前向きな印象を表現しました。 カレンダーや鉛筆、足跡のあしらいによって、独学を始めてから7日間、一歩ずつ学習を進めるロードマップのイメージを補強しています。 ✦02|Canva初心者OK バナー作成 全工程解説 「全工程解説」という動画最大のメリットが瞬時に伝わるよう、極太ゴシック体と強いジャンプ率を用いて構成しました。 初稿ではネオン・サイバー系の表現を採用しましたが、ブラッシュアップでは、より幅広い初心者に届くよう、店頭POPのようなポップでインパクトのあるデザインへ変更しています。 「バナー作成」「全工程解説」には放射状に広がる立体的な加工を加え、青・紫の背景に黒・白・黄を組み合わせることで、スクロール中でも目に留まりやすい配色にしました。 Canvaの公式ロゴは使用せず、ロゴの改変や公式コンテンツとの誤認を避けながら、グラデーションカラーによってCanvaを想起できる表現にしています。 既存チャンネルでよく使われるレイアウトを踏襲することで統一感を保ちつつ、文字加工によって新鮮さを加えました。 ✦03|WEBデザイナー オワコンかも 元のサムネイルは動画のテーマ自体は伝わる一方で、人物の表情やコピーから危機感が伝わりにくく、視聴者が自分事として捉えるための感情的な引きが弱いと分析しました。 そこで、WEBデザイナーが特に不安や関心を持ちやすい「オワコン」を最大のフックとして配置。危機感のある人物の表情と組み合わせ、「自分の仕事も今後なくなるのでは?」と感じてもらうことを狙いました。 背景は黒をベースに変更し、黄・赤・黒・白の高コントラストな配色で危機感を強調しています。 また、過剰に見える装飾を削り、「オワコン」→「WEBデザイナー」→「助けて社長」の順に内容が伝わるよう、コピーの大きさと配置を整理しました。
クレジット
シェア
だりえ|Design Role Encoreの他の作品
画像
作品を見る
LP|動画編集スクール募集ページFV+特典
画像
作品を見る
LP|クマ取り美容クリニックFV
画像
作品を見る
LP|Webデザイナー働き方セミナー集客
foriio

あなたのforiioを無料で作成

fori.io/