AI検索に"選ばれるサイト"を
設計するEC・Web制作会社

MAKESHOP DESIGN

きれいにするだけではない。
選びやすく、買いやすく。

ブランドの世界観を整えながら、商品を探す、比較する、納得する、購入する流れを再設計。makeshopのクリエイターモードを活用し、スマートフォンでも運営側でも使いやすいECサイトへ改善します。

PRODUCTSSTORYSEARCHCART
商品が伝わる
ECデザイン
商品を見る →
SERVICE DEFINITION

makeshopのデザイン・カスタマイズとは、ブランド表現だけでなく、商品検索・比較・商品詳細・購入導線・スマホ表示・更新運用を設計し、クリエイターモード等で実装するサービスです。

Design Goals

デザイン変更で解決する4つの課題

01 / BRAND

企業・商品の価値が伝わらない

写真、文章、余白、色、書体を整理し、価格以外の選択理由を伝えます。

02 / FIND

商品を探しにくい

カテゴリ、検索、絞り込み、ランキング、特集等を商品数と探し方に合わせます。

03 / DECIDE

比較・判断材料が足りない

仕様、用途、選び方、レビュー、納期等を整理し、購入前の迷いを減らします。

04 / OPERATE

更新のたびに崩れる

共通パーツと更新ルールを作り、担当者が継続運用しやすい構造にします。

Customer Journey

ページ単位ではなく、購入までをつなげる

FROM ENTRY TO ORDER

検索・広告・SNSなど、どの入口から来ても商品を理解し、比較し、購入へ進める導線を作ります。

01

入口

トップ、特集、記事、商品ページなど流入先ごとの役割を整理。

02

探索

カテゴリ、検索、絞り込みで目的の商品へ到達しやすくします。

03

比較

違い・用途・価格・仕様を見比べられる情報構造にします。

04

理解

写真、説明、レビュー、FAQで商品と条件を理解できる状態へ。

05

購入

在庫、納期、バリエーション、送料等の不安を減らします。

06

再訪

会員、履歴、お気に入り、メール等で継続購入へつなげます。

Design Mode

制作方法は、公開後の運用まで考えて選ぶ

2026年9月時点の公式案内では、クリエイターモードとノーコードデザインが選択肢です。旧ベーシックモードからの移行では、使用中の機能とコードを調査します。

CREATOR MODE

細かな設計・表現を実装

HTML、CSS、JavaScript、独自タグを使い、ブランドと購入導線に合わせてレスポンシブデザインを構築します。

  • 独自のページ構成・UI
  • 共通モジュールとページ別調整
  • 表示条件・商品情報の出し分け
  • 制作会社による継続改善
NO-CODE DESIGN

社内更新のしやすさを重視

画面上での編集を中心に、担当者が更新しやすい構成を検討します。実現したいデザイン・機能との適合確認が必要です。

  • 視覚的な編集を重視
  • 日常更新を内製化
  • 利用できる要素内で構成
  • 複雑な要件は別方式と比較
Design Scope

デザイン・実装の対応範囲

01

現状分析・情報設計

アクセス、検索語、商品数、カテゴリ、離脱、更新業務を確認し、改善対象を決めます。

02

UI・ビジュアル設計

ブランドルールとユーザー行動をもとに、画面構成、色、書体、余白、部品を設計します。

03

クリエイターモード実装

共通、トップ、商品一覧、商品詳細、検索、独自ページ等をHTML・CSS・JSで構築します。

04

商品・コンテンツ制作

商品写真、説明、比較表、特集、ブランドストーリー等、購入判断に必要な情報を整えます。

05

SEO・AI検索の維持

URL、見出し、本文、内部リンク、構造化データ、画像情報を確認して移行します。

06

テスト・更新設計

PC・タブレット・スマホ、主要ブラウザ、会員・購入条件を確認し、更新ルールを渡します。

Quality Check

公開前に、見た目と購入機能を分けて確認

DESIGN QA

表示・操作の確認

  • PC・タブレット・スマートフォン
  • 文字サイズ、余白、画像比率、改行
  • メニュー、検索、絞り込み、固定ボタン
  • 速度、画像容量、アクセシビリティ
COMMERCE QA

販売機能の確認

  • 価格・会員価格・バリエーション・在庫
  • カート投入、送料、決済、クーポン
  • 会員登録、ログイン、メール
  • 計測タグ、SEO、公開後の更新
Process

デザインだけを先に作らない進行

STEP 01調査

現行モード、機能、流入、課題を確認。

STEP 02要件整理

商品、顧客、導線、更新体制を整理。

STEP 03画面設計

必要ページと情報の優先順位を決定。

STEP 04デザイン

ブランドと操作性を画面へ具体化。

STEP 05実装・移行

クリエイターモード等へ構築。

STEP 06テスト・公開

表示、購入、計測、更新を確認。

FAQ

makeshopのデザインに関する質問

makeshopでオリジナルデザインのECサイトを作れますか?

はい。クリエイターモードではHTML、CSS、JavaScriptと独自タグを利用し、レスポンシブ対応のオリジナルデザインを構築できます。ただし、購入処理等のシステム領域は変更範囲が異なるため、要望ごとに実現可否を確認します。

既存テンプレートを使わずにデザインできますか?

クリエイターモードのデザインセットを土台に不要部分を整理する方法と、ブランド・商品・購入導線に合わせて構成から設計する方法があります。必要な独自性、予算、公開時期、更新体制を確認して選びます。

クリエイターモードとノーコードデザインのどちらがよいですか?

独自の情報設計、表示条件、細かなレスポンシブ調整を重視する場合はクリエイターモードが候補です。社内で画面を見ながら更新したい場合はノーコードデザインも比較します。必要機能と運用担当者のスキルで判断します。

古いベーシックモードから変更できますか?

可能ですが、既存コードをそのまま移すのではなく、使用機能、独自タグ、商品・カテゴリ表示、外部スクリプト等を調査して再構築します。切替前にデザインセットを作成し、テスト後に適用する進め方を基本とします。

スマートフォンだけデザインが崩れている場合も対応できますか?

はい。画面幅だけでなく、ヘッダー、検索、カテゴリ、商品画像、バリエーション、カートボタン、固定要素等を実機で確認します。部分修正で足りるか、レスポンシブ構造から再設計すべきかを判断します。

トップページだけリニューアルできますか?

可能です。ただし、トップページだけを新しくしても、商品一覧・商品詳細・検索・カートへの導線が古いままでは成果につながりにくいため、共通ヘッダーと主要購入ページも合わせて確認します。

商品ページの情報や購入導線も改善できますか?

はい。商品画像、説明、比較情報、レビュー、在庫・納期、バリエーション、関連商品、カートボタン等の優先順位を整理します。商材や購入検討期間に合わせて、必要な判断材料を商品ページ内に配置します。

SEOを維持してデザイン変更できますか?

既存URL、title、見出し、本文、内部リンク、構造化データ、画像代替テキスト等を確認して進めます。デザイン変更に伴って重要なテキストやリンクを削除しないよう、検索流入のあるページを事前に整理します。

公開後に自社で更新できますか?

更新する箇所をモジュール化し、共通CSSとページ別CSSの役割、画像サイズ、テキスト量、商品登録ルール等を整理します。担当者が変更する範囲と、制作会社へ依頼する範囲を公開前に決めます。

デザイン費用はどのように決まりますか?

対象ページ数、既存デザインの利用範囲、情報設計、撮影・原稿、商品点数、表示条件、外部機能、旧モードからの移行、テスト範囲によって変わります。現行サイトと希望内容を確認して個別に見積もります。

Design Consultation

古い見た目だけでなく、
売り方と導線から見直します。

部分修正か全面リニューアルか決まっていなくても大丈夫です。
現行デザインと運用を確認し、優先して直す画面を整理します。

03-5876-5819

平日10:00-18:00(土日祝除く)