転職サイトのバナーを作ろう(後半)バナー制作テクニック転職サイトのバナーを作ろう(後半)このレッスンでは、Photoshopを使ってお題に沿ったバナーを制作していきます。後半では本格的にバナーのデザインを行っていきます。公開日:2019/08/06最終更新日:2019/08/06目次1.写真を選ぼう2.文字と写真をバナーに詰め込もう3.白黒にして配置を考えよう4.キャッチコピーを目立たせよう5.キャッチコピー以外の文字を整えよう6.色をつけてみよう7.完成8.まとめ1.写真を選ぼうまずはバナーに適した写真を選んでいきましょう。今回はターゲットが「男性」「エンジニア職」なので、パソコンを操作する男性の写真を選んでみます。パソコンの操作をするということは、自身のスキルを活かしている場面であり、これは前半の「3.ターゲットを意識しよう」で挙げた「もっと自分のスキルを活かし高めたい」というところにも繋がってきます。今回は以下の写真を使用することにします。ダウンロードはこちら※写真AC様の会員登録が必要となります2.文字と写真をバナーに詰め込もう前半で考えたキャッチコピーと行動を促す内容の文章、そして写真をバナーに詰め込みましょう。この段階でレイアウトは考えなくても良いです。3.白黒にして配置を考えよう最初からフルカラーで考えるのは難しいことと明暗がはっきりしているかを確認するためにも、まずは白黒にして配置を考えてみましょう。白黒にするにはメニューからレイヤー>新規調整レイヤー>白黒を選択します。すると白黒レイヤーの下にあるレイヤー全てがモノクロで表示されたようになります。流れを考えるレイアウトを考えるにあたって、流れを考えてみましょう。バナーを見た人と会話をするように考えてみてください。1ビジュアル(写真)2キャッチコピー(あなたのスキル活かせる場所が沢山あります)3行動を促す内容(エンジニアのキャリア相談はお気軽にこちらから)先にビジュアルを見せることでなりたい自分像を想起してもらい、その後具体的な内容に触れる流れにしてみます。この流れに沿うようにテキストを配置していきましょう。このように流れを考えることは、バナーを見た人の心理の流れに繋がります。配置するでは、先程の流れをもとに配置していきましょう。このように流れを意識して配置することでバナーを見た人の視線を意図したとおりに動かし迷わせないようにします。人は左から右へと視線が移動する習性があります。今回のような「Z」の文字を描くような視線移動は「Zの法則」と呼ばれ、バナーに限らずWebデザイン、紙媒体のデザイン等でも活用できるので覚えておきましょう。4.キャッチコピーを目立たせようキャッチコピーをより目立たせていきましょう。キャッチコピーに合うフォントを選ぼう今回は転職という人生の中でも大きなイベントを扱うので、安定感のあるフォントを選んでみたいと思います。Pr6N」のフォントスタイル「B」を使用します。キャッチコピーを読みやすくしようキャッチコピーが写真に埋もれている状態なので、キャッチコピーにレイヤースタイルをつけて読みやすくします。不透明度:100%色:黒スプレッド:17%サイズ:9pxに設定しましょう。詳細は以下の画像を見て設定してみてください。すると、文字が浮き出て見えるようになります。5.キャッチコピー以外の文字を整えようキャッチコピーは見やすくなりましたが、行動を促す文章が写真に埋もれているので、一部写真を白色で隠し、読みやすく、またキャッチコピーとの差別化を行います。写真下部から上に向かって消えていく白いグラデーションを配置します。グラデーションはグラデーションツールで描くことができます。その上に角丸長方形ツールを使って暗い色の角丸長方形を描きます。その上に行動を促す文章を置き、中に収まるようフォントサイズを小さくします。装飾を加えてみよう少し装飾を加えてみたいと思います。現状、行動を促す文章の右横が空いているので、「▶」の矢印を加えて行動を促す感じを出してみましょう。このような空間を埋める装飾は、キャッチコピー等の重要な情報が見えにくくならない程度につけましょう。全体に1pxの枠をつけてみましょう。これは、実際にバナーが掲載された際にそのサイトの背景と同化しないためです。白黒レイヤーの下に新規レイヤーを作成し、control+A(win)またはcommand+A(mac)で全体を選択します。メニューから編集>境界線を描くを選択すると以下のようなウィンドウが出ますので、内側に1pxの黒い線が描けるよう設定します。これでレイアウトができました。6.色をつけてみようレイアウトができたので、色をつけてみましょう。白黒レイヤーを非表示にして作業しましょう。キャッチコピーを画像と馴染ませるため、文字の周りにつけた光彩(外側)の色を背景にある柱の色にしてみましょう。枠も背景の柱の色にしましょう。黒で描いてしまったので色を変えるためレイヤースタイルを使います。レイヤースタイルのカラーオーバーレイの項目にチェックを入れ、カラーピッカーで柱の色にしましょう。行動を促す内容の文章を囲った角丸長方形は、暗めの赤を使用することで、バナーに軽くアクセントを加えましょう。7.完成これで完成です!8.まとめ今回は題材となった転職サイトの強み、ターゲットから文言や流れを考えていきました。これらをしっかり定めることは見た人に響くバナーを作る上で大切です。テクニックとして「Zの法則」を紹介しました。バナーやそれ以外のデザイン制作でも活用してみてください。