Blog

ブログ

【構築事例紹介】信頼性向上と現場効率化を実現したカスタマイズ成功事例!!

ASQ GEM オンラインショップ様の構築事例を公開しました。

この事例では、ショップ運営における以下の主要な課題を、
どのように解決したのかを詳しくご紹介しています。

  • 信頼性の確保: 運営主体の不明瞭さや商品訴求力不足を解消し、潜在顧客が安心して利用できる環境を構築。
  • 現場の効率化: 煩雑なオペレーションを改善し、現場の運営効率化を実現。

「潜在顧客が安心して利用できる信頼性の確保」と「現場の運営効率化」を二大柱とし、
実務に直結する機能開発を実施しました。

この成功事例の詳細を、ぜひ記事でご覧ください!

構築事例アスク社様

年末年始休業のお知らせ

平素より格別のご愛顧を賜り、誠にありがとうございます。

誠に勝手ながら、弊社では下記の期間を年末年始の休業とさせていただきます。

 

【休業期間】

12月27日(土)~ 1月4日(日)

 

休業期間中にいただいたお問い合わせにつきましては、

1月5日(月)より順次対応させていただきます。

 

お客様にはご不便をおかけいたしますが、

なにとぞご理解賜りますようお願い申し上げます。

来年も変わらぬご愛顧のほど、よろしくお願い申し上げます。

小学校で職業理解セッションを実施しました!

株式会社ジョーレン管理部のKanaです。

先日、松戸市の小学校で開催された「職業理解セッション」に参加し、小学生たちにジョーレンのお仕事であるECサイト開発について紹介してきました。

 

https://www.joolen.co.jp/blog/2025/08/01/18104/

以前掲載いただいた『発見たんけん千葉県わくわくお仕事しらべ隊』のイベントでした。

開始前、子ども達はワクワクしている様子。こちらはドキドキしていたら

「盛り上げるので安心してください」と優しい子ども達が声をかけてくれました!

ECサイト構築のお仕事って?

まずは、「このサイト知ってる人?見たことある人?」と聞くと、ほぼ全員が手を挙げてくれました。そこで、「実は、みんなが使っているあのサイトも、裏側ではたくさんの人が協力して作っているんだよ」と、ECサイトの開発の裏側をわかりやすく紹介しました。

 

サイトができるまでの流れを紹介

授業では、ECサイトが完成するまでの全体の流れを、できるだけシンプルに伝えました。

  1. 仕事の依頼
  2. 見積
  3. 要件定義
  4. 設計
  5. 開発
  6. テスト
  7. サイトオープン

と、実際にECサイトが完成するまでにはたくさんの段階を踏み、1人ではなく、たくさんの職種の人たちの力でできていることを伝えました。

 

実際のデモもやってみました!

副社長のデモンストレーションもなかなかの盛り上がりでした。
簡単なショッピングサイトを用意して、話題のゲーム機を激安価格で提供しているサイトに

「悪い大人が大量に買い込み転売してしまうので制限をかけよう!」というデモンストレーション。

実際にコードを追加し商品を選んで「カートに入れる」→「購入制限のポップアップが出る」

の流れを見てもらいました。

「すごい!」「お~」と目を輝かせる子どもたちの反応がとても印象的でした。

 

質問タイムではこんな質問が

最後の質問タイムでは、さまざまな質問が飛び交いました。

  • 「どんなお客さんが多いですか?」

  • 「出来上がるまでにどれくらい掛かりますか?」
  • 「1番大変なことは何ですか?」

  • 「今後のジョーレンの目標はなんですか?」

素直で鋭い質問ばかりで、とても刺激になりました。

 

おわりに

今回のセッションを通じて、子どもたちにITの世界やエンジニアの仕事に少しでも興味を持ってもらえたら嬉しいなと思いました。

大人にとっては当たり前のことでも、子どもたちにとっては新鮮な発見ばかり。
未来のエンジニアがこの中から生まれるかもしれない、と思うとこちらもワクワクしました。

【構築事例紹介】脆弱性の悩みが解決!? 守りと攻め両面からのECサイトリニューアル!!

アニコムパフェ オンラインショップ様の構築事例を公開しました。

多くの企業が抱える脆弱性対策の問題から、保険契約者様限定の「Famicaカード」の販売方法など、特殊な要件にも柔軟に対応しました。

リニューアルによって“守り”の課題であったリスクを回避し、同時に”攻め”の戦略となる独自商品の販売を実現した、その舞台裏をご紹介します。

導入事例 | アニコムパフェ オンラインショップ

【構築事例紹介】決済まで完結できる総合イベント予約サイトをEC-CUBEで実現!

小田原ワーケーション(小田急電鉄)様の構築事例を公開しました。

地域の”体験”をひとつのサイトで”探す・予約する・決済する”まで一貫して提供するモール型EC。
EC-CUBEの柔軟性で実現した、その舞台裏をご紹介します。

導入事例 | 小田原ワーケーション

小学生向けキャリア教育 副教材「発見たんけん千葉県 わくわくお仕事しらべ隊」に掲載いただきました

このたび、2025年版「発見たんけん千葉県 わくわくお仕事しらべ隊(松戸市用)」に当社ジョーレンを掲載いただきました。

小学生向けのキャリア教育 副教材であるこの冊子、

松戸市内の小学校に納品され、授業教材として活用されます。

 

インタビュイーは、自身も小学生のお父さんであるWマネージャー。

「システムエンジニアってどんな仕事?」「ECサイトの機能を見てみよう!」など、

小学生でもイメージしやすい内容となるよう、発行元である株式会社地域新聞社の担当者様と相談しながら誌面を作成しました。

 

10月には市内の小学校にて出張授業も予定しています。

 

便利になったインターネット社会で、人と人とを繋ぐお仕事をしているジョーレン。

そんなお仕事の魅力を、社長の熱い思いとともにがっちり伝えてまいります!

貴社のECサイトをもっと便利に!カスタマイズ事例のご紹介

今回は、弊社が手掛けた ECサイトのカスタマイズ事例 をご紹介します。
「こんなことできるの?」と思った方、ぜひお気軽にご相談ください。

主なカスタマイズ事例

【1】URLのスラッグ対応
サイトのSEO対策として、商品やカテゴリのURLスラッグをカスタマイズするニーズが増えています。弊社では、商品IDではなく、意味のあるカテゴリ名やキーワードを使用することで、検索エンジンにとって親しみやすいURL構造を実現しました。これにより、
SEO効果の向上とユーザーの利便性が高まりました。

【2】独自クーポンの作成
多くのECサイトでは、特定の条件を満たした顧客にクーポンを配布することが求められます。弊社では、購入金額や会員ランク、特定のカテゴリー購入者向けに、独自のクーポン発行機能を実装しました。これにより、マーケティング施策を柔軟に展開することが可能になり、顧客満足度を向上させています。

【3】独自購入オプションの追加
商品購入時に必要なオプションをカスタマイズできる機能を追加しました。例えば、ギフトラッピングやメッセージカードなど、顧客のニーズに合わせた購入オプションを自由に設定することができ、よりパーソナライズされたショッピング体験を提供しています。

【4】セット商品の販売
セット商品を販売するためのカスタマイズも承りました。特定の商品をセットにして割引価格で提供することで、顧客の購買意欲を刺激し、売上を大幅にアップさせることができました。セット商品には、在庫管理や価格設定など、細かな部分の調整も可能です。

【5】外部レビューとの連携
商品レビューを外部のレビューサイトと連携させることで、信頼性を向上させました。これにより、リアルな口コミをサイト上で紹介できるようにしました。

【6】アンケート作成機能
顧客からのフィードバックを集めるため、アンケート作成機能を導入しました。特定のキャンペーンや商品に対する意見を簡単に収集でき、マーケティング戦略の改善や新商品開発に役立っています。

【7】BtoB向けクローズドサイト機能
法人向け(BtoB)の取引を行うための、クローズドサイト機能も導入しました。全てのページ(会社概要や規約ページを除く)は、ログインしないと閲覧できない設定にすることで、取引先専用の環境を構築しました。

カスタマイズのご相談、お気軽にどうぞ!

「この機能、うちでも使える?
こういう悩みを解決したいけど、どうしたら?」

そんなお悩みをお持ちでしたら、ぜひJoolenにご相談ください。
お問い合わせはこちら

画像SEOについて改めて考える〜おさえておきたいポイントとは

画像SEOについて考える

画像SEOについて考えたことはありますか?

普段は画像をそのまま記事に使用したりしていることもありますが、一つの工夫でアクセスが見込める可能性がある。
今回はブログを書くにあたり、改めて画像SEOについて見直してみました。

 

画像SEOとは何なのか?

Google画像検索で上位に画像が表示されることを目指す取組について。
Google検索では上位画像は通常の検索結果にも表示されることがあるので、通常のSEOを行う他に画像SEOも意識することで露出が増えアクセス増が期待できます。

検索結果の上位に自分が探している内容の画像があると自分が探していた内容かも!と見てしまうことがありますね。
こういった効果を期待したいです。

画像SEOを行う上でのポイント

では、画像SEOに取り組むにあたって行ったらいいことはなんでしょうか。
無意に画像を多用するだけでは記事やコンテンツの品質に関わってきます。
6つのポイントに絞ってみます。

オリジナルの画像を使用する

現在はフリー素材の画像など、利用できる画像は多々あります。
しかし、同じような画像素材を使用ていると、他の記事との差別化が難しくなり埋もれていくこともあるでしょう。

独自性のあるオリジナル画像を使用することで他の記事とは差別化がされます。
掲載されている画像=特定のコンテンツという関連付けができますね。

ただ、このオリジナル画像については必ずしもSEOにマイナスの影響を与えるわけではありません。
Google 画像検索 SEO ベストプラクティスにて「Google が画像を検出してインデックスに登録できるようにする」と記載もあるため、独自画像を用意した方が好ましいという形です。

Google 画像検索 SEO ベストプラクティス:

https://developers.google.com/search/docs/appearance/google-images?hl=ja#create-a-great-user-experience

ファイル名には簡潔な名前、また内容を簡潔に表している名前を設定する

Googleでの評価は、ファイル名も評価の対象となります。

iPhoneやデジカメ等で撮影した場合に設定される「IMG○○.png」等の名前だと、画像がどのような内容であるか認識ができず評価がされません。
短く、画像内容を表現できる名前にすることで評価されやすくなっていきます。

花見の写真などであれば、「hanami.png」や「tokyo_hanami.png」などであると、花見や東京の花見などの評価がされます。
掲載画像についても一工夫することで変わってくることもあるかと思いますので、積極的に行っていきましょう。

画像を設定する場合はaltタグの内容を設定する

画像とWordPressのファイル情報例
WordPressのファイル情報例

代替えテキストを設定することによって、検索エンジンに画像の情報が伝達されます。

タグ内の単語が検索にヒットすることも考えられるので、積極的に設定するのが良いですね。
各画像全てに代替えテキストの用意は手間ではありますが、検索上でのヒット率向上を考えると行っておきたいところです。

ただし、代替えテキスト内にキーワードを多く記載する場合、スパム判定され悪い評価となるので気をつけましょう。

画像内容に関連する文章を周囲に配置する

画像と文章の配置例
画像と文章の配置例

画像の前後や左右に文章を配置することによって画像内容を前後の文脈から判断することがあります。
関連する文章を配置することによって、検索のヒット率向上となります。
関連性を持たせることは記事自体の検索順位を維持するのにも重要となるので配置にも気をつけていきましょう。

画像データのサイズ、形式を適切なものに設定する

サポートされている画像形式を使用、速度と画質を考慮して最適化これらもGoogleの評価対象となることがあります。
速度が極端に遅いページは評価が下がるようになったという話も…
早い=評価が上がるというわけではないので注意です。

サポートされている画像形式を使用
サポートしている形式:BMP、GIF、JPEG、PNG、WebP、SVG、AVIF

速度と画質を考慮して最適化
低画質で何の画像かわからないと画像を掲載している意味がありません。
高画質になるにつれ表示速度にも影響が出るため適度に画像圧縮を行い最適化しましょう。

構造化データ、画像サイトマップの利用する

構造化データで画像をマークアップすることでバッジというものがつきます。
バッジとは、Google画像検索をした時に画像に「パソコン」「カメラ」「椅子」などカテゴリ分けされたものとなります。

何の画像であるかがわかることで認識がされやすくなり、リッチリザルトにも影響が出てきます。

リッチリザルト例
リッチリザルト例

画像サイトマップを送信することで、サイトマップの情報を使用しなければ検出されない可能性のある画像のURLを指定できます。
画像サイトマップ作成は固定画像なら現実的ではあるかと思ういますが、ブログなどの毎度変わる画像に関しては保守の面で手間となるため、導入については要検討なところですね。

最後に

今回記事を書くにあたり画像を用意しましたが、画像を作成するだけでも大変だなと感じました。

全てを最初から実行するのは難しいものと思います。
できる範囲から少しずつ取り組んでいくのが良いでしょう。

 

Eccube4.3で「同じURLクエリパラメータを複数回使用しない」を実装してみた

SEO観点におけるURLについて調べていると
URLのクエリパラメータに関するベストプラクティスとして以下の内容が載っていました。

同じパラメータを 2 回使用しないようにします。Googlebot はどちらかの値を無視する可能性があります。
 推奨: ?type=candy,sweet
 非推奨: ?type=candy&type=sweet  (引用)

参考:URL のクエリ パラメータに関するベスト プラクティス

Eccubeで複数選択可の項目を検索すると、 「?type[]=candy&type[]=sweet」 のような、
上記で非推奨とされる「同じパラメータを複数回使用しているURL」になります。
検索エンジンにインデックスさせる対象が、単一選択されたページのみ(「?type[]=candy」「 ?type[]=sweet」 は対象だが 「?type[]=candy&type[]=sweet」 はインデックス対象ではない)
の場合は気にする必要はないと思いますが、もし、複数選択したページをインデックスさせたいなら対応が必要かも(?)ということで今回、Eccube4.3で試してみました。

手順1.複数選択可の検索項目をカスタマイズして追加する

前提条件である「複数選択検索」をできる項目が、Eccube4.3の初期状態では無いので、まずはそれを追加します。
今回は「複数選択可なカテゴリ」を追加します。
(カテゴリ検索は既にあるのですが、単一選択しかできないので、複数選択可な状態のなものを追加します)

1-1.FormTypeのカスタマイズ
EccubeのフォームはFormTypeに実装されているので、カスタマイズして、複数選択可用のカテゴリ項目を追加します。

app/Customize/Form/Extension/ 配下に以下のような「SearchProductTypeExtension.php」を追加します。

実装例
<?php

namespace Customize\Form\Extension;

use Eccube\Form\Type\SearchProductType;
use Eccube\Repository\CategoryRepository;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\FormBuilderInterface;

class SearchProductTypeExtension extends AbstractTypeExtension
{
private CategoryRepository $categoryRepository;

public function __construct(CategoryRepository $categoryRepository)
{
$this->categoryRepository = $categoryRepository;
}

public static function getExtendedTypes(): iterable
{
yield SearchProductType::class;
}

public function buildForm(FormBuilderInterface $builder, array $options)
{
$categories = $this->categoryRepository->getList(null, true);

$builder->add('category_ids', EntityType::class, [
'class' => 'Eccube\Entity\Category',
'choices' => $categories,
'choice_label' => 'NameWithLevel',
'multiple' => true,
'expanded' => true,
'required' => false,
'label' => 'カテゴリ(複数選択)',
'attr' => [
'class' => 'form-control',
],
]);
}
}

参考:FormTypeカスタマイズの公式ドキュメント

これで、既存のSearchProductType に対して、「category_ids」フォーム項目を追加したことになります。
既に存在するカテゴリ検索項目「category_id」との違いは、チェックボックスになるように「’multiple’ => true」「’expanded’ => true」を追加しただけです。

1-2.Repositoryのカスタマイズ

新しく追加したフィールド「’category_ids’」で検索されるようにRepositoryもカスタマイズします。

app/Customize/Repository配下に以下のようなファイルを追加します。

実装例
<?php

namespace Customize\Repository;

use Doctrine\ORM\EntityManagerInterface;
use Doctrine\ORM\QueryBuilder;
use Eccube\Doctrine\Query\QueryCustomizer;
use Eccube\Repository\QueryKey;

class ProductRepositoryCustomizer implements QueryCustomizer
{

    private EntityManagerInterface $entityManager;

    public function __construct(EntityManagerInterface $entityManager)
    {
        $this->entityManager = $entityManager;
    }

    /**
     * 商品検索にカテゴリ(複数)を追加する
     *
     * @param QueryBuilder $builder
     * @param array $params
     * @param $queryKey
     */
    public function customize(QueryBuilder $builder, $params, $queryKey): void
    {
        // category(s)
        if (!empty($params['category_ids'])) {
            $Categories = $params['category_ids'];
            if ($Categories->count() > 0) {
                $subQb = $this->entityManager->createQueryBuilder();
                $subQb->select('1')
                    ->from('Eccube\Entity\ProductCategory', 'pct_sub')
                    ->where('pct_sub.Product = p') // 'p'は親クエリのエイリアス
                    ->andWhere($subQb->expr()->in('pct_sub.Category', ':Categories'));

                $builder->andWhere($builder->expr()->exists($subQb->getDQL()))
                    ->setParameter('Categories', $Categories);
            }
        }
    }

    /**
     * ProductRepository::getQueryBuilderBySearchData に適用する.
     *
     * @return string
     * @see \Eccube\Repository\ProductRepository::getQueryBuilderBySearchData()
     * @see QueryKey
     */
    public function getQueryKey(): string
    {
        return QueryKey::PRODUCT_SEARCH;
    }
}

参考:Repositoryのカスタマイズ

category_ids」が選択されている場合は、選択されたカテゴリIDが、カテゴリとして設定されている商品をExistで絞り込んでいます。

 

1-3.twigのカスタマイズ

app/template/default/Product 配下に src/Eccube/Resource/template/default/Product/list.twig のコードをコピーして配置します。するとapp/template/default/Product/list.twig の方が参照されます。

参考:テンプレートカスタマイズの公式ドキュメント

新しく配置したapp/template/default/Product/list.twigのformタグの中に、category_idsフィールドを追加します。
その時、既存の、「FormTypeのフィールドをfor文でhiddenとして書き出している処理」からcategory_idsフィールドを除外します。

実装例
<form name="form1" id="form1" method="get" action="?">
   {{% for item in search_form  %}
      {# category_idsは除外 #}
      {% if item.vars.name != 'category_ids' %}
            <input type="hidden" id="{{ item.vars.id }}"
                  name="{{ item.vars.full_name }}"
            {% if item.vars.value is not empty %}value="{{ item.vars.value }}" {% endif %}/>
      {% endif %}
   {{% endfor %}
   {{# 新しい複数選択カテゴリフィールドの表示 #}
   {<div class="form-group">
      {{ form_widget(search_form.category_ids) }}
      {{ form_errors(search_form.category_ids) }}
      <button type="submit" class="btn btn-primary mt-2">
            {{ '検索' }}
      </button>
   {</div>
</form>

これで検索結果一覧ページにアクセスすると、複数選択出来るカテゴリのチェックボックスと検索ボタンが追加された画面が表示されます。

これでカテゴリの複数検索すると下記のようなURLになります。(デコードしています)

http://localhost:8080/products/list?mode=&category_id=&name=&pageno=&disp_number=20&orderby=1&category_ids[]=7&category_ids[]=9

※動作確認のため、いくつかカテゴリを追加しています。

これで前提条件である「同じパラメータを複数回使用したURL」の状態になりました。

手順2.複数カテゴリ検索時のURLをカンマ区切りにする

いよいよ本題であるURLのカンマ区切りに着手します。

2-1.検索実行直前にjavascriptで配列 → 文字列 変更する

チェックボックスで選択した値をそのままの状態で検索実行してしまうと、配列のURLが生成されてしまうので、javascript でカンマ区切りの文字列に変更します。

実装例(app/template/default/Product/list.twig に追記しました)
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('form1');

            form.addEventListener('submit', function (e) {
                const checkboxes = form.querySelectorAll('input[name="category_ids[]"]:checked');
                const selectedValues = Array.from(checkboxes).map(cb => cb.value);

                // 既存の複数inputをdisabledにして送信されないようにする(後で1つのinputにまとめるため)
                checkboxes.forEach(cb => cb.disabled = true);

                // 新しいhidden inputを1つ作成
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'category_ids';
                input.value = selectedValues.join(',');

                form.appendChild(input);
            });
        });
    </script>

上記のjavascript コードで、以下の内容を実行しています。

  • submitの直前に、選択された「category_ids」の値を取得
  • 元々の category_idsチェックボックスフィールド はdisabled
  • 選択された「category_ids」の値をカンマ区切りにしてformに新フィールドとして追加

これだけでURLは、目的である「同じパラメータは1回しか使用されない」状態になります。

http://localhost:8080/products/list?mode=&category_id=&name=&pageno=&disp_number=20&orderby=1&category_ids=7,9
※デコードしています。

しかし、これだけだと検索がうまくいきません。FormTypeでは配列で送られてくることが期待されていますが、文字列で来たためエラーになってしまいます。

今度はFormType側で文字列 → 配列 に変換して帳尻を合わせます。

2-2.FormTypeの処理時に文字列 → 配列 に変換する

手順1で追加した「SearchProductTypeExtension」に以下の内容を追記します。

実装例
<?php

namespace Customize\Form\Extension;

・・・省略・・・use Symfony\Component\Form\FormEvent; use Symfony\Component\Form\FormEvents;
class SearchProductTypeExtension extends AbstractTypeExtension
{
    private CategoryRepository $categoryRepository;

    public function __construct(CategoryRepository $categoryRepository)
    { ・・・省略・・・ }

    public static function getExtendedTypes(): iterable
    { ・・・省略・・・ }
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        ・・・省略・・・ $builder->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event) { $data = $event->getData(); // カンマ区切りの文字列を配列に変換 if (isset($data['category_ids']) && is_string($data['category_ids'])) { $ids = array_filter(array_map('trim', explode(',', $data['category_ids']))); $data['category_ids'] = $ids; $event->setData($data); } });
    }
}

PRE_SUBMIT イベントを使って、カンマ区切り文字列を配列に変換しています。
PRE_SUBMIT イベントは「フォームにデータを送信する前に、リクエストのデータを変更する」時に使うものなので、今回のような目的にはピッタリですね。
参考:Symfony Form Events

FormTypeに上記を修正を適用すると、URLの目的を達成しつつ、検索機能も損なわない状態になります。

一応これで今回の試したかったことは出来ました。お試しだったので「category_ids」に特化したコードになってしまいましたが、本当に運用するつもりなら、処理は部品化して汎用的に使えるようにすると良いと思います。

まとめ

いかがだったでしょうか。今回はたまたま見つけた「同じパラメータを 2 回使用しない」を試してみました。
私は今まで聞いたことが無かったので、SEO対策としての重要度はそこまで高く無いのかもしれません。また、最初にも書いた通り、複数選択された状態をインデックスさせる必要が無い場合はそもそも必要ありません。

それなりに対応コストはかかるので、もし本格的に導入を検討をする際には、一度SEO対策会社の方へ相談してから判断するのが良いでしょう。