PowerPoint で作るオリジナルＬＰ講座 Copyright (C) 2014 ナオト All Rights Reserved. LP テンプレートをダウンロードする今回使用する LP テンプレートはワードプレス上で使用するもので無料配布されている「LP テンプレートクリエイティブパック【ライト版】」というテンプレートを使用します。こちらのテンプレートは現在、インフォトップで、LP テンプレートとして販売されている「Colorful」の販売者である江藤誠哉さんという方が作成されたものです。 LP テンプレートクリエイティブパック【ライト版】は下記 URL から請求できます。 http://iltusano.xsrv.jp/report/LPtemp_free.pdf メールアドレスと名前を入力して請求します。入力したメールアドレスにメールが届きますので、そのメールの指示に従って、テンプレートを受けとっておきましょう。テンプレートを受け取ったら、ワードプレスへの導入の仕方など、基本的な使用方法が動画で説明してありますので、一通り見ておきましょう。 Copyright (C) 2014 ナオト All Rights Reserved. ヘッダー画像を作成するテンプレートをダウンロードして、ワードプレスに導入させることができたら、さっそく、LP の最重要項目でもある、ヘッダー画像を作成していきましょう！今回は、僕がヘッダー画像を作成する際に使っているソフトである、「Microsoft PowerPoint 2010」と「Microsoft Office Picture Manager」を使用していきます。基本的に、最近の Windows（windows７など）をお使いの方なら標準でインストールされている、もしくはインストール CD があると思います。なので、MAC をお使いの方は、申し訳ないですが、お力になれません。m(＿＿)m ※ここから先は、上記ソフトありきで話を進めていきますので、ソフトがない、もしくは用意できない！という場合は、読んでも、あなたの時間を無駄にする可能性がありますので、このレポートを閉じるなり、捨てるなり、燃やすなりして、ご対応ください。パワーポイントで作るヘッダー画像は以下の工程で作成します。（１）背景画像を用意する（２）文字を入力したり、画像をいれたりする（３）画像として保存して、余白を切り取る（４） LP に反映させる今回は、僕が過去に作った LP のヘッダーを例に説明していきます。 Copyright (C) 2014 ナオト All Rights Reserved. （１）背景画像を用意する読んで字の如くです。ご自分が作りたい LP のイメージに合った、ヘッダーの背景画像をフリー素材サイトなどからダウンロードして、用意しておきます。例の場合だと旅行をイメージできる、南国っぽい写真を選択しました。元画像はこちらです。↓ まず、これをパワーポイントで読み込みます。パワーポイントを開き、上の挿入タブから「図」をクリックすると、ファイルを開く画面がでてくるので、用意した背景画像を選択します。画像を読み込んでくれます。 Copyright (C) 2014 ナオト All Rights Reserved. このままだと小さく、編集しにくいので、ヘッダー画像っぽく、横長に引き延ばします。画像をクリック⇒横の点をクリックしながら、ドラッグすると、画像サイズを変更できます。（画像は右下の点をクリックしながら、ドラッグしています。）別に適当な長さでいいです。上の点や下の点をクリックしながらドラッグすると、縦の長さを変えられるので、バランスを見て、お好みの長さにご変更ください。とりあえずこんな感じに横長になりました。 Copyright (C) 2014 ナオト All Rights Reserved. （２）文字を入力したり、画像を入れたりするヘッダーの背景画像を読み込むことができたので、次は、文字や画像を入れていきます。ですが、現在の状態だと、文字を入れても、背景画像の色が強すぎて、文字が見にくくなる可能性があるので少し背景画像をいじります。（ご自分の背景画像の色を見て、やるかどうかを判断してください。）画像をダブルクリックもしくは、画像をクリックして、上の書式タブをクリックします。画像を編集できるメニューがでてくるので、左上の【修正】【色】【アート効果】のいずれかを使えば、色を編集できるので、文字が見やすいように編集してあげます。今回は、【修正】の明るさ＋４０％、コンストラスト＋４０％でやってみました。他にもいろいろ編集できるので、是非試してみてくださいね。 Copyright (C) 2014 ナオト All Rights Reserved. 文字を入力していきます。挿入タブからテキストボックスの横書きテキストボックスを選択して、適当にクリックしてドラッグして離すと、テキストボックスができます。とりあえず文字を入力して、サイズを大きくしてみます。ただの黒文字だけだとなんか素っ気ない感じがしますね。書式タブにある、【文字の塗りつぶし】【文字の輪郭】【文字の効果】ホームタブにある、【フォント】【フォントサイズ】【文字の間隔】【フォントの色】などを使って文字を装飾していきます。 Copyright (C) 2014 ナオト All Rights Reserved. 書式タブホームタブ面倒であれば、あらかじめ、パワーポイントで用意されている装飾を使うこともできます。こんな感じのものが出来上がりました。強調したい文字を大きくしたり、色を変えたりするとメリハリがでるので、やってみてください。（装飾したい文字を個別でドラッグして選択するとできます。） Copyright (C) 2014 ナオト All Rights Reserved. ちなみに、文字をクリックしたときにでてくる、緑の丸いやつはクリックしたまま、左右に動かすと、文字を回転させることができます。（画像も同様です。）斜めにするなどして、文字に動きを出させたいときに有効です。次は画像を挿入してみます。この画像を先ほど文字を入れたヘッダー画像に挿入してみます。挿入タブから画像を挿入します。とりあえず挿入してみましたが、若干浮き気味ですね。（笑） Copyright (C) 2014 ナオト All Rights Reserved. 写真風に加工して、馴染ませてみましょう。まず、該当の画像をダブルクリックもしくはクリックして、書式タブを開き、編集メニューを開きます。図の枠線を選択して、色は白、太さは２．２５ｐｔを選びます。（太さはお好みで構いません。）画像に白い枠線ができるので、次は図の効果から影を選択して、その中のオフセット（中央）を選択します。 Copyright (C) 2014 ナオト All Rights Reserved. なんで影を付けるの？って思うかもしれませんが、白い枠線だけだと、背景に白があった場合、同化して、違和感が出てしまうからです。こんな感じになりました。さっきよりはマシですかね？？表現は自由ですので、お好きな表現方法をお使いください。パワーポイントのほうでも標準で画像を加工できるシステムがありますので、いろいろ試してみてください。 Copyright (C) 2014 ナオト All Rights Reserved. 挿入した文字や画像の位置を調整して、ヘッダー画像を完成させます。（３）画像として保存して、余白を切り取るヘッダー画像が完成したら、完成させたヘッダー画像を画像として保存するために、ヘッダー画像のパーツを全部囲うようにドラッグして選択します。 Copyright (C) 2014 ナオト All Rights Reserved. パーツが全部選択されるので、そこで右クリックをして「図として保存」をクリックして、任意の場所に画像を保存します。、保存先を確認して、ヘッダー画像がちゃんと保存されていることを確認します。 Copyright (C) 2014 ナオト All Rights Reserved. 保存されていることが確認できたら、やったー！ヘッダーできたあ！と思って、そのまま使いたくなりますが、ここでもうひと手間かけます。実はパワーポイントで保存した画像は何故か「謎の余白」ができてしまうのです。なので、この「謎の余白」部分を取り除いてあげます。謎の余白を取り除くソフトが冒頭で紹介した「Microsoft Office Picture Manager」を使用していきます。「Microsoft PowerPoint 2010」を使っているのであれば、一緒に入っていると思います。「Microsoft Office Picture Manager」を開きます。 Copyright (C) 2014 ナオト All Rights Reserved. 開いたら、右上のファイルから「画像のへのショートカットを追加」を選択すると、フォルダを選択する画面になるので、ヘッダー画像を保存しているフォルダを選択します。フォルダを選択すると、保存されている画像がでてくるので、先ほど保存したヘッダー画像をダブルクリックすると画像がでてきます。 Copyright (C) 2014 ナオト All Rights Reserved. 右か上に「画像の編集」があるのでそこをクリックすると編集メニューがでてくるので、その中の「トリミング」を選択するとトリミングの画面になります。画像の端とトリミングの黒い線の間に余白がありますがこれがパワーポイントで画像を保存したときにでる、「謎の余白」です。この部分をトリミングで削ります。トリミングの黒い線を画像の端に合わせます。合わせたら右のメニューにある「OK」をクリックします。 Copyright (C) 2014 ナオト All Rights Reserved. 「OK」をクリックすると、トリミングが反映されるので、保存を行うために、左上のファイルから、「上書き保存」もしくは「名前を付けて保存」で保存を行います。保存した後は、ちゃんと保存されているか確認しておきましょう。（４） LP に反映させる完成させたヘッダー画像を LP に反映させます。冒頭で紹介した、LP テンプレートを導入してあるワードプレスで固定ページの新規作成画面を開きます。 Copyright (C) 2014 ナオト All Rights Reserved. 「メディアを追加」をクリックして、「ファイルをアップロード」を選択し、作成したヘッダー画像をアップロードします。パワーポイントで作成した画像はやたらとサイズがでかいので、「画像を編集」をクリックします。横幅のサイズをテンプレートの最大である 960 もしくはそれ以下に設定して、縮尺変更を行います。縮尺変更後、戻るをクリックして、元の画面に戻ったら、固定ページにヘッダー画像を挿入してみましょう。プレビューで問題なく表示されていれば、OK です。以上でヘッダー画像作成は終了です。 Copyright (C) 2014 ナオト All Rights Reserved. サブヘッド、本文をパワーポイントで作成するヘッダー画像を作成して、サブヘッド、本文などは、ワードプレスで直接書き込んで、メルマガのフォームを貼っちゃえば、 LP は完成です。ですが、ワードプレス単体だと、使えるフォントにも制限があるので、サブヘッド、本文も、基本的に、ヘッダー画像を作成した時と同じ要領でパワーポイントで作成することができます。例えば、直接ワードプレスで書いた、こんなサブヘッドがあったとして、パワーポイントで作成すると、フォントを変えて、反射を付けてみました。なんだか後者のほうがすごそうに見えませんか？・・・感じ方は人それぞれだと思いますが、とりあえず、作成方法を解説していきます。 Copyright (C) 2014 ナオト All Rights Reserved. まず、テキストボックスで、サブヘッドを書いて、自分好みの装飾を施します。（このとき中央揃えで作成したほうが後々やりやすいと思います。）このまま右クリックで画像として保存できますが、こんな感じで同じ LP のサブヘッドを何個も作成してしまうと、ワードプレスで縮尺変更した際、文字数によって、サイズ感がバラバラになってしまいますので、統一感を出すためにも、下地を作成します。下地を作成するために、挿入タブから、図形を選択して、その中から、【正方形／長方形】を選び、書いた文字より大きめに作成します。 Copyright (C) 2014 ナオト All Rights Reserved. 下地を書いた文字の下に潜りこませたいので、できた図形をダブルクリックして、書式タブを開き、図形の塗りつぶしから、色は白を選択して、文字の上に被せます。同じく、書式タブの右あたりに、背面へ移動とあるので、そこをクリックしていくと、さきほど作成したサブヘッドが上にきます。下地の中心に、文字を移動できたら、下地の枠線を線なし、もしくは白にして、枠線を見えなくします。（ドラッグして、選択すると、両方の中心点が見えるのでそれを目安にするとやりやすいです。）あとは、右クリックをして、保存して、ヘッダー画像と同じように、「Microsoft Office Picture Manager」を使って、「謎の余白」を取り除きます。サイズもヘッダー画像と同じく、やたらサイズがでかいので、サブヘッドは横幅を 800～900 に変換するといい感じです。 Copyright (C) 2014 ナオト All Rights Reserved. 一個、パワーポイントでサブヘッドを作ってしまえば、あとはそれをコピペして、中の文字を変えればサブヘッドを量産できます。注意したいのが、下地はセットでコピーしたいのと、一度基準の下地を作ったら、その横幅を変えないことです。縦幅は、１行は１行の縦幅、２行は２行の縦幅と、行ごとに縦幅は統一されていれば問題ありません。縦幅は行ごとで統一横幅は統一 Copyright (C) 2014 ナオト All Rights Reserved. 本文をパワーポイントで作成する方法ですが、こちらに関しても、基本的に作り方としては、サブヘッドとほぼ同じです。（横幅、文字の位置などを統一します。）大き目の下地を作り、その上に文字や画像を載せていくイメージです。画像（下地エリアならどこに置いても OK）下地エリアテキストボックスエリアちなみに、スライド内に収まらず、はみ出ても、全然問題ありません。ただ、あまりにも長いと、画像として保存したときに、うまく保存できません。はみ出ても大丈夫。サブヘッド、本文については、以上です。 Copyright (C) 2014 ナオト All Rights Reserved. メルマガフォームの登録ボタンを画像にするメルマガフォームを設置する方法は、 LP のテンプレート配布サイトで解説してあります。テンプレートの解説サイト通りにメルマガフォームを設置すると、こんな感じで、安っぽいというか、なんか質素な感じのボタンになります。これだと少し寂しいので、自作したボタン画像をメルマガフォームのボタンに設定する方法を解説していきます。（エキスパートメールを例に解説していきます。）まず、ボタン画像を素材サイトからもってくるか、自分で自作するかで、用意します。今回は、この画像をボタンとして使います。 Copyright (C) 2014 ナオト All Rights Reserved. ボタン画像が用意できたら、ワードプレス上にアップロードして、ちょうどいいサイズに縮尺を変更しておきます。今回使うボタンは、元のサイズの横幅が、541 もあったので、 270 に変更して使用します。変更できたら、URL の部分をコピーして、メモ帳かなんかに貼っておきます。コピーしておくワードプレスのビジュアルではなく、テキスト画面を開き、メルマガフォームを編集します。メルマガフォームの最後あたりに <input type="submit" name="submit" value=" 登録 " /> という記述がありますので、それを <input name="submit" src="画像の URL" type="image" value=" 登録 " /> に変更します。画像の URL というのは先ほどメモ帳にコピーしたボタンの画像の URL です。 Copyright (C) 2014 ナオト All Rights Reserved. 成功していれば、登録ボタンが、用意された画像に変更されます。メルマガフォームのボタンについては以上です。まとめここまで書いてあったことを繰り返せば、オリジナルの LP が完成すると思います。基本的に流れとしては、パワーポイントで画像作る⇒謎の余白を取る⇒ワードプレスにアップロード ⇒サイズ調整⇒LP に設置これだけです。是非自分が納得できるような LP を作ってみてくださいね！あたりまえですが、別にここに書いてあることが絶対！というわけではないので、自由に作っていきましょう！参考用に、僕が作った LP 載せておきます。サンプルページなんにしても、試行錯誤は必要です。分からないからできないではなく、やるから分かるようになるのです。ご自分でいろいろ試してみてくださいね！ Copyright (C) 2014 ナオト All Rights Reserved.