現役Webデザイナーが、初心者のホームページ自作を応援!

BASEデザインパーツ

最終更新日:

BASE(ベイス)のデザインパーツの特徴・使い方を徹底解説!

BASE(ベイス)のデザインパーツを徹底解説!

出典:BASE

ホームページ作成の初心者
初心者 ハナ

BASEのデザインパーツって何?
BASEのデザインパーツの使い方は?

今回は、BASE(ベイス)に関する、上記のような疑問にお答えします。

本記事の内容

  • BASEのデザインパーツとは?
  • BASEのデザインパーツの使い方
  • BASEのデザインパーツ紹介

本記事の執筆者

ホームページ自作を応援するWebデザイナー
リュウ

こんにちは、ホームページ自作ラボ管理人のリュウです。
私は、現役のWebデザイナーとして、ホームページ制作会社の代表をしています。

本記事は、以下のような人にオススメです

  • BASEのデザインパーツについて知りたい
  • BASEが自分に向いているかを判断したい

本記事を読むことで、BASEのデザインパーツについて知ることができ、BASEがあなたに向いているネットショップ作成サービスかどうかの判断材料になります。

結論を先に言うと

BASEのデザインパーツを利用すれば、誰でも簡単にページ作成ができます。
ショップや商品の魅力を伝えられるネットショップ作成に役立つでしょう。

では、BASE(ベイス)のデザインパーツについて徹底解説していきます!

なお、BASEについての全体的な解説は『BASEを徹底解説』をご覧ください。

BASE(ベイス)のデザインパーツとは?

BASEのデザインパーツとは、管理画面の簡単な操作で、ネットショップのページに様々な要素を追加して、デザインをカスタマイズできる部品です。
パーツの位置を調整するのも簡単なので、自分でレイアウトを決められます。

デザインパーツは20種類以上あり、「テキスト」「画像」のようなシンプルなパーツから、「商品一覧(リスト)」「お知らせエリア」など幅広く用意されています。
それぞれのパーツには、そのパーツをカスタマイズできる機能もあるので、思い通りのショップページを作ることができます。

ちなみに、デザインパーツは、BASEのオフィシャルテーマ(無料のテーマ)でのみ利用できます。
以下のテーマでは、デザインパーツを利用できません。

  • デザインマーケットで購入した有料テーマ
  • 「HTML編集 App」で編集したカスタムテーマ

BASE(ベイス)のデザインパーツの使い方

BASEのデザインパーツの使い方は簡単です。

まず、管理画面最上部にあるメニューの中にある【デザイン】をクリックします。

管理画面最上部にあるメニューの【デザイン】をクリック

出典:BASE

左側に表示されたメニューの中にある【パーツ】をクリックします。

左側に表示されたメニューの中にある【パーツ】をクリック

出典:BASE

表示されたパーツの一覧から、追加したいパーツを選び、ドラック&ドロップでページに追加します。

ページに追加したパーツを選択状態にすると、左側にパーツの詳細設定できる箇所が表示されます。
詳細設定を行って、カスタマイズすることが可能です。

パーツの詳細設定できる箇所

出典:BASE

ページに追加したパーツが選択状態になっていると、そのパーツの右上に操作ボタンが表示されます。
【↑】【↓】でパーツの位置を上下に移動させたり、【ゴミ箱アイコン】で削除することができます。

パーツの右上の操作ボタン

出典:BASE

BASE(ベイス)のデザインパーツ紹介

追加できるBASEのデザインパーツを紹介します。

テキスト・リンク

テキスト・リンク関連のパーツです。

タイトル

タイトルを表示できます。
文章や商品一覧などの見出しに使ってください。

あくまで見出し用のパーツなので、説明文などの文章は「テキスト」パーツを使いましょう。

BASEのデザインパーツのタイトル

出典:BASE

テキスト

テキストを表示できます。
説明文など、見出し以外の本文のテキストに使ってください。

見出しの役割を持たせるテキストには「タイトル」パーツを使いましょう。

BASEのデザインパーツのテキスト

出典:BASE

ボタン

リンクを設定したボタンを作れます。
他のページや、ショップ外のページに移動させるためのリンクに使ってください。

BASEのデザインパーツのボタン

出典:BASE

メディア

メディア関連のパーツです。

画像

画像を載せることができます。
画像にリンク設定ができるので、バナー画像としても使えます。

BASEのデザインパーツの画像

出典:BASE

画像とテキスト(上下)

上下に画像とテキストの組み合わせたものを、最大3個まで載せることができます。
画像にリンク設定ができるので、カテゴリページへ誘導するための説明を載せるなど、様々な使い方が可能です。

同じ「画像とテキスト(上下)」パーツ内に載せる枚数に応じて、自動的に最適なレイアウトで表示されます。

BASEのデザインパーツの画像とテキスト(上下)

出典:BASE

画像とテキスト(左右)

画像とテキストを左右に配置することができます。
ショップや商品のこだわりを載せるなど、様々な使い方が可能です。

BASEのデザインパーツの画像とテキスト(左右)

出典:BASE

スライドショー

最大5枚までのスライドショーを作ることができます。
ページのメイン画像の替わりに、スライドショーを載せるのも良いでしょう。

BASEのデザインパーツのスライドショー

出典:BASE

動画

YouTubeかVimeoで公開中の動画URLを指定することで、動画を埋め込むことができます。
BASEに直接、動画ファイルをアップロードして載せることはできないので、載せたい動画はYouTubeかVimeoにアップロードしてから、URLを指定してください。

BASEのデザインパーツの動画

出典:BASE

お知らせ

お知らせ関連のパーツです。

お知らせエリア

お客様へのお知らせなど、目立たせたいテキストを載せることができます。
枠線や背景の色を自由に指定できるのが、「テキスト」パーツと異なる点です。

BASEのデザインパーツのお知らせエリア

出典:BASE

送料案内

送料についての案内を、目立つように載せることができます。
「テキスト」パーツと違い、枠線や背景の色を自由に指定できます。

アイデア次第では、「メインテキスト」の文字サイズだけが大きくなる特徴を活かして、送料案内以外でも使えます。

※ショップ情報や「送料詳細設定 App」の設定とは自動連携されません。

BASEのデザインパーツの送料案内

出典:BASE

商品

商品関連のパーツです。

商品一覧(グリッド)

商品一覧を表示することができます。
グリッド型なので、格子状のレイアウトで商品一覧を表示します。

デフォルトでは3列になっていますが、1列~5列に加えて「2列+4列」の6パターンのレイアウトを指定できます。

BASEのデザインパーツの商品一覧(グリッド)

出典:BASE

商品一覧(リスト)

商品一覧を表示することができます。
リスト型なので、縦1列のレイアウトで、商品説明文も含めて商品一覧を表示します。

商品一覧で商品説明文も載せたい場合は、このパーツを使いましょう。

BASEのデザインパーツの商品一覧(リスト)

出典:BASE

ピックアップ商品

任意の商品を、最大6個まで選択して表示することができます。
新商品やオススメ商品をアピールする箇所として使えます。

BASEのデザインパーツのピックアップ商品

出典:BASE

おすすめ商品

購買記録など様々なデータをもとに、BASEが自動で選択した商品を表示できます。
「ピックアップ商品」パーツのように、自分で指定することはできません。
任意の商品を載せたい場合は、「ピックアップ商品」パーツを使ってください。

BASEのデザインパーツのおすすめ商品

出典:BASE

最近チェックした商品

お客様が最近閲覧した商品を、お客様ごとに自動で、最大6個まで表示できます。
お客様が一度興味を持った商品を表示することで、商品ページへの再訪を促し、購入へつなげる可能性を高められます。

BASEのデザインパーツの最近チェックした商品

出典:BASE

SNS

SNS関連のパーツです。

SNSバナー

SNSのフォローにつなげるためのバナーを表示できます。
リンク先は、BASE管理画面の「ショップ情報」で設定したSNSアカウントです。

BASEのデザインパーツのSNSバナー

出典:BASE

SNSアイコン

BASE管理画面の「ショップ情報」で設定したSNSを、アイコンで一覧表示することができます。
SNSごとに、この箇所に「載せる or 載せない」を指定できます。

BASEのデザインパーツのSNSアイコン

出典:BASE

シェアボタン

各SNSでシェアするためのボタンを表示できます。
シェアするページは、シェアボタンを設置しているページです。

BASEのデザインパーツのシェアボタン

出典:BASE

ショップ情報

ショップ情報関連のパーツです。

ショップ説明

BASE管理画面の「ショップ設定」で設定した「ショップの説明」を表示することができます。

BASEのデザインパーツのショップ説明

出典:BASE

地図

指定した住所のGoogleマップを表示することができます。
店舗案内に使ってください。

BASEのデザインパーツの地図

出典:BASE

特定のAppインストール時のみ利用可能なパーツ

これまで紹介したパーツは、BASEの管理画面にてデフォルトで使えるものです。

ここからは、特定のAppをインストールしているときのみ利用可能なパーツを紹介します。

カテゴリメニュー

※このパーツは「カテゴリ管理 App」インストール時のみ利用可能です。

登録されているすべてカテゴリを、一覧でメニュー表示することができます。
他のカテゴリのページへ移動できるメニューとして使ってください。

カテゴリメニュー

出典:BASE

ブログメニュー

※このパーツは「Blog App」インストール時のみ利用可能です。

ブログ記事の新着3件を、一覧で表示することができます。

ブログメニュー

出典:BASE

セール商品

※このパーツは「セール App」インストール時のみ利用可能です。

「セール App」の機能でセール対象にしている商品を、最大6個まで表示することができます。
任意の商品を表示したい場合は、「商品ピックアップ」パーツを使ってください。

セール商品

出典:BASE

同じカテゴリの商品

※このパーツは「カテゴリ管理 App」インストール時のみ利用可能です。

商品ページで、表示中の商品と同じカテゴリの商品を、最大6個まで表示することができます。
表示する商品は、表示中の商品と同じカテゴリ設定の商品から自動選択されるので、任意の商品を指定することはできません。
任意の商品を表示したい場合は、「商品ピックアップ」パーツ使ってください。

ちなみに、このパーツは「商品ページ」のみに追加可能です。

同じカテゴリの商品

出典:BASE

BASE(ベイス)のデザインパーツのまとめ

今回は、BASEのデザインパーツについて徹底解説しました。

BASEのデザインパーツを利用すれば、誰でも簡単にページ作成ができます。
ショップや商品の魅力を伝えられるネットショップ作成に役立つでしょう。

なお、BASEについての全体的な解説は『BASEを徹底解説』をご覧ください。

このページのトップに戻る