Tweet
Tweet

Slide 1

Slide 1 text

WEB WEBデザインマーケティング 1 MARKETING DESIGN ウェブデザインマーケティング

Slide 2

Slide 2 text

2 はじめに 広告デザインは本当に学ぶのが⼤変。 • そもそもWEBデザインの作り⽅がわからない。教えられない。 • WEBマーケティングを理解していないため、効果が出ないデザインになる。 • 体系化されていないスキルなのでどう学べばいいかわからない。

Slide 3

Slide 3 text

3 はじめに 広告デザインは本当に学ぶのが⼤変。 7年間で200本以上LP制作してきたWEBマーケティン専⾨ の会社の制作ノウハウをまとめて公開します！

Slide 4

Slide 4 text

4 はじめに デザインはセンスじゃない。ルールとロジックだ！ • 基本ルールを主軸とした「レイアウト」「フォント」「配⾊」 • マーケティングデザインを主軸とした「コンテンツ」「写真」 • 鉄板の法則を主軸とした「装飾・レイアウトテクニック」「実践」

Slide 5

Slide 5 text

5 はじめに 誰でも簡単に効果の出るデザインができる 1.マーケティングとデザインについての知⾒ 2.効果的なデザインについての具体的な作成⼿順 3.短時間でクオリティの⾼いデザイン制作 この本書を読むことであなたは、以下のことが⾝につきます。

Slide 6

Slide 6 text

Chapter 01 デザインをはじめる前に 01 ランディングページとは・・・ 02 この本書の対象となる⼈・・・ 03 ランディングページの制作⼯程・・・ Chapter 02 LPのデザインはレイアウトの良さで決まる 01 【基本ルール】まずは覚えよう！レイアウトにおいての基本ルール・・・ 02 【LPレイアウト】ランディングページのレイアウトの特徴・・・ 03 【基本原則】必須！4つの基本原則 ”ビッグ4” とは・・・ 04 【裁ち落とし】インパクト⼤！裁ち落とし配置を活かしたデザイン・・・ 05 【余⽩】余⽩を効果的に使ったデザイン⽅法・・・ 06 【⽐較】料⾦⽐較・ビフォーアフターなど対⽐を使ったデザイン・・・ 07 【 3分割法】プロも使っている3分割法によるレイアウトの最適化・・・ 08 【重⼼】バランスが⼤事。重⼼を意識したデザインの配置・・・ 09 演習問題 LPの配⾊の仕⽅ 01 【⾊の原⾊】知らなきゃ危険？！⾊の原⾊の基礎と落とし⽳・・・ 02 【トーン】トーンによる⾊のイメージの選定・・・ 03 【配⾊⽅法】「6：3：1」効果的な配⾊の⽅法・・・ 04 【アクセントカラー】ぐっと⾒やすくる！アクセントカラーの活⽤⽅法・・・ 05 【⾊の作⽤】⾊彩⼼理学を応⽤した⾊の作⽤と「⾒えやすさ」・・・ 06 演習問題 Chapter 04 読みやすく・惹きつける適切な⽂字と書体 01 【基本ルール】⽂字と書体の基本・・・ 02 【フォント選び】商材・ターゲットで分ける書体の選定・・・ 03 【カーニング】劇的に変わる！⽂字のカーニングテクニック・・・ 04 【ジャンプ率】ジャンプ率を使った「⾒せたい⽂字」「読ませたい⽂章」・・・ 05 【書体の使⽤ルール】メインとサブとアクセントを選定・・・ 06 【⾒出しの表現⽅法】誰でもできる⾒出しの表現⽅法・・・ 07 演習問題 Chapter 03

Slide 7

Slide 7 text

Chapter 05 写真素材の効果的な使い⽅ 01 【写真の選び⽅】⽬的で学ぶ写真の選び⽅・・・ 02 【画像優位性】記憶に残る画像優位性とモンタージュ理論・クレショフ効果・・・ 03 【トリミング】写真のトリミングで情報を的確にわかりやすく伝える・・・ 04 【写真の配置】空間を活かした写真の配置⽅法・・・ 05 演習問題 Chapter 06 構成をもとにしたランディングページデザインの作り⽅ 01 【制作過程】ランディンページの制作の流れ・・・ 02 【トーン＆マナー】参考サイトを使⽤したトンマナの選定・・・ 03 【ワイヤーフレーム】構成・ワイヤーフレームのからの作成⼿順・・・ 04 【キービジュアル】ユーザー離脱3秒前、顧客をファーストビューでつかむ！・・・ 05 【コンテンツ】コンテンツパートは詳しく丁寧に！・・・ Chapter 07 ランディングページの改善・施策 01 【ABテスト】ABテストでランディングページを細かく改善！・・・ 02 【バナー】ディスプレイ広告に適したバナー制作・・・ 03 【コーディング】LPにおける効率的なコーディング・・・ 04 【無料HP作成】誰でもHPを簡単に作成！・・・

Slide 8

Slide 8 text

Chapter 01 デザインをはじめる前に 本書で⽬指す「デザイン」とはキレイだけのデザインじゃないです！ ターゲットに適切な情報、価値ある情報、商品・サービスのベネフィットをわかりやすくデザインで伝えるというこ とが本書が⽬指しているデザインの定義になります！ つまり・・・ ・ターゲットに何を伝えたいか（⽬的）を明確にすること ・それに際し、ベネフィットを強調させること ・そして実現最適なデザインの⼿法を選び、制作すること ちょっと難しかもしれませんがデザインは、ルールと基本さえわかれば誰でも上達が可能です。そのためには、何よ りも先に「制作する⽬的・情報」をきちんと理解して定めることが必要不可⽋になります！

Slide 9

Slide 9 text

Chapter 01 01 ランディングページのデザインとは デザインをはじめる前に 「ランディングページ最適化」とは、着地のページを最適化しようということ。最適 化とは、簡単に⾔えば⾒込み客が問い合わせをしてくれたり、商品の販売に繋がるよ うにしようということです。例えば、それっぽいビジュアルに更新されないお知らせ、 そこに製品情報がちょこっとなんてサイトでは誰も問い合わせをしませんよね？ ”勉強/中⼩企業が今すぐできる、実践！WEBマーケティング⼤全” ランディングページのデザインは⾃由です！ しかしながら、ターゲットユーザーへ向けた緻密な構成・ストーリーとイメージを沸かせるようなデザイン。 これがめちゃめちゃ必要です。こちらは弊社のWEBマ⼤全に記されているLPOについての部分を抜粋いたしました。

Slide 10

Slide 10 text

Chapter 01 02 この本書の対象となる⼈ デザインをはじめる前に • ランディンページの制作を任された新⼈担当 • 初めてランディングページを制作する中⼩企業の⽅ • 今までは制作を外注で頼んでいたがこれからWEBマーケティングに本腰をいれる担当者の⽅ 本書の対象なる⼈は以下になります。

Slide 11

Slide 11 text

Chapter 01 03 ランディングページの制作⼯程 デザインをはじめる前に ランディングページの作成⼯程を簡単に解説します！ 1. マーケティングの理解 ２. 構成・ストーリー設計 3. デザイン 4. コーディング・サーバーアップロード

Slide 12

Slide 12 text

Chapter 02 LPのデザインはレイアウトの良さで決まる LPに限らず、雑誌や広告、ポスター、アプリでもデザインはレイアウトで良さが決まります。例えば、インテリアにも よく使われます。部屋のレイアウトなら「家具を部屋の中にどこに置くか」ということを表します。 レイアウトとは、それぞれの要素が意味のある場所に配置され、役割を持ち、効果的に配列すること。つまり、レイア ウトの⽬的は情報をわかりやすく伝えることなのです。 これを理解すればだれでもわかりやすく、⾒栄えの良いデザインを作ることが可能です。また、このレイアウトにおい ては基本的なルールがあります。 このルールを⼀度覚えれば、レイアウトで悩まなく、時間も効率化できるが可能 です！それではレイアウトのテクニックを学んでいきましょう！ 強弱をつける 揃える グループ化 くり返す

Slide 13

Slide 13 text

Chapter 02 01【基本ルール】まずは覚えよう！レイアウトにおいての基本ルール・・・ LPのデザインはレイアウトの良さで決まる ランディングページのデザインは基本的に「ヘッダー」「キービ ジュアル」「CTA」 「コンテンツ」「フッター」の要素があります。 それを縦にブロックごとに配置していくのがLPの基本的なレイア ウトです。 LP はコンバージョン獲得する為に、1 ページの中にいかに商品の サービスや魅⼒をユーザー に伝えるかが重要で、テキスト・画 像・順序・レイアウトを把握して、ユーザー⽬線を分析したうえで、 要素を組み⽴てる必要があります。 LOGO アイキャッチコピー サブキャッチコピー αʔϏε ϝιου αʔϏε ϝιου αʔϏε ϝιου オファーコピー or リードコピー 0120-000-000 受付時間 9:00〜18:00 お電話での受け付けはこちら メールでの受け付けはこちら 無料でご相談はこちら ボディコピー サービス内容 サービス内容 サービス内容 サービス画⾯・⼈物 図１で分かるようにこのようなブロック形式での制作していき要素 を配置していきます。 図1

Slide 14

Slide 14 text

Chapter 02 01【基本ルール】まずは覚えよう！レイアウトにおいての基本ルール・・・ LPのデザインはレイアウトの良さで決まる では次に基本的なデバイスサイズの説明をしていきましょう！ 現在、パソコンやスマートフォンを⾒てみると⾊々なサイズのデバイスが世の中に溢れかえっていますが、基本的には3つのサイズで分類され ます。 デバイスサイズについて 1. PC⽤サイズ 960px〜1240px 全体幅には制限がなく、固定幅のサイズは960px〜1240pxが特徴です。 ⽇本でのパソコンの平均的なウィンドウ幅は「1920px×1080px」「1366px×768px」がシェアが多いのですが、みなさんは画⾯幅いっぱいのホームページなど あまり⾒たことないですよね？ 画⾯幅いっぱいになると基本⾒づらいからです。 なので固定幅という要素をつくり、ウィンドウが縮⼩されても⾒やすいようにしているのです。

Slide 15

Slide 15 text

Chapter 02 01【基本ルール】まずは覚えよう！レイアウトにおいての基本ルール・・・ LPのデザインはレイアウトの良さで決まる では次に基本的なデバイスサイズの説明をしていきましょう！ 現在、パソコンやスマートフォンを⾒てみると⾊々なサイズのデバイスが世の中に溢れかえっていますが、基本的には3つのサイズで 分類されます。 デバイスサイズについて 640px〜750px 2. スマートフォン⽤サイズ スマートフォン⽤サイズは640px〜750pxが主流になります。 現在は各メーカーでかなりの機種が出ていますが基本的に はAppleのiphoneの最新機種のウィンドウサイズになりま す。

Slide 16

Slide 16 text

Chapter 02 01【基本ルール】まずは覚えよう！レイアウトにおいての基本ルール・・・ LPのデザインはレイアウトの良さで決まる では次に基本的なデバイスサイズの説明をしていきましょう！ 現在、パソコンやスマートフォンを⾒てみると⾊々なサイズのデバイスが世の中に溢れかえっていますが、基本的には3つのサイズで分類され ます。 デバイスサイズについて 3. レスポンシブサイズ こちらはどのデバイスでも対応できるようにした可変可能なサイズになります。 レスポンシブデザインのメリットとしては、どのデバイスでも同⼀のファイルを利⽤できるため、管理が ⾮常に簡単になることと、デバイス毎の表⽰エラーを減らせることにあります。また、Googleもこのデ ザインを推奨しているのもメリットの⼀つです。

Slide 17

Slide 17 text

Chapter 02 02【LPレイアウト】ランディングページのレイアウトの特徴・・・ LPのデザインはレイアウトの良さで決まる ランディングページ（LP）は集客からお問い合わせのアクション誘導までを⼀枚のページでおこなえるように設計されていま す。 そのため、通常の企業ホームページよりもセールスレターやチラシに近いレイアウトになっているのがレイアウトの特徴です。 簡単に⾔うとコーポレートサイトやECサイトは複数のページで構築された「カタログ」的な役割を持っており、LPは購⼊・登 録・認知などを⽬的とした「広告」の役割を持っています。 なのでランディングページは営業のセールストークを1枚のページで再現したような構成になり、それを上⼿く伝えるために縦 ⻑のわかりやすいレイアウトになります。例えば話し⽅で必要な「PREP」をご存知でしょうか？ Point・・・⽂章の要点部分です。まずは結論を述べます。 Reason ・・・ Pointで述べた結論の理由を説明する部分です。 Example ・・・ Reasonで述べた理由を裏付け、具体的な例を説明する部分です。 Point ・・・⽂章のまとめ部分で、最後にもう⼀度結論を述べます

Slide 18

Slide 18 text

Chapter 02 03 【基本原則】必須！4つの基本原則 ”ビッグ4” とは・・・ LPのデザインはレイアウトの良さで決まる それではLPの⼤まかなレイアウトを説明したところで次に細かなレイアウトやデザインについて説明していき ます。 そもそもデザインってどんなイメージがありますか？「シンプル」「⼒強い」「⾼級感」「にぎやか」「かっこ いい」など⾊々なイメージで表せると思います。しかしながら、これらも基本的なルールがあって成り⽴ってい るのです。そのルールとは「近接」「整列」「反復」「コントラスト」。 これらは有名なデザインの本「ノンデザイナーズ・デザインブック」に記載しているコンセプトです。この本で はこのコンセプトをLPの例を使ってわかりやすく解説しています。 ちなみにこの原則は⽇常⽣活でも知らず知らずの内に使っているのです。例えば家で⾷器を⼤きさごとに整理し たり、洋服を夏服・冬服に分けたり、机やテレビの位置を真っすぐに揃えたり、これらは全てビッグ4に当ては まるのです。 まずはこの4つの原則を覚えてデザインの基礎を覚えていきましょう！

Slide 19

Slide 19 text

Chapter 02 03 【基本原則】必須！4つの基本原則 ”ビッグ4” とは・・・ LPのデザインはレイアウトの良さで決まる 近接 関連する項⽬の距離を近づけてひとつのカタマリにしてグループ化します。これにより項⽬が互いに近接（近づいている状態）し ている時、それらはひとつの視覚的なまとまりとして認識できるようなります。

Slide 20

Slide 20 text

Chapter 02 03 【基本原則】必須！4つの基本原則 ”ビッグ4” とは・・・ LPのデザインはレイアウトの良さで決まる 整列 整列とは、各要素をきちんと整列して配置するということです。 全ての要素が明確な意図を持って配置されており、整えられた他の要素と要素が視覚的な関連性により統⼀感を与え「クリアで明確な 印象 」を受けることができます。

Slide 21

Slide 21 text

Chapter 02 03 【基本原則】必須！4つの基本原則 ”ビッグ4” とは・・・ LPのデザインはレイアウトの良さで決まる 反復 ⾊・形・質感・位置関係・線の太さ・書体・サイズ・画像などの視覚的要素をページ全体を通して繰り返す事。反復するこ とで要素全体を⼀体化してまとまりや統⼀感が⽣まれます。

Slide 22

Slide 22 text

Chapter 02 03 【基本原則】必須！4つの基本原則 ”ビッグ4” とは・・・ LPのデザインはレイアウトの良さで決まる コントラスト デザインにとって統⼀感は逆にユーザーを飽きさせます。似たような配⾊やサイズの単なる繰り返しはユーザーの 集中⼒をそぎ落とし、視線を外に追いやります。 まずは情報の整理が⼤切。要素を分解し、それぞれに優先順位をつけます。そして強弱を意識し、違うものは思 いっきり違わせてみましょう。反復の中で計算されたコントラストがユーザーを惹きつけ視線が溜まりやすくなり ます。

Slide 23

Slide 23 text

Chapter 02 03 - 01 【基本原則】近接 LPのデザインはレイアウトの良さで決まる ⼈は無意識のうちに同じ形をしたものや、近くにあるもの同⼠を、1つの「まとまり」として認識しようとします。この性質 のことを「ゲシュタルトの法則」といいます。 デザイン制作において、この性質を上⼿に利⽤すると、第三者に対して情報を迅速、かつ正確に伝えられるようになります。 また、全体から⽬⽴たせたい要素がある場合は、その要素をまとまりから離して配置すると効果的です。 要素ごとにグループ化したもの。 要素の関連性が曖昧でグループ化がされていない。

Slide 24

Slide 24 text

Chapter 02 03 - 01 【基本原則】近接 LPのデザインはレイアウトの良さで決まる 各要素をグループ化する際には、次のポイントに注意してください。 同じ意味や役割を持つ要素をまとめる POINT.1 関連性の低い要素につながりを作らない POINT.2 余⽩を上⼿く活⽤する POINT.3 「余⽩」を上⼿く活⽤

Slide 25

Slide 25 text

Chapter 02 03 - 01 【基本原則】近接 LPのデザインはレイアウトの良さで決まる 近接のポイント 1.関連するものは近づけて、関連の薄いものは離す。 2.要素間に均等な空⽩を作らない。 3.関連するものはグループ化してまとめる。 4.視覚的に構造化されるだけでなくて、⾒る⼈が情報を組織化できる。

Slide 26

Slide 26 text

Chapter 02 03 - 02 【基本原則】整列 LPのデザインはレイアウトの良さで決まる 要素が整列されていないデザイン 要素が整列され互いに関係性を持ったデザイン 整理整頓することはデザイン作業の基本中の基本。視覚的に、⾒栄えがきれいになり、情報も明瞭になり読みやすくなります。「整列」にこ だわれば、こだわるほど、デザインの質があがるといっても過⾔ではありません。 例えると、部屋のあちこちに散らばった洋服たちを整理し収納することによく似ています。書体やイメージ図などと組み合わされた「 ⼒強 い整列 」は、洗練さ・美しさを表現することができます。

Slide 27

Slide 27 text

Chapter 02 03 - 02 【基本原則】整列 LPのデザインはレイアウトの良さで決まる 整列のポイント 1.ページ上の全てのものを意識的に配置する。 2.整列の基準になる仮想のラインを探し、そこにこだわる。 3.ページ上の全てのモノが視覚的なつながりを持ち、関連性が⽣まれる 4.つまりはページもの⼀体化と組織化

Slide 28

Slide 28 text

Chapter 02 03 - 03 【基本原則】コントラスト LPのデザインはレイアウトの良さで決まる コントラストとは、ある要素と別の要素を「対⽐」させる⼿法です。 わかりやすいのは⽂字の⼤きさです。雑誌や新聞、Webページなどでは同じページ内にさまざまな⼤きさの⽂字が配置されています。 コントラストが施されたデザイン 整列・近接はしているがメリハリがないデザイン

Slide 29

Slide 29 text

Chapter 02 03 - 03 【基本原則】コントラスト LPのデザインはレイアウトの良さで決まる コントラストポイント 1.強弱をハッキリつけて、要素を区別化する 2.情報の違いをつけることで組織化する 3.コントラストはつけ過ぎず、意図をもってデザインする 4.メッセージを伝えるための⼿段として活⽤する

Slide 30

Slide 30 text

Chapter 02 03 - 04【基本原則】反復 LPのデザインはレイアウトの良さで決まる 「反復」とは、複数の写真やイラスト、⽂字など を同⼀のデザインルールのもとでレイアウトしていく技法です。複数の要素 に同じデザインルールを適⽤することで、それらに規則性が⽣まれ、その結果、全体にまとまり感や統⼀感が⽣まれます。 「反復」はとてもシンプルな技法ですが、その効果は絶⼤です。例えば、複数の情報から構成される商品カタログやお客様の 声などを別々のデザインでレイアウトすると乱雑な印象になってしまいますが、同⼀のデザインルールのもとでレイアウトを ⾏うと、まとまり感や統⼀感のあるレイアウトに仕上げることができます。

Slide 31

Slide 31 text

Chapter 02 03 - 04【基本原則】反復 LPのデザインはレイアウトの良さで決まる ポイントは「リズム」を意識すること 同じものを繰り返すことは、「リズム」をつけることです。そうすると視覚的なおもしろさが加わり、読者に読んでもらえる可能性が⾼くな ります。 反復を効果的に使うことで、ユーザーアクションしてもらいたいことや、読ませたい部分を強調することもできます。 ⾝近なところで⾔えば、検索結果やブログなどのレイアウトになります。 どちらもレイアウトでは「⾒出し」「⼩⾒出し」「⽂章」「引⽤」「画像」「URL」など様々な要素がありますが、基本的に読ませ⽅はどれ も同じです。

Slide 32

Slide 32 text

Chapter 02 04 【裁ち落とし】インパクト⼤！裁ち落とし配置を活かしたデザイン LPのデザインはレイアウトの良さで決まる 裁ち落としとは紙や布などの周辺にある不要部分を切り落してしまい、⽬的の⼤きさ、形状に加⼯することです。 これはよく印刷業界でも使われている⾔葉なのですが、デザインで裁ち落としのレイアウトを使うことができます。これにより奥⾏きや解放感 がデザインに伴いインパクトのあるデザインに仕上げることができます。

Slide 33

Slide 33 text

Chapter 02 04 【裁ち落とし】インパクト⼤！裁ち落とし配置を活かしたデザイン LPのデザインはレイアウトの良さで決まる ⽂字サイズ変更 枠から外れた デザイン

Slide 34

Slide 34 text

Chapter 02 05 【余⽩】余⽩を効果的に使ったデザイン⽅法 LPのデザインはレイアウトの良さで決まる デザインでは⼀般的に「余⽩」とは「ホワイトスペース」(white space)あるいは「ネガティブスペース」(negative)とも呼び、「ホームページに おける空⽩のスペース部分」を指します。 この考え⽅はWEBデザインの中でも重要な考え⽅の⼀部となっていて、⼀⾒何も存在しない真っ⽩のスペースのようでありながら、意図的に配置 されていることもあります。 だからこそ余⽩を効果的に使えば情報にまとまり感を与える、デザインの品が良くなる、コンテンツの境⽬をわかりやすくするなどの印象をユー ザーに与えます。前の章で学んだ近接の効果と同じく、こちらもグルーピングの基本です！ まずは下記の事例を⾒てみましょう！

Slide 35

Slide 35 text

Chapter 02 08 【重⼼】バランスが⼤事。重⼼を意識したデザインの配置 LPのデザインはレイアウトの良さで決まる 皆さんデザインする上で重⼼という考え⽅をしたことありますか？ デザインする上でもレイアウトする際は、各要素の「重さ」 を⾒定めたうえで、全体の「重⼼」を考慮してレイアウトすることが必要です。 重要度の⾼い順に闇雲にレイア ウトしていくと、安定感のない、アンパランスな仕上がりになってしまいます。 バランスを考えるコツは、配 置されるデザイン要素の「重さ」を考えることです。 右上と左下に同様の要素を配置 すると、重⼼が中⼼になり、安 定感のあるレイアウトになりま す。 中央揃えにすると、左右のパラ ンスが均衡するため、 安定感の あるレイアウトに仕上がります。 要素の「重さ」は⾊の濃淡で も 変わります。この⽅法を⽤いる と、簡単に強弱をつけることが できます。

Slide 36

Slide 36 text

Chapter 02 08 【重⼼】バランスが⼤事。重⼼を意識したデザインの配置 LPのデザインはレイアウトの良さで決まる では、実際にどうやって重⼼を上⼿にとるのか。デザインの現場で役⽴つテクニックをご紹介したいと思います。 下記は先ほど紹介した重⼼をとったデザインです。 夫婦の写真とパンフレットが対⾓線 でレイアウトされていて、バランス をとっている。 ⼥性の写真からCVボタンまで 中央寄りに配置しており、真ん 中で重⼼を保っている。 上部のキャッチコピーと下部の 男性の写真を配置し、写真の⾊ の重さを活かし、バランスを とっている。

Slide 37

Slide 37 text

Chapter 03 LPの配⾊の仕⽅ ランディングページではコーポレートサイトとは違い、最後までユーザーに飽きずに⾒てもらうということが重要になりますので、通常のWebサイトや紙媒体 などと⽐べて配⾊の考え⽅が変わってきます。 配⾊のやり⽅を失敗すると、イメージが拡散し、情報をインプットしづらいランディングページになってしまうので、配⾊は実はとても難しく重要な作業です。 ここでは⾊の基本から配⾊までを丁寧に教えていきます！ また、LPの配⾊ではマーケティングと密接に関わっているためポジショニングやターゲットに応じて配⾊します。その際に4つのカラー選択がカギになります！ 1. ベースカラー ランディングページ全体の基調となるカラー。商材やターゲットにイメージを合わせる。 2. サブカラー メインカラーを引き⽴てるためのアクセントカラー。コンテンツごとにメリハリをつけたりする。 3. コンバージョンカラー ここでは主にコンバージョンエリアやお問合せボタンのカラーのことで、最終的にアクションを起こしてもらうための配⾊になります。 4. アクセントカラー 明度や⾊相の差が⼤きい対照的な⾊を少量加えると、配⾊全体にメリハリが⽣まれ全体を引き⽴てる効果が⾼まる。１

Slide 38

Slide 38 text

Chapter 03 01【⾊の原⾊】知らなきゃ危険？！⾊の原⾊の基礎と落とし⽳ LPの配⾊の仕⽅ ⾊にはそれぞれ異なったイメージがあり、どの⾊にも良いイメージと悪いイメージがあります。代表的な⾊のもつイメージについては右にまと めてみました。 例えば⾚には「情熱的」という良いイメージがありますが、同時に「危険」という悪いイメージもあります。 このような⾊のイメージを理解した上で、TPOに合わせて慎重に⾊を選ぶ必要があります。⾔うまでもなく、⿊は⼦供向けの製品チラシにはあ まり適さないですし、⾷品関係には⻘や紫は適さないでしよう。 ⾚ オレンジ 茶⾊ ⻩⾊ 緑 ⻘ 紫 ⽩ ⿊ 情熱・熱い 活発・元気 ⼤⼈っぽい 元気・軽快 平和・若さ 理想的・涼しい ⾼貴・⾼級 清潔・潔癖 重厚感・豪華さ 危険・派⼿ 幼い・派⼿ 暗い・汚い 眩しい・チープ 未熟 冷たい・冷酷 霊的・不安 冷たい・軽薄 恐怖・憂鬱 ⾊の種類 悪いイメージ 良いイメージ

Slide 39

Slide 39 text

Chapter 03 01【⾊の原⾊】知らなきゃ危険？！⾊の原⾊の基礎と落とし⽳ LPの配⾊の仕⽅ 商材ごとに⾊を選択し、ある特定の⾊合いがユーザ−にどのような効果を与えるかを考えて使⽤していくことが⼤事です。 その際に⾊を使い過ぎても、伝えたい情報がわかりづらくなってしまいよくありません。なので、⾊を効果的に機能させるためにはある程度 ルールを守り、組み合わせをしていく必要があります。 7 3 1

Slide 40

Slide 40 text

Chapter 03 02【トーン】トーンによる⾊のイメージの選定 LPの配⾊の仕⽅ トーン (⾊調)とは、明度と彩度の組み合わせで表される「⾊の調⼦」です。同じ⾊相であっても、⾊の印象はトーンによって⼤きく変わります。 例えば、明るいトーンは「優しさ」「若々しい」といつた印象を読み⼿に与え、暗いトーンは「厳格」「⼤⼈」といった印象を与えます。

Slide 41

Slide 41 text

Chapter 03 03【配⾊⽅法】「7：3：1」効果的な配⾊の⽅法 LPの配⾊の仕⽅ ⼀般的に良いとされている配分で配⾊すると、バランスの取れた「美しい配⾊」になりやすいとされている⾊⾯積の⽐率があります。 メインカラーは、ユーザーに何を伝えたいかで選ぶことが⼤切です。⾊にはそれぞれ印象があります。⾚ならアクティブ、⻘ならクールなど様々 です。与えたい印象で選べば、⾊選びで迷うことも少なくなります。 メインカラー サブカラー

Slide 42

Slide 42 text

Chapter 03 04【アクセントカラー】ぐっと⾒やすく！アクセントカラーの活⽤⽅法 LPの配⾊の仕⽅ コンバージョンボタンとは、Webサイトに訪れたお客様に資料請求や問合せなど何かしらの「アクション」を起こしてもらうためのボタンです。 別の⾔い⽅をするとコール・トゥ・アクション(CTA)といい、訪問したユーザーに、ランディングページの⽬的であるコンバージョンというア クションを起こしてもらうための必要コンテンツです。 なのでひと⽬⾒て【ボタン】だと直感的に認識できることが求められます。

Slide 43

Slide 43 text

Chapter 03 05【⾊の作⽤】⾊彩⼼理学を応⽤した⾊の作⽤と「⾒えやすさ」 LPの配⾊の仕⽅ ⾊には、様々な影響を与える⼒があります。WEBデザインでも例外ではありません。 基本的に⾊には三つの要素があります。 「⾊相」「彩度」 「明度」 の三つです。 これらを ⾊の三属性 （⾊の三要素）と⾔います。 簡単に⾔うと「⾊が持つ3つの性質」のことです。 「⾊相」とは、⾚や⻘、緑といった⾊みの性質、「彩度」は⾊の鮮やかさ、 「明度」は⾊の明るさを表します。これらの3つの性質は、⾊を知る 基本となります。 ⾊相 ⾊相とは「⾚」「⻩⾊」「⻘」のような⾊の相違を指します。 また⾊味の違う⾊相を近しい⾊を順番に円環上に配置した⾊相環というものがあります。 ⾊相環で正反対に位置する関係の⾊の組合せを「補⾊」と⾔い、補⾊の中でも⾒つめていた⾊の残像としてあらわれる補⾊を「⼼理補 ⾊」 ともいいます。

Slide 44

Slide 44 text

Chapter 03 05【⾊の作⽤】⾊彩⼼理学を応⽤した⾊の作⽤と「⾒えやすさ」 LPの配⾊の仕⽅ 彩度 彩度とは、⾊の鮮やかさの度合いです。 彩度が⾼ければ⾼いほど⽬を惹く効果があります。 彩度が⾼い → ビビッドで鮮やかな⾊味 彩度が低い → 落ち着いた⾊味、無彩⾊ 落ち着いてる 活発 明度 明度とは明るさの違いのことで、最も明るい⾊は⽩、最も暗い⾊は⿊となっています。通常明度を表す場合は明るい⾊のことを「明る い」「明度が⾼い」というような表現をします。 ⿊くなる ⽩くなる

Slide 45

Slide 45 text

Chapter 03 05【⾊の作⽤】⾊彩⼼理学を応⽤した⾊の作⽤と「⾒えやすさ」 LPの配⾊の仕⽅ 暖⾊ / 寒⾊ 暖かさや冷たさを感じる⾊。「寒・暖」感は⾊相が関係します。 ⾊相環で「⾚」を中⼼とした⾊相は暖かく感じ、「⻘」を中⼼とした⾊相は冷たく感じるといわれています。 同じデザインであっても⾒え⽅は異なる。

Slide 46

Slide 46 text

Chapter 03 05【⾊の作⽤】⾊彩⼼理学を応⽤した⾊の作⽤と「⾒えやすさ」 LPの配⾊の仕⽅ 膨張⾊ / 収縮⾊ ⾊は「膨張⾊（進出⾊）」と「収縮⾊（後退⾊）」に分けることが出来ます。 膨張⾊とは、主に明るい暖⾊系を差し、その名の通り膨張して⾒えるため、着ると太って⾒える場合があります。 収縮⾊とは、主に暗めの寒⾊系を差し、収縮させて⾒えるため、細くスマートな印象を与えることが出来る⾊です。 ⿊⾊は収縮性があり、引き締まって⾒える ⽩い服の⽅が軽量性があり、清潔な印象を与える。

Slide 47

Slide 47 text

Chapter 03 05【⾊の作⽤】⾊彩⼼理学を応⽤した⾊の作⽤と「⾒えやすさ」 LPの配⾊の仕⽅ ⾊の「⾒やすさ」 ⾊は「膨張⾊（進出⾊）」と「収縮⾊（後退⾊）」に分けることが出来ます。 膨張⾊とは、主に明るい暖⾊系を差し、その名の通り膨張して⾒えるため、着ると太って⾒える場合があります。 収縮⾊とは、主に暗めの寒⾊系を差し、収縮させて⾒えるため、細くスマートな印象を与えることが出来る⾊です。 ⼈⽬を引きつける度合いのことで、注意を向けていない視野周辺にあるような対象の⽬⽴ちやすさなどを意味しています。 1. 誘⽬性

Slide 48

Slide 48 text

Chapter 03 05【⾊の作⽤】⾊彩⼼理学を応⽤した⾊の作⽤と「⾒えやすさ」 LPの配⾊の仕⽅ ⾊の「⾒やすさ」 ⾊は「膨張⾊（進出⾊）」と「収縮⾊（後退⾊）」に分けることが出来ます。 膨張⾊とは、主に明るい暖⾊系を差し、その名の通り膨張して⾒えるため、着ると太って⾒える場合があります。 収縮⾊とは、主に暗めの寒⾊系を差し、収縮させて⾒えるため、細くスマートな印象を与えることが出来る⾊です。 視認性とは、⽬で視て確認できる度合いです。 瞬間的な判断で認識できるかどうかなので、こちらも標識や道路などの看板広告はこの視認性を重視して作られます。 2. 視認性 背景⾊とのバランスがとれ、⽂字を認識することができ 3つのメソッドのアイコンも瞬時に判断できる。 背景とのバランスが悪く、瞬時に⽂字を判読できない。

Slide 49

Slide 49 text

Chapter 03 05【⾊の作⽤】⾊彩⼼理学を応⽤した⾊の作⽤と「⾒えやすさ」 LPの配⾊の仕⽅ ⾊の「⾒やすさ」 ⾊は「膨張⾊（進出⾊）」と「収縮⾊（後退⾊）」に分けることが出来ます。 膨張⾊とは、主に明るい暖⾊系を差し、その名の通り膨張して⾒えるため、着ると太って⾒える場合があります。 収縮⾊とは、主に暗めの寒⾊系を差し、収縮させて⾒えるため、細くスマートな印象を与えることが出来る⾊です。 3. 明視性 明視性とは、対象の形や細部まで認めやすさのことをいいます。簡単にいうとすでに知っているものや、⾒たことあるものが再度⾒ても理解できるか ということです。 例えば、右のCTAではどれがボタンだかわからないですよね？左の場合はしっかりオファー・⾒出しとは区別されボタンを押すことができますね！

Slide 50

Slide 50 text

Chapter 03 05【⾊の作⽤】⾊彩⼼理学を応⽤した⾊の作⽤と「⾒えやすさ」 LPの配⾊の仕⽅ ⾊の「⾒やすさ」 ⾊は「膨張⾊（進出⾊）」と「収縮⾊（後退⾊）」に分けることが出来ます。 膨張⾊とは、主に明るい暖⾊系を差し、その名の通り膨張して⾒えるため、着ると太って⾒える場合があります。 収縮⾊とは、主に暗めの寒⾊系を差し、収縮させて⾒えるため、細くスマートな印象を与えることが出来る⾊です。 可読性とは、素早く読めるか、理解しやすいか、読んでて疲れないかという事です。ここでいう可読性とは⾊との関係がある可読性について説明 します。※⽂字のサイズやフォントについてはチャプター5にて説明します。 4. 可読性 ⽂字の⾒えやすさを視認性、読みやすさを可読性と⾔いますが、これは主に背景⾊と⽂字⾊の明度差に依存します。 ⾊覚障害の場合や加齢による場合など様々な条件が考えられますが、適切な視認性・可読性を確保するには、下記のように明度差をつけましょう！

Slide 51

Slide 51 text

Chapter 04 読みやすく・惹きつける適切な⽂字と書体 ランディングページにおいて⽂字は特別な要素であり、なくては⽋かせないものです。 なぜか？ランディングページはそもそも広告媒体であり、セールスコピーが重要な要素の⼀部です。もし ストーリーもコピーライティングも完璧なのにデザインやレイアウトの印象が悪かったりして⽂章が読ま れなかったらもったいないですよね？ ランディングページではグラフィックや写真だけでなく、書体の種類や⽂字の配置にとってもページにお ける効果が⼤きく変化します。 ここではまず、⽂字の基礎知識を学び、デザインに落とし込むためのスキルを学んでいきましょう。

Slide 52

Slide 52 text

Chapter 04 01【基本ルール】⽂字と書体の基本 読みやすく・惹きつける適切な⽂字と書体 書体の種類は⼤きく次のように分類できます。 和⽂ ： ゴシック体・明朝体 欧⽂ ：サンセリフ体・セリフ体 和⽂書体の種類 ゴシック体 文字と書体 文字と書体 新ゴ ヒラギノ⾓ゴ 明朝体 文字と書体 文字と書体 リュウミン 源ノ明朝 欧⽂書体の種類 サンセリフ体 DESIGN DESIGN Arial Helvetica セリフ体 DESIGN DESIGN Adobe Garamond Centaur

Slide 53

Slide 53 text

Chapter 04 01【基本ルール】⽂字と書体の基本 読みやすく・惹きつける適切な⽂字と書体 SALE 50 今なら洋服全品 % OFF SALE 50 今なら洋服全品 % OFF ゴシック体とサンセリフ体を使⽤したデザイン 明朝体とセリフ体を使⽤したデザイン ゴシック体は視認性が⾼く、⽂字に安定感がある印象 明朝体は⾼級感があり、信頼感がある印象

Slide 54

Slide 54 text

Chapter 04 02【書体の選定】商材・ターゲットで分けるフォント選び 読みやすく・惹きつける適切な⽂字と書体 先程は書体の基本を伝えましたが、こちらではその書体をどのように選べばよいのかを学んでいきましょう。 ランディングページの書体選定は、⼀般的なWebサイトのフォント選定とは⽅法が異なります。なぜならランディングページでは、⼀般的な Webサイトとは違って、1カラムでデザインすることができるからです。 そのためランディングページでは、フォントサイズを⼤きくするなどした、ダイナミックな表現がしやすくなっています。 特にキャッチコピーや⾒出しコピーのフォントサイズを⼤きくできるため、⼀般的なWebサイトでは使いづらいフォントも、⾃由に使⽤するこ とができます。

Slide 55

Slide 55 text

Chapter 04 02【書体の選定】商材・ターゲットで分けるフォント選び 読みやすく・惹きつける適切な⽂字と書体 商材・ターゲット・訴求での書体選択 【⾼級感・リッチ】 明朝体など厳格で知的な印象の書体 【かわいい・キレイ】 細い明朝体や丸みを帯びたゴシックなどの書体 【信頼・安⼼】 安定感がある線の太いゴシック・明朝体 【清潔・爽やか】 細めのスタンダードなゴシックや明朝体 【かっこいい・派⼿】 ⼒強く、線が太いゴシック・明朝体 【にぎやか】 ゴシックやクセのあるフォントなど

Slide 56

Slide 56 text

Chapter 04 03【カーニング】劇的に変わる！⽂字のカーニングテクニック 読みやすく・惹きつける適切な⽂字と書体 カーニングとは⽂字同⼠の間隔（アキ）を調整する機能のことで、これにより⽂字全体の⾒た⽬を調節し、バランスを整えます。 この⽂字と⽂字の間に⽣まれる「⼀定の間隔」のことを字間と呼びます。 別に凝っていないデザインや⻑⽂など、あまりカーニングは重要ではないように⾒えるかもしれませんが、 ランディングページのキャッチコピーやコンテンツの⾒出しではカーニングを使うことにより、印象的なデザインに仕上げることができま す。 特にカーニングは、⾒出しタイトル・キャッチコピーなど、⼤きく表⽰されるテキストなどで重要になってきます。 上記で⾔いましたが字間の⻑さで⽂字のガラッと印象が変わっていきます。 文字のカーニングテクニック 字間を調節していない⽂章 文字のカーニングテクニック 字間を詰めて調節した⽂章 文字のカーニングテクニック 字間を空けて調節した⽂章

Slide 57

Slide 57 text

Chapter 04 03【カーニング】劇的に変わる！⽂字のカーニングテクニック 読みやすく・惹きつける適切な⽂字と書体 字間を詰めてカーニングしたデザイン 字間を広げてカーニングしたデザイン ⽐べてみてどうですか？ 左のデザインは⼒強く、より選りのドライバーを⼿配してくれそうですよね。右のデザインではゆったりとして、⾼級感あ ふれる紳⼠的な印象を受けます。 このように字間によってさまざまな印象を与えることができます。しかしながら、このカーニングも商材理解やターゲット を想定しないままデザインしてしまうと全く効果の出ないデザインに仕上がってしまいます。

Slide 58

Slide 58 text

Chapter 04 04【ジャンプ率】ジャンプ率を使った「⾒せたい⽂字」「読ませたい⽂章」 読みやすく・惹きつける適切な⽂字と書体 「ジャンプ率」とは簡単にいうと、本⽂のサイズに対するタイトルや⾒出しサイズの⽐率のことです。 例えば本⽂が12pxで⼩⾒出しが24px、⼤⾒出しが36pxだとすると、⼩⾒出しのジャンプ率は2倍、⼤⾒出しは3倍となります。⽐率でみると 「1:2:3」ですね。 ⼀般的にこのジャンプ率の差が⼤きい程、要素と要素の区切りが掴みやすくなりますので、読み⾶ばしやすくなります。つまり要素から要素へ 視線がジャンプしている訳です。 あなたのやりたい仕事を実現できる ジャンプ率を変えていない⽂章 あなたのやりたい仕事を実現できる ジャンプ率を変えた⽂章 上記の例を⾒てみると、⽂章の⻑さは同じですよね？けども、2番⽬の例を⾒てみると⼀⽬で強調されている部分がわかり、ユーザーも じっくり読まずに認識できることが可能です。 このようにジャンプ率を使うことにより、読ませたい⽂字や⽂章を的確に表現できます。 またジャンプ率に⽐率によって、インパクトを与えたり、⾼級感や知的な印象を与えることができます。

Slide 59

Slide 59 text

Chapter 04 04【ジャンプ率】ジャンプ率を使った「⾒せたい⽂字」「読ませたい⽂章」 読みやすく・惹きつける適切な⽂字と書体 ジャンプ率の差で印象を⼤きく変える 前のポイントで⾔ったようにジャンプ率でインパクトを強くしたり・逆に安⼼感を与えたりすることができます。 例えば、落ち着いた雰囲気を伝える場合は ジャンプ率を⼩さくする、躍動感を演出するときは ジャンプ率を⾼くするなど、伝える対象 となる ユーザーや⽬的に応じてジャンプ率を設定することで、⾃社の訴求したいことを効果的に伝えることができます。 下記は商材によってジャンプ率を変えた事例になります。 ジャンプ率を⼤きくして「充実感」にフォーカスを置き 従来の運転業とのインパクトを与えている。 英字と数字のジャンプ率を上げて、それ以外は⽐率を 同じにして落ち着いた雰囲気にさせている。

Slide 60

Slide 60 text

Chapter 04 05【書体の使⽤ルール】メインとサブとアクセントを選定 読みやすく・惹きつける適切な⽂字と書体 前のポイントでランディングページのフォントについて⾃由で統⼀もあまりないとお伝えしました。今回はフォントの選定の仕⽅や使⽤⽅法を学んでいきましょう。 まず使⽤フォントについてはこのように選択していきましょう。 1. メインの書体決定（商材やターゲットを把握して選択する） 2. サブの書体決定（メインと差別化する） フォントファミリーやゴシック体などで分ける。 ※同じ書体同⼠で別のフォントを選ぶと統⼀感がなくなってしまう ⼿書きなどのちょっとクセのある書体を選び装飾寄りに使⽤する 3. アクセントの書体決定 1 2 3

Slide 61

Slide 61 text

Chapter 04 05【書体の使⽤ルール】メインとサブとアクセントを選定 読みやすく・惹きつける適切な⽂字と書体 ⾊々なフォントを使っていきましょうと説明しましたが、まずはメインの選定を⾏いましょう。前のポイントで説明したようにその商材や 訴求内容に合わせたフォントを使わなければデザイン以前に効果を発揮することができません。 また、注意しなければならないのはメイン・サブ・アクセントの3種類がありますが必ず全て使⽤する必要はありません。むりやり、サ ブ・アクセントを使ってデザインしても、結局はまとまらずデザインの質が悪くなることもあります。 まずはしっかり主体となるフォントを選び、そこから装飾するイメージでフォントを選んでいきましょう。 まずはメインの選定 ゴシック体だけを使⽤したデザイン 4種以上のフォントを使⽤したデザイン

Slide 62

Slide 62 text

Chapter 04 06【⾒出しの表現⽅法】誰でもできる⾒出しの表現⽅法 読みやすく・惹きつける適切な⽂字と書体 ⾒出しの役割は「本⽂を読んでもらうためのきっかけ」です。そのためメインタイトルやコンテンツの⾒出しでは、ユーザーの ⽬を引くために⽂字を飾ったり、サイズを⼤きくしたりと⾊々な⼯夫をしなければならないと思います。 数字を強調する ⼈は数字などに注意を向ける習性があります。それを利⽤し数字のジャンプ率を⼤きくして⽬出せることができます。 マーキングする よく教科書に⼤事なところは蛍光ペンでマーキングした経験があると思います。そのような強調の仕⽅をWEBデザインでも応⽤して⽬⽴たせることができます。 ⽂字を強調する 数字以外にも⾒てほしい部分やインパクトの強い部分をサイズや太さを変えて強調してあげます。また、丸の点など装飾してあげると視線が留まりやすくなります。

Slide 63

Slide 63 text

Chapter 05 写真素材の効果的な使い⽅ 写真素材はランディングページになくてはならない要素の⼀つです。 写真の使い⽅を間違えるとターゲットや訴求に当てはまらず、構成やレイアウトの効果が台無しになって しまいます。 しかし、写真の使い⽅でLPの効果がぐっと上がるのも間違いありません。 また、同じ写真であっても配置⽅法やトリミングによって印象は変わっていきます。例えばトリミング⼀ つをとっても与える印象や伝える情報は様々です。 まずは情報を的確に伝えるということを考え、しっかり技法を学んで写真の機能を⼗分に活⽤させましょう。 ૉࡐͰ঎ࡐɾૌٻͷΠϝʔδ৘ใΛ఻͑Δ

Slide 64

Slide 64 text

Chapter 05 01【選び⽅】⽬的で学ぶ写真の選び⽅ 写真素材の効果的な使い⽅ 最初に⾔った通り、LPに載せる写真はデザインの⼀部となり、素材⼀つで印象を変えてしまいます。また、写真のクオリ ティーがデザインと同等か、それ以上であれば、ユーザーの⽬を惹き付けることができます。 その中で写真の選び⽅はいくつかあり、ポイントを絞って学んでいきましょう。 1. 使い古された写真は使⽤しない 近年、無料の商⽤写真や有料ストックフォトで簡単に⼿に⼊るようになりました。 広告に出稿しているLPでは同じような写真がどこにでもあり、⼈物のなど差別化が厳しくなってきました。 それが毎⽇更新しているブログならまだしも、商品・サービスの顔として⼀番⽬⽴つキービジュアルである場合、ブランドイメージ を低下させることにもなりかねません。 なのでウェブサイトに載せる写真をストック画像から選ぶ場合は、最新のストックから探すようにしましょう。3年以上前の写真では 現在のトレンドや⼈物の雰囲気が古臭いものが多いです。 また、⼈気のストックフォトモデルも多くの他社が使⽤している可能性がありますので注意してください。

Slide 65

Slide 65 text

Chapter 05 01【選び⽅】⽬的で学ぶ写真の選び⽅ 写真素材の効果的な使い⽅ 最初に⾔った通り、LPに載せる写真はデザインの⼀部となり、素材⼀つで印象を変えてしまいます。 2. 商材・ターゲットと合う写真を選ぶ 写真素材はイメージを伝えるうえでとても重要な要素です。 これをはき違え、男性向けコスメティック商品なのに⼥性の綺麗なモデルの写真が商品を持っていても、使⽤している⾃分⾃⾝にあまり 実感が湧かないですよね？ ⾷品の商材も同じです。⽢くて、ジュ―シーで真っ⾚な美味しいリンゴをLPで売りたいのに農家のおじさんがリンゴの⽊を世話してい る画像だと意味がないですよね？ これらのように商材やターゲットに合わせて画像を選ぶことはかなり重要な作業になり、商材と写真素材がマッチングすればユーザーに とって信頼感があり、ダイレクトに商品の魅⼒や特⻑を伝えてくれる役⽬を果たします。 リンゴの美味しさやみずみずしさに着⽬した写真 農家の⽅がリンゴを世話している写真

Slide 66

Slide 66 text

Chapter 05 01【選び⽅】⽬的で学ぶ写真の選び⽅ 写真素材の効果的な使い⽅ 3. オリジナル写真を撮影・使⽤する 古い写真の部分でもお伝えしましたが、今の時代インターネット上には無料の商⽤写真や有料ストックフォトが⼭のようにあります。 その場合には独⾃でオリジナルの写真を撮影しましょう。 実際に働いている場所や、スタッフの写真を置くことで、ユーザーに親近感を与えることができます。ちなみにプロに頼む費⽤がな かったり、⾼価な⼀眼カメラがなくても、iPhoneなどの⾼画質カメラを搭載したでデバイスでの撮影でも撮影可能です。 プロに撮影していただいた写真素材 iPhoneで撮影した写真素材 最初に⾔った通り、LPに載せる写真はデザインの⼀部となり、素材⼀つで印象を変えてしまいます。

Slide 67

Slide 67 text

Chapter 05 01【選び⽅】⽬的で学ぶ写真の選び⽅ 写真素材の効果的な使い⽅ 4.メッセージ性の強い写真を選ぶ メッセージ性の強い写真は、⼀⽬⾒ただけで、このサイトは何を⾔いたいのかがわかります。写真から伝わるメッ セージに惹き付けられたユーザーは、つい⽂章まで読みたくなるものです。 たとえば、顧客が⾃社商品やサービスを⼿にしている写真を使うのもいいでしょう。 そのような写真を⽤いることで、⾃社商品がこんなにすばらしい結果をもたらすということをイメージで伝えるこ とができます。 最初に⾔った通り、LPに載せる写真はデザインの⼀部となり、素材⼀つで印象を変えてしまいます。

Slide 68

Slide 68 text

Chapter 05 02【画像優位性】記憶に残る画像優位性とモンタージュ理論・クレショフ効果 写真素材の効果的な使い⽅ 情報は、どのような⾔葉よりも写真や図版のほうがより伝わり、また認識されやすい傾向にあります。これを「画像優位性効果」といい ます。 ⼀例として商品カタログを挙げると、⽂章でどれほど詳しく商品を説明しても、それだけで購⼊に踏み切る⼈は少ないのですが、そこに 商品画像が加わることで情報は最⼤限に活かすことができるため、より⼀層、購⼊へ働きかけることができます。 【⽂章だけで説明された商品説明】 【写真を載せた商品説明】

Slide 69

Slide 69 text

Chapter 05 02【画像優位性】記憶に残る画像優位性とモンタージュ理論・クレショフ効果 写真素材の効果的な使い⽅ モンタージュ理論とは モンタージュ理論とは、複数の映像をつなげることによって、後ろの映像は前の映像の影響を受けて新しい意味が現れることを⽰した理論です。 写真が読み⼿に与える印象は、1枚の写真でもある程度決定されますが、同⼀紙⾯上に複数の写真を掲載する場合は、写真の組み合わせ⽅やサイズ、 配置⽅法などによって印象が⼤きく変わります。 モンタージュとは、フランス語で「組み合わせる」「組み⽴てる」という意味です。さまざまなカット（写真）の組み合わせで、多様な意味合い を⽣じさせる技法です。 写真とテキストで流れを説明している イラストを組み合わせて⼀⽬でわかるように伝える

Slide 70

Slide 70 text

Chapter 05 02【画像優位性】記憶に残る画像優位性とモンタージュ理論・クレショフ効果 写真素材の効果的な使い⽅ 旧ソ連の映画作家レフ・クレショフ⽒が提唱した認知バイアスです。 同じ画像でも、前後関係が変わるだけで⾒る⼈が受けとる印象が変わる、というものです。参考画像の場合A、B、Cいずれも左側 が男性ですが、Aでは家族を考えている情景、Bは⼥性のことを考えている情景に、Cは空腹を感じでいるように⾒えます。 画像の組み合わせ、配置場所を⼯夫することで伝えたいイメージをより鮮明にし、印象的にすることができます。 A. 男性 × 家族 B. 男性 × ⼥性 C. 男性 × ピザ クレショフ効果とは

Slide 71

Slide 71 text

Chapter 05 02【画像優位性】記憶に残る画像優位性とモンタージュ理論・クレショフ効果 写真素材の効果的な使い⽅ 旧ソ連の映画作家レフ・クレショフ⽒が提唱した認知バイアスです。 同じ画像でも、前後関係が変わるだけで⾒る⼈が受けとる印象が変わる、というものです。参考画像の場合A、B、Cいずれも左側 が男性ですが、Aでは家族を考えている情景、Bは⼥性のことを考えている情景に、Cは空腹を感じでいるように⾒えます。 画像の組み合わせ、配置場所を⼯夫することで伝えたいイメージをより鮮明にし、印象的にすることができます。 クレショフ効果とは ⼥性の髪の艶やかさにフォーカスを置いたデザイン 商品の成分にフォーカスを置いた写真

Slide 72

Slide 72 text

Chapter 05 03【トリミング】写真のトリミングで情報を的確にわかりやすく伝える 写真素材の効果的な使い⽅ トリミングとは、写真の不要な部分を削除したり、写真に含まれる情報を整理する作業のことです。同じ写真であっても、トリミング次第で読 み⼿に与える印象は⼤きく変わります。 そのため、デザイン制作時は、制作物の内容や⽬的に応じて、写真のどの部分に焦点を置くかを決めたうえで、適切にトリミングすることが求 められます。 同じ写真であっても、どの部分をトリミングするかによって、ユーザーに伝える印象や与える情報は変わっていきます。なのでデザインの内 容・⽬的にあったトリミングをすることが重要です。 【⼣⽅の公園と家族】を映した写真 【⼣⽅の公園を歩く家族】を映した写真

Slide 73

Slide 73 text

Chapter 05 03【トリミング】写真のトリミングで情報を的確にわかりやすく伝える 写真素材の効果的な使い⽅ スペースを開ける 普通の写真などでは真ん中にレイアウトを組んだりして、写真を撮影することがあると思いますが、LPの場合にはあえて構図をずらしたレイアウト にしてユーザーの⽬線をコピーに向けることが⼤事です。 これは被写体を写真の中⼼からずらしてトリミングすることで、 空間に意味を持たせることができます。 例えば、⼈物が横を向いた写真のように、被写体に⽅向性がある場合は、被写体の視線の先に空間を設けることでユーザーの視線をコピーなどに誘 導することができ、印象を与えることができます。 逆に背後に空間を設けることで「過去」を思い出しているような印象を与えることができます。 コピーを背にした写真レイアウト 視線の先にコピーがあるレイアウト

Slide 74

Slide 74 text

Chapter 05 04【⼈の写真】顔で認識させる写真の配置⽅法 写真素材の効果的な使い⽅ テレビでも交通系でも広告関係にはよく、⼈物写真が使われていることを⽬にすると思います。 ⼈の脳には「顔反応性細胞（顔細胞）」と呼ばれる神経細胞の領域があり、これにより⼈の顔に強く反応します。例えば、3つの点が逆三⾓形の形 に配された図形「∵」を“顔”として認識します。 これは、よく天井の壁のシミや⼼霊写真なんかでも顔に⾒えたりすることがありますがこの⼼理現象が働いて起こしています。 それゆえ、LPでのキービジュアルでは、瞬間的に認識してもらうことが重要となってくるため、認知作⽤の⾼い⼈物の顔が使われるケースが多い のです。 下記の例は2種類の顔の⽬線を配置したレイアウトになります。 視線の違いによる印象の与え⽅ 視線を正⾯に向けたレイアウト 視線をコピーに向けたレイアウト

Slide 75

Slide 75 text

Chapter 06 デザインの基礎を活⽤した ランディングページデザインの作り⽅ ランディングページ制作では、あらゆる作業⼯程を1ペー ジに凝縮する必要があります。 外から⾒れば、なぜたった1ページにそこまで⼿間と時間をかけるのかと思われるかもしれません。しかし、反対に 1ページしかないからこそ、さまざまな ⾓度からしっかりと作り込む必要があるのです。 今まで学んできたデザインの基礎や応⽤を加え、さらに市場の状況を読むマーケティング⼒、エンドユーザーのUX までを想像するクリエイティブ⼒、表⽰速度を⾼め、運⽤広告との相互性を意識したコーディングなどの技術⼒や 技術的な側⾯の理解など、多様な専⾨性が問われます。 そのため基本的には、複数⼈のチームでランディングページを制作することになります。またチームで制作を⾏う 場合は、そのチームを1つにまとめて進めていくディレクション⼒も必要です。 今後は総合的な能⼒が必要ですが、ここでは学んできたことを活かし、最後にランディングページを実際に制作し ていきましょう！

Slide 76

Slide 76 text

Chapter 06 01 ランディンページのポジション・制作意図 構成をもとにしたランディングページデザインの作り⽅ 今⽇、インターネットで検索すれば、ランディングページ の作り⽅に関する記事が膨⼤にgoogleから拝⾒できると思います。 私も情報収拾の⼀ 環としてチェックすることがありますが、そうした記事で謳わ れる⼩⼿先のテクニックだけで、よいランディングベージが 制作 できるとは思いません。 よいランディングページを制作するには、商材やター ゲットによってデザインの選定をして、広告⾃体のエンゲージメント効果を⾼めなければな りません。 ではどのようにして、制作していくのか再度おさらいしましょう。 ⼀般的なホームページサイトマップ

Slide 77

Slide 77 text

≈ Chapter 06 01 ランディンページのポジション・制作意図 構成をもとにしたランディングページデザインの作り⽅ オーガニック検索 運⽤広告（SNS・GA・YSS） ⾃社HP リード獲得⽤LP 研修サービスLP FB広告⽤LP その他のLP SEO対策LP SNS広告⽤LP 資料DL⽤LP 記事広告LP

Slide 78

Slide 78 text

≈ Chapter 06 02 【トーン＆マナー】参考サイトを使⽤したトンマナの選定 構成をもとにしたランディングページデザインの作り⽅ ランディングページを制作する場合は、どういう⼈に、何を訴求し、どんな⾏動を起こさせるためなのかを決めておく必要があります。つまり差 別化・強みを活かすために設計することが⼤事なのです。 競合サイトを⾒る際にとくに意識しておいたほうがよい点は、参考ページの対象ユーザーが近いかどうか、どういう情報をどんな順番で盛り込ん でいるか、デザインは何⾊を使っていて、どのような⼈物（性別・年齢・恰好）のモデルをしようしているのかなどです。また、訴求内容につい ても同様に確認し、競合と内容が同じではないか確認しましょう。この⽅法で5サイト以上ピックアップして要点を書きだすと、強みやメリットが 明らかになります。 ランディングページで調べると多くのLP制作の広告が出稿されている

Slide 79

Slide 79 text

≈ Chapter 06 03【ワイヤーフレーム】構成・ワイヤーフレームからの作成⼿順 構成をもとにしたランディングページデザインの作り⽅ 構成→デザイン ワイヤーフレームとは情報設計を表現するために作成するもので あり、ランディングページの⾻組みとなります。これをおろそか にすると、決してクオリティが⾼く、効果の出るランディング ページは作れません。 それでは、どのようにして情報設計をまとめるのか？ ランディングページの場合には膨⼤なサイトマップやページ情報 は必要なく、前のポイントでお話したように、商材やサービスの 情報をまとめて、どの強みをお押し出して訴求していくのかが重 要になります。 またここで、注意してほしいのがワイヤーフレームにデザインを 求めてしまうことです。 ワイヤーフレームはあくまで⾻組みであり、デザインを求めすぎ てはいけません。（⾊付けや丁寧な作りこみなど）

Slide 80

Slide 80 text

≈ Chapter 06 04【ファーストビュー】ユーザー離脱3秒前、顧客をファーストビューでつかむ！ 構成をもとにしたランディングページデザインの作り⽅ ファーストビューとは、ユーザーがランディングページを訪れた際に最初に⾒る画⾯のことで、スクロールせずに表⽰ される画⾯範囲です。ファーストビューはほぼ 100% のユーザーに⾒られるため、ファーストビューの良し悪しによっ てスクロール 率や離脱率が⼤きく変わります。 また、ユーザーに⼼理的な購買動機として、ウェブで例えるとそのページをスクロールするか離脱するかは3秒で決まる とも⾔われています。 ですので、ファーストビューのインパクトやUIを改善すれば、⾃ずと下のコンテンツ部分を⾒てもらえる確率が⾼まり、 結果的にコンバージョン数にも影響してきます。そのため、ランディングページにおいてもっとも影響度が⾼い要素で あり、⾼いデザイン能⼒とマーケティングスキルが課題になります。 読まない 信じない 買わない

Slide 81

Slide 81 text

≈ Chapter 06 04【ファーストビュー】ユーザー離脱3秒前、顧客をファーストビューでつかむ！ 構成をもとにしたランディングページデザインの作り⽅ LOGO アイキャッチコピー サブキャッチコピー αʔϏε ϝιου αʔϏε ϝιου αʔϏε ϝιου オファーコピー or リードコピー 0120-000-000 受付時間 9:00〜18:00 お電話での受け付けはこちら メールでの受け付けはこちら 無料でご相談はこちら サービス画⾯・⼈物 1. 商材写真・モデル・サービス背景 2. キャッチコピー 3. リードコピー 4. メソッド・ビックプロミス 5. お問い合わせボタン・電話番号・ロゴ ファーストビューの構成要素 ファーストビューでの基本的な構成要素以下になります。

Slide 82

Slide 82 text

Chapter 06 05【コンテンツ】コンテンツパートは詳しく丁寧に情報をまとめる！ 構成をもとにしたランディングページデザインの作り⽅ ユーザーに詳しく伝えようとすればするほど、情報の要素数は増えていき、限られた占有⾯積の中でのレイアウトは難しくなっていきます。 できるだけ多くの情報を伝えようとするあまり、ユーザーがどこを⾒てよいのか判断がつかないレイアウトになってしまうことも、決して珍 しくはありません。 情報要素を増やす場合、“何か別の情報要素を減らす“、またはレイアウトを変更して、“ユーザーに伝わりやすくする“と いう⼿段が必要になります。 レイアウトを考慮して、情報設計する