ステップメールのアスメルを使ってメルマガを配信している方は多いですが、この記事ではアスメルの登録フォームをCSSジェネレータを使ってカスタマイズする方法と、確定ボタンを画像で置き換える方法を解説していきます。
アスメルと契約したけど、登録フォームの設置の仕方がよくわからないという方や、カスタマイズの方法がよくわからない、確定ボタンを自分で用意した画像にしたいんだけど…という方はぜひ参考にしてください！
アスマルの登録フォームを簡単にカスタマイズ！
まず、何もカスタマイズをしていない状態で、登録フォームがどのように表示されるのかを見てみましょう。
赤枠で囲った『HTMLソース』をクリックします。
そして、表示されたコードをコピーして、登録フォームを設置したい場所に貼り付けます。
今回はテスト用に作ったWordPressの固定ページに貼り付けたところ、こうなりました。
うーん、悪くはないけどなんか違う…（笑）
このフォームはコードをあれこれイジれば編集はできますが、なかなか初心者の方だと慣れない作業に手間取ってしまうことでしょう。
そこで活用をおすすめするのが、直感的な作業でお気に入りの登録フォームが自由自在に作れる『CSSジェネレータ』という機能です。
まず、アスメルの管理画面から『技術マニュアル』という項目を探し選択します。
技術マニュアルが開けたら、右の方にある『CSSジェネレータ』を選択してください。
すると、こんな画面に移るので、紫色の『CSSジェネレータ』というボタンをクリックして、カスタマイズ画面を開きましょう。
また、画面下にはCSSジェネレータの使い方が詳しく丁寧に解説されているので、基本的にはその通りに進めていけば問題ありません。
まずはこちらに、フォームを作りたいシナリオのナンバーを入力します。
シナリオNoとは、下の画像の赤枠で囲った部分に書かれている番号です。これを入力して、『スタート』をクリックすれば、選択したシナリオの登録フォームを作ることができます。
すると、このような画面が表示され、直感的に登録フォームをカスタマイズできるようになります。
上のタブをクリックすることで、設定箇所が切り替わり、全体の幅やテキストボックスの幅、背景色などのカスタマイズが可能です。
また数値や色などを変更した場合、変更後のビジュアルが、すぐ下にてプレビューとして表示されているので、自分の作業の結果としてどのように登録フォームが変わるのか一目で確認できます。
今回は例なので、変更したことがわかるように色を奇妙な感じにしてみました。
横幅やバランスも変わっていますね。
思い通りのフォームができたら、『CSSつきソースを生成』というボタンをクリックしましょう。
すると、2つのコードが同時に出てきます。
1つは『フォームのCSSここから』と『フォームのCSSここまで』という文章に挟まれたもの。
もう1つは『フォームここから』と『フォームここまで』という文章に挟まれたものです。
まず、『フォームのCSS』の方ですが、こちらはフォームを設置したいサイトのスタイルシートに貼り付けていきます。
WordPressで賢威を使っている場合は『design.css』に貼り付けます。（貼り付ける位置はどこでもいいので、一番下にでも貼っておくことをオススメします）
次に、『フォーム』の方ですが、こちらは実際に登録フォームを設置したい場所に、このコードを貼り付けていきます。（当サイトのように記事下に設置しておくと登録率は高くなります）
なお、そのままコピー&ペーストすると左に表示されている行数まで含まれてしまうので、必ず表示されたコードの右上辺りにカーソルを合わせると表示される『ソース表示』をクリックしてから、正しいソースをコピペしてください。
すると、先ほど作ったプレビュー画面と全く同じ登録フォームが表示されます。
なお、コード中にある『お名前』や『メールアドレス』のような文字は自分の好きな言葉に置き換えることが可能なので、お好みに応じて書き換えてください。
アスメル登録フォームの確定ボタンを画像化する方法
続いては、アスメルの登録フォームの確定ボタンを画像化する方法を解説していきます。
メールアドレスや名前など必要情報を記入した後にクリックすることでメルマガの登録が確定する『確定ボタン』ですが、初期状態のものはお世辞にも魅力的とは言えません（笑）
サイズもあまり大きくないですし、デザインも目立ちませんからね。確定ボタンのビジュアルによってメルマガの登録率にも影響が及ぶので、自分で確定ボタン用の画像を用意して、それと置き換えることをオススメします。
それでは、アスメルの確定ボタンを画像化する手順を説明していきます。
１．ボタン画像の素材を見つける
まずはボタン画像に使う素材を用意しましょう。（自分で作ってもいいです）
ボタン素材はボタンマルシェというサイトがオススメなので、よかったら活用してみてください。
２．ダウンロードした画像を編集する
落としてきたボタン画像素材に、好きな文章を入力するなど編集をしていきます。
僕はPhotoscapeというフリーソフトを使っています。
３．完成した画像をサイトにアップロードする
画像をサイトにアップロードしたら、URLを控えておきましょう。
４．フォームを書き換える
<input type="submit" name="submit" value="確定" class="formbtn" />
この部分を以下のように変更します。
<input type="image" src="画像のURL" name="submit" value="確定" class="formBtn" />
※『画像のURL』には先ほどアップロードした画像のURLを貼り付けてください。
そのまま、更新をすると全体的に左に寄ってしまうので、<center>フォームのURL</center>のように、センタリング（中央寄せ）を施したら、このようになります。
なお、確定ボタンの代わりに使った画像と、登録フォームの間のスペースが空きすぎていると感じた時は、生成したコードをバックスペースで改行を詰めて調整すると良い塩梅になります。
いかがでしたでしょうか。
好印象を持たれ、かつ目立つような登録フォームを作り、どんどんサイトからメルマガへの誘導をしていきましょう！
