高級アパレルブランドのビジュアルイメージ
個人制作

架空のブランドサイト
Webサイトデザイン

概要

高級アパレルブランドを想定したWebサイトデザイン。 タイポグラフィと余白を軸に、ブランドの品位と世界観が伝わるよう設計しました。

URL： https://site03.movutona.com/

クライアント
架空サイトのためクライアント不在
担当内容
企画、デザイン、コーディング
制作期間
3週間
使用ツール
Figma/Photoshop/Illustrator

課題設定

本制作における背景と課題を整理し、設計の出発点を定義する。

背景

ラグジュアリーブランドにおいては、 商品単体ではなく、世界観を通じた価値訴求が重要とした。

課題

一般的なECサイトでは商品や価格が先に提示されるため、 ブランド価値が十分に伝わらず、 ユーザーが価格を基準に判断してしまう。

目的

本制作ではユーザーの感情を先に動かし、 段階的に購買へ導く設計とした。

情報設計

ターゲット分析とユーザー心理に基づき、サイト全体の構造と導線を設計する。

ターゲット

・20代後半〜40代のファッション感度の高い男女
・ラグジュアリーブランドに憧れを持つ層
・価格ではなく世界観や価値観に共感して購買する層

（サブターゲット）
・将来的に購入を検討する若年層（憧れ層）

ファネル設計

ユーザーの心理段階に基づき、以下の構造で設計した。

  • ① 認知： ファーストビューでは価格を表示せず、 ビジュアルのみでブランドの世界観を訴求
  • ② 興味・関心： コンセプトやビジュアルにより、 ブランドへの共感を促す
  • ③ 検討： 同一画面内に商品一覧セクションを配置し、 価格を明示することで視線を分断せず比較・検討を促進する構造
  • ④ 購入： 高価格帯商品のため、即時購入ではなく問い合わせを主導線とし、 接客を通じた購買体験を想定

上記のファネルに基づき、以下の戦略を設計した。

分析に基づく戦略設計

項目 分析：目的・戦略 本サイトへの反映
世界観 ブランド体験・没入を優先 余白とアニメーションによる静謐な演出
信頼構築 ニュースレターでの接点 心理的ハードルの低い接点の設置
ゴール 店舗誘導・お問い合わせの創出 最終的なコンタクトへの導線の最適化

※即時購入ではなく、世界観への共感を経てコンタクトへのスムーズな導線を設計。

コンセプト

“静謐で余白のあるブランド体験”。 過度な装飾を排除し、タイポグラフィと余白で品位を表現。 視覚的な静けさを通してブランドの哲学を伝える設計。

サイト構成/ワイヤーフレーム

ファーストビューで世界観を提示し、 スクロールによりブランド紹介 → 商品一覧 → 信頼情報 → お問い合わせへ誘導する流れを設計。 視線の流れと心理導線を意識した縦構造とした。

ワイヤーフレーム画像

ワイヤーフレーム
初期ワイヤーフレーム

制作プロセス

課題整理から実装までの制作過程を段階的に整理する。

  1. STEP 01｜課題整理

    ブランドの課題と方向性を明確化。

  2. STEP 02｜情報設計

    視線の流れを意識した構成を設計。

    ※ワイヤーフレーム画像

  3. STEP 03｜デザイン

    余白とタイポグラフィを軸に制作。 人物画像は過度な加工を避けつつ肌補正とノイズ調整を行い、 自然な高級感を演出。 商品画像は切り抜きと背景色統一を実施し、 ブランドトーンの一貫性を担保。 背景ビジュアルはIllustratorのAI機能を活用して生成した。

    使用ツール：Photoshop / Illustrator

  4. STEP 04｜実装

    レスポンシブ対応を考慮しコーディング。

デザインの意図

ブランド体験をどのように視覚表現へ落とし込んだかを説明する。

ブランドの高級感を損なわないよう、 配色は抑えめにし、余白と文字組を主役にした ミニマルなデザインを意識しました。

ファーストビューでは高級アパレル特有の静謐な世界観を演出するため、 緩やかな背景アニメーションを採用しました。 映像的な表現も検討しましたが、本サイトでは表示速度と閲覧体験を重視し、 動画ではなく軽量な動きで空気感を補強する設計としています。 長時間の線形アニメーションにより、視線を妨げない穏やかな動きを意図しました。

デザインカンプ
トップページ デザイン

実装

設計意図をどのようにフロントエンドで実現したかを示す。

構造設計

見出しやセクションを適切に分けて構造を整理し、 ヘッダー・メガメニュー・商品一覧・フッターを明確に分離。 多階層ナビゲーションでも視認性と操作性を損なわない構成とした。

レスポンシブ設計

  • 4段階のブレークポイントに応じてカラム数を4→3→2列に切り替え
  • calc()で余白込みのレイアウト設計
  • clamp()でフォントサイズを可変制御

UI・インタラクション

  • hover時の画像切替（CSSのみ）
  • scroll連動アニメーション（animation-timeline: view()）
  • ハンバーガーメニューの状態遷移（keyframes）

JavaScript依存を抑えつつ、ブランドトーンに合わせた穏やかな動きを設計。

商品一覧UI

flex-wrapによる折り返し設計でレスポンシブ対応し、 position制御でお気に入りアイコンをオーバーレイ表示。 情報とビジュアルの優先順位を整理。

背景アニメーション

keyframesで実装し、動画を使わず軽量化。 モバイルでもパフォーマンスを維持。

TOP