STYZ LISTEN
限定公開ページです。パスワードを入力してください。

STYZ LISTEN｜Webサイト 設計ブリーフ

イベント（AI・人工知能EXPO NEO 2026）向け ── LP × サービスサイトの中間。モダン／スリム／スクロール連動“繊維”表現。
参考：dashline / exa 系

0位置づけ・ゴール

1目指す体験

参考2サイトの共通項を、STYZ LISTEN流に。
参考の特徴STYZ LISTENでの落とし込み
スリム・余白・細字・少色数オレンジ×ブラック＋大量の余白。上質グロテスク＋モノスペースのアクセント
スクロール連動（reveal / pin / parallax）セクションが“織られる”ように展開。Lenis等のスムーススクロール
抽象グラフィック（線・粒子・波形）声→対話→構造化を「糸/波形」で可視化＝ヒーローの主役モチーフ
高速・滑らか・軽量パフォーマンス最優先（LCP/CLS）。動きは“軽く効かせる”

2サイトマップ / IA

中間規模＝トップ＋下層5〜7。

3ワイヤーに記載する内容

各ブロックに「目的／要素／コピー意図／CTA／モーション」を明記。下がトップの低精細ワイヤー。
トップページ ワイヤー（低精細）styzlisten.com
デモ予約
HERO
ヒーロー（主役＝繊維アニメ）
H1：本質（insight）を、判断（decision）に。／サブ：AIが現場を聴き、本質を構造化。
デモを予約資料をダウンロード
声→対話→構造化を“糸/波形”で可視化（スクロール連動）
▼ scroll
PROBLEM
課題提起
「アンケートでは本音が届かない」「現場の声が事業に活きない」を短く。
SOLUTION
ソリューション（3ステップ／線が繋がる演出）
01 聴く
現場ヒアリング
02 見極める
本質をアセス
03 生み出す
打ち手・アイデア
USE CASES ×6
6ユースケース
ワークフロー連携ユーザーリサーチ採用営業ヒアリング商品開発顧客満足度
課題→使い方→成果
PRODUCT / DEMO
仕組み・デモ（UI/可視化モック）
プロダクトUI / インサイト可視化
聴く→自動で構造化→可視化。
2分デモを見る
PROOF
効果・事例・信頼
深さ×規模
自動構造化
商談化
導入ロゴ／お客様の声／セキュリティ・データ取扱い。
CTA + FORM
CTA帯（デモ予約・資料請求）
「まずは2分のデモから。」
デモを予約資料請求
フォーム（最小項目）
送信
フッター
会社情報／問い合わせ／SNS／プライバシー・特定商取引

4コンバージョン設計

デモ予約・資料請求・問い合わせ。取りこぼし防止に Slack 即時通知＋CRM連携。
種別入力（最小）仕組み後処理・計測
デモ予約会社・氏名・メール・課題・希望日時カレンダー連携（TimeRex/Spir/Calendly）自動確定メール＋Slack＋CRM
資料請求会社・氏名・メールフォーム→即時DL or 自動送付サンクス＋ナーチャ配信
問い合わせ氏名・メール・本文汎用フォーム担当へ自動振り分け
イベント導線QR→/neo事前アポ枠/特典UTMで来場者識別

共通：reCAPTCHA／UTM保持／GA4＋Clarity／CTAはHero・各セクション末・追従ヘッダー常設・離脱時。

5技術・実装構成（案）

6チーム組成

役割担当案責任
クリエイティブディレクターあなた / Vokeh全体品質・トンマナ・意思決定
UI/UXデザイナーVokehIA・ワイヤー・UI
アート/モーションADVokeh or 外部繊維表現・スクロール演出
フロントエンドEng外部 or 武下/COTegg系実装・アニメ・性能
（任意）WebGL/モーションEng外部重い表現（無理なら軽量代替）
コピーライターCD＋PM訴求コピー・UC文
マーケ/CRM山崎/営業フォーム要件・計測・リード連携
PM田中進行・スコープ
プロダクト監修露木デモ素材・仕様監修

最小構成＝CD＋UI/UX＋フロントEng＋コピー（4名）。理想＝＋モーションAD/WebGL＋マーケCRM。

7スケジュール（8/5逆算）＆スコープ

〜6月末
要件・IA・ワイヤー確定（＝今ここ）／コピー初稿
7月上〜中
デザイン（トップ＋主要下層）→ 実装着手 → フォーム/計測構築
7月下
コンテンツ流し込み・QA・MVP公開（Hero/ソリューション/UC/デモ・資料/会社情報//neo）
会期後
事例・機能詳細・ブログ・多言語などPhase2
STYZ LISTEN ／ Webサイト設計ブリーフ（ドラフト・社内限定）
ホスティング：Cloudflare Pages ／ このページは設計の合意用。実サイトは同プロジェクトに差し替えで公開できます。