BASEデザインテーマ「HOWARI」

「HOWARI」とは？

「HOWARI」は、ネットショップ開設サービス「BASE」専用のデザインテーマです。
カラーや画像、テキストを設定するだけで、デザイン性のあるネットショップを簡単に作ることができます。
パソコンでの閲覧はもちろんのこと、タブレットやスマートフォンでの閲覧にも最適化しています。（レスポンシブデザイン）

販売ページ

「HOWARI」は「BASEデザインマーケット」にて販売中です。
価格：5,800円
※月額（サブスク）ではありません。買い切りです。一度のご購入でずっと使えます。

デモショップ

サンプルとしてご覧いただけるよう、「HOWARI」を使用したデモショップをご用意しております。

特徴・機能

「簡単＆便利」を目指しました

「面倒な設定はしたくない！」という方でもすぐにお使いいただけるよう、簡単な設定だけでショップが作れるようになっています。

1. メイン画像は1種類でOK
   ※最大3種類まで設定可能
2. カラー設定は3種類だけでOK
   ※メインカラー、アクセントカラー、背景カラーの設定だけでバランスのいい配色になります
3. 本文のテキストカラーは、背景の色に応じて自動的に切り替わる
   ※明るい背景のとき→黒色の本文、暗い背景のとき→白色の本文に切り替わります

「HOWARI」の機能一覧

3種類のカラー設定

メインカラー、アクセントカラー、背景カラーをお好きな色に設定できます。

ロゴテキストの文字サイズを3段階から選択可能

大・中・小から選択できます。

リンクボタンの枠線をつける・つけないが選択可能

ボタンに枠線をつけたり、枠線の色を設定できます。

ヘッダーメニューのテキストを変更可能

「About」や「Contact」などのメニュー名をお好きな文言に変更できます。

メインビジュアルを3つまで設定可能

メイン画像は最大3つ設置できます。1つだけでもバランスよく配置できるようになっています。

メインビジュアルに2種類のテキストを設定可能

メインテキスト（大きい文字）、サブテキスト（小さい文字）の2種類のテキストを設定できます。

フリーエリアを3つまで設定可能

ショップの紹介や案内を掲載できるエリアです。画像、テキスト、リンクボタンを設置できます。

動画を掲載可能

YouTube動画と補足テキストを掲載できます。動画がない場合はテキストのみの掲載も可能です。

ピックアップアイテムを3つまで設定可能

おすすめの商品を掲載できるエリアです。画像、テキスト、リンクボタンを設置できます。

Aboutページもカスタマイズ可能

Aboutページのメイン画像、見出しテキスト、店舗情報やGoogleマップへのリンク、よくある質問を掲載できます。

Contactページにお知らせを掲載可能

お問い合わせ前に見てほしいことや注意事項など、お好きなテキストを掲載できます。

OGP画像を設定可能

SNSでシェアしたときに表示されるOGP画像をお好きな画像に設定できます。（商品ページでは商品の画像が適用されます）

CSSを追加可能

独自のCSSを追加してカスタマイズすることができます。（知識のある方向け）

各ページの内容

最初から用意されているページ

• Topページ（サンプル）
• Aboutページ（サンプル）
• 商品ページ（サンプル）
• Contactページ（サンプル）
• プライバシーポリシー（サンプル）
• 特定商取引法に基づく表記（サンプル）

Appをインストールすることで利用できるページ

• カテゴリページ（サンプル）
  ※「カテゴリ管理App」インストールで利用可能
• 検索結果ページ（サンプル）
  ※「商品検索App」インストールで利用可能
• ブログページ（サンプル）
  ※「Blog App」インストールで利用可能
• コミュニティページ（サンプル）
  ※「コミュニティApp」インストールで利用可能
• メンバーシップページ（サンプル）
  ※「メンバーシップApp」インストールで利用可能

表示が固定されておりカスタマイズできないページ

• ショッピングカートから購入完了までのページ

利用可能App

「英語・外貨対応App」「ページ追加App」以外はすべて対応しています。

テーマの適用方法

ページ内構成と各パーツの表示方法

＜アイコンの説明＞
オプション…BASE管理画面のメニュー「デザイン」→「テーマ設定」から設定できるパーツです。
App…対象のAppをインストールすると利用できるパーツです。

Topページ

大きい画像はこちら

• お知らせバナー
  ショップの上部に任意のテキストを表示できる機能です。
  App「お知らせバナーApp」をインストール後、「デザイン」→「お知らせバナー」から設定できます。
  
  
• ヘッダーロゴ
  ショップのロゴ部分です。デフォルトではショップ名がテキストで表示されます。
  ロゴの色や文言を変更したり、ロゴ画像を使用する場合は「デザイン」→「ロゴ」から設定してください。
  App「ショップロゴ作成 App」をインストールすると、オリジナルのロゴを作成できます。
  
  
• ヘッダーナビ
  ナビゲーション部分です。インストールしているAppによって表示内容が変わります。
  オプション「デザイン」→「テーマ設定」から文言が変更できます。日本語も使用可能です。
  
  
• ヘッダーアイコン
  検索アイコン、BASEアイコン、カートアイコン、マイページアイコンが表示されます。
  App検索アイコンは「商品検索App」がインストールされている場合に表示されます。
  カートアイコンは固定表示のため、設定変更できません。
  BASEアイコンは「BASEロゴ非表示App」で非表示にできます。（月額500円の有料Appです）
  マイページアイコンは「メンバーシップApp」がインストールされている場合に表示されます。
  
  
• メインビジュアル
  メイン部分です。画像は3種類設定できます。（1種類のみでも可）
  テキストはメインテキストとサブテキストをそれぞれ設定できます。
  オプション「デザイン」→「テーマ設定」からメイン画像やテキストを設定できます。
  文章を改行したいときは<br>タグを使用してください。
  
  
• ブログの固定記事リンク
  固定記事のタイトルとリンクを表示するエリアです。
  App「Blog App」がインストールされており、記事編集画面で「この記事を固定にする」にチェックを入れた場合に表示されます。
  
  
• フリーエリア
  タイトル・画像・テキスト・リンクボタンを掲載できるエリアです。3件まで設定できます。
  オプション「デザイン」→「テーマ設定」から設定できます。
  文章を改行したいときは<br>タグを使用してください。
  
  
• 動画エリア
  YouTube動画を掲載できるエリアです。動画の下には任意のテキストを設定できます。
  オプション「デザイン」→「テーマ設定」から設定できます。
  文章を改行したいときは <br>タグを使用してください。
  テキストリンクを設定する場合は、以下のようにaタグで囲んでください。
  <a href="リンク先URL">リンクテキスト</a>
  
  
• ピックアップエリア
  おすすめのアイテムを3件まで掲載できるエリアです。画像・テキスト・ボタンのリンク先がそれぞれ設定できます。
  オプション「デザイン」→「テーマ設定」から設定できます。
  
  
• 新着アイテム一覧
  商品の一覧です。新しい順に表示されます。
  オプション「新着アイテム」と書かれた見出しテキストを変更したい場合は、「デザイン」→「テーマ設定」から設定できます。
  
  
• ブログ記事一覧
  ブログの最新記事が表示されます。
  App「Blog App」がインストールされており、ブログ記事を1件以上公開している場合に表示されます。
  
  
• メールマガジン登録エリア
  メールマガジンの登録フォームです。
  App「メールマガジンApp」がインストールされている場合に表示されます。
  オプション「デザイン」→「テーマ設定」からタイトルと説明テキストを設定できます。
  エリアそのものを非表示にすることもできます。
  
  
• フッター
  ロゴ、サブメニュー（プライバシーポリシーなど）、SNSアイコンが表示されます。
  ロゴの設定はヘッダーロゴと共通です。
  サブメニューは自動出力されるため設定変更できません。
  SNSアイコンは「ショップ設定」→「SNS設定」に入力された内容が表示されます。
  
  
• 右下固定アイコン
  メッセージアイコン、ページのトップに移動するアイコンが表示されます。
  Appメッセージアイコンは「メッセージApp」がインストールされている場合に表示されます。
  ページトップアイコンは固定で表示されるため設定変更できません。

Aboutページ

大きい画像はこちら

• メインエリア
  Aboutページのメイン部分です。
  オプション「デザイン」→「テーマ設定」から画像を設定できます。
  テキストは「ショップ設定」→「ショップの説明」に入力した内容が表示されます。
  
  
• 店舗情報
  自由テキスト、住所、電話番号、営業時間、定休日、Googleマップのボタンを設定できます。
  オプション「デザイン」→「テーマ設定」から設定できます。入力した項目のみが表示されます。
  
  
• よくある質問
  よくある質問と回答を10個まで設定できます。
  ショッピングガイドを掲載するエリアとしてもご利用いただけます。
  オプション「デザイン」→「テーマ設定」から設定できます。
  文章を改行したいときは <br>タグを使用してください。
  テキストリンクを設定する場合は、以下のようにaタグで囲んでください。
  <a href="リンク先URL">リンクテキスト</a>

商品ページ

大きい画像はこちら

• 商品画像
  登録した商品画像が表示されます。
  
  
• 商品の説明
  商品登録画面の「商品説明」に入力した内容が表示されます。
  
  
• 商品の情報
  登録した商品の情報や購入ボタン、SNSのシェアボタンなどが表示されます。
  
  
• 「商品説明カスタムApp」の内容表示エリア
  商品の詳しい説明を表示するエリアです。
  App「商品説明カスタムApp」をインストール後、商品登録画面の「商品説明カスタム」でパーツを追加できます。
  見出し・本文テキスト・画像・動画・スライドショーを設定できます。
  
  
• 関連商品エリア
  関連商品がある場合に表示されます。
  
  
• 評価エリア
  購入者からのレビュー情報が表示されるエリアです。
  App「レビューApp」をインストールすると表示されます。

Contactページ

大きい画像はこちら

• お知らせエリア
  任意のテキストを表示できるエリアです。
  オプション「デザイン」→「テーマ設定」から設定できます。
  文章を改行したいときは <br>タグを使用してください。
  テキストリンクを設定する場合は、以下のようにaタグで囲んでください。
  <a href="リンク先URL">リンクテキスト</a>
  
  
• お問い合わせフォーム
  フォーム部分です。BASEのシステムで自動出力されるため、設定変更はできません。

カテゴリページ

大きい画像はこちら

カテゴリページは「カテゴリ管理App」がインストールされており、カテゴリを1つ以上設定している場合に表示されます。

• カテゴリへのリンク
  「Apps」→「カテゴリ管理」で設定したカテゴリが表示されます。
  
  
• 商品一覧
  各カテゴリの商品が表示されます。
  
  

テーマのカスタマイズ方法

BASE管理画面のメニュー「デザイン」→「テーマ設定」から設定できるカスタマイズの一覧です。
※すべての項目を設定する必要はありません。必要に応じて設定してください。

【全体】メインカラー

テーマのメインとなる色を指定してください。

【全体】アクセントカラー

リンクボタンやワンポイント部分に使用される色を指定してください。

【全体】背景カラー

背景の色を指定してください。

【全体】ロゴテキストの文字サイズ

ロゴ部分のテキストサイズを「大」「中」「小」から選択してください。
※デフォルトは「中」です。
※ロゴ画像使用時は反映されません。

【全体】リンクボタンに枠線をつける場合はON

リンクボタンに枠線をつけることができる機能です。
背景色との兼ね合いで視認性が悪くなるときなどにご利用ください。

【全体】リンクボタンに枠線をつける場合の枠線カラー

上記「【全体】リンクボタンに枠線をつける場合はON」をONにした際の、枠線の色を指定してください。

【全体】トップページのタイトル

ヘッダーナビ「Home」部分のテキストを変更したい場合に入力してください。

【全体】Aboutページのタイトル

ヘッダーナビ「About」部分のテキストを変更したい場合に入力してください。

【全体】Categoryページのタイトル

ヘッダーナビ「Category」部分のテキストを変更したい場合に入力してください。
※カテゴリ管理Appが必要です。

【全体】Blogページのタイトル

ヘッダーナビ「Blog」部分のテキストを変更したい場合に入力してください。
※Blog Appが必要です。

【全体】Faqのタイトル

ヘッダーナビ「Faq」部分のテキストを変更したい場合に入力してください。
※Aboutページ内にある「よくある質問」の項目が1つ以上設定されているときのみ表示されます。

【全体】Contactページのタイトル

ヘッダーナビ「Contact」部分のテキストを変更したい場合に入力してください。

【全体】Communityページのタイトル

ヘッダーナビ「Community」部分のテキストを変更したい場合に入力してください。
※コミュニティAppが必要です。

【TOP】メインビジュアル：メイン画像

一番大きなメイン画像を指定してください。
※指定のない場合は表示されません。

【TOP】メインビジュアル：左上画像

左上に配置されるメイン画像を指定してください。
※指定のない場合は表示されません。

【TOP】メインビジュアル：左下画像

左下に配置されるメイン画像を指定してください。
※指定のない場合は表示されません。

【TOP】メインビジュアル：メインテキスト

メイン部分の大きなテキストを入力してください。
※改行したい場合は<br>タグを入れてください。
※入力のない場合は表示されません。

【TOP】メインビジュアル：サブテキスト

メイン部分の小さなテキストを入力してください。
※改行したい場合は<br>タグを入れてください。
※入力のない場合は表示されません。

【TOP】フリーエリア1～3：表示する場合はON

フリーエリアを表示する場合はONにしてください。

【TOP】フリーエリア1：タイトル

1つ目のフリーエリアのタイトル（見出し）を入力してください。
※タイトルは必須項目になります。入力のない場合はフリーエリア自体が表示されなくなります。

【TOP】フリーエリア1：画像

1つ目のフリーエリアの画像を指定してください。
※指定のない場合は表示されません。

【TOP】フリーエリア1：テキスト

1つ目のフリーエリアの本文を入力してください。
※改行したい場合は<br>タグを入れてください。
※入力のない場合は表示されません。

【TOP】フリーエリア1：ボタンを表示する場合はON

1つ目のフリーエリアにリンクボタンを表示する場合はONにしてください。

【TOP】フリーエリア1：ボタンテキスト

1つ目のフリーエリアのリンクボタンのテキストを入力してください。
※入力のない場合は「詳細を見る」が表示されます。

【TOP】フリーエリア1：ボタンのリンクを新しいタブで開く場合はON

1つ目のフリーエリアでリンクボタンをクリックしたときに、新しいタブで開きたい場合はONにしてください。

【TOP】フリーエリア1：ボタンリンク先URL

1つ目のフリーエリアのリンクボタンのURLを「https://～」から入力してください。

※フリーエリア2～3のカスタマイズ方法も上記と同様になります。

【TOP】動画エリア：表示する場合はON

動画エリアを表示する場合はONにしてください。

【TOP】動画エリア：YouTube動画URL

表示したい動画のURLを入力します。
「https://www.youtube.com/watch?v=」の「v=」より後ろを入力してください。
※例：動画のURLが「https://www.youtube.com/watch?v=8Xx16jPkKF8」の場合、「8Xx16jPkKF8」と入力。
※入力のない場合は表示されません。

【TOP】動画エリア：テキスト

動画エリアにテキストを表示する場合は入力してください。
※入力のない場合は表示されません。

【TOP】「ピックアップアイテム」部分の見出しテキスト

「ピックアップアイテム」の見出しを変更したい場合は入力してください。
※入力のない場合は表示されません。

【TOP】ピックアップアイテムのボタン枠＆テキストカラーを独自に設定する場合はON

ピックアップアイテムのボタン枠カラーとボタンのテキストカラーを指定したい場合はONにしてください。
※OFFのときはアクセントカラーが反映されます。

【TOP】ピックアップアイテムのボタン枠＆テキストのカラー

上記「【TOP】ピックアップアイテムのボタン枠＆テキストカラーを独自に設定する場合はON」をONにした際の、ボタン枠カラーとボタンのテキストカラーを指定してください。
※ボタン枠カラーとボタンのテキストカラーは同じ色になります。別々に指定することはできません。

【TOP】ピックアップエリア1：画像

1つ目のピックアップエリアの画像を指定してください。
※画像は必須項目になります。指定のない場合はピックアップエリア自体が表示されなくなります。

【TOP】ピックアップエリア1：テキスト

1つ目のピックアップエリアの本文を入力してください。
※改行したい場合は<br>タグを入れてください。
※入力のない場合は表示されません。

【TOP】ピックアップエリア1：ボタンを表示する場合はON

1つ目のピックアップエリアにリンクボタンを表示する場合はONにしてください。

【TOP】ピックアップエリア1：ボタンテキスト

1つ目のピックアップエリアのリンクボタンのテキストを入力してください。
※入力のない場合は「詳細を見る」が表示されます。

【TOP】ピックアップエリア1：ボタンのリンクを新しいタブで開く場合はON

1つ目のピックアップエリアでリンクボタンをクリックしたときに、新しいタブで開きたい場合はONにしてください。

【TOP】ピックアップエリア1：ボタンリンク先URL

1つ目のピックアップエリアのリンクボタンのURLを「https://～」から入力してください。

※ピックアップエリア2～3カスタマイズ方法も上記と同様です。

【TOP】ピックアップエリア全体：左上のリボンを表示する場合はON

ピックアップエリアの左上にあるリボンの装飾のON・OFFができます。
※リボンが不要な場合はOFFにしてください。
※区切り線はOFFにできません。

【TOP】「新着アイテム」部分の見出しテキスト

「新着アイテム」の見出しを変更したい場合は入力してください。
※入力のない場合は表示されません。
※新着アイテムエリア自体を非表示にすることはできません。

【Aboutページ】メインエリア：画像

Aboutページのメインエリアの画像を指定してください。
※指定のない場合は表示されません。

※Aboutページのメインエリアの本文を変更する場合は、管理画面右上のメニュー「ショップ設定」→「ショップの説明」欄に入力してください。

【Aboutページ】店舗情報：表示する場合はON

Aboutページに店舗情報を表示する場合はONにしてください。

【Aboutページ】「店舗情報」部分の見出しテキスト

Aboutページに店舗情報を表示するとき、「店舗情報」の見出しを変更したい場合は入力してください。
※入力のない場合は表示されません。

【Aboutページ】店舗情報：画像

Aboutページの店舗情報の画像を指定してください。
※指定のない場合は表示されません。

【Aboutページ】店舗情報：フリーテキスト

Aboutページの店舗情報にフリーテキストを表示する場合は入力してください。
※入力のない場合は表示されません。

【Aboutページ】店舗情報：住所

Aboutページの店舗情報に住所を表示する場合は入力してください。
※入力のない場合は表示されません。

【Aboutページ】店舗情報：電話番号

Aboutページの店舗情報に電話番号を表示する場合は入力してください。
※入力のない場合は表示されません。

【Aboutページ】店舗情報：営業時間

Aboutページの店舗情報に営業時間を表示する場合は入力してください。
※入力のない場合は表示されません。

【Aboutページ】店舗情報：定休日

Aboutページの店舗情報に定休日を表示する場合は入力してください。
※入力のない場合は表示されません。

【Aboutページ】店舗情報：Googleマップボタンを表示する場合はON

Aboutページの店舗情報にGoogleマップのリンクボタンを表示する場合はONにしてください。

【Aboutページ】店舗情報：GoogleマップのURL

GoogleマップのURLを入力してください。
※リンクしたいGoogleマップを開く→「共有」ボタン→「リンクを送信する」の共有リンクをコピーし、そのまま貼り付けてください。

【Aboutページ】よくある質問：質問1

Aboutページによくある質問を表示する場合、1つ目の質問を入力してください。
※入力のない場合は表示されません。

【Aboutページ】よくある質問：回答1

Aboutページによくある質問を表示する場合、1つ目の質問に対する回答を入力してください。
※入力のない場合は表示されません。

※よくある質問2～10のカスタマイズ方法も上記と同様になります。

【Contactページ】フォーム上部お知らせエリアのテキスト

Contactページの上部にお知らせそ表示する場合は入力してください。
※改行したい場合は<br>タグを入れてください。
※入力のない場合は表示されません。

【メルマガApp使用時】ページ下部にメルマガ登録エリアを表示する場合はON

メールマガジンApp使用時、各ページの下部にメルマガ登録エリアを表示する場合はONにしてください。

【メルマガApp使用時】メルマガ登録エリアのタイトルテキスト

メールマガジンApp使用時、メルマガ登録エリアのタイトルを入力してください。
※入力のない場合は表示されません。

【メルマガApp使用時】メルマガ登録エリアの説明テキスト

メールマガジンApp使用時、メルマガ登録エリアの説明テキストを入力してください。
※入力のない場合は表示されません。

【全体】OGP画像

SNSでシェアしたときに表示されるOGP画像を指定してください。
※推奨サイズ：1200×630ピクセル
※指定のない場合はBASEデフォルトのOGP画像が適用されます。
※商品ページでは商品の画像が適用されます。

【全体】追加CSS

CSSでカスタマイズしたい場合はこちらに記述いただけます。
※知識のある方のみご利用ください。追加CSSに関するサポートは行っておりません。

スマートフォン用デフォルトテーマ設定

過去にBASEの機能として提供されていた「スマートフォン用のデフォルトテーマ」のサポートが終了した旨が表示されています。
自動的に表示される案内表示で、当テーマへ影響するものではありません。

よくある質問

更新履歴

2023.05.25

「メンバーシップApp」に対応しました。

2023.02.22

「HOWARI」をリリースしました。

HOWARIへのお問い合わせ

お問い合わせの内容をお選びください。