Webデザイン実践3：実際に使えるバナーを作ってみよう！（所要時間30分）

目標

今回作成するバナーは以下です。

コンセプトとしては

• 動画配信アプリ『wit wit』（仮想アプリです。）
• クリエイティブを刺激するような「かっこいいデザイン」にしたい
• かっこいいのと同時に「ちょっとした高級感」も欲しい
• パッと目を引くデザインにしたい

フレームを作ったら背景画像を設定

プラグイン「Unsplash」から画像を選択します。

今回はこちらで用意したので、こちらからダウンロードしてください。

次に女性の位置をずらします。

まずは画像をクリック。その後、ドラッグ&ドロップ。

次に深緑色の台形を作成します。

台形は初めから用意されていないので、まずは「長方形」を作成。

ドラッグ&ドロップで長方形を作ることができます。

縦長いっぱいに長方形を作ってください。

次に台形を作成します。

長方形の頂点をドラッグ&ドロップをすることで動かすことができます。

次に台形に色を加えます。

完成はグラデーションですが、グラデーションをかけるのは仕上げの際に行います。

今回は、仮で色を設定しておきます。

右側メニューで色を設定します。今回は「009EA8」にしておきます。

次は下部の文字の背景にある長方形を作成します。

先ほどを同じように、長方形ツールを選択。

たまに図形が後ろに回ってしまうことがあるので、右クリックで「Bring to front」を選択します。

同様に正方形を作り、その上にテキストを配置します。

上のテキストは56px、下のテキストは80pxです。

ロゴを右上に追加してレイアウトは完成です。

ロゴ画像はこちらからダウンロードしてください。

背景を透過させる

文字の背景に設定した正方形を少し透過させます。

透過する方法は透過したい要素を選択し、パーセンテージが設定されている部分を90%に変更します。

これにて完了です。

グラデーションを設定する

グラデーションを設定する際は設定したい図形を選択し、「Linear」に設定します。

初期値は以下のような形になります。

今回グラデーションで使用する色は薄い部分を「009EA8」、濃い部分を「004549」に設定。

文字にもグラデーションを当てていきます。

オレンジの部分は「E28A22」、紫の部分は「8005BA」に設定します。