ミリタリーストリートアパレルブランド「NECOKOUCAN（猫・工・艦）」のウェブサイトを、どう設計するか。
単なるECサイトではなく、「着る、戦術。」というブランド哲学を体験できる場所として——
この記事は、その設計思考の記録である。
WHAT IS
NECOKOUCAN
NECOKOUCANは2025年に誕生したミリタリーストリートアパレルブランドである。旧日本海軍の戦艦・駆逐艦・護衛艦、ドイツ軍の戦車、航空自衛隊の戦闘機をモチーフとしたオリジナルデザインのTシャツ・グッズを展開。プリントオンデマンドサービス「Tシャツトリニティ（TTrinity）」を製造・販売基盤とし、スズリを補完チャンネルとして活用する。
着る、戦術。
WEAR THE TACTICS. — FIELD to STREET.
ターゲットは「最高に熱量ある購買者」——ミリタリー愛好家、艦これファン、そしてストリートウェアとしての機能美を求める消費者。彼らは価格より先に「意志」に反応する。だからこのサイトは、商品を売る場ではなく、哲学に参加させる場として設計する必要がある。
確定商品13点
F2戦闘機（航空自衛隊）、護衛艦ひゅうが・いせ（海上自衛隊）、戦艦大和・金剛・榛名・山城・扶桑（旧日本海軍）、ティーガーⅠ・ヘッツアー（ドイツ軍）、駆逐艦雪風・時雨・響（旧日本海軍）。いずれもオリジナルデザインによるPremium Tee。
DIAGNOSIS
現状の解剖
サイト（shop.necokoucan.com）を精査したところ、4つの構造的問題が浮かび上がった。これらはいずれも「ページが足りない」ではなく、「既存資産の接続が断絶している」という本質的な問題である。
テスト・重複ページが
サイトマップを汚染
「テスト」「ホームback」「重複するドライTシャツページ3本」など未整理ページがサイトマップに露出。GoogleのSEO評価と離脱率に悪影響を与え続けている。
2つのブランドIDが
同一サイトで混在
「猫・工・艦」と「NECOKOUCAN / FIELDto STREET.」が並立し、コンセプトが分散。訪問者が「このブランドは何者か」を理解できない構造になっている。
艦艇個艦ページが
孤立・ナビ未接続
大和・榛名・雪風などの艦艇解説ページという最大の独自コンテンツが、ナビゲーションから完全に消えている。SEO資産として眠ったままの状態。
Brand Storyが
購買の行き止まり
Brand Storyページはブランド哲学を語るが、そこから購買への橋が存在しない。世界観に共鳴した訪問者が離脱する最大の損失ポイント。
Blogサイトとの分離問題
さらに重要な発見として、コンテンツブログ（necokoucan.com）とSHOP（shop.necokoucan.com）がサブドメインで分離していることが判明した。Googleはこれを別サイトとして評価するため、Blogで積み上げたSEO資産がSHOPに一切貢献していない。月間表示回数10,000回を誇るBlogの読者が、SHOPへ流れる経路が存在しないということだ。
数字が示す核心は一つ：表示されているのにクリックされない、来ているのに購買に繋がらない。コンテンツを増やす前に、今ある資産の出口と入口を修復することが先決である。
WEAR THE
PHILOSOPHY
「最高に熱量ある購買者」に届くサイトを設計するにあたり、3つの基本方針を定めた。
宣言から始める——説明しない
多くのブランドサイトは「私たちは〇〇を大切にするブランドです」と説明から入る。これは弱い。NECOKOUCANには「着る、戦術。」という強い一行がある。これを最初の一撃として使う。説明ではなく宣言。読む人に「これは自分のことか？」と問いかける構造を作る。
購買を「参加」として定義する
熱量ある購買者は商品を買うのではなく、その世界観の一部になりたいと思って買う。だからCTAの直前に「これを着るとはどういうことか」を語る段落が必要だ。「着ることは、宣言だ」という定義の後にショップへ誘導する——この順序が購買確度を決定的に変える。
余白は世界観を宿す場所
デザインシステムとして確立したのは以下の通り：フォントはBebas Neue（武骨な力強さ）×Cormorant Garamond（格調と繊細さ）×Noto Serif JP（日本語の品格）×Share Tech Mono（軍用テレタイプの冷徹さ）。カラーは背景#0a0a08（漆黒）、ゴールド#c8a84b（真鍮）、錆色（熱）、紙色（余白）。テクスチャとして鉄・紙・錆・真鍮の素材感を表現する。
「デザインに関する哲学：宣言 > 説明。視覚的な重さと余白が世界観を作る。クリエイターの意図が差別化要因になる。」
— 設計方針メモOPTIMAL
STRUCTURE
「購買クリックを増やす」という目的に最適化したサイト構成がこれだ。ページを増やすのではなく、既存2ページの導線を正しく繋ぎ、最も購買意図が高いページを1つ新設する——という思想で設計した。
↑ 取り消し線 = 非公開/削除推奨
ナビゲーションの再設計
現状のナビ「Collection / About / Contact / Shop」から、
「COLLECTION / VESSELS / STORY / SHOP」 への変更を推奨する。
「VESSELS（艦艇）」を独立させることで、ミリタリーファンが求めるコンテンツへの直接経路が生まれる。
PAGES
DEPLOYED
HOME — 過去最高の出来栄え
HOMEページは「着る、戦術。」のファーストビューを起点に、カテゴリフィルター付き4カラム商品グリッド（13商品全掲載）、Vessel Records、Philosophy Quote、CTAセクション、フッターで構成。Hero高さ480px、ティッカーストリップ、マニフェストセクションを備えた完全実装版を制作。
Brand Story — 完成版を制作
既存の「Brand Story」ページは骨格だけで肉がない状態だった。3章構成（TACTICAL DESIGN / URBAN MOBILITY / ORIGINAL SPIRIT）の各章に「なぜこの艦なのか」「フィールドは変わった、哲学は変わらない」という語りを肉付けし、全文書き下ろした。末尾に「着ることは、宣言だ」という定義とShop CTAを配置する構成で完成。
「美しいものは、すべて機能のために存在する。」
— NECOKOUCAN Brand Story / Chapter 01 よりデザインシステムの統一：両ページともBebas Neue + Cormorant Garamondの組み合わせ、#0a0a08の漆黒背景、スクロール連動フェードイン実装。ノイズグレインオーバーレイとラインパターンで「鉄と紙」の素材感を表現している。
DEPLOY
SEQUENCE
分析と設計を踏まえた実行優先順位。「コンテンツを増やす前に導線を直す」という原則で順序付けた。
- 今すぐ テスト・重複・back系ページを非公開化。サイトマップのノイズを除去し、Googleの評価を正常化する。
- 今すぐ Brand Storyページに購買CTAを追加。完成版HTMLをWordPressに反映し、行き止まりを解消する。
- 今すぐ BlogサイトのBlog記事末尾にSHOPへの導線ブロックを追加。「この艦を身にまとう →」という一文とリンクを設置。
- 1ヶ月 Collection一覧ページを新設。カテゴリ別フィルタリングで「戦艦だけ見たい」「駆逐艦で絞りたい」という深掘り需要に応える。
- 1ヶ月 ナビゲーションを「COLLECTION / VESSELS / STORY / SHOP」に変更。艦艇個艦ページへの入口をナビに設置する。
- 1ヶ月 Blogの艦艇記事にSEOキーワード（艦名 + Tシャツ/グッズ）を追加。表示10K回のうちCTR2.6%を5%以上に改善する。
- 3ヶ月 SHOP側に艦艇図鑑ページ群を構築。「解説 × 商品」の統合ページで、検索流入→購買の直結ルートを完成させる。
- 3ヶ月 BlogのミリタリーコンテンツをSHOPへ段階的に統合。IT・CAD・観光記事は分離し、ドメインのテーマ一貫性を確立する。
READY TO
DEPLOY.
— 出撃準備、完了。
「着る、戦術。」は単なるキャッチコピーではない。これはウェブサイト設計の原則でもある。余分なページを削ぎ落とし、目的のためだけに設計された導線——それがNECOKOUCANのサイト哲学だ。
熱量ある購買者は、商品を買うのではなく哲学に参加する。そのための場を、丁寧に作り続ける。
