通販サイトのバナーを作ろう(後半)バナー制作テクニック通販サイトのバナーを作ろう(後半)このレッスンでは、Photoshopを使ってお題に沿ったバナーを制作していきます。後半では本格的にバナーのデザインを行っていきます。ブックマークバナーWebデザイン公開日:2019/08/03最終更新日:2019/08/03目次1.文字と写真をバナー詰め込もう2.白黒にして配置を考えよう3.文字組みをして整えよう4.キャッチコピー以外の文字を整えよう5.色をつけてみよう6.完成7.まとめ1.文字と写真をバナー詰め込もう前半で考えたテキストと写真をひとまずバナーに詰め込みましょう。今はレイアウトは考えなくても良いです。2.白黒にして配置を考えよう最初からフルカラーで考えるのは難しいことと明暗がはっきりしているかを確認するためにも、まずは白黒にして配置を考えてみましょう。白黒にするにはメニューからレイヤー>新規調整レイヤー>白黒を選択します。すると白黒レイヤーの下にあるレイヤー全てがモノクロで表示されたようになります。流れを考えるレイアウトを考えるにあたって、流れを考えてみましょう。バナーを見た人と会話をするように考えてみてください。1キャッチコピー2ビジュアル(写真)3お試しキャンペーン実施中!!4申し込みはこちらこの流れに沿うように配置していきましょう。このように流れを考えることは、見た人の心理の流れにも繋がってきますので、しっかり考えてみましょう。配置するでは、先程の流れをもとに配置していきましょう。このように流れを意識して配置することでバナーを見た人の視線を意図したとおりに動かし迷わせないようにします。3.文字組みをして整えようよりキャッチコピーをより目立たせ、キレイに整える作業をしていきましょう。キャッチコピーに合うフォントを選ぼうフォントはイメージを伝えるための一つの手段となります。今回は「安心・安全」というキーワードがありますので落ち着きのある明朝体を選択してみましょう。Pr6N」でフォントスタイル「B」と太めのフォントにしてみました。名詞を目立たせ整えよう前半で出したキーワードを目立たせてみましょう。名詞以外の文字サイズを小さくします。するとキーワードが目立つようになったかと思います。1行目と2行目の左右の端が縦まっすぐになるよう整えてあげることでキレイにまとまって見えるようになります。整える際は文字パネルにある「選択した文字のトラッキング」や「文字間のカーニング」を使用すると良いでしょう。キャッチコピーを読みやすくしようキャッチコピーが写真に埋もれている状態ですので、キャッチコピーにレイヤースタイルをつけて読みやすくします。不透明度:100%色:黒スプレッド:16%サイズ:6pxに設定しましょう。詳細は以下の画像を見て設定してみてください。すると、文字が浮き出て見えるようになります。4.キャッチコピー以外の文字を整えよう現状、写真の上に文字が乗っかっていて、また白い文字であることから文字の情報にメリハリがありません。いう時は文字の色を反転したり、また写真と被らないように下地をつけてみましょう。下部にある文字を括るように長方形ツールで白い長方形を描きます。レイヤーはテキストレイヤーの下に配置します。「お試しキャンペーン実施中!!」の文字を暗くしましょう。申し込みを促したいので強調すべく、角丸長方形ツールで「申し込みはこちら」を括るように角丸長方形を描きます。色は暗い色にしてください。このレイヤーは先程作成した長方形レイヤーの上に配置しましょう。読みやすくなりキャッチコピーとの差別化もできました。これでレイアウトができました。5.色をつけてみようレイアウトができたので、色をつけてみましょう。白黒レイヤーを非表示にして作業しましょう。色は写真の中で使われている色を選ぶとまとまった印象を与えます。今回は赤と緑を使用してみます。6.完成これで完成です!7.まとめ配置のテクニックや配色等、バナーを作る上でのテクニックは様々ありますが、まずはバナーを見る人の思考の流れを意識して文字や使用する画像を配置することが大切です。このような基礎をまずは固めつつ、様々なテクニックを身につけていきましょう。