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

  1. TOP
  2. ホームページのクオリティアップ術:制作編 : 第5回 外部サービスのショッピングカートを導入する

エキスパートコラム

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

第5回:外部サービスのショッピングカートを導入する

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

2015年8月24日更新(2017年9月6日改訂)

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

閲覧数5,531views

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

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

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

外部サービスのショッピングカートを利用するメリット

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側で行う作業はすべて完了です。

Jimdoに埋め込む

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

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

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

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

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

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

まとめ

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

次回は、「外部サービスのメールフォームを導入する」をお伝えします。(つづく)

  • このエントリーをはてなブックマークに追加
このコラムを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」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/9/17~2017/9/23]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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