PROJECT
OVERVIEW.
ALTOPは「日々に洗練を。」を掲げる、架空のアパレルブランドです。ストリートウェア由来の6アイテムを扱うオンラインストアを、デザインからShopifyでの構築まで一貫して制作しました。
素材・シルエット・ディテールへのこだわりが伝わるブランド体験と、商品を探しやすいECサイトの両立を目指しました。
- BRAND
- ALTOP(架空のアパレルブランド)
- PLATFORM
- Shopify
- PAGES
- トップ / 商品一覧 / 商品詳細 / お問い合わせ
- PRODUCTS
- 6点(カラー × サイズ展開)
- TYPE
- 自主制作の架空ブランド。全商品をSold out表示とし、販売は行っていません。
CREATIVE
DIRECTION.
静かだけど、
存在感がある。
- STREETフーディー、ヘビーT、ナイロンジャケット。ストリートウェア由来のアイテムを軸に。
- CONTEMPORARY抑えたロゴ、シルエット、素材、構造へのこだわり。
- DAILY特別な日だけでなく、毎日着られること。
画面の色は白と黒の2色。商品写真は無彩色の背景でそろえてあり、素材とシルエットの違いに目が向きます。英字は字間を広く取り、静かな印象にまとめています。
DESIGN
HIGHLIGHTS.
- 01
FULL-SCREEN HERO
最初の画面にあるのは、写真・コピー・ボタンの3つだけ。説明より先に、ブランドの空気が伝わる構成です。
- 02
ADAPTIVE HEADER
上部に固定したメニューは、背景の明るさに合わせて白と黒が切り替わります。ページのどの位置からでも、商品一覧とカートへ進めます。
- 03
LOOKBOOK TO PRODUCT
着用写真の横に、写っている2点の商品ボタンを置いています。気になった組み合わせから、そのまま商品ページへ進める流れです。
- 04
FULL-SCREEN MENU
スマートフォンでは、メニューが画面いっぱいに開きます。大きな文字と縦方向の配置で、操作箇所を明確にしています。
SHOPIFY
IMPLEMENTATION.
Shopify向けに構築した、カスタムデザインのECサイトです。画面のスタイルと動きは、このサイト用のCSSとJavaScriptで実装しています。商品データ、カートへの追加、問い合わせの受付には、Shopifyの機能を使っています。
HOME
メインビジュアル、流れるテキスト、コンセプト、商品グリッド、ルックブック。トップページの各セクションに、専用のスタイルを実装しています。
ブランドの世界観を、トップページ全体で一貫して伝えます。
HEADER, MENU & CART
上部に固定したヘッダー、スマートフォンの全画面メニュー、横から開くカート。
どのページからでも、商品一覧とカートへすぐ進めます。
COLLECTION & PRODUCT
商品一覧はPCで3列、スマートフォンで2列。商品詳細ではカラーとサイズを選べ、PCでは写真を見ながら情報を確認できます。
探す、選ぶ、の流れがPCでもスマートフォンでも変わりません。
MOTION
スクロールに合わせて要素が現れる、控えめな表示アニメーション。
動きで目を引くのではなく、読む順番を助けます。
CONTACT & POLICIES
お問い合わせの受付にはShopifyのフォーム機能を、各種ポリシーページにはShopifyの標準機能を使っています。
問い合わせ画面の見た目は、サイト全体に合わせています。
PRODUCT DATA
商品名、価格、在庫、カラーとサイズの組み合わせは、Shopifyの商品データから表示しています。
商品情報は、Shopifyの管理画面で一元管理されます。
RESPONSIVE
SHOWCASE.
LET'S BUILD
SOMETHING.
Webサイト制作やShopify構築について、お気軽にご相談ください。
START A PROJECT ↗