サービス利用案内

当サイトは、Internet explorer 11以上、Chrome, Safari, Firefoxの最新ブラウザに最適化されています。
ご利用のブラウザバージョンをご確認のうえ、最新のものにアップデートしていただきますようお願いします。
各ブラウザの「インストール」ボタンをクリックすると、ブラウザの最新版をインストールできます。

新型コロナウイルスに対する支援について

ネットショップの全要素を自由に編集できるスマートデザイン編集ウィンドウ

ネットショップ構築

Cafe24を通じて、ショップを構築する方法についてご案内します。

パソコンとスマホに最適化された
ショップデザイン

ネットショップは売場のインテリアと同様、販売商品の特性に合わせたデザインにしなければなりません。
Cafe24では、ネットショップの全ての要素を自由に編集できる「スマートデザイン編集ウィンドウ」を提供しています。
また、パソコンとスマホ環境に最適化された機能を提供します。

 
01ネットショップのデザインテーマを選ぶ

Cafe24では、プロのデザイナーが制作したハイクオリティなデザインテーマをご提供します。
ネットショップのコンセプトに合わせて、希望のテーマを選んでください。
提供されている基本デザインテーマは、パソコン向けショップだけでなく、スマホ向けショップにも提供されます。

無料デザインを見る
さらに多くのデザインを見る

基本として提供されているショップデザインまたはデザインモジュールの全体的な色合いを修正するなど、希望のスタイルに修正することができます。

02デザインテーマの構造をつかむ

テーマが違っても、ショップのデザインには共通した要素があります。

デザイン構造は、大きく4種類に分けることができます。

構造の概念
ヘッダー (Header)

ページ上段に表示される領域です。
ヘッダーには一般的に、ショップのロゴ、マイショッピングに飛ぶアイコン、カートアイコンなどが置かれます。

ボディ (Body)

ヘッダーとフッターを除く、ショップの全領域です。
ヘッダーとフッターは固定要素ですが、ボディは管理者の好みの形で構成することができます。

フッター (Footer)

ページ下段に表示される領域です。
一般的に、ショップの連絡先と基本情報を表示させます。

ナビゲーション (Navigation)

ヘッダー、またはショップ左側の領域に置かれます。
ショップを一覧表示したり、希望するページに移動したりできるようするメニュー形態です。

では、ショップの基本を構成するヘッダー、ボディ、フッター、ナビゲーションを設定してみましょう。

1. ヘッダー (Header) 設定

ヘッダー領域には、基本としてマイショッピング、カートアイコン、ロゴなどが設定されています。
ロゴ領域を除いた残りのアイコンは、変更しなくても問題なく使用できます。

   

ロゴは基本設定として、管理画面側が入力した「ショップ名」が自動表記されます。
ロゴを変更したい場合は、管理画面の「PCデザイン」から「デザイン編集」ボタンをクリックすれば修正することがで

   
2. フッター (Footer) 設定

フッター領域には、管理画面側で入力したショップ情報が表示されます。
表示される情報を変更したい場合は、管理画面の「ショップ管理 > 基本情報設定 > マイショップ情報」で修正することができます。

   
3. ナビゲーション (Navigation) 設定

販売する商品が決まったら、商品分類情報を入力します。
分類情報は、管理画面の「商品管理 > 商品カテゴリ管理 > カテゴリ設定」で設定できます。

管理画面に分類情報が入力されると、ショップナビゲーション領域に自動的に表示されます。

   
4. メイン画面ボディ (Body) 設定

メイン画面は ショップの中心です。ショップを宣伝し、売上を伸ばすために、さまざまな領域をご活用ください。

メイン画面上段には、通常はバナーを表示します。バナーは、ショップのイメージを伝えたり、プロモーションや宣伝を行ったりするなど、顧客の関心を惹きつけるためのお知らせ領域として活用します。バナーを表示する時は、ショップのコンセプトに合わせてデザインしたバナーを使用する必要があります。

   

メインには、販売を目的として、新商品、ベスト商品など、多彩なコンセプトの商品を表示させることができます。

メイン商品を陳列するには、まず商品を登録して、管理画面の「商品管理 > 商品管理 > メインページ商品の入替え」で陳列を設定します。

   
03デザイン追加、デザインプレビュー

デザイン編集ツールとして「スマートデザイン」および「Edibotデザイン」をサービスしており、デザインは編集ツールごとに管理できます。

ショップのデザインは編集ツールの区別なしに最大12件まで作成可能であり、その中から1件をメインデザインとして指定します。
メインデザインは、ショップ画面に適用されるデザインです。

メインデザイン以外のデザインは別途で保存して管理できます。
プロモーション実施期間またはシーズンごとにデザインを変更することで、ショップに活気を与えることができます。

1. デザイン追加

管理画面の「PCデザイン > Myデザイン」で「新規デザイン追加」ボタンをクリックすると、「スマートデザイン」または「Edibotデザイン」のデザインを追加することができます。

詳しいご利用方法は、マニュアルをご確認ください。

マニュアルへ移動
   
2. デザインプレビュー

作成したデザインは、管理画面の上部にあるデバイスアイコン(PC/Mobile)をクリックしてご確認ください。
マルチショップのプレビューを確認したい場合は、国旗アイコンをクリックしてください。

または「Myデザイン」でデザイン名の下にあるURLをクリックすると確認できます。

   
3. レスポンシブデザインの設定

[Mobileデザイン > 環境設定]の「Mobile用デザイン使用設定」で設定します。

(※レスポンシブデザインは編集ツールを「Edibotデザイン」に設定した場合にのみ適用されます。)

(※「Mobile用デザイン使用設定」を「使用する」に設定する場合、PCショップにのみレスポンシブデザインが適用され、
Mobileショップはスマートデザインで編集する形になります。)

   
ショップデザインが全て完了したら、
次は販売したい商品を登録・表示(陳列)・管理する方法について確認しましょう。
04ショップのデザインを編集する

Cafe24が提供するショップのデザインをユーザーが自在に編集できるよう、
編集の参考になる「デザインガイド」が用意されています。

ユーザーにHTMLの基礎知識やオープンソースを提供し、
コーディングなどウェブサイトの制作に関する専門的な知識がなくても編集ウィンドウを手軽に使えるようにサポートします。

デザインガイドを見ながらHTMLソースを変更し、簡単にデザインを編集してみましょう。

デザインガイド
ショップデザインが全て完了したら
次は販売する商品を登録し、陳列、管理する方法についてご説明します。



TOP