Typo T-shirts
site “LOGO”

ROLE
Web Design / Coding / EC Setup
TOOLS
Figma / VS Code / Photoshop
PERIOD
56 Hour
LOGO メインビジュアル

タイポグラフィを主役にしたTシャツ専門のECサイト。
商品(Tシャツ)のグラフィックが際立つよう、サイト全体のUIはモノトーンで極力シンプルに設計。
「文字を着る」というストリート感と、買い物のしやすさを両立させるデザインを目指しました。

01 / CONCEPT LAYER

商品を引き立てる
ミニマルなUI設計。

主役はあくまでTシャツにプリントされたタイポグラフィ。
そのため、Webサイト側の装飾は極限まで削ぎ落とし、余白とグリッドを意識した設計にしました。
ユーザーの視線が自然に商品へと誘導されるレイアウトを心がけています。

02 / TYPOGRAPHY LAYER

力強さと
読みやすさの両立。

サイト内のフォント選びにもこだわり、商品の世界観に合わせたソリッドなサンセリフ体を採用。
見出しのインパクトを持たせつつも、価格や商品説明などのECとして重要な情報は、 誰もが迷わず読める視認性の高さを担保しています。

03 / CODING LAYER

シームレスな
購買体験の実装。

スマートフォンからの閲覧・購入をメインターゲットに見据え、レスポンシブ対応を徹底。
商品一覧から詳細ページ、そしてカートへの遷移において、 ユーザーにストレスを感じさせない軽快な動きとCSSアニメーションを実装しました。

コンセプト解説の画像 デザイン解説の画像 コーディング解説の画像