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

  1. TOP
  2. ホームページのクオリティアップ術:制作編 : 第5回 セキュリティ(SSL)に対応したショッピングカートを導入する

エキスパートコラム

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

第5回:セキュリティ(SSL)に対応したショッピングカートを導入する

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

2015年8月24日更新

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

閲覧数4,267views

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

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

便利な無料のWebサービスを活用して、効率よく質の高いホームページを目指しましょう。
今回は、Jimdoに「セキュリティ(SSL)に対応したショッピングカート」をつける方法をご紹介します。

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

Jimdoのショッピングカートのメリット

今回のコラムでは「セキュリティ対応のショッピングカート」について解説するわけですが、Jimdoにはそもそもショッピングカートの機能が実装されています。

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

しかしながら、「暗号化されない=Jimdoのショッピングカートはよくない」ということではありません。
たとえば、クレジットカード決済をするときなどは、外部サービスのPayPalへ移動し、そのWebサイトの中で決済を行います。PayPalはSSLに対応していますので、重要な部分はしっかり保護されているといえます。

アドレスバーの部分を見てみると、カギのアイコンが表示されURLが「https://」からはじまっています。
この状態は、情報が暗号化されて通信されていることがわかります。

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

Jimdoは一般的なホームページ作成に特化したシステムです。ショッピングサイト専用のサービスに比べると、機能や設定の細かさではどうしても見劣りしてしまいますが、それでもホームページ、ブログ、ショッピングカートを総合的に扱えるツールとしては、なかなか優秀な部類に入るのではないでしょうか。

Jimdoのショッピングカートを利用するメリットとしては、このような「カート以外の部分」を中心として、バランスよくさまざまな機能を使えることにあります。専門的なカートシステムには及ばないものの、受注時のメール処理や在庫管理など、一通りのネットショッピング機能を備えています。

「まずは使ってみる」というライトな感覚で、始めてみるのもよいでしょう。

Jimdoではショッピングカート機能を利用して商品を販売することができる

ショッピングカート専用のサービスがぞくぞくと登場

最近では、Jimdoをはじめ、無料で便利なサービスがぞくぞくと登場しています。ショッピングカートに特化したWebサービスの代表格が、「STORES.jp」と「BASE」です。これ以外にもたくさんのサービスがあります。

今回はSTORES.jpをご紹介

STORES.jpは株式会社ブラケットが運営するオンラインストア作成サービスです。メールアドレスさえあれば、ものの数分でオンラインストアが作れてしまいます。

https://stores.jp/

メールアドレスとパスワードを入力し、[無料でストアを開く!]ボタンをクリックすると、すぐさまオンラインストアを開設できます。ストアの設定項目はいくつかありますが、ひとつひとつ見ていくとさほど難しいものではありません。「アイテム登録」から実際の商品を登録してみましょう。

設定画面はシンプルで、販売に必要な最小限の項目を中心に構成されています。どんどん情報を入力していきましょう。文字の入力と写真の挿入で、商品ページが作成されます。

入力画面はアイテム名、価格、画像、紹介文など基本的なものを入力

商品を登録すると、あらかじめ決められたレイアウトに沿って自動的に配置される

STORES.jpの機能「ストアボタン」で、あらゆるホームページにカートを埋め込む

STORES.jpでは、「STORES.jp BUTTON」という機能を利用し、JimdoなどのSTORES以外のホームページに、商品のカートボタンを埋め込むことができます。
まずは、https://stores.jp/button を開きます。

STORES.jp BUTTONを利用するには、STORESでのショップ作成と、商品の登録が必要です。あらかじめ済ませておき、ログインした状態でURLを開きましょう。

https://stores.jp/button

STORES.jp BUTTONの設定は非常にシンプルです。
「ストアボタンのデザイン」で、サイズの大小・カラーが青、グレー、黒の3種類・言語の設定を行います。

サイズ、カラー、言語を指定する

次に「販売アイテムの登録」の[販売するアイテムを選択してください]をクリックするとあらかじめ登録してある商品が表示されますので、ホームページに貼り付けたい商品を選択して、[貼り付けコードを生成する]ボタンをクリックします。

あらかじめ登録してある商品一覧が表示されるので、好きな商品を選んで最後に[貼り付けコードを生成する]ボタンをクリック

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

コードを取得するための画面が表示されます。コード部分をすべて選択し、コピーします。以上でSTORES.jp側で行う作業はすべて完了です。

※Stores.jp にて生成しておりますストアボタンのコードはすべてhttpにて生成しておりますので、埋め込み先によってはコードの埋め込みが出来ない場合もございます。

Jimdoに埋め込む

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

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

これで、ストアボタンがJimdoに組み込まれました。

導入後は動作確認をしてみましょう。ウィジェットは編集画面中ではうまく表示がされないことが多々ありますので、必ずプレビュー状態で確認します。

無事に設置された[今すぐ購入する]ボタンをクリックすると、STORES.jpで登録した商品が、同じ画面の中に現れます。

[購入する]ボタンをクリックすると、STORES.jpへ移動し、その中で購入する流れになります。STOERSの中は、すべてSSLで保護された領域となります。

まとめ

  • Jimdoのショッピング機能を使わずに、外部サービスと連携して展開することが可能
  • STORES.jpは設定項目も最小限で、気軽にストアを始められる専用ツール
  • Jimdoのウィジェット機能をつかうことにより、JimdoとSTORES.jpの連携が実現

次回は、「セキュリティ(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日で作るかっこいいホームページ Jimdoデザインブック 改訂新版

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

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

コラム週間アクセスランキング[期間:2017/4/16~2017/4/22]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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