#Soul Skin — ウランバートルの街を色に。ブランド世界観を魅せるLookbookサイト

#プロジェクト背景

Soul Skin は、ウランバートルを拠点とするストリートウェアブランドです。

当初は Instagram DM での受注・限定ドロップを中心に展開していましたが、ブランドの「世界観」をしっかり伝える場所がありませんでした。

サイト

https://soul-skin-website.vercel.app/

#課題

Instagram だけでは伝えきれない

ブランドの美学や、各商品の背景が流れてしまう。

Lookbook が埋もれる

限定ドロップや過去作品をまとめて見せる場所がなかった。

ブランド全体を把握しにくい

初めて見る人にとって、Soul Skin がどんなブランドなのか分かりにくかった。

#目的

Instagram からの導線を作る

プロフィールリンク先として機能するサイトを構築。

世界観を視覚化する

ウランバートルの街のテクスチャを、色・写真・動きで表現。

作品を一元管理する

過去の作品と新作ドロップを、1つの場所で見せられるようにする。

#デザイン設計

#街のテクスチャを色にする

Soul Skin の配色は、派手なネオンやメタルトーンではなく、ウランバートルの街そのもの をイメージしています。

Gray

冬の空、コンクリート、雪に埋もれた街

Bone

風化した建材、砂漠の光

Rust

古い鉄製品、時間の経過を感じさせる質感

この配色によって、単なるミニマルデザインではなく、UB という場所の空気感を表現しました。

#Hero セクション

Hero では、ブランドのベストショットを大きく配置しました。

その上に「Choose Your Skin」という言葉とナビゲーションを重ね、最初の画面だけで Soul Skin の雰囲気が伝わるようにしています。

工夫した点

写真を主役にする

タイポグラフィは控えめにして、ビジュアルを強く見せる。

ボタン位置を調整

画像の邪魔にならない場所に配置。

ブランドコピーを繰り返す

「Choose Your Skin」をサイト全体の軸として使う。

#意識的にノイズを入れる

Soul Skin らしさを出すために、あえて完璧に整いすぎないデザインにしました。

商品カードの配置ずらし

Pieces セクションで、各商品の位置を少しずつずらす。

Hero の動き

「Choose Your Skin」のテキストがロード時にわずかに揺れる。

流れるテープ

Custom Order セクションで、ブランドメッセージが横に流れ続ける。

このノイズは、都市のエネルギーや人間らしさを表現するための要素です。

#Lookbook

Lookbook セクションでは、画像をフィルムのように見せました。

ここでは「商品を売る」よりも、Soul Skin の世界観に浸る体験 を優先しています。

#実装と UX

#データ管理

サイト内のテキストは Data フォルダで一元管理しました。

修正しやすい

テキスト変更をまとめて管理できる。

重複コードを減らせる

コンポーネント化して、同じ構造を使い回せる。

更新しやすい

ページ追加や内容変更がしやすくなる。

#Supabase で動的管理

Drops や Pieces の情報は Supabase から取得しています。

商品情報の追加

新しい商品を追加すると、サイト側に反映できる。

画像管理

Hero や商品画像を差し替えやすい。

複数画像対応

各 Piece / Drop に最大 5 枚まで画像を設定できる。

#スマートフォン UX

Instagram からの流入を考えて、スマホでの使いやすさを最優先にしました。

Pieces 表示

スマホでも見やすいグリッド表示。

詳細ビュー

商品をタップするとポップアップで詳細表示。別ページに遷移させない。

ハンバーグメニュー

一般的な 3 本線ではなく 2 本線にし、開くと X になる設計。

メニューラベル

「MENU」ではなく「CHOOSE」を使用。ブランドの言葉をUIにも入れました。

#使用技術

Next.js

アプリ全体のフレームワーク

TypeScript

型安全な開発

Tailwind CSS

UI とスタイリング

Supabase

データベース・画像情報管理

Vercel

ホスティング

Supabase Admin

管理画面

#成長したポイント

このプロジェクトでは、前のプロジェクトで学んだ経験が大きく活きました。

Supabase 操作

Workout Log で DB の基礎を学んでいたため、スムーズに実装できた。

API 設定

画像管理や動的データ取得で、以前より迷わず進められた。

デザインと開発の両立

ポートフォリオ制作で学んだ見た目の感覚を、ブランドサイトに活かせた。

実装自体は複雑すぎるものではありませんでしたが、その分デザインに時間を使いました。

色選び、写真の見せ方、余白、動き、スマホUXなど、細部を何度も調整しました。

#わかりやすさより、雰囲気を優先する選択

一般的なWebサイトでは、わかりやすさが重要です。

ただ、Soul Skin ではそれだけでなく、ブランドの世界観に没入できること を優先しました。

ナビゲーションは最小限

画面のノイズを減らすため。

テキストは短く

説明しすぎず、写真と空気感に委ねる。

動きに遊びを入れる

揺れ、スライド、ポップアップでブランドらしさを出す。

訪問者に「商品を見る」だけでなく、Soul Skin という世界に触れてもらうことを意識しました。

#まとめ

Soul Skin のサイトは、単なる商品紹介ページではありません。

ウランバートルの街の色、質感、空気感をWeb上で表現し、Instagram から来たユーザーがブランドの世界観に触れられる場所として設計しました。

技術は見えないところで支え、デザインが前面で語る。

まだ未熟な部分もありますが、より洗練された Web デザインと開発ができるように、今後も改善していきます。

#リンク