「転職サイトのLPを作ろう③」導入・ベネフィットの画面を作成しよう

1.構成を確認しよう

「転職サイトのLPを作ろう①」で作成した構成を確認します。

この構成に合わせて導入・ベネフィットの画面を作成していきます。

2.文言や写真を選ぼう

導入の文言やイメージ写真を考えよう

導入はターゲットの悩みをベースに作成しましょう。
今回は以下のような文章で組み立ててみました。

ここで大事なのは、ターゲットが困っていることや欲求を解決できることを示してあげることです。

イメージ写真は以下のものを使用します。コンサルタントのイメージです。

写真のダウンロードはこちら
※写真AC様の会員登録が必要になります

ベネフィットの文言を考えよう

導入にある3つの悩み事をどう解決していくのかを示しましょう。以下のように文章を組み立てました。

ベネフィットのイメージ写真を選ぼう

各悩みに合ったイメージ画像を選んでみましょう。今回は以下のような写真を選びました。

悩み①の写真はこちら
 悩み②の写真はこちら
 悩み③の写真はこちら
※写真AC様の会員登録が必要になります

3.導入のレイアウトを考えよう

まずは導入部のレイアウトを作っていきます。

カンバスサイズを縦に広げよう

今の状態だと、ファーストビューでカンバスが埋まっているので、カンバスサイズを縦に広げます。メニューからイメージ＞カンバスサイズを選択します。設定のウィンドウが表示されるので、縦を2790px、基準位置は上中央を押して選択します。そしてOKを押します。

これでカンバスが下に広がりました。

導入のレイアウトを作ろう

導入部分のレイアウトを考えましょう。まずは必要な文言や写真を入れます。この際、まだレイアウトについては考えなくても良いです。

白黒にして配置を考えよう

ファーストビューを作成した時と同樣に、白黒レイヤーを配置して色のない状態で構成を考えます。

流れを考えよう

流れを考えてから配置していきましょう。流れは以下のようにしてみたいと思います。

①見出し
②内容（悩み3つ）
③イメージ写真
④内容（全て私達に〜）

配置する

では流れに従って配置していきましょう。

このように流れを意識して配置してみましょう。見た人の視線を意図したとおりに動かし迷わせないようにしましょう。

4.導入の文字組みをしよう

見出しと内容の文字組を整えていきましょう。

見出し

ここは大きいサイズで見出し感を出しましょう。フォントは「小塚ゴシック Pr6N」でフォントスタイル「B」を使用しましょう。画面に対して中央揃えにします。

内容（悩み3つ）

こちらのフォントも「小塚ゴシック Pr6N」でフォントスタイル「B」を使用しましょう。

内容（全て私達に〜）

フォントは見出しと同樣にし、見出しよりも大きく見せ、言葉の信頼感をより強く感じさせるものにします。また画面に対して中央に揃えましょう。

これで、以下のような形になるかと思います。

5.導入に加工や装飾を加えよう

イメージ写真を加工しよう

現状、女性が写ったイメージ写真は背景も含まれています。人物だけを切り抜いて使用しましょう。イメージ写真のレイヤーを選択し、クイック選択ツールで人物の領域をなぞるように選択していきましょう。人物を選択できたら、レイヤーパネルの下にあるレイヤーマスクを追加を押します。すると人物が切り抜かれた状態になります。
クイック選択ツールについてはこちらのレッスンで詳しく知ることができます。

写真・画像・デザイン編集『Photoshop』入門　5. 選択範囲の操作
5-5.写真の背景を透明にする

全体を四角で囲おう

女性のイメージ写真の足が切れており不自然に見えるため、全体を四角で囲い不自然さを解消します。テキスト、人物の写真がおさまるよう長方形ツールで長方形を描きます。長方形は画面上部にあるオプションパネルで以下のように設定します。
塗り：なし
線：4pt、黒

見出しを見出しっぽくしよう

見出しの後ろに下地をつけ見出しを強調させます。先程描いた四角と同じ幅で黒い長方形を描きます。その長方形を見出しの下に置きます。見出しの文字色が黒で見えなくなってしまうので、文字色を白にします。

悩みの先頭にチェックボックスの装飾をつけよう

悩みを解消するメタファーとしてチェックのついたチェックボックスを先頭に配置してみます。長方形ツールでshiftを押しながらドラッグして正方形を描きます。オプションパネルで線は4pxの濃いめの灰色、塗りはなしにします。そしてカスタムシェイプツールを選択し、オプションパネルでチェックマークのシェイプを選択します。チェックマークのシェイプがない場合はシェイプ選択パネルの右上にある歯車のマークを押して、「記号」という項目を押し、シェイプの追加をしてください。

チェックマークのシェイプを先程描いた正方形の上に描きます。大きさは少し正方形からはみ出るくらいにします。色は正方形の線と同樣、濃い灰色にします。四角形との重なりがわかるよう、チェックマークに3pxの白い境界線をつけましょう。
正方形とチェックマークを複製して、各悩みの先頭に配置します。すると以下のようになるかと思います。

背景にグラデーションを入れよう

画面が全体的に白いので、下から上にだんだん消えていく灰色のグラデーションをかけます。全体を囲っている長方形レイヤーの下に新規レイヤーを作成します。長方形の下が薄い灰色で上に向かってだんだん透明になっていくグラデーションをかけます。今の状態だと、全体にグラデーションがかかっているので、長方形の中だけグラデーションを残します。グラデーションレイヤーを選択した状態で、囲っている長方形のサムネイルをcontrol(win)、またはcommand(mac)を押しながらクリックします。すると長方形の選択範囲が作成されるので、レイヤーパネルの下にある「レイヤーマスクを追加」を押します。すると囲っている長方形の内側にだけグラデーションがかかった状態になります。

内容の文章を強調させよう

背景にグラデーションをかけたことや、人物の写真と重なっていることから、「全て私達におまかせください!」の文章が目立たなくなってしまったので、少し加工します。文字色を白にし、レイヤースタイルで周りに濃いめの灰色で境界線をつけます。

これで導入は以下のような感じになるかと思います。

6.導入の配色しよう

白黒レイヤーを非表示にして、色をつけていきましょう。

見出しの後ろの長方形と全体を囲っている長方形の線

ファーストビューのアクションを促す文言の文字色と同樣、暗めの青にします。

チェックボックス

ボックス自体は暗めの青を使用し、チェックマークは少し暗い赤を使用してみましょう。

内容（悩み3つ）

文字色は暗い青を使います。

背景のグラデーション

レイヤースタイルのカラーオーバーレイで少し暗い青を指定するとその色のグラデーションになります。

内容（全て私達に〜）

境界線の色を少し暗い赤にしてみましょう。

これで導入の部分ができました。次はベネフィットの部分を作成します。