サイト設計・構築作戦「FIELD TO STREET.」新サイト全貌公開②

前回の記事でブランドコンセプト「FIELD TO STREET.」が確立された。しかし、それを表現する器がない。旧サイトは「かっこよくない」状態のままだった。

具体的な問題は以下の通りだ。メニューが20項目以上あり整理されておらず、ヒーロー画像はブランドの世界観とかけ離れた汎用的なもの、商品カードにはデザインの統一感がなかった。

WordPressのブロックエディター（Gutenberg）のカスタムHTMLブロックに、完全なHTMLを丸ごと貼り付ける戦術を選択した。テーマのCSSに縛られず、完全にデザインをコントロールできる手法だ。

この判断は正解だった。Bebas Neue・ゴールドアクセント・ティッカーバー・商品カタロググリッドなど、すべてを1つのHTMLファイルで管理できるようになった。修正も一箇所だけで済む。

「TシャツショップやGUNショップでよく見る、商品がずらっと並んだLP」というイメージを目標にした。スクロールするだけで全商品を確認でき、ワンクリックで購入ページに飛べる設計だ。

最終的なページ構成はこうなった。

最も時間がかかったのが商品カタログの構築だ。Tシャツトリニティ（メイン販売プラットフォーム）の全13商品について、商品画像URLと購入URLを一つずつ確認・収集した。

当初はデザイン画像（デザイン単体）を表示していたが、途中でTシャツ着用写真に切り替えた。実際にTシャツに印刷された状態の写真の方が、圧倒的に購買意欲が高まると判断したためだ。全13商品の着用写真をWordPressのメディアライブラリにアップロードし、順番に差し替えた。

Phase 02の作戦終了をもって、NECOKOUCANの新サイトが正式に公開された。「かっこよくない」状態から始まった再設計は、一つのブランドサイトとして完成した。

Tシャツトリニティをメインプラットフォームとして、スズリをグッズ補完として使い分ける戦略も確立した。Tシャツ・バッグ等のアパレル系はTシャツトリニティ、スマホケース・雑貨系はスズリという役割分担だ。