「転職サイトのLPを作ろう3」導入・ベネフィットの画面を作成しようランディングページ制作テクニック「転職サイトのLPを作ろう3」導入・ベネフィットの画面を作成しようこのレッスンではお題に沿ってPhotoshopを使ってランディングページを作成していきます。前回のレッスンではファーストビューの画面を作成しました。今回はファーストビューの下に続く導入・ベネフィットの画面を作成します。ブックマークLPデザインの考え方Webデザイン公開日:2019/10/15最終更新日:2019/10/15目次1.構成を確認しよう2.文言や写真を選ぼう3.導入のレイアウトを考えよう4.導入の文字組みをしよう5.導入に加工や装飾を加えよう6.導入の配色しよう7.ベネフィットのレイアウトを考えよう8.ベネフィットの文字組みをしよう9.ベネフィットの装飾をしよう10.ベネフィットの配色をしよう11.アクションボタンをつけよう12.全体を見てみよう1.構成を確認しよう「転職サイトのLPを作ろう1」で作成した構成を確認します。この構成に合わせて導入・ベネフィットの画面を作成していきます。2.文言や写真を選ぼう導入の文言やイメージ写真を考えよう導入はターゲットの悩みをベースに作成しましょう。今回は以下のような文章で組み立ててみました。ここで大事なのは、ターゲットが困っていることや欲求を解決できることを示してあげることです。イメージ写真は以下のものを使用します。コンサルタントのイメージです。写真のダウンロードはこちら※写真AC様の会員登録が必要になりますベネフィットの文言を考えよう導入にある3つの悩み事をどう解決していくのかを示しましょう。以下のように文章を組み立てました。ベネフィットのイメージ写真を選ぼう各悩みに合ったイメージ画像を選んでみましょう。今回は以下のような写真を選びました。悩み1の写真はこちら悩み2の写真はこちら悩み3の写真はこちら※写真AC様の会員登録が必要になります3.導入のレイアウトを考えようまずは導入部のレイアウトを作っていきます。カンバスサイズを縦に広げよう今の状態だと、ファーストビューでカンバスが埋まっているので、カンバスサイズを縦に広げます。メニューからイメージ>カンバスサイズを選択します。設定のウィンドウが表示されるので、縦を2790px、基準位置は上中央を押して選択します。これでカンバスが下に広がりました。導入のレイアウトを作ろう導入部分のレイアウトを考えましょう。必要な文言や写真を入れます。この際、まだレイアウトについては考えなくても良いです。白黒にして配置を考えようファーストビューを作成した時と同樣に、白黒レイヤーを配置して色のない状態で構成を考えます。流れを考えよう流れを考えてから配置していきましょう。流れは以下のようにしてみたいと思います。1見出し2内容(悩み3つ)3イメージ写真4内容(全て私達に〜)配置するでは流れに従って配置していきましょう。このように流れを意識して配置してみましょう。見た人の視線を意図したとおりに動かし迷わせないようにしましょう。4.導入の文字組みをしよう見出しと内容の文字組を整えていきましょう。見出しここは大きいサイズで見出し感を出しましょう。Pr6N」でフォントスタイル「B」を使用しましょう。画面に対して中央揃えにします。Pr6N」でフォントスタイル「B」を使用しましょう。内容(全て私達に〜)フォントは見出しと同樣にし、見出しよりも大きく見せ、言葉の信頼感をより強く感じさせるものにします。画面に対して中央に揃えましょう。これで、以下のような形になるかと思います。5.導入に加工や装飾を加えようイメージ写真を加工しよう現状、女性が写ったイメージ写真は背景も含まれています。人物だけを切り抜いて使用しましょう。イメージ写真のレイヤーを選択し、クイック選択ツールで人物の領域をなぞるように選択していきましょう。人物を選択できたら、レイヤーパネルの下にあるレイヤーマスクを追加を押します。すると人物が切り抜かれた状態になります。クイック選択ツールについてはこちらのレッスンで詳しく知ることができます。選択範囲の操作5-5.写真の背景を透明にする全体を四角で囲おう女性のイメージ写真の足が切れており不自然に見えるため、全体を四角で囲い不自然さを解消します。テキスト、人物の写真がおさまるよう長方形ツールで長方形を描きます。長方形は画面上部にあるオプションパネルで以下のように設定します。見出しを見出しっぽくしよう見出しの後ろに下地をつけ見出しを強調させます。先程描いた四角と同じ幅で黒い長方形を描きます。その長方形を見出しの下に置きます。見出しの文字色が黒で見えなくなってしまうので、文字色を白にします。悩みの先頭にチェックボックスの装飾をつけよう悩みを解消するメタファーとしてチェックのついたチェックボックスを先頭に配置してみます。長方形ツールでshiftを押しながらドラッグして正方形を描きます。オプションパネルで線は4pxの濃いめの灰色、塗りはなしにします。カスタムシェイプツールを選択し、オプションパネルでチェックマークのシェイプを選択します。チェックマークのシェイプがない場合はシェイプ選択パネルの右上にある歯車のマークを押して、「記号」という項目を押し、シェイプの追加をしてください。チェックマークのシェイプを先程描いた正方形の上に描きます。大きさは少し正方形からはみ出るくらいにします。色は正方形の線と同樣、濃い灰色にします。四角形との重なりがわかるよう、チェックマークに3pxの白い境界線をつけましょう。正方形とチェックマークを複製して、各悩みの先頭に配置します。すると以下のようになるかと思います。背景にグラデーションを入れよう画面が全体的に白いので、下から上にだんだん消えていく灰色のグラデーションをかけます。全体を囲っている長方形レイヤーの下に新規レイヤーを作成します。長方形の下が薄い灰色で上に向かってだんだん透明になっていくグラデーションをかけます。今の状態だと、全体にグラデーションがかかっているので、長方形の中だけグラデーションを残します。グラデーションレイヤーを選択した状態で、囲っている長方形のサムネイルをcontrol(win)、またはcommand(mac)を押しながらクリックします。すると長方形の選択範囲が作成されるので、レイヤーパネルの下にある「レイヤーマスクを追加」を押します。すると囲っている長方形の内側にだけグラデーションがかかった状態になります。内容の文章を強調させよう背景にグラデーションをかけたことや、人物の写真と重なっていることから、「全て私達におまかせください!」の文章が目立たなくなってしまったので、少し加工します。文字色を白にし、レイヤースタイルで周りに濃いめの灰色で境界線をつけます。これで導入は以下のような感じになるかと思います。6.導入の配色しよう白黒レイヤーを非表示にして、色をつけていきましょう。見出しの後ろの長方形と全体を囲っている長方形の線ファーストビューのアクションを促す文言の文字色と同樣、暗めの青にします。チェックボックスボックス自体は暗めの青を使用し、チェックマークは少し暗い赤を使用してみましょう。内容(悩み3つ)文字色は暗い青を使います。背景のグラデーションレイヤースタイルのカラーオーバーレイで少し暗い青を指定するとその色のグラデーションになります。内容(全て私達に〜)境界線の色を少し暗い赤にしてみましょう。これで導入の部分ができました。次はベネフィットの部分を作成します。7.ベネフィットのレイアウトを考えよう次はベネフィットのレイアウトを作っていきましょう。必要な文言や写真を入れますが、まずは悩み1の部分だけ作ります。この際、まだレイアウトについては考えなくても良いです。白黒にして配置を考えよう白黒レイヤーを配置して色のない状態で構成を考えていきます。流れを考えよう流れを考えてから配置していきます。流れは以下のようにしてみたいと思います。配置するでは流れに沿って配置していきましょう。流れに沿って配置することは見た人の心理の流れにも繋がります。Pr6N」でフォントスタイルは「B」を選択しましょう。Pr6N」でフォントスタイルは「M」にします。悩みの先頭と悩みの解決方法の左端は揃えましょう。これで以下のようになるかと思います。9.ベネフィットの装飾をしよう囲おう全体を1つのかたまりだと認識させるために長方形で囲います。長方形ツールを使ったテキスト・写真を覆うように白い長方形を描きます。長方形のレイヤーを、テキスト・写真の下に移動させます。レイヤースタイルで2pxの黒い境界線を描きます。アクセントをつけよう全体的に白いので背景に少しアクセントを加えます。以下のような囲った長方形よりも大きい台形をペンツールで描きます。オプションパネルにあるシェイプボタンを押してパスをシェイプ化します。そのシェイプレイヤーを先程描いた全体を囲っている長方形のレイヤーの上に配置します。シェイプレイヤーを選択した状態でcontrol+alt+G(win)、command+option+G(mac)を押し、クリッピングマスク化します。イメージ写真を加工しよう写真の境界がハッキリと見えている状態なので、レイヤーマスクを追加し、黒いグラデーションをかけることで境界をぼかします。これで以下の画像のようになるかと思います。他の2つの悩みも同樣に作成し、下に並べていきます。10.ベネフィットの配色をしようでは白黒レイヤーを非表示にして色をつけていきましょう。線を導入でも多用している暗めの青にします。テキスト囲っている長方形の線と同樣、暗めの青にします。これでベネフィットの画面ができました。11.アクションボタンをつけよう最後にアクションボタンをつけましょう。アクションボタンは「ファーストビューを作ろう」の際に作ったアクションボタンをそのまま使います。商品説明の下に中央揃えで配置しましょう。他の情報との差別化するため、背景に灰色の長方形を描きましょう。12.全体を見てみようファーストビューを含めて全体を見てみましょう。次はサービスの説明とお客様の声を制作していきます。