本ガイドは、aishipのテンプレートをベースにECサイトを構築する方に向けて、テンプレート内に含まれる各「機能パーツ」の役割や使い方をわかりやすく整理したものです。
aishipでは、サイトのトップページやフッター、商品一覧、会社情報ページなど、さまざまなエリアが「機能パーツ（管理画面TOP＞サイト管理＞機能パーツ作成）」と呼ばれる単位で構成されています。これらのパーツは、それぞれ管理画面上で個別に編集・カスタマイズすることができ、ECサイトの見た目や導線設計をパーツ単位で変更することができます。
本ガイドでは、テンプレートに実装されている機能パーツを1つずつ取り上げ、以下のようなポイントに基づいて解説しています：
- パーツの種類（例：商品ブロック、バナー、テキストなど）
- 実装されているパーツ名（クラス名）
- 管理画面での表示名と編集のポイント
- 利用目的や配置意図
- 表示エリア（ヘッダー／トップページ／フッターなど）との関係
このドキュメントを活用することで、初めてaishipでサイトを構築する方でも「どこに」「どんなパーツが」「どういう目的で配置されているのか」が視覚的に把握でき、効率的なデザイン編集・運用が可能になります。
テンプレートとは
テンプレートとは、サイトデザインのベースとなる構造です。aishipでは、テンプレートを活用して、トップページや商品ページの構成を自由に編集できます。
機能パーツとは
機能パーツとは、テンプレート内で各要素を構成するブロックです。パーツごとに表示設定や内容変更が可能で、管理画面上で編集できます。
レイアウトとは
aishipの管理画面内で登場する”レイアウト”は、サイトページ内の「ヘッダー」「アサイド（サイドバー）」「フッター」と呼ばれる箇所のコンテンツ設定とhead内挿入、body内挿入の設定を行うものです。
作成したレイアウトを各種ページに適用することで、設定したコンテンツやhead内挿入、body内挿入が該当ページに適用されます。
サイトを確認してみよう
ページ左上の「>サイトを見る」クリックすると下の画像のようなサイトが別タブで表示されます。
TOPページのエリア別の構成ついて
1. ヘッダーエリア
サイトのロゴ、ナビゲーション、検索／カート機能などを表示するエリアです。訪問直後に視認されるため、サイトの印象や使いやすさを左右する重要なパートです。テンプレートではPCとスマホの両方で最適な表示になるように調整済みです。
■ 設定対象パーツ：
- ・ヘッダー：ロゴ
- ・ヘッダー：バナー
- ・ヘッダー：メニュー
- ・ヘッダー：カテゴリ
- ・ヘッダー：検索
- ・ヘッダー：カート
- ・ヘッダー：ユーザーメニュー
- ・ヘッダー：店舗情報
2. メインビジュアルエリア（ファーストビュー）
最初に目に入るビジュアルエリアです。キャンペーンや注目商品への導線を設置し、第一印象でユーザーの関心を惹きつけることが求められます。画像やコピーの訴求力が重要です。
■ 設定対象パーツ：
- ・トップ：メインビジュアル
- ・トップ：小バナー
- ・トップ：利用シーン
3. 商品・カテゴリ紹介エリア
売れ筋や季節商品など、目的ごとのカテゴリを視覚的に紹介するエリアです。ユーザーの回遊を促す導線としても有効です。
■ 設定対象パーツ：
- ・トップ：カテゴリ：画像
- ・トップ：カテゴリ：商品
- ・トップ：カテゴリ：ボタン
- ・トップ：カテゴリリスト：アイテム
- ・トップ：カテゴリリスト：価格
- ・トップ：カテゴリリスト：シーン
4. 商品ブロックエリア
商品一覧をカテゴリごとにまとめて表示するエリアです。並び数や件数によって視認性や印象が変わるため、内容に応じた見せ方の工夫が必要です。
■ 設定対象パーツ：
- ・トップ：商品ブロック：5個並び
- ・トップ：商品ブロック：4個並び
- ・トップ：商品ブロック：3個並び
- ・トップ：ピックアップ商品
- ・トップ：ランキング
5. レビュー／お客様の声セクション
購入検討者の背中を押す“信頼”を補強するエリアです。レビューやお客様の声を具体的に掲載することで、共感や納得を生み出します。
■ 設定対象パーツ：
- ・トップ：お客様の声
6. トピック・特集エリア
期間限定キャンペーンやシーズン企画など、スポット的に強調したい内容を展開するエリアです。視線を惹くデザインと適切なリンク設計がポイントです。
■ 設定対象パーツ：
- ・トップ：トピック
- ・トップ：トピック：商品
- ・トップ：トピック：ボタン
7. お知らせエリア
店舗からのお知らせやシステムメンテナンス情報など、ユーザーへの重要な通知を行うエリアです。更新頻度の高い情報はここで対応しましょう。
■ 設定対象パーツ：
- ・トップ：お知らせ
8. フッターエリア
サイトの信頼性や運営元の情報を伝えるエリアです。ガイド、SNS、著作権情報、営業情報などを網羅的に掲載し、安心して利用してもらうための基盤を担います。
■ 設定対象パーツ：
- ・フッター：ロゴ
- ・フッター：SNS
- ・フッター：コピーライト
- ・フッター：ショップメニュー
- ・店舗紹介：コンテンツ
- ・店舗紹介：画像
- ・店舗紹介：カレンダー
- ・店舗紹介：ボタン
サンプルのテキスト
テンプレートに配置されているパーツの一覧とその役割
ヘッダー：バナー（header-banner）
| 機能パーツの種類 | バナー |
| 機能パーツのクラス | sysFuncBanner |
| パーツ単位のクラス名 | header-banner |
| 見出しテキスト | （設定なし） |
ヘッダーメニューより上の細いバナー。「〇〇以上で送料無料」「会員登録で〇〇ポイントプレゼント！」などのページ全体での共通訴求に利用してください。
ヘッダー：コンテンツ（header-content）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | header-content |
| 見出しテキスト | （設定なし） |
ヘッダーメニューのエリアを構成するフレームのような役割を持っています。テンプレートで用意されているヘッダーのパーツを利用する時は、必ずヘッダーのエリアに配置してください。配置する位置は最上部を推奨します。
ヘッダー：ロゴ（header-logo）
| 機能パーツの種類 | バナー |
| 機能パーツのクラス | sysFuncBanner |
| パーツ単位のクラス名 | header-logo |
| 見出しテキスト | （設定なし） |
ヘッダー左上のロゴになります。このパーツはスマートフォン表示の場合も共通です。
ヘッダー：検索（header-search）
| 機能パーツの種類 | 商品検索 |
| 機能パーツのクラス | sysFuncItemSearch |
| パーツ単位のクラス名 | header-search |
| 見出しテキスト | （設定なし） |
PC表示の場合の右上の検索窓です。スマートフォン表示の際はハンバーガーメニューの内部に格納されています。
ヘッダー：カート（header-cart）
| 機能パーツの種類 | カート情報 |
| 機能パーツのクラス | sysFuncCartInFo |
| パーツ単位のクラス名 | header-cart |
| 見出しテキスト | （設定なし） |
カートに商品が追加された際に、カートアイコン上に数量を表示するためのパーツです。基本的にテンプレートのパーツを利用する際はヘッダーのレイアウト上に配置することを推奨します。
ヘッダー：カテゴリ（header-category）
| 機能パーツの種類 | 商品カテゴリ |
| 機能パーツのクラス | sysFuncItemCategory |
| パーツ単位のクラス名 | header-category |
| 見出しテキスト | カテゴリ |
PCのヘッダーメニュー、スマホ時のハンバーガーメニューの内部、フッターに開閉式の商品カテゴリの一覧を表示します。
親カテゴリを一つ設定することで、そのカテゴリに所属する子カテゴリが表示されます。フッターには開閉式ではなく、子カテゴリの一覧が縦に並んで表示されます。
ヘッダー：メニュー（header-menu）
| 機能パーツの種類 | リストナビ |
| 機能パーツのクラス | sysFuncListNav |
| パーツ単位のクラス名 | header-menu |
| 見出しテキスト | （設定なし） |
PCのヘッダーメニュー、スマホ時のハンバーガーメニューの内部に、設定した単一テキスト、単一リンクを表示します。
リンクは開閉式ではなく、PCのヘッダーメニューでは横並び、スマホのハンバーガーメニュー内、フッターには縦並びで表示されます。
ヘッダー：ユーザーメニュー（header-user-menu）
| 機能パーツの種類 | バナー |
| 機能パーツのクラス | sysFuncBanner |
| パーツ単位のクラス名 | header-user-menu |
| 見出しテキスト | （設定なし） |
マイページへのアイコンリンク、お気に入りボタンのアイコンリンク、カートのアイコンリンクのパーツです。
ヘッダー：店舗情報（header-shop-info）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | header-shop-info |
| 見出しテキスト | （設定なし） |
ヘッダーメニューの右下側に表示するリンクです。テキストのパーツで構成されているため自由にhtmlを利用して作成することができます。
ヘッダー：ドロワーメニュー（header-drawer-menu）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | header-drawer-menu |
| 見出しテキスト | <span class=”header-drawer-menu__line”></span> |
ハンバーガーメニューのボタン部分になっています。
フッター：店舗紹介：コンテンツ（shop-info-content）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | shop-info-content |
| 見出しテキスト | <h2 class=”title-large”>店舗紹介</h2> |
フッターエリアの店舗紹介エリアを構成するフレームのような役割を持っています。
フッター：店舗紹介：画像（shop-img）
| 機能パーツの種類 | バナー |
| 機能パーツのクラス | sysFuncBanner |
| パーツ単位のクラス名 | shop-img |
| 見出しテキスト | （設定なし） |
店舗紹介エリアにイメージ画像を追加するためのパーツ。店舗の外観、内観をそれぞれ配置するイメージでご利用ください。
フッター：店舗紹介：店舗情報（shop-info）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | shop-info |
| 見出しテキスト | <h3 class=”title-small-underline”>店舗名</h3> |
店舗紹介エリアのテキスト部分を記載するパーツ。
フッター：店舗紹介：カレンダー（shop-calender）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | shop-calender |
| 見出しテキスト | <h3 class=”title-small-underline”>営業日カレンダー</h3> |
カレンダーを表示のためのHTML/JavaScriptが記載されているパーツ。
フッター：店舗紹介：ボタン（shop-info-btn）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | shop-info-btn |
| 見出しテキスト | （設定なし） |
店舗の詳細画面に遷移するためのボタンが設置されているパーツ。
フッター：コンテンツ（footer-content）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | footer-content |
| 見出しテキスト | （設定なし） |
フッターエリアエリアを構成するフレームのような役割を持っています。テンプレートで用意されているヘッダーのパーツを利用する時は、必ずヘッダーのエリアに配置してください。配置する位置は最上部を推奨します。
フッター：ロゴ（footer-logo）
| 機能パーツの種類 | バナー |
| 機能パーツのクラス | sysFuncBanner |
| パーツ単位のクラス名 | footer-logo |
| 見出しテキスト | （設定なし） |
フッターに配置するロゴを設定するパーツ。このパーツはスマートフォン表示の場合も共通です。
フッター：SNS（footer-sns）
| 機能パーツの種類 | バナー |
| 機能パーツのクラス | sysFuncBanner |
| パーツ単位のクラス名 | footer-sns |
| 見出しテキスト | （設定なし） |
フッターに配置する、運用中のSNSのアイコンを表示するためのパーツ。
フッター：ショップメニュー（footer-shop-menu）
| 機能パーツの種類 | リストナビ |
| 機能パーツのクラス | sysFuncListNav |
| パーツ単位のクラス名 | footer-shop-menu |
| 見出しテキスト | （設定なし） |
フッター下部の、ご利用ガイド・特定商取引法・会社概要などのガイド系ページへのリンクを設置するパーツ。
フッター：コピーライト（footer-copyright）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | footer-copyright |
| 見出しテキスト | （設定なし） |
フッター下部湖コピーライトを記載するためのパーツ。
トップ：メインビジュアル（top-mv）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | top-mv |
| 見出しテキスト | （設定なし） |
トップページのメインビジュアルを構成するためのパーツ。大きい画像と特定の商品を左下にピックアップして表示することができます。特定商品へのリンクではないページに遷移させたい場合は、商品部分をコメントアウトすることで、通常の大きいメインビジュアルとしても利用可能です。
トップ：小バナー（top-banner）
| 機能パーツの種類 | バナー |
| 機能パーツのクラス | sysFuncBanner |
| パーツ単位のクラス名 | top-banner |
| 見出しテキスト | （設定なし） |
PC表示時、横並び３枚の小さいバナーを設置することができるパーツ。
トップ：ランキング（top-ranking）
| 機能パーツの種類 | 商品ブロック |
| 機能パーツのクラス | sysFuncItemBlock |
| パーツ単位のクラス名 | top-ranking |
| 見出しテキスト | <h2 class=”title-large”>人気 or ランキング</h2> |
売上個数に応じた商品順序で複数点商品を配置するためのパーツ。
トップ：カテゴリ：画像（top-category-img）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | top-category-img |
| 見出しテキスト | <h2 class=”title-medium left”>カテゴリ名</h2> |
シーゾナルの商品など、時期に応じた商品カテゴリをアピールするためのエリアの背景画像に当たるパーツ。大きい抽象的なイメージ画像を配置してください。
トップ：カテゴリ：商品（top-category-item）
| 機能パーツの種類 | 商品ブロック |
| 機能パーツのクラス | sysFuncItemBlock |
| パーツ単位のクラス名 | top-category-item |
| 見出しテキスト | （設定なし） |
シーゾナルの商品など、時期に応じた商品カテゴリをアピールするためのエリアの機能パーツ。背景画像上に、3点商品を載せることができます。
トップ：商品ブロック：5個並び（top-item-block-01）
| 機能パーツの種類 | 商品ブロック |
| 機能パーツのクラス | sysFuncItemBlock |
| パーツ単位のクラス名 | top-item-block-01 |
| 見出しテキスト | （設定なし） |
PC表示時に5個横並びで商品を掲載できる商品ブロック。6個以上設定した場合、6個目から折り返されて次の行に続きます。
トップ：商品ブロック：4個並び（top-item-block-02）
| 機能パーツの種類 | 商品ブロック |
| 機能パーツのクラス | sysFuncItemBlock |
| パーツ単位のクラス名 | top-item-block-02 |
| 見出しテキスト | （設定なし） |
PC表示時に4個横並びで商品を掲載できる商品ブロック。5個以上設定した場合、5個目から折り返されて次の行に続きます。
トップ：商品ブロック：3個並び（top-item-block-03）
| 機能パーツの種類 | 商品ブロック |
| 機能パーツのクラス | sysFuncItemBlock |
| パーツ単位のクラス名 | top-item-block-03 |
| 見出しテキスト | （設定なし） |
PC表示時に3個横並びで商品を掲載できる商品ブロック。4個以上設定した場合、4個目から折り返されて次の行に続きます。
トップ：カテゴリ：ボタン（top-category-btn）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | top-category-btn |
| 見出しテキスト | （設定なし） |
商品ブロックの個数では紹介しきれない場合に特定のカテゴリページへ遷移させるための機能パーツ。
トップ：カテゴリリスト：アイテム（top-category-list-item）
| 機能パーツの種類 | バナー |
| 機能パーツのクラス | sysFuncBanner |
| パーツ単位のクラス名 | top-category-list-item |
| 見出しテキスト | <h2 class=”title-large”>カテゴリ</h2> |
カテゴリーの一覧を画像付きで表示するための機能パーツ。カテゴリーページ以外に利用していただくことも可能です。
トップ：ピックアップ商品（top_item-pickup）
| 機能パーツの種類 | 商品ブロック |
| 機能パーツのクラス | sysFuncItemBlock |
| パーツ単位のクラス名 | top_item-pickup |
| 見出しテキスト | <h2 class=”title-large left”>ピックアップ商品</h2> |
単一の商品を大きく、アピールするためのパーツ。一番の売れ筋の商品などを設定してください。
トップ：お客様の声（top-review）
| 機能パーツの種類 | 商品レビュー |
| 機能パーツのクラス | sysFuncItemReview |
| パーツ単位のクラス名 | top-review |
| 見出しテキスト | <h2 class=”title-large”>お客様の声</h2> |
レビュー一覧を表示する機能パーツ。
トップ：お客様の声：ボタン（top-review-btn）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | top-review-btn |
| 見出しテキスト | （設定なし） |
レビュー一覧画面へ遷移するためのボタン。
トップ：利用シーン（top-scene）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | top-scene |
| 見出しテキスト | （設定なし） |
背景画像を用いて、強調した一つのページへのリンク先を設定することができるパーツ。
トップ：カテゴリリスト：シーン（top-category-list-scene）
| 機能パーツの種類 | 商品カテゴリ |
| 機能パーツのクラス | sysFuncItemCategory |
| パーツ単位のクラス名 | top-category-list-scene |
| 見出しテキスト | <h2 class=”title-medium”>シーンで探す</h2> |
テキストベースで特定のリンク先への遷移を作成する機能パーツ。
トップ：カテゴリリスト：価格（top-category-list-price）
| 機能パーツの種類 | 商品カテゴリ |
| 機能パーツのクラス | sysFuncItemCategory |
| パーツ単位のクラス名 | top-category-list-price |
| 見出しテキスト | <h2 class=”title-medium”>価格で探す</h2> |
テキストベースで特定のリンク先への遷移を作成する機能パーツ。
トップ：トピック（top-topic）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | top-topic |
| 見出しテキスト | <h2 class=”title-large”>TOPIC カテゴリ</h2> |
特定の商品カテゴリをテキスト＋背景画像で強調してアピールするためのパーツ。直下に商品ブロックを設置してください。
トップ：トピック：商品（top-topic-item）
| 機能パーツの種類 | 商品ブロック |
| 機能パーツのクラス | sysFuncItemBlock |
| パーツ単位のクラス名 | top-topic-item |
| 見出しテキスト | （設定なし） |
特定の商品カテゴリをテキスト＋背景画像で強調してアピールするためのパーツの下部に、そのカテゴリの商品をラインナップするための商品ブロック。
トップ：トピック：ボタン（top-topic-btn）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | top-topic-btn |
| 見出しテキスト | （設定なし） |
特定の商品カテゴリをテキスト＋背景画像で強調してアピールするためのパーツの下部に、そのカテゴリへのリンクを設置するためのボタンパーツ
トップ：大バナー（top-banner-large）
| 機能パーツの種類 | バナー |
| 機能パーツのクラス | sysFuncBanner |
| パーツ単位のクラス名 | top-banner-large |
| 見出しテキスト | （設定なし） |
横いっぱいに広がる大きいバナーを設置するためのパーツ。
トップ：お知らせ（top-news）
| 機能パーツの種類 | お知らせ |
| 機能パーツのクラス | sysFuncInFormation |
| パーツ単位のクラス名 | top-news |
| 見出しテキスト | <h2 class=”title-large”>お知らせ</h2> |
お知らせの一覧を表示するためのパーツ。
商品詳細：関連商品（related-item）
| 機能パーツの種類 | 商品ブロック |
| 機能パーツのクラス | sysFuncItemBlock |
| パーツ単位のクラス名 | related-item |
| 見出しテキスト | <h2 class=”title-medium left”>関連商品</h2> |
商品詳細ページの最下部に、関連する商品を設定するための機能パーツ。
アサイド：カテゴリ01（aside-category-01）
| 機能パーツの種類 | 商品カテゴリ |
| 機能パーツのクラス | sysFuncItemCategory |
| パーツ単位のクラス名 | aside-category-01 |
| 見出しテキスト | カテゴリ01 |
商品カテゴリページ・商品検索ページでは、アサイドのエリアにカテゴリのリンクを作成することができます。アサイドのエリアのリンクを設定するためのパーツ。
アサイド：カテゴリ02（aside-category-02）
| 機能パーツの種類 | 商品カテゴリ |
| 機能パーツのクラス | sysFuncItemCategory |
| パーツ単位のクラス名 | aside-category-02 |
| 見出しテキスト | カテゴリ02 |
商品カテゴリページ・商品検索ページでは、アサイドのエリアにカテゴリのリンクを作成することができます。アサイドのエリアのリンクを設定するためのパーツ。
アサイド：カテゴリ03（aside-category-03）
| 機能パーツの種類 | 商品カテゴリ |
| 機能パーツのクラス | sysFuncItemCategory |
| パーツ単位のクラス名 | aside-category-03 |
| 見出しテキスト | カテゴリ03 |
商品カテゴリページ・商品検索ページでは、アサイドのエリアにカテゴリのリンクを作成することができます。アサイドのエリアのリンクを設定するためのパーツ。
ページ：特定商取引法に基づく表示（trade-law）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | trade-law |
| 見出しテキスト | <h1 class=’title-medium-sub’>特定商取引法に基づく表示<span>TRADE LAW</span></h1> |
特定商取引法に基づく表示の個別ページに記載される内容を設定するパーツ。テキストを任意のものに差し替えてください。
ページ：ご利用ガイド（shopping-guide）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | shopping-guide |
| 見出しテキスト | <h1 class=’title-medium-sub’>ご利用ガイド<span>SHOPPING GUIDE</span></h1> |
ご利用ガイドの個別ページに記載される内容を設定するパーツ。テキストを任意のものに差し替えてください。
ページ：個人情報の取扱いについて（privacy-policy）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | privacy-policy |
| 見出しテキスト | <h1 class=’title-medium-sub’>個人情報の取扱いについて<span>PRIVACY POLICY</span></h1> |
個人情報の取り扱いの個別ページに記載される内容を設定するパーツ。テキストを任意のものに差し替えてください。
ページ：よくあるご質問（faq）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | faq |
| 見出しテキスト | <h1 class=’title-medium-sub’>よくあるご質問<span>FAQ</span></h1> |
よくある質問の個別ページに記載される内容を設定するパーツ。テキストを任意のものに差し替えてください。
ページ：会社概要（company）
| 機能パーツの種類 | テキスト |
| 機能パーツのクラス | sysFuncText |
| パーツ単位のクラス名 | company |
| 見出しテキスト | <h1 class=’title-medium-sub’>会社概要<span>COMPANY</span></h1> |
会社概要の個別ページに記載される内容を設定するパーツ。テキストを任意のものに差し替えてください。