静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ECサイト > EC-CUBE4系 デザイン編

ECサイト ホームページ制作 EC-CUBE4系 デザイン編

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

こんにちは、制作部デザイナーの倉光です。

EC-CUBE4系の準備編・プラグイン編に続き、
今回はデザイン編(EC-CUBEのデザインテンプレート~管理画面での構築方法)をご紹介いたします。


※EC-CUBEは株式会社イーシーキューブの商標です

初めてEC-CUBEを構築する場合、何から手をつけていいか、
ファイルの構成がどうなっているのか分からない方が多いと思います。(私もそうでした)

公式のドキュメントを見てもよく分からず、構築のハードル高すぎ・・・!と何度思ったことか。。

今回は初めての方でも分かりやすいように、
EC-CUBE4系の構築方法を解説していきたいと思います。

EC-CUBEのデザインテンプレート

EC-CUBEを構築する場合、最初に悩むのはどのようなデザインにするかということではないでしょうか。

公式サイトには様々なデザインテンプレートが用意されており、
すぐにECサイトをオープンしたい方は、デザインテンプレートの活用をおすすめいたします。

EC-CUBEのデザインテンプレート集

弊社ではデザインテンプレートは使わず、初期テンプレートをカスタマイズして、独自デザインの構築をしております。

株式会社葛野農園様(お茶の葛野農園)

独自デザインの要件定義

独自デザインで構築する場合は、最初の要件定義がとても大切だと実感しております。

全体のイメージを把握するために、
公式サイトで提供されているAdobeXDの「画面テンプレート」がとても参考になります。

私も初めの頃は「画面テンプレート」を利用し、
・デフォルトのデザインを踏襲する部分
・しっかり独自のデザインを作っていく部分
に分けて考えていきました。

画面テンプレートのダウンロード

  • フロント画面テンプレート for Adobe XD
  • 管理画面テンプレート for Adobe XD

また、カスタマイズが必要な場合は「プラグイン編」で便利なプラグインを紹介しておりますので、
ぜひ参考にしてください。

独自デザインのコーディングについて

EC-CUBE4系で初期テンプレートを活用してオリジナルテンプレートを作成する場合、
管理画面から初期テンプレートを複製して作りはじめることをおすすめします。

1.管理画面にログインして、オーナーズストア > テンプレート > テンプレート一覧に移動
2.画像赤枠の雲のダウンロードボタンをクリックしてdefault.tar.gzをダウンロード
3.画面右上の「新規作成」をクリック

4.アップロード画面に移動するので、任意のテンプレートコード・テンプレート名を入力し、先ほどダウンロードしたファイルをテンプレートファイルにアップロードして、画面右下の「登録」をクリック

5.先ほど追加したオリジナルテンプレートが追加されているので、赤枠にチェックをいれて「登録」をクリック

これで初期テンプレートの複製ができたので、オリジナルテンプレートを使用してコーディングをすることができます。

管理画面での構築方法

ここからは、管理画面のコンテンツ管理を利用したり、直接ファイルを編集する方法でコーディングを進めていきます。
直接ファイルを編集する方法は次回の「カスタマイズ編」でお伝えするので、今回は管理画面からコードを編集する方法について解説します。

管理画面からコーディングする場合、管理画面の「コンテンツ管理」を利用して作っていきます。

  • レイアウト管理
  • ブロック管理
  • ページ管理
  • CSS管理
  • JavaScript管理
  • ファイル管理


コンテンツ管理 > レイアウト管理からトップページや下階層のレイアウトを変更することができます。 また、どちらのレイアウトにも当てはまらない場合、新規で追加することができます。


変更したいレイアウトに入り、右側の「未使用ブロック」から表示させたいセクションにドラッグ&ドロップで移動させます。


レイアウトに追加したいコンテンツがある場合、コンテンツ管理 > ブロック管理からブロックを追加します。ブロックを追加すると、先ほどのレイアウト管理の未使用ブロックに表示されます。
ブロック名、ファイル名、コード(twigで記述)を記入して登録します。
ブロックの中で違うブロックを呼び出すことも可能です。


コンテンツ管理 > ページ管理から各ページのソースコードの編集ができます。
「新規作成」からページの追加ができます。


ページ管理の中で設定する項目は以下です。

  • ページ名
  • URL(https://ドメイン/user_data/ の後に続くファイル名)
  • ファイル名(テンプレートファイル名)
  • コード(twigで記述)
  • レイアウト設定 (レイアウト管理で作成したテンプレートを選択)
  • メタ設定(キーワード、ディスクリプションの設定)


コンテンツ管理 > CSS管理からCSSを追加記述することができます


コンテンツ管理 > JavaScript管理からCSS同様JSを追加記述することができます


コンテンツ管理 > ファイル管理から画像をアップロードすることができます。

まとめ

今回はEC-CUBE4系 デザイン編としてEC-CUBEのデザインテンプレート~管理画面での構築方法を紹介しました。

最後のカスタマイズ編では、
直接ファイルを編集する方法でのコーディングの仕方や、弊社でカスタマイズした事例を紹介したい思います。

次回もお楽しみに!

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

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top