Blog

ブログ

【ECCUBE4系】MemcachedにのせたDoctrineCacheのCacheClearコマンドを自作してみる

今日はcacheのお話です。

※今日は、大好きなEventSubscriberの出番はありません※

前置き

複数台構成でECCUBEを運用するときに、気になるのはcacheですよね!

cacheの恩恵は大きいですが、サーバーが複数台構成の時は困ってしまうことも。。。

今回は、3台構成のWebサーバーでDoctrineCacheをMemcachedで管理するときに、DoctrineCacheのクリアコマンドを自作したときのお話です。

DoctrineCacheをどうやってMemcachedにのせるの。。。?という内容は、ご要望があれば別日に書こうかと思ってます。

なので、今回はDoctrineCacheをどうやってMemcachedにのせる設定とかは割愛させて頂きます。

 

実際に作成したコマンド

app/Customize/Command配下に以下のファイルを作成しました。

<?php

namespace Customize\Command;

use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;
use Symfony\Component\Console\Style\SymfonyStyle;

class DoctrineCacheClearCommand extends Command
{
    protected static $defaultName = 'memcached:doctrine-cache:clear';

    const SESSION_PREFIX = 'session';

    /**
     * @var SymfonyStyle
     */
    protected $io;

    protected function initialize(InputInterface $input, OutputInterface $output)
    {
        $this->io = new SymfonyStyle($input, $output);
    }

    protected function execute(InputInterface $input, OutputInterface $output)
    {
        try {
            $memcached = new \Memcached();
            $memcached->addServer(env('MEMCACHED_HOST'), env('MEMCACHED_PORT'));
            $keys = $memcached->getAllKeys();

            foreach ($keys as $key) {
                if (substr($key, 0, 7) !== self::SESSION_PREFIX) {
                    $memcached->delete($key);
                }
            }

            $this->io->success('Doctrine Memcached All Clear.');
        } catch (\Error $e) {
            $this->io->error('Doctrine Memcached Clear Failure Error.');
        } catch (\Exception $e) {
            $this->io->error('Doctrine Memcached Clear Failure Exception.');
        }

        return true;
    }
}

処理の説明

今回はsessionもMemcachedにのせているので、Memcachedをflush_allするというわけにはいきませんでした。

session情報も消えてしまうので、releaseする度にCustomerが再ログインしなければならないなんて、ユーザビリティ悪すぎですもんね。。。

 

方法はとてもシンプルです!

Memcachedから全てのkeyを取得して、sessionのプレフィックスがついているもの以外を順次削除していくだけです!

本当は。。。

DoctrineCacheにプレフィックスを作成して、そのプレフィックスのkeyを取得して消すという方法を取りたかったのですが、DoctrineCacheの時はプレフィックスをつけられなかったのです。。。

まだまだ勉強不足なんでしょうね。。。

 

使い道

管理画面からキャッシュクリアを行うときに合わせて呼び出すように改修したり。。。

デプロイ用のスクリプトに組み込んでみたり。。。

サーバーで直接叩いてみたり。。。

と、使っています。

サーバーが複数台構成でも、cacheとは上手く付き合っていきたいですよね、やはり画面の表示速度が違います!

 

最後に

今回は自作でキャッシュクリアのコマンドを作ってみた時のお話でした。

最近は画面側を作成するより、外部連携等のBatch作成の方が楽しいなーなんて思ってます。

この機会に、サーバーが複数台構成でもcacheと上手くお付き合いできる方法を考えてみませんか?

【ECCUBE4系】CSV登録画面初期表示で、twigマスタテーブルの値を表示させる

今日もtwigのお話を書いていこうと思います。

※今日は、大好きなEventSubscriberの出番はありません※

前置き

例えば、商品CSV登録画面の「公開ステータス(ID)」は、messages.ja.yamlが空文字になっているので、説明欄には何も出力されていないですよね?
商品の公開ステータスは、mtb_product_statusはデフォルトの状態で3レコードしかないので、messages.ja.yamlに直接記載する方法でもそんなに手間ではないかもしれません。

ですが、これが
「mtb_pref(都道府県のマスタテーブル)のIDと名称を全部出力してください。」
なんて依頼が来ると、47レコード分をmessages.ja.yamlに記載するのは正直手間だなー。。。と思ってしまいました。

そこで、テーブルからidとnameを抜き出して、文字列化するServiceを作ったので、そのご紹介になります。
テーブル構造によっては、mtbでもdtbでも使えるので、試してみてください。

 

前提条件

  • primary keyがIDであること
  • 出力する値のカラム名がnameであること

 

Serviceを作成する

まずは、Serviceを作っていきましょう。

<?php

namespace Customize\Service;

class CsvViewDiscriptionService
{
    /**
     * CSV登録画面でマスターデータから選択肢を表示させる文字列を返却
     * 例)1:北海道 2:青森県 3:岩手県
     *
     * @param array $data
     * @return string|null
     */
    public function getDiscriptionTextData(array $data)
    {
        $text = null;
        foreach ($data as $key => $datum) {
            if ($key !== 0 && $key % 5 === 0) {
                $text .= '<br>';
            }
            $text .= $datum->getId() . ':' . $datum->getName() . ' ';
        }

        return $text;
    }
}

ServiceはこれだけでOKです。
引数をforeachで回して、文字列に変換しているだけですね!

 

Controllerで呼び出す

次にControllerの方で、このServiceを呼び出してみましょう。
必要箇所のみ抜粋して記載してみます。

trans('admin.product.product_csv.display_status_col') => [
    'id' => 'status',
    'description' => 'admin.product.product_csv.select_id_description',
    'required' => true,
    'data' => $this->csvViewDiscriptionService->getDiscriptionTextData($this->productStatusRepository->findAll())
],

今回は商品ステータスを出力させたいので、productStatusRepositoryから全件取得を行なっています。
もちろん、ここは条件付きでも問題ありません。
要は、twigで描画したいレコードが取得できれば良いのです。

 

twig側の修正

<div id="ex-csv_product-format" class="card-body">
    <table class="table table-striped table-bordered">
        <tbody>
        {% for header, key in headers %}
            <tr>
                <th class="w-25 align-middle table-ec-lightGray" id="file_format_box__header--{{ loop.index }}">{{ header }}
                    {% if key.required %}
                        <span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span>
                    {% endif %}
                </th>
                <td class="align-middle">
                    {% if key.description %}
                        {{ key.description|trans|raw }}
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

こうなっている箇所を

<div id="ex-csv_product-format" class="card-body">
  <table class="table table-striped table-bordered">
    <tbody>
    {% for header, key in headers %}
      <tr>
        <th class="w-25 align-middle table-ec-lightGray"
            id="file_format_box__header--{{ loop.index }}">{{ header }}
          {% if key.required %}
            <span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span>
          {% endif %}
        </th>
        <td class="align-middle">
          {% if key.description %}
            {{ key.description|trans|raw }}
          {% endif %}
          {% if key.data is defined %}
            <hr>{{ key.data | raw }}
          {% endif %}
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

こんな感じで修正します。

discriptionを出力している箇所に

{% if key.data is defined %}
  <hr>{{ key.data | raw }}
{% endif %}

が追加されただけですね。

動作確認

最後に動作確認をしてみましょう。

商品ステータス(ID)の箇所が以下のように出力されていると思います。

1:公開 2:非公開 3:廃止

これで、テーブルから取得してきた値をtwigにStringで渡すServiceの完成です、とっても簡単ですね!

 

最後に

前提条件で、「primary keyがIDであること」と「出力する値のカラム名がnameであること」と記載しましたが、自由にカスタマイズ可能だと思います。
(文章があまり上手くないので、説明しやすくしたかったのです)

こんなServiceを1つ作っておくだけで、簡単に管理画面のCSV登録画面での文言出力が簡単になります。
この機会に、CSV登録画面にテーブルの値を出力してユーザービリティーを向上させてみませんか?

【ECCUBE4系】フロント側の全twigで参照できる変数を作る

こんにちわ。
今回はtwigの変数についての投稿です。

twigで値を参照したい場合、通常であればControllerで値を取得し、returnしてtwigに渡しますよね?
でも、sessionやcookieに格納している値を全画面で利用したいなーと思うと、全画面のControllerとtwigの修正を行うとなると、それなりの工数がかかりますよね。

例えば、Customerがログインを行なった場合、認証が通った後で会員の今までに購入した金額によって

  • 今までの購入金額が1万円未満の場合は、Aグループに所属するCustomer
  • 今までの購入金額が5万円未満の場合は、Bグループに所属するCustomer
  • 上記以外の場合は、Cグループに所属するCustomer

と言った具合で条件を設定し、それでtwig側で出力する文言を変更したいです!なんて要望があった場合、数箇所であればControllerから値を渡すでもいいと思いますが、フロント側全体で文言の出しわけをして欲しいという要望があると、twigの修正は仕方ないですが、Controllerも併せて全修正するのは大変です。

そこで、今回も出てきます、EventSubscriberです!
みんな大好き、EventSubscriberです!

 

ログイン時の処理を作成する

今回は一例で紹介させて頂きますので、詳しいコードは割愛します。

ご担当の案件の要望に合わせて、customer_groupをキーにsessionにお好みの値を保持してください。

 

twigで参照する変数を作る

ここからが今日の本題です。

まずは、以下のようなコードをapp/Customize/EventListener配下に作成してみましょう。

 

<?php

namespace Customize\EventListener;

use Eccube\Request\Context;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\HttpKernel\Event\GetResponseEvent;
use Symfony\Component\HttpKernel\KernelEvents;
use Twig\Environment;

class TwigInitializeListener implements EventSubscriberInterface
{
    /**
     * @var bool 初期化済かどうか.
     */
    protected $initialized = false;

    /**
     * @var Environment
     */
    protected $twig;

    /**
     * @var Context
     */
    protected $requestContext;

    /**
     * TwigInitializeListener constructor.
     *
     * @param Environment $twig
     * @param Context $context
     */
    public function __construct(
        Environment $twig,
        Context $context
    ) {
        $this->twig = $twig;
        $this->requestContext = $context;
       
    }

    public function onKernelRequest(GetResponseEvent $event)
    {
        if ($this->initialized) {
            return;
        }
        if ($this->requestContext->isFront()) {
            $this->addGlobal($event);
        }

        $this->initialized = true;
    }

    public function addGlobal(GetResponseEvent $event)
    {
        $customerGroup = $event->getRequest()->get('customer_group');

        $this->twig->addGlobal('customerGroup', $customerGroup);
    }

    /**
     * {@inheritdoc}
     */
    public static function getSubscribedEvents()
    {
        return [
            KernelEvents::REQUEST => [
                ['onKernelRequest', 7],
            ],
        ];
    }
}

これで、twigから参照する処理は記載できました。
今回は、TwigInitiializeListenerで認証処理が完了した後に実行したかったので、Priorityは7に設定してあります。

 

twig側で参照する

ここまでできたら、あとはtwig側に処理を書くだけです。

{% if customerGroup == 'A' %}
    <div>
                <p>今月末までに1万円以上買っていただけると、お得意様になります。</p>
    </div>
{% elseif customerGroup == 'B' %}
        <div>
                <p>今月末までに5万円以上買っていただけると、超お得意様になります。</p>
        </div>
{% else %}
        <div>
                <p>あなたは現在、超お得意様になります。</p>
        </div>
{% endif %}

これで、全twigでcustomerGroupが参照できるようになっているはずです。
もちろん、Controllerが用意されていない静的ページからでも参照できます。

EventSubscriber便利ですね!
みんな大好き、EventSubscriberです!!!(2回目)

twigに渡す変数、各Controllerから渡す前に、EventSubscriberで使い回す道を検討してみませんか?

Requestのお供に、EventSubscriberをぜひよろしくお願い致します。

【ECCUBE4系】ボタンで表示言語を選択できるようにする

先日shopifyでサイトを多言語化する方法をご紹介させて頂きました。
本日は、ECCUBE4系で多言語化対応を行う際に、ボタンで言語を切り替えられるように実装してみたのでご紹介します。

まずはControllerの作成

<?php

namespace Customize\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\HttpFoundation\RedirectResponse;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Request;

class LanguageController extends AbstractController
{
    /**
    * @Route("change/language", name="language_change")
    */
    public function changeLanguage(Request $request)
    {
        $session = $request->getSession();
        $session->set('language', $request->query->get('language'));

        return $this->redirect(言語選択後に表示したいページ);
    }
}

これでボタンを押したときに、セッションに選択した言語情報を保持出来るようにしました。

 

header.twigに言語切り替えボタンを出力

{% if app.session.get('language') == 'ja" %}
  <ul>
    <li><a href="{{ url('language_change', {'language': 'en'}) }}">{{ 'English'|trans }}</a></li>
  </ul>
{% else %}
  <ul>
    <li><a href="{{ url('language_change', {'language': 'ja'}) }}">{{ '日本語'|trans }}</a></li>
  </ul>
{% endif %}

選択済みの言語によって、出力されるボタンが動的に変わるようにしました。
(初期値は、.envのECCUBE_LOCALEに設定されている値なので、「English」のボタンが初期値で出力されます)

EventSubscriberを作成する

ここが一番大好きな作業です!
みんな大好き、EventSubscriberです!

<?php 
namespace Customize\EventSubscriber; 

use Symfony\Component\DependencyInjection\ContainerInterface; 
use Symfony\Component\EventDispatcher\EventSubscriberInterface; 
use Symfony\Component\HttpKernel\Event\GetResponseEvent; 
use Symfony\Component\HttpKernel\KernelEvents; 

class LanguageSubscriber implements EventSubscriberInterface 
{ 
    /**
     * @var ContainerInterface
     */ private $container;

    /**
      * LanguageSubscriber constructor. 
       * 
       * @param ContainerInterface $container 
       */ 
       public function __construct(ContainerInterface $container)
      { 
                 $this->container = $container;
    }

    /**
     * @return array
     */
    public static function getSubscribedEvents()
    {
        return [
            KernelEvents::REQUEST => [['onKernelRequest', 18]],
        ];
    }

    public function onKernelRequest(GetResponseEvent $event)
    {
        $request = $event->getRequest();

        $request->setLocale($request->getSession()->get('language', env('ECCUBE_LOCALE')));
    }
}

これで出来上がりです!
なんて簡単なんでしょう、EventSubscriber最高ですね!

最後に補足説明

ちなみに、KernelEvents::REQUESTで、2番目に指定している「18」ですが、これはSymfonyのPriority(優先順位)の指定になります。
ECCUBEもローカルで開発してる時なんかは、デバッグモードにしていると思いますが、デバッグバーをポチッとするとSymfonyの画面に遷移しますよね?

左のメニューバーから「Events」を選択すると、Event Dispatcherが確認できるので、
“Symfony\Component\HttpKernel\EventListener\LocaleListener::onKernelRequest()”
のPriorityが幾つになっているか確認して、LocaleListener::onKernelRequest()よりも優先順位を決めてあげるのが良さそうです。

優先順位まで指定できるなんて、EventSubscriber最高ですね!(2回目)
EventSubscriberが大好きすぎて、いろんな処理を割り込ませたくなりますが、他の処理を割り込ませた話は、またの機会に投稿しようと思います。

messages.XX.yamlやvalidators.XX.yamlの作成を忘れずに行ってくださいね!

Requestのお供に、EventSubscriberをぜひよろしくお願い致します。

Shopifyサイトを多言語化する方法【基礎編】

Shopifyで多言語化する方法

 

こんにちはJoolenECチームです。

本日は、Shopifyで多言語化サイトを構築するにあたって、そもそもの根本的な情報をまとめました。

具体的な多言語化方法は後日執筆予定です。

それではご覧ください。

言語と地域の概念おさらい

まず多言語化とは切っても切れない「他地域化」とい考え方についてご紹介します。

言語と地域は別物

始めに押さえておきたいのは、言語と地域は別ということです。

日本なら大多数が日本語を話しますが、アメリカは人種も言語も多種多様です。

そこで重要なのが以下の2つです。

  • 何語を話す方に向けて販売するのか(言語)
  • どこの地域の在住者に向けて販売するのか(地域)

例えば、韓国在住のアメリカ人向けに韓国料理をネット販売したい場合、Shopify側で「言語=英語、地域=韓国」と設定する訳です。

そうすると、英語話者が韓国国内から「Korean food」とGoogle検索すると、そのShopifyサイトが検索結果に出る、という流れです。

さらにサイトにアクセスする、英語のページが表示され、ウォンで決済し、届け先は韓国国内、といったイメージです。

如何でしょう。イメージ湧きましたでしょうか?

Googleがサイトの言語と地域を判別する方法

Googleは検索者が何語を話してどこにいるかをIPアドレス等で把握しています。

では、Webサイトが「何語を話すどこにいる人を対象としているのか」はどのように把握しているのでしょう?

様々な方法で把握しているようですが、概ね以下のものがあります。

  1. 国別トップレベルドメイン(例 joolen.jp、joolen.us)
  2. Google Search Consoleで設定したターゲット地域
  3. HTMLまたはsitemap.xmlに記載されたhreflang
  4. サイトの住所やTEL、他ローカルサイトからのリンク
  5. サーバーの場所

Shopifyでサイト構築する際は、主に「2.」と「3.」によって言語/地域を明示します。

Google以外の検索エンジンの国別シェア

これまでGoogleの言語/地域把握方法を紹介してきましたが、各国の検索エンジンシェアはどのようになっているのでしょうか?

2021年、国別検索エンジンシェア

米:Google88%、Bing6%
欧:Google93%、Bing3%
露:Google55%、Yandex42%
中:Baidu73%、Sogou17%
韓:Google80%、Naver13%

出典:検索エンジンの国別シェア【2021年版】

中国・ロシアを除いて、Googleの対策をすればある程度の人口が対象となります。

Google以外の対応方法は、それぞれのウェブマスターツールで個別対応が必要です。

まとめ

以上が多言語化と多地域化の概要となります。

次回は具体的な多言語化方法、多地域化方法、おすすめのアプリ、翻訳はどうすれば良いか、などをご紹介します!

楽しみにお待ちください!

 

EC業界トップクラスの実績!自社ECサイト構築が398,000円から
EC業界トップクラスの実績!自社ECサイト構築が398,000円から

【Shopify】ネットショップの管理画面をわかりやすく説明します(商品管理編)

こんにちは。
JoolenECチームです。

 

いきなりですが、ネットショップを始めたい、と思った時に、

  • やってみたいけど、自分で操作できるかな?
  • どんな画面でどんな操作をするんだろう?

という不安がある方もいらっしゃるんじゃないでしょうか。

 

実際に「ネットショップ 制作」などで検索してみると、ある程度慣れている方向けの情報だったり、ボリューミーな記事が多くヒットしました。

もちろん、慣れてくればそういった記事もとても参考になると思うのですが、

まずはシンプルで、わかりやすい説明の記事があっても良いのではないか、と思いました。

 

そこで今回は、ネットショップが初めての方向けに、Shopifyの実際の管理画面をお見せしながら、ご説明したいと思います。

商品管理編 その1です!

 

管理画面を見てみる

何はともあれ、管理画面を見てみましょう。

なんだか色々書いてありますね。

今回は商品管理編なので、商品管理を選択します。

 

商品管理画面へと移動しましたね。

 

商品管理画面について

商品管理画面とは、Shopifyで取り扱う商品情報を管理する画面です。
その他、ギフトカードの発行もこちらから行います。

 

初期状態では何も商品が登録されていないので、このような画面が表示されます。

 

商品を登録してみよう

今回は、「商品を追加」ボタンをクリックして、試しに商品を登録してみましょう。

 

すると、登録したい商品の情報入力画面に移動します。

まずは画面を見てみましょう。

 

うーん、項目、いっぱいありますねえ・・

実際に運用する際は、商品ごとに販売や管理上必要な項目を入力するのですが、

今回はお試しですので、最低限の項目を入力して商品を登録してみましょう。

イメージ重視です。

 

 

こんな感じで登録して・・・

 

実際のショップ画面はどんな感じか見てみると・・・

 

 

こんな感じで表示されました!!!

 

補足:実際に商品を登録する場合は?

今回はお試し版として最低限の項目のみ登録していますが、実際には商品のタイプやコレクション(カテゴリのようなもの)、タグなどを登録したり、商品のバリエーション情報(色やサイズなど)なども登録することが可能です。

登録する商品が多い場合は、csvファイルを使ってまとめて登録することもできます。

 

まとめ

いかがでしたでしょうか?

今回の記事を通じて、ちょっとでもネットショップを身近に感じていただけたら嬉しいです!

 

 

最後に宣伝です。

Joolenでは、ShopifyをはじめとしたEC制作を行なっています。

質問やご相談だけでももちろんOKですので、ネットショップ開設でお悩みの際は

ぜひお気軽にご連絡ください。

最後までご覧いただき、ありがとうございました!

【Shopify】IT導入補助金を申請する方法

IT導入補助金

こんにちは、JoolenEC制作チームです。
本日は、IT導入補助金を使って、Shopify製のサイトを実質1/3以下の料金で制作する方法をご紹介します。

「このページさえ読めば制度の大筋が理解できる」を目指して詳しく説明してみました。

それでは早速行きましょう。

IT導入補助金とは

補助金の概要

IT導入補助金は、比較的小規模の事業者に対して、事業のIT化を進める為のITツールを導入する費用を国が補助してくれる制度です。

ITツールとは、ShopifyやEC-CUBEのようなECサイト構築の為のパッケージもあれば、在庫管理システムや受発注管理システム等、多岐にわたります。

ITツールは国があらかじめ決めている訳ではなく、認定されたIT導入支援事業者が「これをITツールとしてお客様に納品したい」と事前に申請し、認められるとそれがITツールとなります。

補助率について

無制限に補助される訳ではありません。

ECサイトの場合は、通常枠ではなくデジタル化基盤導入類型という枠の方で申請可能で、補助率は大まかに2/3です。

また補助額の上限は350万円となっています。

以下のシミュレーターで計算可能です。

https://www.it-hojo.jp/first-one/digital-type.html

※「会計・受発注・決済・ECの機能数」には2または3を入力してください

※「補助金対象経費」に制作業者に支払う金額(税抜)を入力してください

誰でも申請できるの?

制度趣旨として「中小企業や小規模事業者に対する支援」という前提があります。

その為、大企業にあたる企業や、親会社が大企業である企業は申請ができません。

大企業の定義は細かくありますが、会社規模がかなり大きいと自認している場合は事前に事務局に問い合わせてみましょう。

どの制作会社に頼んだら良いの?

制作会社の大前提

どの制作会社でも良い訳ではありません。

まずその会社がIT導入支援事業者である必要があります。

さらに、その事業者がお目当てのITツールの取り扱い認可を受けている場合に限り、申請が可能です。

例えば、以下のような業者にShopify制作を発注しても申請はできないので注意が必要です。

  • Shopify制作はできるが、そもそもIT導入支援事業者の認可を受けていない
  • IT導入支援事業者でShopify制作もできるが、ShopifyをITツールとして申請していない

ちなみに弊社ジョーレンはECサイト構築の専門企業ですので、ShopifyEC-CUBEをITツールとして申請し認可を受けています。
(もちろんIT導入支援事業者としても認定を受けています。)

審査に通りやすくなる方法はある?

審査の加点項目について

審査において加点項目/減点項目があります。

ただ、このブログは同業他社さんも見ていますので正直大っぴらには説明したくない気持ちもあるのですが(汗)、今回は一部をご紹介します。

主なものとして、以下のいずれかを満たすと審査時に加点されます。

  1. 所属自治体が定める地域未来牽引企業に認定されている
  2. 毎年1.5%の賃上計画を定めて社内で宣言している
  3. 国が定める「サイバーセキュリティお助け隊サービス」を同時に申請する

1.は中々ハードルが高いですが、2.と3.に関しては多くの企業で実施可能かと思います。

2.に関しては、どのように宣言すれば良いか、ECサイト制作等を依頼する予定の業者さんに聞いてみましょう。

3.に関しては、公募要領にも明確に「加点される」と記載されています。

こちらのページの中腹にもその旨が記載されています。

以下はスクリーンキャプチャです。

サイバーセキュリティお助け隊
ページ中腹のスクリーンキャプチャ

Shopify等と同時に申請する必要がありますので、依頼予定の業者さんが「サイバーセキュリティお助け隊サービス」の販売代理店であるかを確認しましょう。

ちなみに販売代理店かどうかはこちらのページで業者名を検索する事でも分かります。

サイバーセキュリティお助け隊の代理店マーク
弊社ジョーレンを検索した場合。サイバーセキュリティお助け隊マークが表示されている

他にも「インボイスを見据えたITツールであるか」等細かいノウハウもございますが、この度は割愛します。

まとめ

以上がIT導入補助金の概要となります。

大きくまとめますと…

  • 申請者は中小企業である必要がある
  • 制作会社は認可されている企業でなければならない
  • ITツールも認可されているものでなければならない
  • 事務局により公開されている加点要素がある
  • 審査に通過すればかかった費用の約2/3が後日振り込まれる

といったところになります。

せっかく用意されている補助金なのですから、上手に利用して事業発展に役立てたいですね。

ぜひご検討ください。

尚、弊社はShopifyやEC-CUBEなど、ECサイトに特化した制作会社です。

IT導入支援事業者として補助金の申請も可能ですし、申請料も一切頂いておりません。

また「審査に通過すればご発注」という流れで全く問題ございません。

よろしければ以下のリンクからお問い合わせ頂けますと幸いです。

Shopifyでどんなサイトが作れるの?(ネットショップ制作イメージ)

ショップイメージ

こんにちは!

JoolenEC制作チームです!!

 

先日、お客様から「Shopifyをネットでなんとなく調べてみたけど、どんなサイト(ネットショップ)になるのかイメージが想像できない」というお話をお聞きしました。

はい、実に良いヒントをいただきました。

確かに、一念発起していざネットショップを作ろう、と思っても、実際どんなお店ができるのかはイメージしづらいですよね。

 

そこで、今回はShopifyで作られたサイトをいくつかご紹介し、こんなサイトが作れるよ、というイメージをお伝えしたいと思います。

 

Shopifyで作られたネットショップ

ブルーボトルコーヒー

ブルーボトルコーヒー 公式オンラインストア
出典:ブルーボトルコーヒー 公式オンラインストア
URL https://store.bluebottlecoffee.jp/
取扱商品 コーヒー、抽出器具、ボトルなど
使用テーマ 有料テーマ
主な機能、特徴 メールマガジン、キャンペーン、ブログ、イベント紹介ページなど

 

2015年に日本に上陸し、高級コーヒーを日本に流行させたと言っても過言ではないブルーボトルコーヒーのオンラインストアです。

シンプルなデザインながらも高級感と落ち着きがあり、ブランドのコンセプトに合ったサイトづくりがされています。

・・・小難しいことを言いましたが、オシャレだけど見やすく使いやすいサイトです。

商品の販売だけでなく、ブランドの紹介ブログやオンラインのイベント案内ページなども用意されています。

こちらはブランドサイトとECサイトが一体となっています。

実際の店舗、ブランドのイメージをうまく表現しているサイトになっていると思います。

 

 

COHINA

COHINA STORE公式サイト
出典:COHINA STORE公式サイト
URL https://cohina.net/
取扱商品 アパレル、靴、雑貨など
使用テーマ オリジナル
主な機能、特徴 クーポン、カタログページ、SNS連携、ブログ、検索機能など

 

「身長150㎝前後の小柄女性のためのアパレルブランド」という、最近話題のアパレルショップです。

機能としてはお気に入り機能、ランキング機能、検索ページなどのほか、クーポン機能も使われています。

注目商品の特集ページではカタログを見ているかのようにわかりやすく、実際の商品のイメージが湧きやすいようになっています。

また、Instagramとの連携もされており、実際にInstagramでの新商品紹介なども積極的に行われています。

アパレルに限らず、Shopifyでネットショップを作る上でとても参考になるサイトだと思います。

 

 

カキモリ

たのしく、書く人。カキモリ –
出典:たのしく、書く人。カキモリ – Kakimori
URL https://kakimori.com/
取扱商品 オーダーメイドのノート、インク、その他筆記具
使用テーマ オリジナル
主な機能、特徴 英語対応、使い方・イベントページ、実店舗情報、ブログ、検索機能など

 

最後は、ペンやインク、ノートなどを販売されているカキモリのサイトをご紹介します。

販売だけでなく、ワークショップの動画や商品の使い方とお手入れの説明など、見ているだけで楽しくなる(+欲しくなる)サイトになっています。

また、Webでの表現が難しい「手書き」や「温もり」のイメージをうまく表現されています。

私自身、こちらの店舗にお邪魔したことがあるのですが、実際の店舗の匂いや雰囲気まで伝わってきそうな印象を受けました。

 

 

以上、Shopifyで作られたサイトのご紹介でした!

いかがでしたでしょうか?

今回紹介した3サイトはどれも作りこまれていて、デザインも機能も充実していますが、もちろんもっと機能を絞ったシンプルなサイトを作ることもできます。

少しでもネットショップ制作の参考にしていただけたら嬉しいです!!

 

JoolenではShopify製作を承っています。

質問やご相談だけでももちろんOKですので、ネットショップ開設でお悩みの際は

ぜひお気軽にご連絡ください。

ここまでお読みいただきありがとうございました。

それでは、また!

 

 

【Shopify】商品数が少ないECサイトの魅せ方

ECサイト

こんにちは、JoolenEC制作チームです。

オンラインショップを作る場合、商品数が少ないお店(1~10点程度)と100点以上あるお店では、根本的に作り方が違います。

心がける点と言えば…

  • 商品数が多いなら、商品検索がしやすいUIに
  • 商品数が多いなら、メニューを階層分けして分かりやすく
  • 商品数が少ないなら、商品説明を厚くする
  • 商品数が少ないなら、一点一点の印象付けに重きを置く

などがあります。

本日は「商品数が少ないサイトを作る際に心がけたい点」をご紹介します。

当社の制作実績ではございませんが、「取り扱い商品はチーズケーキ1点のみ」であるMr. CHEESECAKEさんの秀逸なECサイトをご紹介しながらご説明できればと思っております。

商品数の少ないサイトの魅せ方、参考サイト
出典:MR. CHEESCAKE

※ちなみに私の上司もMr. CHEESECAKEさんのチーズケーキを頂いた事があるそうなのですが、とても美味しかったとの事です!

商品説明を厚くする

商品数が多い場合は、商品一覧の視認性を高くしたり、商品説明は要点を絞ってどんな商品かを簡潔にスピーディに伝える必要が出てきますが、商品数が少ない場合は違います。

1点1点の商品説明を厚くしましょう。

訪問者に自社商品の魅力を伝えるのはもちろんの事、文章量が増えることによるSEO効果も期待できます。

ちなみにMR. CHEESECAKEさんの商品ページの長さはこれくらいです!

商品数が少ないECサイトの作り方
出典:MR. CHEESECAKE

派生商品を増やす

派生商品を増やすのも様々な面で効果的です。

例えば、ギフトに好まれる商品であればギフト包装によって商品を分ける事もできます。

通常ギフト包装は商品のオプションとして用意されますが、商品+包装パターンAで1商品、商品+包装パターンBで1商品、という風に、別の商品としてページを設けるイメージです。

もちろん、代り映えのしない包装をいくつ増やしてもあまり意味がないかもしれません。

商品数の少ないサイトの魅せ方「ギフト包装1」
出典:MR. CHEESECAKE

商品数の少ないサイト「ギフト包装2」
出典:MR. CHEESECAKE

他にも、「商品+付属品」を1つの商品として登録するのも良いでしょう。

コンテンツ量を増やす

ただやみくもにコンテンツ量を増やせば良いわけではありませんが、訪問者にとって有益なコンテンツや楽しめるコンテンツを増やすことは、SEOの観点からも重要です。

about us のようなお店を紹介するページを作成するのも良いですし、お客様の声を1ページ使用してご紹介するのも良いでしょう。

まとめ

以上、簡単ではありますが「商品数が少ないECサイトの魅せ方」の基本的な部分をご紹介させていただきました。

我々はECサイト制作の専門企業ですが、それでも日々勉強を続けております。
今後も有益な情報を発信できればと思いますので、よろしくお願いします。

ちなみにMR. CHEESECAKEさんのサイトは「ECサイト制作プラットフォーム・Shopify」を使用して作成されています(記事執筆時)。
弊社はShopifyの専門家でもありますのでお気軽にお問い合わせ下さい。

日経ビジネス日本急成長企業2022にランクインしました!

日経ビジネス 日本急成長企業2022 売上高を伸ばした100社ランキング

https://business.nikkei.com/atcl/seminar/19/00030/032500343/?P=2

にて40位にランクインしました!

千葉では堂々たる1位に輝いております!

これからも「ECのことならジョーレンに任せれば安心」と言ってもらえるよう

従業員一同精進して参ります!