Solstarオリジナルテーマ「CREAM」

商品詳細ページ 操作マニュアル

商品情報

ページ全体のトーンを統一したいときは、配色と上下余白を他セクションと同じ基準に揃えて使います。

セクション幅やメディア位置もここで合わせると、商品ページ全体のレイアウトが安定します。

設定詳細

設定 種別 説明
セクション幅 Select ページ幅（コンテンツ幅）か全幅かを切り替え、セクションの見せ方を整えます。
メディア位置 Select 画像・動画（メディア）を左／右のどちらに配置するかを設定します。
カラムバランス Checkbox メディア列と詳細列の比率を調整し、読みやすいレイアウトに整えます。
ギャップ Range(px) メディアと詳細の間隔（余白）を調整し、詰まり感を解消します。
配色 Color scheme 背景色・文字色など、セクション全体のカラースキームを指定します。
上下余白 Range(px) セクションの上／下の外側余白を調整し、前後セクションとのリズムを揃えます。

商品メディア

複数商品を並べたときの見た目を揃えるために、画像の比率とフィット（表示のされ方）を統一して使います。

グリッド/スライド、サムネイルの位置や幅まで揃えると、一覧時の“ガタつき”が出にくいです。

設定詳細

設定 種別 説明
レイアウト Select グリッド表示／スライド表示を切り替え、見せ方の密度を選択します。
列数/ギャップ Range/Range 表示する列数と画像間の余白を調整し、一覧の見やすさを最適化します。
先頭画像の強調 Checkbox 先頭の画像を大きく表示して、メインビジュアルの訴求力を上げます。
サムネイル位置/幅 Select/Range サムネイルの配置場所とサイズを調整し、操作性と見栄えを整えます。
比率/フィット Select/Select 画像のアスペクト比とトリミング（表示の収まり方）を設定し、統一感を作ります。
ズーム/動画ループ Checkbox/Checkbox ズーム挙動や動画ループのON/OFFを切り替え、閲覧体験を調整します。
バリエーション画像表示 Checkbox バリエーションに紐づく画像を表示するかを設定し、SKUの見せ方を制御します。
ビューポート制約/余白 Checkbox/Range 画面内への収め方（見切れ防止）と周辺余白を調整し、表示の安定性を高めます。

詳細

情報量が多い商品ほど、可読性を優先してギャップを広めに設定するのが推奨です。

列幅・縦配置・スティッキーを調整して、読み進めやすい導線に整えます。

設定詳細

設定 種別 説明
幅 Select/Range 詳細エリアの横幅（比率）を調整し、情報量に合わせて読みやすくします。
高さ Select 詳細エリアの高さの扱いを設定し、メディアとのバランスを整えます。
配置/ギャップ Select/Range 内部要素の並び（配置）と間隔を調整し、情報の視線誘導を最適化します。
スティッキー Checkbox スクロール時に詳細エリアを固定表示するかを設定し、購入導線を維持します（主にPC向け）。
配色継承 Checkbox セクションのカラースキームを詳細エリアに引き継ぐかを設定します。
背景メディア Select 詳細エリアの背景に画像／動画を設定し、印象づけを強化します。
枠線/角丸/余白 Select/Range ボーダー・角丸・内側余白を調整し、カード感や情報のまとまりを作ります。

Header

タイトルと価格を読みやすくしたいときは、余白（gap）を広めに取って使います。

カード化（背景・枠線・角丸）もここでまとめて調整すると、視認性が上がります。

設定詳細

設定 種別 説明
レイアウト Select/Range タイトル・価格などの並び方と余白を調整し、情報の優先順位を整えます。
幅/高さ Select/Range ヘッダー領域のサイズを調整し、ページ上部の情報密度を最適化します。
配色継承 Checkbox セクション配色をヘッダーに継承するかを設定します。
背景メディア Select ヘッダー背景に画像／動画を設定し、ファーストビューの印象を調整します。
枠線/角丸/余白 Select/Range 枠線・角丸・内側余白でカード化し、可読性とまとまりを強化します。

タイトル

商品名が長い場合のレイアウト崩れ対策として、折り返し（wrap）設定を優先して使います。

フォントサイズや行間より先に、折り返しの挙動を整えると事故りにくいです。

設定詳細

設定 種別 説明
テキスト Rich text 商品名を表示します（見出しとして扱い、構造化にも寄与します）。
整列 Select 左／中央／右の寄せを設定し、レイアウトの基準線を揃えます。
フォント Select/Range フォントプリセットやサイズを調整し、ブランドトーンに合わせます。
行間/字間/大文字 Select 行間・文字間隔・大文字化などを調整し、視認性を整えます。
折返し Select 長い商品名の改行ルールを設定し、崩れや段落ズレを防ぎます。
色/背景 Color/Checkbox 文字色と背景の有無を設定し、コントラスト（読みやすさ）を確保します。
余白 Range タイトル周辺の内側余白を調整し、詰まり感を解消します。

価格

税込/税別などの表示ルールを統一したいときは、税表示の設定を使い分けます。

セール価格の優先表示や分割表示の有無も、店舗の方針に合わせて揃えるのがベターです。

設定詳細

設定 種別 説明
セール優先 Checkbox 通常価格とセール価格の表示順を切り替え、訴求の見せ方を統一します。
税表示 Checkbox 税込／税別など、税情報の表示有無を設定します。
分割表示 Checkbox 分割払いの表示有無を設定し、購入のハードルを調整します。
フォント Select/Range 価格表示のフォント・サイズを調整し、強調度をコントロールします。
整列 Select 左／中央／右の寄せを設定し、他要素との揃いを取ります。
色 Color 価格の文字色を設定し、可読性と視線誘導を最適化します。
余白 Range 価格周りの余白を調整し、情報の密度と読みやすさを整えます。

区切り線

情報のまとまりを分けたい場所だけに、ピンポイントで使います。

入れすぎると逆に情報が散るので、必要箇所に限定するのがコツです。

設定詳細

設定 種別 説明
太さ Range 区切り線のストローク（太さ）を調整します。
角丸 Select 線端の形状（角の丸み）を設定し、トーンを揃えます。
幅 Range 区切り線の横幅（占有率）を調整し、主張の強さをコントロールします。
余白 Range 区切り線の上下余白を調整し、情報ブロック間の間隔を整えます。

バリエーションピッカー

バリエーション数が多いときは、選択UIをシンプルにするためにドロップダウン形式を基本に使います。

スウォッチ表示は商品特性（色が重要か）に合わせてON/OFFします。

設定詳細

設定 種別 説明
表示形式 Select ボタン／ドロップダウンなど、選択UIの形式を切り替えます。
スウォッチ Checkbox 色見本（スウォッチ）の表示有無を切り替えます。
整列 Select UIの寄せ（左／中央／右）を設定し、レイアウトの整合性を取ります。
余白 Range ピッカー周辺の余白を調整し、タップしやすさと見た目を整えます。

ポップアップリンク

サイズチャートや素材説明など、補足情報を省スペースで見せたいときに使います。

リンク先ページ＋配色継承をセットで揃えると、デザインの一貫性が保てます。

設定詳細

設定 種別 説明
表示挙動 Select ポップアップの開き方（挙動）を設定します。
見出し Text 表示する見出し文言を設定します。
フォント Select 見出しの文字サイズ（プリセット）を調整し、情報の優先度を整えます。
リンク先ページ Page ポップアップで表示するページコンテンツを指定します。
配色継承 Checkbox セクション配色を引き継ぐかを設定し、デザインの一貫性を保ちます。
背景/余白 Checkbox/Range 背景の有無と内側余白を調整し、読みやすいカード表現にします。

購入ボタン

購入導線を強めたいときは、配色と余白を強調して使います。

縦積み/横並びの切替は、モバイルの視認性を基準に決めると安定します。

設定詳細

設定 種別 説明
ボタン配置 Checkbox 購入導線の並べ方（縦積み／横並び）を切り替えます。
店舗受取 Checkbox 店舗受け取り可否（Pickup availability）の表示有無を設定します。
ギフトカード Checkbox ギフトカード向けの入力フォーム表示有無を設定します。

Tabs

情報をカテゴリで整理したいときに使います。

タブ数は増やしすぎず、必要最小限に絞ると理解が速いです（「もっと読む」も併用推奨）。

設定詳細

設定 種別 説明
説明の表示 Checkbox 商品説明（description）をタブ内に表示するかを設定します。
もっと読む Checkbox 長文の折りたたみ（Read more / less）を有効化するかを設定します。
高さ/ラベル Range/Text 折りたたみ時の高さと、開閉ボタンの文言を設定します。
タイトル/本文 Text/Textarea 各タブの見出しと本文コンテンツを入力・管理します。
余白 Range タブブロック下部の余白を調整し、次要素との詰まりを防ぎます。

アコーディオン

長文を折りたたみたいときに使います。

区切り線や枠線・角丸を調整して、“押せるUI”に見える状態を作るのが重要です。

設定詳細

設定 種別 説明
アイコン Select 各見出しに表示するアイコンを指定します。
区切り線 Checkbox 行間の区切り線（dividers）の表示有無を設定します。
フォント Select 見出しの文字サイズ（プリセット）を調整し、階層の見せ方を整えます。
配色継承 Checkbox セクション配色の継承有無を設定します。
枠線/角丸/余白 Select/Range 枠線・角丸・内側余白を調整し、アコーディオン全体のカード感を作ります。
行設定 Text/Checkbox 各項目のタイトルと初期状態（開いた状態で表示するか）を設定します。

商品の在庫

在庫状況を購入判断の材料として出したいときに使います。

表示文言は、ブランドのトーンに合わせて言い回しを統一しておくと強いです。

設定詳細

設定 種別 説明
表示 Checkbox 在庫情報の表示有無を切り替えます。
文言 Text 在庫表示テキストを編集し、ブランドトーンに合わせて最適化します。
余白 Range 在庫ブロック周辺の余白を調整し、視認性を整えます。

特別な指示

名入れ・配送メモなど、入力を受けたいときに使います。

短い入力例（プレースホルダー）を入れると、入力品質が上がります。

設定詳細

設定 種別 説明
表示 Checkbox 特別な指示（注文メモ）入力欄の表示有無を設定します。
ラベル Text 入力欄の見出し（ラベル）文言を設定します。
プレースホルダー Text 入力例を表示し、ユーザーの記入精度を上げます。
文字数/行数 Range 入力欄のサイズ感（入力容量の目安）を調整します。
余白 Range ブロック周辺の余白を調整し、フォームの圧迫感を抑えます。

説明

要点を先に伝えたい場合は、冒頭に“結論寄り”の情報を置く前提で使います。

表示量を調整して、最初に見せる情報の密度をコントロールします。

設定詳細

設定 種別 説明
表示 Checkbox 商品説明ブロックの表示有無を切り替えます。
表示量 Range 初期表示する本文量を調整し、要点優先の見せ方にできます。
整列 Select テキストの寄せ（左／中央／右）を設定します。
余白 Range 説明ブロック周辺の余白を調整し、読みやすい行間・間隔に整えます。

グループ

複数ブロックをまとめて、背景色・余白・枠線を揃えたいときに使います。

ヘッダー直下に「ポイント／特典／保証」などをカード化して置くと、情報が整理されて見えます。

先頭に見出しを置くと、まとまりの入口が分かりやすくなります。

設定詳細

設定 種別 説明
レイアウト Select/Range グループ内の並びと間隔を調整し、複数ブロックを一体として見せます。
幅/高さ Select/Range グループ全体のサイズを調整し、カードの存在感をコントロールします。
配色/背景 Color scheme/Image picker 背景色（カラースキーム）や背景画像を設定し、まとまりの演出を作ります。
枠線/角丸/余白 Select/Range 枠線・角丸・内側余白でカード化し、情報を整理して見せます。

お問い合わせ

「必須」と表示されている項目は必須です。

このサイトはhCaptchaによって保護されており、hCaptchaプライバシーポリシーおよび利用規約が適用されます。