「エステサロンのサイトのLPを作ろう3」導入・ベネフィットの画面を作成しようランディングページ制作テクニック「エステサロンのサイトのLPを作ろう3」導入・ベネフィットの画面を作成しようこのレッスンではお題に沿ってPhotoshopを使ってランディングページを作成していきます。前回のレッスンではファーストビューの画面を作成しました。今回はファーストビューの下に続く導入・ベネフィットの画面を作成します。ブックマークLPデザインの考え方Webデザイン公開日:2020/01/22最終更新日:2020/01/22目次1.構成を確認しよう2.文言や写真を選ぼう3.導入のレイアウトを考えよう4.導入の文字組みをしよう5.導入に加工や装飾を加えよう6.導入の配色しよう7.ベネフィットのレイアウトを考えよう8.ベネフィットの文字組みをしよう9.ベネフィットの装飾をしよう10.ベネフィットの配色をしよう11.アクションボタンをつけよう12.全体を見てみよう1.構成を確認しよう「転職サイトのLPを作ろう1」で作成した構成を確認します。この構成に合わせて導入・ベネフィットの画面を作成していきます。2.文言や写真を選ぼう導入の文言やイメージ写真を考えよう導入はターゲットの悩みをベースに作成しましょう。今回は以下のような文章で組み立ててみました。写真は悩みにある身体の部位がわかる写真を選びましょう。今回は以下の写真を利用します。※写真AC様の会員登録が必要になります写真を使いやすいように事前に加工しよう背中と足の写真を比べると、色味に差があるので、これを調整していきます。足の色に合わせて背中の色味を加工します。背中と足の写真ファイルを開きます。背中の写真ファイルを選択し、メニューからイメージ>色調補正>カラーの適用を選択します。以下のようなウィンドウが表示されます。下部にある画像の適用設定のソースで背中の写真のファイルを選択します。すると色味が変化しますので、あとは上部にある輝度・カラーの適用度・フェードのバーを操作して足の色味に近づけます。背中と足の写真を部位のところだけ切り抜きたいと思います。クイック選択ツールを使って切り抜きましょう。クイック選択ツールで人物の領域をなぞるように選択していきましょう。人物を選択できたら、レイヤーパネルの下にあるレイヤーマスクを追加を押します。すると人物が切り抜かれた状態になります。クイック選択ツールについてはこちらのレッスンで詳しく知ることができます。選択範囲の操作5-5.写真の背景を透明にするベネフィットの文言を考えようベネフィットの文言は以下のようにします。施術で受けることでどういう効果が得られるのかを示します。3.導入のレイアウトを考えようまずは導入部のレイアウトを作っていきます。カンバスサイズを縦に広げよう今の状態だと、ファーストビューでカンバスが埋まっているので、カンバスサイズを縦に広げます。メニューからイメージ>カンバスサイズを選択します。設定のウィンドウが表示されるので、縦を2460px、基準位置は上中央を押して選択します。これでカンバスが下に広がりました。導入のレイアウトを作ろう導入部分のレイアウトを考えましょう。必要な文言や写真を入れます。この際、まだレイアウトについては考えなくても良いです。白黒にして配置を考えようファーストビューを作成した時と同樣に、白黒レイヤーを配置して色のない状態で構成を考えます。流れを考えよう流れを考えてから配置していきましょう。流れは以下のようにしてみたいと思います。配置するでは流れに従って配置していきましょう。このように流れを意識して配置してみましょう。見た人の視線を意図したとおりに動かし迷わせないようにしましょう。4.導入の文字組みをしよう見出しと内容の文字組を整えていきましょう。見出しここは大きいサイズで見出し感を出しましょう。Pro」でフォントスタイル「W6」を使用しましょう。Pro」でフォントスタイル「W6」を使用しましょう。内容(詳細)文章を読ませたいので、サイズは小さくして全体が目に入るようにしましょう。これで、以下のような形になるかと思います。5.導入に加工や装飾を加えよう全体を囲おう一つのかたまりだと認識できるよう、全体を長方形で囲います。長方形ツールで線:灰色、塗り:なしの状態で長方形を描きます。囲う際、見出しにかかるように描きましょう。すると見出しの文字が見にくくなってしまうので、見出しにレイヤースタイルで白い境界線をつけてあげましょう。写真の部位と内容との対応付けをしよう写真と内容の説明の対応付けを行ないます。内容の部位に番号を振っているので、写真の背中に1を、横腹に2を、太もも・ふくらはぎに3と番号をふっていきます。番号と部位をつなぐ線はパスツールで描きます。パスを作成したらオプションパネルでシェイプ化します。線:灰色、塗り:なしにします。見やすくなるよう、番号・線にレイヤースタイルで白い境界線をつけます。点線を入れてみよう内容の部位の間に点線で区切り線を入れたいと思います。パスツールで横線を引き、オプションパネルでシェイプ化します。オプションパネル内に線幅の設定の右横にある線オプションで点線にすることができます。これで導入は以下のような感じになるかと思います。6.導入の配色しよう白黒レイヤーを非表示にして、色をつけていきましょう。見出し・内容・囲い線・点線ファーストビューの背景に使用したグラデーションの青にします。写真の部位の番号と線ファーストビューでも多用したピンクにします。これで導入の部分ができました。次はベネフィットの部分を作成します。7.ベネフィットのレイアウトを考えよう次はベネフィットのレイアウトを作っていきましょう。必要な文言や写真を入れます。この際、まだレイアウトについては考えなくても良いです。白黒にして配置を考えよう白黒レイヤーを配置して色のない状態で構成を考えていきます。配置するでは配置していきましょう。1つの項目がグループと認識されるよう、項目の間の余白を意識しましょう。Pro」でフォントスタイルは「W6」を選択しましょう。項目(タイトル)フォントとフォントスタイルは見出しと同様にし、下に下線をつけましょう。項目(内容)フォントとフォントスタイルは見出しと同様にし、サイズは小さくして全体を読ませる感じにしましょう。これで以下のようになるかと思います。9.ベネフィットの装飾をしよう背景に写真を入れよう全体的に白いので、文字の邪魔にならない程度に背景に写真を入れてみましょう。今回は以下の写真を背景に入れたいと思います。写真のダウンロードはこちら※写真AC様の会員登録が必要になります全体に写真が入るようにし、レイヤーパネルで不透明度を20%にしましょう。上下の写真の切れ目がはっきり出てしまっているので、レイヤーマスクを追加し、上下に黒いグラデーションをかけましょう。すると以下のような感じになるかと思います。見出しを強調しよう見出しの色を白にし、下地に黒い長方形を置きましょう。10.ベネフィットの配色をしようでは白黒レイヤーを非表示にして色をつけていきましょう。導入でも使用した青を使用しましょう。項目(タイトル)導入でも使用したピンクにしましょう。これでベネフィットの画面ができました。11.アクションボタンをつけよう最後にアクションボタンをつけましょう。アクションボタンは「ファーストビューを作ろう」の際に作ったアクションボタンをそのまま使います。ベネフィットの下につけましょう。12.全体を見てみようファーストビューを含めて全体を見てみましょう。次は商品の説明とお客様の声を制作していきます。