GRAYEL Inc.

BASEデザインテーマ

BASE DESIGN THEME

MANASLU

テーマの購入
デモサイト1
デモサイト2
豊富なカスタマイズ機能で
自由度の高いショップ作成が可能

主な特徴

  • 3種類のヘッダーパターン
  • 3種類の商品詳細の画像レイアウト
  • メインイメージのフルスクリーンON/OFF
  • Instagram埋め込み
  • サイドバーの表示ON/OFF
  • 50種類以上から選べるフォント
  • 画像の比率の選択
  • 画像の角丸、input要素の角丸pxの選択
  • スクロールに付随するコンテンツ
  • バナーやブランドの紹介スライド
  • YouTube動画の紹介エリア
  • ABOUTページにショッピングガイド作成
  • ABOUTページによくある質問作成

他にも様々な機能がありますので、以下ご参照ください。

ヘッダーとメインイメージの設定

ヘッダーのテキストカラーや背景カラーによって様々なパターンのサイトデザインに対応しています。
4つ目のタイプのように全画面以外のタイプにも対応しています。

フッター

ABOUT、MENU、メールマガジンの上部エリアを非表示にしたシンプルなフッターの2パターンから選択できます。

対応APP

テーマ側で対応が必要なAPPにはすべて対応しています。

テーマの購入はこちら

デモサイト

更新履歴

2023.05.23
テーマ設定に「Instagramエリア」の項目を追加しました
2023.04.18
テーマ設定に「OGP – 画像(商品ページ以外)」を追加しました
2023.04.14
テーマ設定に「商品詳細 – 写真と商品説明の比率」を追加、追従の動作を改善しました
2023.03.28
テーマ設定に「商品詳細 – ラベルAppを表示する」、「商品詳細 – 商品名のフォント」、「フッター – 上部表示する(ABOUT,MENU,メールマガジンのエリア)」を追加しました
2023.03.27
テーマ設定に「見出しフォントサイズ」、「TOPページヘッダー – 背景を常に表示する」を追加しました
2023.03.14
リリースしました

はじめに

テーマ購入後、BASE管理画面のデザインから購入したテーマを選択してテーマを適用してください。
テーマ適用後にカスタマイズ設定が行えます。

おすすめAPP

以下APP以外にもすべてのAPPに対応しております。

各種設定

背景の設定

サイト全体の背景色は左の背景から選択してください。
派手なカラーやパターンを選ぶと文字や写真が見にくくなるため白・黒・グレーなどの無彩色がおすすめです。

サイト全体のロゴは左のロゴから設定します。
ここで設定するロゴは下層ページやスクロール時のロゴに適用され、TOPページのロゴはTOPページヘッダー – ロゴ（白色推奨）から設定できます。

ロゴサイズ180x40px内に表示されますが、ヘッダー – ロゴサイズ調整で0.7倍から1.3倍まで選ぶことができます。

基本の設定

サイト全体のテキストカラーやフォントを選択します。

  • 基本テキストカラー / 見易い文字色を選択してください。
  • 基本テキストカラーの反対色(ボタンなどで使用) / 各種ボタンなどで使用しているカラーです。基本テキストカラーが白なら黒、基本テキストカラーが黒なら白を選んでください。
  • 注意書きカラー(セール価格、販売期間など) / 注意を引くように赤、オレンジ、ピンクなど選択してください。
  • フォントサイズ / ターゲットユーザーなどに合わせてフォントサイズを調整してください。
  • 見出しフォントサイズ / 見出しフォントサイズを調整できます。
  • フォント / 見出し、本文、英語、日本語と自由に選択してください。
  • 画像拡大時のカラーテーマ / 商品詳細ページの画像拡大時のカラーテーマを設定できます。
  • 商品画像の角丸px / 0pxから20pxから選択してください。基本は0pxや5pxがおすすめです。
  • フォームパーツの角丸px / 0pxから20pxから選択してください。基本は0pxや3pxがおすすめです。

サイト全体のヘッダー設定です。

  • TOPページヘッダー – ロゴ（白色推奨） / TOPページのロゴを設定できます。
  • TOPページヘッダー – テキストカラー / TOPページの初期状態のテキストとアイコンのカラーです。
  • TOPページヘッダー – 背景を常に表示する / 常に下層ヘッダーと同じ状態になります。
  • ヘッダー – レイアウトタイプ / 3パターンから好きなレイアウトを選んでください。
  • ヘッダー – ロゴサイズ調整 / ロゴ画像の表示サイズを微調整できます。
  • ヘッダー – 背景カラー / スクロール時、下層ヘッダーの背景カラーを選択してください。
  • ヘッダー – テキストカラー / スクロール時、下層ヘッダーのテキストカラーを選択してください。
  • PCヘッダー – カテゴリープルダウン背景カラー / ヘッダーレイアウトで2または3を選んだ時のカテゴリープルダウンの背景カラーです。（カテゴリ管理APPが必要です）
  • PCヘッダー – カテゴリープルダウンテキストカラー / 上述した背景に乗せるテキストのカラーです。
  • カテゴリ一覧の子カテゴリを折りたたむ（カテゴリプルダウン/ドロワー/サイドバー） / 子カテゴリーを折りたたんで表示するかどうかを選択してください。カテゴリ数が多くなる場合は折りたたむのをおすすめします。

ドロワーの設定

左上のボタンで開くメニューです。ドロワーメニューのテキストはヘッダーやサイドバーと共通です。

  • ドロワーメニュー – ○○テキスト / ドロワー、ヘッダー、サイドバーに表示するテキストを自由に設定できます。
  • ドロワーメニュー – 背景カラー / 背景カラーを選択してください。
  • ドロワーメニュー – テキストカラー / テキストカラーを選択してください。
  • ドロワーメニュー – 検索エリア背景カラー / 検索エリア背景カラーを選択してください。
  • ドロワーメニュー – 検索エリアテキストカラー / 検索エリアテキストカラーを選択してください。

商品一覧の設定

商品一覧の設定はピックアップやセールアイテムにも反映されます。

  • 商品一覧 – タイトル / TOPページの商品一覧のタイトルを指定します。
  • 商品一覧 – タイトル下カテゴリ表示(TOPページ) / タイトルの下にカテゴリーを表示します。
  • 商品一覧 – 表示カテゴリ数 / カテゴリーの表示数を選択します。（改行して表示したくない場合は3つまでにすることをおすすめします。（文字数によります）
  • 商品一覧 – 一行の数 / 一行に商品をいくつ表示するか選択してください。
  • 商品一覧 – 商品画像の比率 / 商品画像の比率です。
  • 商品一覧 – MOREボタンテキスト(8文字以内推奨) / 商品一覧の追加読み込みボタンに表示するテキストです。

商品詳細の設定

商品一覧の設定はピックアップやセールアイテムにも反映されます。

  • 商品詳細 – スクロールに追従する / 画像または右のテキストエリアの高さの短い方がスクロールに追従します。
  • 商品詳細 – ラベルAppを表示する / 商品一覧に表示するラベルAppを詳細にも表示するか選択します。
  • 商品詳細 – 写真と商品説明の比率 / 写真と説明の表示サイズを自由に設定できます。
  • 商品詳細 – 写真の表示タイプ / 画像をスライドショーや1列、2列表示から選択できます。
  • 商品詳細 – 商品名のフォント / 商品名のフォントを見出しフォント、本文フォントから選択できます。
  • 商品詳細 – 価格のフォントサイズ / 価格のフォントサイズを調整できます。
  • 商品詳細 – 商品説明カスタムAppを画像の下に表示する / 商品説明カスタムAppを画像の下に移動できます。
  • 商品詳細 – 関連商品タイトル / 関連商品のタイトルを設定できます。
  • 商品詳細 – 関連商品タイトル下テキスト / 上述した関連商品のタイトルの下に表示するテキストを設定できます。

メインイメージの設定

メインイメージは1枚以上設定することをおすすめします。必ずPCとスマホ両方の画像を指定してください。

  • メインイメージ – 全画面にする / 全画面の場合自動でブラウザサイズに合わせて画像が表示されますが、テキストを埋め込んだ画像を作成したりする場合は全画面にしないことをおすすめします。全画面にしない場合は画像サイズを揃えてください。
  • メインイメージ – ドットを表示する / ドットを表示します。
  • メインイメージ – 縮小エフェクト / 画像切り替え時の画像縮小エフェクトのスピードを接敵できます。
  • メインイメージ01~03 – 背景画像(1600x1200px推奨) / PC用の背景画像を設定してください。
  • メインイメージ01~03 – 背景画像(スマホ用) / スマホ時の背景画像を設定してください。縦長の画像がおすすめです。
  • メインイメージ01~03 – バナー画像(PNG画像推奨) / メインイメージの背景画像の上に乗せる画像を選択してださい。キャッチコピーやバナー画像などを表示できます。

固定ブログの設定

ブログAPPを使い、「この記事を固定にする」にチェックを入れた場合に表示されるエリアです。メインイメージの下に表示されます。

  • 固定ブログ – 背景カラー / 背景カラーを選択してください。
  • 固定ブログ – テキストカラー / テキストカラーを選択してください。
  • 固定ブログ – タイトル / タイトルは8文字程度までがおすすめです。

スライドバナーの設定

メインイメージの下のバナーエリアです。バナーの他サイトの紹介、ブランドの紹介エリアとして使うことも可能です。

  • スライドバナー – 表示する / 表示のON/OFFです。
  • スライドバナー – 背景カラー / 背景カラーを選択してください。
  • スライドバナー – 角丸px / 0pxから20pxで選択してください。
  • スライドバナー01~05 – 画像(横幅500px推奨) / 画像を選択してください。
  • スライドバナー01~05 – リンクURL / リンクURLを入力してください。

メインイメージの下のバナーエリアです。バナーの他サイトの紹介、ブランドの紹介エリアとして使うことも可能です。

  • サイドバー – 表示する / 表示のON/OFFです。
  • サイドバー – 追従する / サイドバーがスクロールに追従します。カテゴリ数が多い場合は追従しないことをおすすめします。
  • サイドバナー上部,下部01~03 – 画像(横幅200px以上推奨) / 画像を選択してください。
  • サイドバナー上部,下部01~03 – リンクURL / リンクURLを入力してください。

ピックアップ（セールアイテム）の設定

ピックアップとセールアイテムは同じ機能を持った項目です。タイトルを変更することで好きなエリアとして使用できます。
またカテゴリから自動取得、手動でアイテムを指定する方法の二通りから選択できます。

  • ピックアップ – 表示する / 表示のON/OFFです。
  • ピックアップ – タイトル / タイトルを入力してください。
  • ピックアップ – タイトル下テキスト / タイトルの下に表示するテキストを入力してください。
  • ピックアップ – カテゴリから自動取得 / カテゴリから自動で商品を取得するか設定できます。
  • ピックアップ – カテゴリID / 設定する場合カテゴリページのIDを入力します。カテゴリIDはカテゴリーページのURLの末尾の7桁の数字です。
  • ピックアップ01~03 – 画像(横幅640px推奨) / 手動で設定する場合、画像を選択してください。
  • ピックアップ01~03 – リンクURL / 手動で設定する場合、リンクURLを入力してください。
  • ピックアップ01~03 – アイテム名 / 手動で設定する場合、アイテム名を入力してください。
  • ピックアップ01~03 – 価格 / 手動で設定する場合、価格を入力してください。

コンセプトの設定

背景画像の上に薄い色を乗せることができます。
写真の上に黒の半透明のマスクを乗せて文字を白にするなどの使い方ができます。

  • コンセプト – 表示する / 表示のON/OFFです。
  • コンセプト – 写真に乗せるカラー / 背景写真の上に薄い背景を乗せるカラーを選択してください。
  • コンセプト – 写真に乗せるカラーの透明度 / 上述のカラーの透明度を選択してください。
  • コンセプト – テキストカラー / テキストカラーを選択してください。
  • コンセプト – 画像(1600x1200px推奨) / 画像を選択してください。
  • コンセプト – タイトル / タイトルを入力してください。
  • コンセプト – テキスト / テキストを入力してください。
  • コンセプト – リンクURL / リンクURLを入力してください。
  • コンセプト – リンクテキスト(8文字以内推奨) / リンクボタンのテキストを入力してください。

スクロールアイテムの設定

PCの場合に左に大きな画像、右にスクロールするアイテムを表示するエリアです。

サンプル1のサイトのように大きな写真で使ってる商品を紹介したり、人物の写真を使って口コミを表示したりなどの使い方もできます。

  • スクロールアイテム – 表示する / 表示のON/OFFです。
  • スクロールアイテム – 背景カラー / 背景カラーを選択してください。
  • スクロールアイテム – テキストカラー / テキストカラーを選択してください。
  • スクロールアイテム – 画像を丸く切り抜く / 画像を丸く切り抜けます。
  • スクロールアイテム – 固定画像(900x1200px推奨) / PC時、左に固定する画像です。
  • スクロールアイテム01~03 – 画像(500x500px推奨) / 画像を選択してください。
  • スクロールアイテム01~03 – タイトル / タイトルを入力してください。
  • スクロールアイテム01~03 – サブタイトル/価格 / サブタイトルや価格を入力してください。
  • スクロールアイテム01~03 – テキスト / テキストを入力してください。
  • スクロールアイテム01~03 – リンクURL / リンクURLを入力してください。
  • スクロールアイテム01~03 – リンクテキスト(8文字以内推奨) / リンクボタンのテキストを入力してください。

YouTubeエリアの設定

背景画像の上に薄い色を乗せることができます。
写真の上に黒の半透明のマスクを乗せて文字を白にするなどの使い方ができます。

  • YouTubeエリア – 表示する / 表示のON/OFFです。
  • YouTubeエリア – 写真に乗せるカラー / 背景写真の上に薄い背景を乗せるカラーを選択してください。
  • YouTubeエリア – 写真に乗せるカラーの透明度 / 上述のカラーの透明度を選択してください。
  • YouTubeエリア – テキストカラー / テキストカラーを選択してください。
  • YouTubeエリア – 画像(1600x1200px推奨) / 画像を選択してください。
  • YouTubeエリア – タイトル / タイトルを入力してください。
  • YouTubeエリア – テキスト / テキストを入力してください。
  • YouTubeエリア – YouTube動画URL / YouTubeの動画ページのURLを入力してください。
  • YouTubeエリア – リンクURL / リンクURLを入力してください。
  • YouTubeエリア – リンクテキスト(8文字以内推奨) / リンクボタンのテキストを入力してください。

Instagramエリアの設定

Instagramの投稿を外部ツールを使って埋め込みできます。
外部ツールはSnapWidgetやSauceが簡単でおすすめです。有料もありますが、無料でデモサイトのような表示が可能です。

* 埋め込みコードのエリアは自由エリアとして利用することも可能です。

  • Instagramエリア – 表示する / 表示のON/OFFです。
  • Instagramエリア – タイトル / タイトルを入力してください。
  • Instagramエリア – 埋め込みコード（自由エリア/タグ可） / Instagram埋め込みコードをニュ力してください。
  • Instagramエリア – リンクURL / リンクURLを入力してください。
  • Instagramエリア – リンクテキスト(8文字以内推奨) / リンクボタンのテキストを入力してください。

お知らせの設定

ブログAPPとは別でお知らせを設定するこができます。

  • お知らせ – 表示する / 表示のON/OFFです。
  • お知らせ01~03 – タイトル / タイトルを入力してください。
  • お知らせ01~03 – 日時 / 日時を入力してください。
  • お知らせ01~03 – 本文 / 本文を入力してください。
  • お知らせ01~03 – リンクURL / リンクURLを入力してください。未入力の場合はリンク無しテキストになります。

新着ブログの設定

ブログAPPの新着記事を4件表示します。

  • 新着ブログ – 背景カラー / 背景カラーを選択してください。
  • 新着ブログ – テキストカラー / テキストカラーを選択してください。
  • 新着ブログ – タイトル / タイトルを入力してください。
  • 新着ブログ – リンクテキスト(8文字以内推奨) / リンクボタンのテキストを入力してください。

メールマガジンの設定

メールマガジンAPPを使うことでフッターにメルマガ登録フォームが表示されます。

  • フッター – メルマガタイトル / タイトルを入力してください。
  • フッター – メルマガ説明文 / 説明文を入力してください。

サイト全体のフッター設定です。

  • フッター – 背景カラー(全てのSNSアイコンが見えるように調整してください) / SNSアイコン、BASEアイコンが見えるように背景カラーを選択してください。
  • フッター – テキストカラー / テキストカラーを選択してください。
  • フッター – 上部表示する(ABOUT,MENU,メールマガジンのエリア) / フッターの上部を非表示にすることでシンプルなフッターにも対応しています。
  • フッター – 会社概要タイトル / 会社概要のタイトルを入力してください。
  • フッター – 会社概要テキスト / 会社概要のテキストを入力してください。
  • フッター – MENUタイトル / MENUのタイトルを入力してください。

ABOUTページの設定

ショッピングガイド、よくある質問を設定するとドロワー、サイドバー、フッターにもリンクが表示されます。

  • ABOUTページ – タイトル / タイトルを入力してください。
  • ABOUTページ – 画像(1600x600px推奨) / ページ上部のメイン画像です。
  • ABOUTページ – メッセージ01~02画像(800x600px推奨) / 左右振り分けエリアの画像です。
  • ABOUTページ – メッセージ01~02タイトル / 左右振り分けエリアのタイトルです。
  • ABOUTページ – メッセージ01~02テキスト / 左右振り分けエリアのテキストです。
  • ABOUTページ – ショップの説明タイトル(内容はショップ情報>ショップの設定) / ショップの設定のタイトルを入力してください。
  • ABOUTページ – アクセスを表示する / アクセスのON/OFFです。
  • ABOUTページ – アクセスタイトル / タイトルを入力してください。
  • ABOUTページ – アクセステキスト / テキストを入力してください。
  • ABOUTページ – Googleマップ埋め込みコード / Googleマップの埋め込みコード（iframe）を入力してください。
  • ABOUTページ – ショッピングガイドを表示する / ショッピングガイドのON/OFFです。
  • ABOUTページ – ショッピングガイドタイトル / タイトルを入力してください。
  • ABOUTページ – ショッピングガイドテキスト / テキストを入力してください。strongやbタグが使えます。
  • ABOUTページ – よくある質問を表示する / よくある質問のON/OFFです。
  • ABOUTページ – よくある質問タイトル / タイトルを入力してください。
  • ABOUTページ – よくある質問テキスト / テキストを入力してください。strongやbタグが使えます。

CONTACTページの設定

  • CONTACTページ – タイトル / タイトルを入力してください。

ご意見・ご要望

テーマに関するご意見やご要望、お問い合わせは随時受け付けております。
通常3日以内に返信させていただいておりますが、稼働状況によりお時間をいただくこともございます。

テーマ購入後のお問い合わせはテーマ利用中のサイトURLを記載の上お問い合わせください。

ご意見・ご要望はこちら

カスタマイズのご依頼

テーマには多数の機能を備えておりますが、さらに特化したサイトをご希望の場合は、お客様のご要望に合わせてテーマのカスタマイズを承っております。
テーマのカスタマイズは、テーマの販売価格よりも高額な料金がかかる場合がございます。カスタマイズ作業についての詳細やご予算については、お問い合わせフォームよりお気軽にお問い合わせください。

テーマカスタマイズ費用 : ¥30,000(税別)〜

カスタマイズのご依頼はこちら