Shopyy家具サイト制作：365 Marketの空間テーマと家具カタログ

プロジェクト概要

365 MarketのShopyyサイトは、空間テーマと家具カタログをつなぐ構成です。住空間を使ったキャンペーンバナーでテーマを示し、リビング家具や花器のセクションから具体的な商品へ進めます。オレンジのバナー、明るい家具グリッド、暗いフッターで、テーマ閲覧、一覧比較、個別確認を連続させました。

デザイン上の課題

家具は空間で雰囲気を伝えると同時に、個々の輪郭や仕様を確認しやすくする必要があります。トップのバナーで場面を作り、カテゴリーグリッド、商品写真、説明へ段階的に進めました。

デザイン方針：空間テーマと家具カタログをつなぐ

住空間のキャンペーンバナーから、リビング家具や花器を通して個別商品へ導きます。トップは方向性、カテゴリーは比較、詳細は外観と仕様を担い、ナビゲーションとリンクで各段階をつなぎました。

見出し、ナビゲーション、本文にMontserratを使用し、大きさ、太さ、段落幅で階層を示しました。オレンジのバナー、明るいグリッド、暗いフッターを主要ページに共通化。グループ内は近く、セクション間は広くし、写真、説明、操作を区別しています。

動きと機能：現在の選択を支える

ヘッダーの分類メニューからダイニングチェア、リビング、屋外家具などへ接続し、一覧には並べ替えと絞り込みを残しました。詳細は写真、数量、区分した説明で構成。モバイルはメニューアイコンに収納し、PCと同じ操作順序を保ちました。

トップ：住空間でキャンペーンのテーマを示す

室内の家具シーンとオレンジのUpgradeの文字を組み合わせたバナーを配置しました。ロゴ、分類、検索のヘッダーは軽く保ち、下のSalasリビング欄から商品へつなぎます。

Montserratの明瞭な文字でナビゲーションと見出しを統一し、白い背景で場面写真を十分に見せます。オレンジはキャンペーン画像に集中させ、ほかは灰黒の文字で抑えました。

リビングと花器：用途のテーマで分けて展示

トップ本文ではリビング用の椅子を先に並べ、Floresの見出しで花器へ切り替えました。各カテゴリーを1行ずつに分け、写真下に名前と価格を置いて暮らしのテーマに沿って閲覧できます。

ソファと花器の写真をカード幅に合わせて統一し、グループ間に広い余白を設けました。中央の見出しがテーマの区切りと次の始まりを示します。

ダイニングチェア一覧：輪郭の違いを比較

Comedoresでは椅子を規則的なグリッドに置き、上に見出しと件数、別の場所に並べ替えと絞り込みを配置しました。正面写真で背もたれ、肘掛け、脚部の違いを見せます。

明るい背景と均等な間隔で輪郭を明確にし、名前と価格は写真下に小さく表示。比較は画像が担い、長い仕様説明は個別ページへ分けました。

ソファ詳細：外観と仕様を隣り合わせに

Sofa Santinoは左にソファ写真、右に名前、価格、数量、Detailを配置しました。一つの家具に十分な場所を与え、寸法や素材の説明を隣で順に読めます。

写真の周囲は白い余白を広く取り、文章は短い段落と箇条書きにしました。明るい画面とベージュのソファが柔らかく調和し、細枠のボタンは商品を妨げません。

詳細下部：説明から関連家具へ

ソファのサムネイル、説明の続き、その下のレビューと関連商品を配置。現在の商品を確認した後、自然にほかの家具を見られる流れです。

余白と見出しでセクションを分け、おすすめカードの幅を統一しました。仕様と写真は同一商品にまとめ、別デザインは独立領域に置いて混同を防ぎます。

問い合わせ：注文に関する連絡の専用入口

本文にメールと注文連絡の説明をまとめ、暗いフッターにも事業者の連絡先を表示しました。商品比較とは分け、連絡手段を素早く見つける役割を持たせています。

簡潔な見出しと段落で構成し、明るい本文と暗いフッターを明確に区分。読みやすい行間を保ち、余分な装飾で連絡情報を妨げません。

モバイルトップ：住空間バナーとリビングのテーマを維持

ロゴ、メニュー、検索を順に並べ、キャンペーンバナーを狭い画面に合わせ、その下へSalasの商品を続けました。空間テーマを保ちながら、商品写真にも十分な面積を確保しています。

バナー、見出し、家具の間に明確な縦の余白を設け、画像をナビゲーションと同じ行に詰め込みません。小画面でもテーマ、カテゴリー、商品の順で進めます。

モバイルのソファページ：家具の輪郭を全体で見せる

最初にパンくずと大きなソファ写真、その後に名前と価格を表示。PCの横並びを縦に変え、家具の形全体を保ちました。

写真の周囲に余白を残し、見出しは自然に折り返して下の情報へつなぎます。商品、仕様、操作が順に続き、明るい背景と明確な書体を継続しています。

デザインのまとめ：テーマと具体的な情報をつなぐ

365 Marketでは空間と家具一覧を軸に、オレンジのバナー、明るいグリッド、暗いフッターでトップ、カテゴリー、詳細をつなぎました。画像がテーマを、文章が具体的な情報を伝え、一覧と仕様の入口が次の操作を支えます。モバイルも同じ順序で一貫した視覚・閲覧体験を保っています。

ブランドに合った分かりやすいShopyyサイトを計画する

現在のサイトURL、ブランド素材、必要なページ範囲をお知らせください。商品、対象市場、重視する内容を踏まえ、適切なページ、ビジュアル、機能を一緒に整理します。