ランディングページの作成方法（Photoshop利用）
新人デザイナーや、異業種転職組の方が、いきなりランディングページを作ってと言われた場合
どういう手順でランディングページを作っていけばいいかを考えました。
まずは「真似る」という技術で、早く完成へと導きます。
これを嫌がるや苦手の方がおられますが、おそらく「オリジナリティがないのでは」との不安です。
どんな剣豪も、どんなデザイナーも、まずは真似ることからスタートするのです。
会社にマニュアルがあるように、デザインは真似ることでレベルが上がります。
真似るために必要な考えは以下の通りです。
- 今あるランディングページってどんなもの？
- マネをしながら作る工程ってどうやるの？
この２点を解決しながらランディングページ作成を解説していきます。
「今あるランディングページってどんなもの？」を調べる
まず、効率よくランディングページをみるためにGoogle検索などで「ランディングページ サンプル」を検索します。
※検索ワードを入れるのが面倒な方は上記の、検索ワードをクリックして下さい。
「マネをしながら作る工程」とは
ランディングページを見にいき、次にそれをキャプチャーします。
通常のキャプチャーボタンだと見えているところだけがキャプチャーされるので、
Googleの拡張などのキャプチャー機能を利用します。
Full Page Screen Capture
https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl
キャプチャーするためのボタンが現れるので、それをランディングページで押すことで
ランディングページを１枚の画像（jpegかpng）にします。
次にPhotoshopでその画像を開き、レイヤーが「背景」となっているので、「レイヤー」に変えます。
そうすることで、レイヤーの順番を入れ替えることができますよ。
その上に「新規レイヤー」を作り、なるべく、「レイアウト」「フォント」「ホワイトスペース」「大きさ」を
同じで作成し、画像の中身、テキストの中身だけを変更して作成します。
ここでいつも指導していて生徒に必ず途中で指導していることを伝えます。
- フォントの種類が違っている、大きさが違っている、字間が違っている、行間が違っている
- レイアウトが左や右、真ん中にそろっていない、ガイド使ってますか？
- 色味が違う、この見本の写真とこの今回置いた写真の違いは何ですか？
マネをすることは結構難しいです。ですが、これが必ずデザイン力を早く身につける方法だと思っています。
レッスンでも試しにやってみましょう。
