スマートフォンサイトを表示する

  1. TOP
  2. ホームページのクオリティアップ術:制作編 : 第6回 セキュリティ(SSL)に対応したメールフォームを導入する

エキスパートコラム

ホームページのクオリティアップ術:制作編(全11回)

第6回:セキュリティ(SSL)に対応したメールフォームを導入する

執筆:赤間 公太郎(株式会社マジカルリミックス)

2015年9月28日更新

  • このエントリーをはてなブックマークに追加

閲覧数5,542views

このコラムをPDF形式でダウンロードする

"ホームページのクオリティアップ術:制作編"のコラムを担当する、マジカルリミックスの赤間です。全11回のこのコラムでは、ホームページづくりに役立つサービスやその利用方法をご紹介していきます。

便利な無料のWebサービスを活用して、効率よく質の高いホームページを目指しましょう。

前回のコラム「第5回:セキュリティ(SSL)に対応したショッピングカートを導入する」では、外部のショッピングカートをJimdoに取り入れて利用する方法を解説しました。登録商品数やセキュリティ面でのメリットがありました。今回は、Jimdoに「セキュリティ(SSL)に対応したメールフォーム」を導入する方法をご紹介します。

SSLとは
SSL(Secure Sockets Layer)とは、インターネット上で通信を暗号化する技術です。通常の通信では情報は暗号化されていません。クレジットカードのような機密情報や個人情報を扱う際に、SSLを利用してパソコンとサーバー間の通信データを暗号化することで、第三者によるデータの改ざんや盗聴を防ぐことができます。

Jimdoのメールフォームのメリット

今回のコラムでは「セキュリティ対応のメールフォーム」について解説するわけですが、Jimdoにはそもそもメールフォームの機能が実装されています。

SSLとは、先に説明したように情報を暗号化するための技術です。2015年9月現在、JimdoにはこのSSLは導入されておらず、情報を入力する際には暗号化はされません。

しかしながら、「暗号化されない=Jimdoのメールフォームはよくない」ということではありません。
そもそも、フォームに対してのSSL利用は特に制限や義務があるわけではなく、あくまで「配慮」の一環です。SSLがなくてもメールフォームは問題なく利用できますし、SSLのあり・なしによる機能の差もありません。

そして、Jimdoは日々改良や進化を行っているサービスであり、今後はSSLに対応する可能性も十分に考えられます。あくまで、2015年9月時点では利用できない、ということですので、そのような制限の中で、外部サービスとの連携もひとつの選択肢として有効である、という観点で解説していきます。

SSL対応のページは、アドレスバーにカギのアイコンなどが表示され、「https://」からURLがはじまる

Jimdoは一般的なホームページ作成に特化したシステムです。通常、問い合わせなどのフォームは、専門知識や送信するためのプログラムが必要ですが、Jimdoではそれらの面倒なことはいっさい考えずとも、フォームの作成や運用が可能です。

今後、ここにSSLの対応が加わればさらにすばらしいサービスになることでしょう。

Jimdoでは自由にメールフォームの項目を作成することができる

「フォームメーラー」をご紹介

フォームメーラーは、株式会社フューチャースピリッツが運営するメールフォームのASPサービスです。ユーザー登録をすれば、ものの数分でSSL・スマートフォンに対応したメールフォームを利用することができます。

ASPサービスとは
ASPはApplication Service Providerの頭文字をとったものです。メーカーや開発元などが、インターネットのソフトウェアを直接販売ではなく「利用する権利」として提供する形態をいいます。JimdoもASPサービスのジャンルに属します。

http://www.form-mailer.jp/

フォームメーラーには3つのプラン

フォームメーラーはFree版、Pro版、Business版の3パターンがあります。Jimdoのようなビジネスモデルですね。Free版は費用がかからず、気軽に始められますので、まずはこちらを試してみるとよいでしょう。

しかしながら、フリー版では入力できるフォームの個数や、フォームの設置数に限りがあります。自分の利用用途に合わせてプランを選択しましょう。

詳しくは[プラン一覧]にそれぞれの違いが詳しく掲載されている

フォームメーラーに登録してみよう

Free版の[新規ご利用登録]ボタンをクリックすると、メールアドレスの入力欄が表示されます。メールアドレスを入力し、個人情報と利用規約に同意し、[送信する]ボタンを押します。

この段階では、まだ仮登録の状態です。入力したメールアドレス宛に、受付のメールが届きますので確認しましょう。手順に従い本登録をします。

フォームの作成

フォームメーラーへの登録が完了し、ログインすると以下のような画面が表示されます。ページ右上にある緑のボタン[一般フォームを作成]をクリックして、作成画面を表示します。

新規作成時に、フォームに名前をつけて、説明を入力します。フォームメーラーはいくつもフォームを作成することができますので、用途別にわかりやすい名前をつけておくとよいでしょう。「テンプレート選択」では、よく利用するような項目があらかじめセットされた状態から作成することができます。

入力項目編集

フォームの項目を追加するには、画面左側の「基本セット」または「プリセット」の項目を、画面右側のエリアにドラッグ&ドロップします。名前や住所などのよく使う項目のほかにも、「テキストフィールド」や「チェックボックス」など、自由なフォームで構成が可能です。

環境設定

入力項目ができたら、環境設定を行います。ここでは、フォームの公開・非公開のコントロールのほか、スマートフォンや携帯電話への表示対応の設定を行います。

画面確認・デザイン変更

この画面では、フォームのデザインや、実際にページにどのような表示で適用されるのかを確認することができます。組み込むホームページになじむように、設定を整えましょう。

コード表示

フォームメーラーは、あくまでフォーム機能を提供する単体のサービスです。フォームを作成後は、ホームページからリンクを張ったり、ホームページに埋め込むなどの作業が必要です。コード表示は、Jimdoなどの外部のサービスと連携するための専用のコードを取得するためのページです。

外部のWebサイトに貼り付けするためのコードをコピー

コード表示画面で、ページ下部までスクロールすると「HTMLコード」が表示されています。

Jimdoのページに、一体化させて表示するには「<form>要素のみ」に切り替えて、表示されたコード部分をすべて選択し、コピーします。以上でフォームメーラー側で行う作業はすべて完了です。

Jimdoに埋め込む

Jimdoにコンテンツを追加の際、「・・・その他コンテンツ」という青いボタンがありますので、そこをクリックし隠されたメニューを表示させます。 そして、[</> ウィジェット / HTML]をクリックし項目を追加します。

入力エリアに、先ほどコピーしておいたコードを貼り付け[保存]ボタンをクリックします。

これで、メールフォームがJimdoに組み込まれました。

導入後は、問題なくメールフォームが可動しているかどうか、テストしてみましょう。ウィジェットは編集画面中ではうまく表示がされないことが多々ありますので、必ずプレビュー状態で確認します。

フォーム送信ボタンである[確認画面へ]ボタンをクリックすると、フォームメーラーのページへ移動します。アドレスバーの部分を確認してみると、このページがSSLで保護されていることがわかります。

まとめ

  • Jimdoのメールフォーム機能を使わずに、外部サービスと連携して展開することが可能
  • フォームメーラーは登録もカンタンで、ドラッグ&ドロップでフォームを作成する
  • Jimdoのウィジェット機能をつかうことにより、Jimdoとフォームメーラーの連携が実現
  • いずれJimdoもSSLに対応する可能性もあるため、さまざまな視点でサービスを活用する

次回は、「アイコンにこだわろう!お気に入りに表示される画像(ファビコン)を作成する方法 」をお伝えします。(つづく)

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売上アップをめざした更新サポートまで一貫して手がけている。
また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。

主な著書に『10日でSEO&アクセスアップ Jimdoデザインブック』(エムディエヌコーポレーション)『10日で作るかっこいいホームページ Jimdoデザインブック』(同)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。

[所属]
仙台商工会議所 エキスパートバンク登録/みやぎ産業振興機構 専門家アドバイザー/みやぎ工業会正会員

10日でSEO&アクセスアップ Jimdoデザインブック

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/3/12~2017/3/18]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!