DETAIL
リンクサイトを、ブランド体験へ。
公式サイト、オンラインストア、Instagram。
それぞれ異なる役割を持つ情報への入り口を、ひとつの場所に集約。
単にリンクを並べるのではなく、訪れた人がブランドの空気に触れ、その先のコンテンツへ自然に進める場所として設計。
情報を探すためのページでありながら、ブランドそのものを感じられること。
その両立を目指しました。
写真を、デザインの主役に。
画面の中心に据えたのは、COMRADEのコレクションを構成する写真。
PCでは3列、スマートフォンでは2列のグリッドを採用し、写真が途切れることなく続くレイアウトを構築。
写真を均一なサムネイルとして整理する一方、それぞれの被写体や構図が持つ個性は損なわない。
視覚的な統一感と、ブランドが持つ自由な表現。その双方を成立させるための設計。
色彩に、ひとつの温度を。
異なる場所、異なる光の下で撮影された写真。
その一枚一枚に、わずかに青みを帯びたクールトーンを加えました。
彩度とコントラストを調整し、写真本来の質感を残しながら、全体をひとつのトーンへ。
写真を画一的に見せるのではなく、それぞれの表情を活かしながら、連続して眺めたときにブランドの空気が伝わることを意識しました。
動きによって、写真の印象を変える。
スクロールに合わせて写真がゆっくりと現れる、Cinematic Reveal。
青みを帯びた暗い状態から、わずかなスケール変化とともに本来の明度へ近づいていく。
PCでは、写真にカーソルを重ねることで色彩とコントラストが静かに変化するEditorial Hoverを実装。
動きは写真を飾るためではなく、見る人の視線と時間を整えるためのもの。
過剰な演出を避け、写真そのものへの関心を引き出す表現を目指しました。
必要な情報を、視線の先に。
ナビゲーションは、OFFICIAL SITEとWEB STOREの2つに集約。
Instagramは独立したリンクとして配置し、限られた要素の役割を明確にしました。
コレクションの写真を閲覧している間は、画面下部にフローティングリンクを表示。
表示領域に応じて「View gallery」と「View archive」が切り替わり、それぞれのコレクションページへ直接アクセスできる構成。
写真をクリックした際は公式サイトへ。
写真を見る体験を途切れさせず、必要な場所へ自然につながる導線を設計。
小さな画面にも、表現の精度を。
中央に配した控えめなブランドロゴ。
Cormorant Garamondによる繊細なタイポグラフィ。最小限の罫線と余白。
各要素の大きさや位置、写真との距離を調整し、情報の優先順位を明確に。
PCとスマートフォンでは、ギャラリーの列数やナビゲーションの見え方を最適化。
視覚的な緊張感を保ちながら、操作性を損なわないレスポンシブデザインを構築。
シンプルであることを、表現の制約にしない。
ブランドリンクサイトに、多くの機能は必要ありません。
だからこそ、何を見せ、何を削ぎ落とすか。
限られた構成の中で、写真の質感、文字の佇まい、余白、動きの一つひとつが意味を持つ。
リンクサイトを、情報の通過点ではなく、ブランドとの新たな接点へ。
COMRADEの世界観を、シンプルなインターフェースの中に凝縮しました。
TECHNICAL DETAILS
CMS — WordPress
Development — Original WordPress Theme / PHP / CSS / JavaScript
Design — Creative Direction / Art Direction / Web Design / Editorial Layout
Photography — Image Direction / Color Grading / Cropping / Responsive Images
Typography — Cormorant Garamond / Letter Spacing / Visual Hierarchy
UI/UX — Information Architecture / Brand Link Navigation / Contextual Floating Navigation
Motion — Cinematic Reveal / Scroll Reveal / Editorial Hover / Opening Popup
Responsive — Desktop / Tablet / Smartphone
SEO — On-page SEO / Content Structure
Quality Control — Responsive Design / Usability / Visual Consistency