【Webデザイン独学課題】バナー制作編!!

今回は、バナーを制作していきましょう!!

バナーは以下のフローで制作することをおすすめします。

要件を確認しよう!

案件概要

  • クリ★スタのWebサイトに掲載するバナー作成

▼バナー情報設計

  1. 優先順位1番:実案件で学習しよう!
  2. 優先順位2番:案件紹介&ディレクション、案件の相談可能、学習の質問可能、転職相談可能
  3. 主体者表記:クリ★スタ オンラインギルド(ロゴ、フォント指定あり)

▼ロゴデータ、画像などはこちらをご使用ください。
https://www.figma.com/file/jdO5DWaYTJ5wWj8KwEOpsQ/%E3%82%AF%E3%83%AA%E2%98%85%E3%82%B9%E3%82%BF_%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3_%E3%83%AC%E3%82%AE%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3?node-id=0%3A1

▼遷移先(現在は募集を停止しています。)
https://crestaguild.com/

▼目的
https://crestaguild.com/へ流入させるため

バナー制作で重要なことを学ぼう

バナー制作では、制作前に理解しておくべき重要な点がありますので最初に理解しておきましょう!

バナーの目的はクリックであることが多い

バナーをなぜ制作するかというと、何からのサイトからランディングページなどに集客するためです。

集客するためには、クリックさせないと意味がありません。

ユーザーの目が止まるように目立たせられるようにデザインしていきましょう!

遷移先のファーストビューを参考にする

バナーの目的はクリックさせることであると先ほど述べました。しかし、もっというとバナーをクリックしてランディングページに遷移してそこでお申し込みや購入にまで繋がって欲しいですよね!

そこで重要になるのが、バナーをクリックしてランディングページに遷移したユーザーに違和感を与えないことです。

違和感を与えないためのポイントは以下になります。

・ファーストビュー とバナーのデザインが似ている。または極端に違わない
・バナーの訴求とファーストビュー の訴求が同じである。
 →バナーだけ盛ってると不満を感じてユーザーが離れる

上記を意識してバナー制作を行いましょう!

ちなみにデザイナーは心理学を用いてより効果的なデザインを制作することもあります!

デザインに活かせる心理学を知らない方は下記の記事も読んでみてください♪

デザイナーが抑えておきたい心理学

参考バナーを5つ探そう!

案件の概要をみてからすぐにデザインを始めると良い案が思いつかなかったり、素人っぽさの強いデザインになってしまいます。

まずは、プロが制作したバナーのをみて参考にするものを集めてみましょう!

集める時は、バナーのサイズ×配色など掛け算をしながら検索をすると効率的に参考バナーにであるので実践してみましょう💪

オススメのバナーギャラリーサイト

バナーデザイン専門ギャラリーサイト | レトロバナー | 「レトロバナー」はバナーデザイン専門のギャラリーサイトです。サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーを一覧でチェックできます。バナーデザインの新たなアイデア・発想の源として要チェック!

「レトロバナー」はバナーデザイン専門のギャラリーサイトです。サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーを一覧でチェックできます。バナーデザインの新たなアイデア・発想の源として要チェック!

Pinterest

Discover recipes, home ideas, style inspiration and other ideas to try.

ラフを作成しよう!

参考バナーを見つけることができたら、ラフを作成していきます。

手書きでも良いですし、figmaやPhotoshop・Illustratorなどデザインツールを使用しても構いません!

参考バナーや参考バナーを探す際に見つけたレイアウトなどを色々ブレストしていきましょう!!

新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ | 東京のWeb制作会社LIG

はじめまして。最近デザイナーとしてLIGに仲間入りしたのっちと申します。 ニット帽と牛乳がものすごーく好きです。 牛乳については会社のウォーターサーバーから水を飲むたびに「中身、牛乳に変えてくんないかな」と半ば本気で思っています。 さて、そんな牛乳一筋25年目の牛乳エキスパートな私ですが、デザイナー歴はまだまだひよっこです。 ...

モノクロで制作しよう!

モノクロでデザインを制作していきましょう!!

いきなり配色などしてしまうと修正する際に修正箇所が増えてしまうためここでは、モノクロでレイアウトを整えていきます!

この際にフォントの種類も選んでいきましょう!!

【デザインの重要事項】タイポグラフィの基礎知識
Webデザイン初学者が注意すべきフォント選び方~デザインのテイスト別に紹介~

実務を想定しながら5~10案ほど丁寧に作ることが大切です!

モノクロを作る際にもLIGさんの記事は役立ちます💪

新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ | 東京のWeb制作会社LIG

はじめまして。最近デザイナーとしてLIGに仲間入りしたのっちと申します。 ニット帽と牛乳がものすごーく好きです。 牛乳については会社のウォーターサーバーから水を飲むたびに「中身、牛乳に変えてくんないかな」と半ば本気で思っています。 さて、そんな牛乳一筋25年目の牛乳エキスパートな私ですが、デザイナー歴はまだまだひよっこです。 ...

配色しよう!

さあ、いよいよ配色ですね♪

配色は、もともと色が決まっている場合が多いですが、どのくらいの割合でそれぞれの色を使用するかが大切となります!

ユーザーにクリックさせられるようにボタンの配色など細部までこだわっていきましょう💪

デザイナーが知っておくべき配色の基礎知識

人に見てもらおう

バナー制作お疲れ様でした♪
制作を終えたら、人に見てもらうまでがデザインの学習です。

いろんな人の意見に触れることでデザインの引き出しを増やせたり、新しいことに気がつくことができます。

早速Twitterで下記の情報を入れて投稿してみましょう💪

【クリ★スタ、バナー作成課題】
・デザインで意識したことや工夫した点は、〜〜〜〜です。

#クリスタチャレンジ
(ラフ案・モノクロ・配色したバナーそれぞれの画像を添付)

運営が速攻でリアクションしにいきます💪

ギルド生が実際に制作した物を見てみよう♪

こちらの課題は、実際にオンラインギルドの方に制作して頂きました!

こちらから提示した色と異なる配色で最初は驚きましたが、Webサイトがオレンジだからそこで目立たせるために配色を意図的に変更したと説明を受け思わず納得しました。。。

バナーはサイトから変に浮かず、それで目立つという難易度の高い制作物ですがとてもクオリティ高く制作して頂きました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA