ランディングページを作成
だいぶ、更新できてなくて済みません。
ランディングページ制作の続きを書いていきます！
ではでは、作成の手順です。
1、販売する商品を確認します。
2、テキストを作成します。
（私の場合、メディアに取り上げて貰う為に練り込んだ内容のテキストを書く人がいるので、そのテキストを頂いて、LPを作っています。）
↑
この部分が、非常に大切なので、
このテキストがしっかりできている事がとても重要。
3、そのテキストを、LP用に組み替えていきます。
テキスト → マーケティング力
LP作成 → クリエイティブ力
が問われると言った感じでしょうか。
LPの構成
1、ファーストビュー（ヘッダー）
2、商品を使用してどんな良い事があるか。特徴。
3、ユーザーの悩み
4、解決の要素、商品の価値を掘りさげて伝える
5、ユーザーレビュー
6、利用にあたってのサポート
7、商品の内容、仕様、サイズ
8、商品画像
私の場合、使っているソフトは、Photoshopのみです。
スマホ、パソコン、タブレットのデバイスがありますが
1パターンで全部に対応するように作成しています。
丁寧な会社だと、パソコン用、スマホ用に2パターン作成しているようですが
直しが入った時など、大変な作業になるので、1パターンで作成しています。
最近ではレスポンシブWebデザインが広がり、定着しつつあります。しかし、
LPもレスポンシブWebデザインにして良いかどうか… （色々問題があります。）
LPは縦長の1ページで飽きさせないコンテンツの設計が必要な為、シンプルなレイアウト設計とテキストボリュームが必要なレスポンシブWebデザインにしてしまうと、デザイン上の制約が生じてしまいます。デザインの自由度が下がるということは、訴求力低下にもつながってしまいます。
なので、従来のPhotoshopで、自由に作成し、縦長の1ページになるようにデザインも
固定された画像に仕上げています。
(とは言っても、illustratorとPhotoshopしか使えないので、これからレスポンシブWebデザインを勉強してみたいなーと思っているところです。)
幅は1200px、高さも1200pxで、正方形画像を15枚〜25枚作成し、Amazonや、楽天、Yahooショッピングのスライド画像にも対応する様に作成しています。
それを、コーディングで縦に長く繋げて、縦長のランディングページを作成しています。
モバイルファースト
最近は、ネットアクセスの大半はスマホです。よって、最初からスマホ前提で作成していきます。スマホで見た時に、文字がどれくらいまでのサイズなら、読めるかを調べておく必要があります。 幅が1200pxの画像の場合 文字サイズは一番小さくて38pt。私はなるべく48ptにしています。見出しは大体72ptぐらいの大きさにしています。
デザインは、直感で伝わるように、写真とイラストを使用し、わかりやすくデザインします。文字はなるべく少なくして削っていきます。文字が多いと、ユーザーは疲れてしまい、離脱する事が多くなります。
写真や、イメージ画像、イラストを使用
1、商品の写真を色々な角度から撮影。
2、フリー素材など、イメージしやすい写真を選びます。
ランディングページで1番大事なのは、ファーストビューです。
ファーストビューとは来訪時に一番最初に目に飛び込んでくる画像です。
自分に向けての情報かどうかを判断する、一番大切な画像になってきます。
ユーザーの第一印象を決めるので、時間をかけて作成しましょう。
私の場合は、ファーストビューから、作成します。
1枚で完結していて、ファーストビューのみで、どういった商品か
判断できるように全体のイメージをここで確定させていきます。
色のバランスも、ファーストビューを作成しながら、修正していくので、メインカラー、サブカラーコンバージョンカラー、フォントカラー、背景色、オブジェクトカラーを、ここで確定していきます。 ファーストビューの表現は、以下の内容が入ると良いでしょう。
＊商品画像、＊キャッチコピー、＊受賞歴、＊人物（笑顔）が入ると良いです。
シンプルで、わかりやすく、インパクトのある画像を作成するように心がけると良いでしょう。
そして、中身については、丁寧に分かりやすいように、作成していきます。
◯大特長！ のように、いくつかある時は、特徴を分かりやすく、数字で括っています。
着地してきたユーザーの悩みをいくつか書き出して、作り込んでいくと、自分の悩みがこれによって解決されるかも！と、イメージ出来るように工夫して作成します。 活用事例や、ユーザーレビューもダイブ参考にしているユーザーも多いので、いくつか載せてください。 最後は、サイズや仕様など、内容を細かく記述して、完成です。 画像加工は、うちの会社では、
PIXTA
AC
https://www.ac-illust.com/main/search_result.php?word=ai&yclid=YSS.1000030510.EAIaIQobChMI3Lu42b2n7AIVmE5gCh1itgVjEAAYASAAEgJDCPD_BwE
を使っていますが、他にも色々フリー素材は沢山あるので、また、別の機会に
紹介しようと思います。
あと、デザインについては、色々参考になるサイトがあるので、常に参考に勉強しておくと良いと思います。
Pinterest 等私はよく見ています。#LPデザイン #LP #デザイン #バナー 等、検索してみると良いでしょう。 かなり、勉強になります。
あとは、LPが完成したら、提出し、3〜5回程修正指示が入り修正をして、完成させていきます。
ざっとLPの作成についてでした。
まだまだ、勉強不足なので、私なりの拙い説明でしたが、
大丈夫でしたでしょうか。
次回は、何について書こうかな。
では、また。