※ ポートフォリオ掲載用に、ブランド名とドメインを伏せています(内容は当時のまま)。

釣りギアブランド WEB SITE RENEWAL

釣りギアブランド サイトリニューアル ワイヤーフレーム(構成案)

※本資料は情報設計の確認用です。ビジュアルデザインは次工程で制作します。配色・書体・写真の印象はこの資料では判断できません。

対象画面:トップページ/商品詳細ページ/釣法解説ハブ(スマホ幅 375px 想定)
設計の前提:要件定義書「思想ファースト・二層導線・買い逃しゼロ」/ペルソナA(既存ファン・買い逃し不安)・ペルソナB(釣法検索からの入門〜中級層)/デザイン方針=おしゃれ軸(釣り専業ショップでなくカルチャー/ライフスタイルブランドの文法。ビジュアル工程で反映)
※前提となるヒアリング内容は想定(実ヒアリング未実施)に基づきます。ご指摘を反映して更新します。

凡例(この資料の見方)

写真
写真枠斜線のボックスは写真・動画が入る位置。中身の絵柄は次工程で決めます。
ボタン
ボタン枠線のボックスはタップできる要素。太枠は最重要の行動(購入・通知登録)。
テキストグレーの線は文章の量とおよその位置。原稿は別途ご相談します。
A/B注釈
注釈赤茶の囲みは「そのブロックが誰のどの課題に効くか」の説明です。
SCREEN 01 トップページ
思想で掴み、動き(新作・予約)と学び(釣法)の2入口へ振り分ける
9:41スマホ幅 375px
01 ファーストビュー
釣りは永遠に…
あくなき探求を続ける
フィッシングギヤブランド
代表の方栄/フィールド写真(全画面)
人物+フィールドの1枚。製品カタログ画像は置かない
予約・再入荷の通知を受け取る(LINE/メール)
A最初の画面から通知登録に触れられ、買い逃し不安をその場で解消できる。 設計方針:思想ファースト/買い逃しゼロ(通知=第2のCV)
02 更新情報ハブ

いま動いていること

新作
予約
再入荷
イベント
写真
予約
写真
再入荷
写真
イベント
更新情報をすべて見る/入荷カレンダー
Aブログ・SNS・サイトに分散していた新作/予約/再入荷/イベントを1箇所に集約し、「追いきれない」を解消する。 設計方針:買い逃しゼロ(情報の一元化)
03 二層導線
写真
新作・予約を見る
出たら買う人へ
写真
釣法から探す
上手くなりたい人へ
A+Bスクロールの早い段階で「自分向けの入口」を選べる。既存ファンは購買へ、検索流入は学びへ最短で分岐する。 設計方針:二層導線(FV直後に2入口を並置)
04 実績・メディアバー
MEDIA / SPONSOR
ロゴ
ロゴ
ロゴ
ロゴ
ロゴ
ロゴ
BPROFILE下層に埋もれていた掲載実績・スポンサーをトップへ引き上げ、「個人ブランドで大丈夫か」の不安を早い段階で下げる。 設計方針:信頼の前倒し(実績の引き上げ表示)
05 製品カテゴリ

PRODUCTS

写真
ロッド
写真
ルアー
写真
TAKEDACRAFT
写真
アパレル・グッズ
A目的が決まっている人の在庫確認用。トップの主役ではなく思想と更新情報の後ろに置く。 設計方針:思想ファースト(カテゴリ羅列を先頭にしない)
06 釣法解説ハブ 抜粋

釣法から探す

タケダ式フロートリグ
磯ヒラ ポップゲーム
チヌ系ゲーム
釣法解説ハブへ
B検索で来た人が最初に読む場所への入口。時系列ブログに埋没していた釣法知識を独立コンテンツとして資産化する。 設計方針:学び価値/釣法SEOのピラー化
07 ブログ/MOVIE
写真
BLOG 最新3件
動画
MOVIE 最新3件
A「なにか動きあるかな」の習慣的な再訪に応える更新面。回遊の終点を作らず釣法・製品へ戻す。 設計方針:回遊設計(釣法⇄製品⇄ブログの相互リンク)
08 フッター
通知登録(LINE/メール)
A+B全ページ共通で通知登録をフッターに常設。読み終わりの位置でも登録できる状態を作る。 設計方針:買い逃しゼロ(全ページに通知CTA)
SCREEN 02 商品詳細ページ
開発ストーリー+実釣証明+買い方の三段構成。Aの納得とBの信頼を同じページで満たす
9:41スマホ幅 375px
01 製品ビジュアル
製品写真(メイン)
写真
写真
写真
製品名/価格
A+B製品名・価格・在庫状態をスクロールなしで把握できる。釣り場からの短時間アクセスを想定。 設計方針:スマホで2〜3タップの購入完了
02 予約開始日時の事前表示
RESERVATION 予約開始:0月0日 20:00
開始をLINE/メールで知らせる
カレンダーに追加
A最大の不安「予約開始に気づけず買い逃す」に正面から対応。開始前でも登録という行動を取れる状態にする。 設計方針:買い逃しゼロ(予約開始日時の事前表示+通知)
03 開発ストーリー

なぜこの一本を作ったか

開発中・フィールド写真
代表の方の言葉の引用ブロック(原文をそのまま掲載)
A「代表の方が本気で作ったものか」という唯一の判断基準に答える中核。新規の作文でなく本人の原文引用を優先する。 設計方針:思想ファースト(開発者の哲学が本体)
04 実釣証明

実際に釣れている証拠

動画(実釣シーン)
写真
テスター報告①
写真
テスター報告②
B「量販品と何が違うのか」「価格に見合うのか」に、スペック説明ではなく実釣の事実で答える。 設計方針:確実性価値(実釣証明を購入判断の前に置く)
05 スペック
全長データ
自重データ
適合ルアーデータ
適合ラインデータ
推奨シーンデータ
A比較検討のための事実情報。読み物の後ろに置き、ページの主役をストーリーと実釣証明に保つ。 設計方針:三段構成(ストーリー→証明→事実)
06 購入・予約
カラー選択
数量
カートに入れる/予約する
会員登録せずに購入する(ゲスト購入)
再入荷を通知する
送料・発送目安・保証の要点を1行で表示
A+BAには最短の購入操作を、Bには会員登録の壁を作らない選択肢を用意。売り切れ時も通知登録で行動を受け止める。 設計方針:買い逃しゼロ/ゲスト購入の許容
補足スクロール中は「カートに入れる/予約する」を画面下に固定表示する想定です。
07 対応釣法リンク

この製品が活きる釣法

タケダ式フロートリグ 解説へ
磯ヒラ ポップゲーム 解説へ
B製品から釣法へ戻れる相互リンク。「自分に使えるか」が判断できず離脱しかけた人を解説へ引き戻す。 設計方針:回遊設計(商品⇄釣法の相互リンク)
08 購入FAQ 抜粋
予約はどう進みますか
発送はいつ頃ですか
初期不良・保証について
購入ガイド・FAQをすべて見る
B「個人ブランドのECで買って大丈夫か」の不安を、購入ボタンの近くで解消する。詳細は独立ページへ。 設計方針:信頼設計(購入FAQ・保証の明記)
SCREEN 03 釣法解説ハブ(例:タケダ式フロートリグ)
検索流入を受け止め、解説から「最初の1本」へ橋渡しする新設ページ
9:41スマホ幅 375px
01 釣法概要
フィールド写真(釣法の情景)

タケダ式フロートリグとは

対象魚
シーズン
難易度
B検索から着地した直後に「これは何か」が3秒で分かる。ブログ記事の続きではなく独立した入口として作る。 設計方針:釣法SEOのピラーページ化
02 仕掛け図
仕掛け図(ロッド・ライン・フロート・リーダー・ジグヘッドの図解)
B「どういう仕掛け?」に図で即答する。検索意図に対する最短の答えをページ上部に置く。 設計方針:学び価値(体系的な解説)
03 解説セクション
1. 何のための釣法か
2. タックルの組み方
3. 操作とアタリの取り方
4. 釣れないときの見直し
ページ内目次(先頭に固定表示)
B時系列ブログに分断されていた知識を1ページに体系化。「解説が商品ページに分断されて読めない」離脱を防ぐ。 設計方針:学び価値/SEO資産化
04 動画
動画(キャスト・操作の実演)
B文章では伝わらない操作を動画で補う。動画の構造化データで検索結果での露出も狙う。 設計方針:構造化データ(動画)対応
05 この釣法のタックル

この釣法のための道具

写真
ロッド/製品名
写真
ルアー/製品名
B「この人から学びたい」と思った直後に道具が自然に提示される位置。購入トリガーの瞬間を逃さない。 設計方針:回遊設計(釣法→製品への橋渡し)
06 「最初の1本」ガイド
まず1本選ぶなら
写真
推奨ロッド1本+理由
写真
推奨ルアー1個+理由
入門セットをまとめて見る
B「オーバースペックでは」「選択肢が多くて選べない」に対し、推奨を1つに絞って理由付きで示す。製品一覧に放り込まない。 設計方針:差別化コンテンツ(最初の1本ガイド)
07 通知CTA/関連導線
新作・予約の通知を受け取る(LINE/メール)
関連する釣法:磯ヒラ ポップゲーム
写真
関連ブログ/MOVIE
購入ガイド・FAQ/PROFILE
B→Aまだ買わない読者も通知登録で関係を継続できる。ここで登録した人が将来のペルソナAになる。 設計方針:買い逃しゼロ(全ページに通知CTA・第2のCV)