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