札幌クリエイター名鑑 | Stitch デザイン探索

2026-06-24 | Stitch MCP(Gemini 3.1 Pro)でゼロベース生成
Stitch で世界観を3度探索。
A/B/C(初回) → ② D1/D2/D3(B レイアウト×WebGL ワクワク要素)→ ③ E1/E2/E3(D2 採用 × 30名対応 × 月次ピックアップ × プラン別差別化)
最新は E シリーズ(第3弾)です。E1/E2/E3 から選んでください。

第3弾: D2 採用 × 30名対応 × 月次ピックアップ × プラン別差別化 ★最新

D2「墨の流れ」世界観を継承。30名前提・月次3名スライダー・本契り10名(中型)+ 初契り20名(小型)・ジャンルフィルタ統合。

CASE E1 ★最新
クラシック・ピラミッド
Vertical Pyramid + Genre Tabs
縦ストーリー強化。月次3名スライダー → 本契り(ジャンルタブ+10名)→ 初契り(同じく+20名マウソンリー)。最も馴染みやすい構造。
縦ストーリー / 馴染みやすい / 構造明快
E1 を開く →
CASE E2 ★最新
横スクロール混在
Horizontal × Vertical Hybrid
本契り10名を横スワイプで大きく見せ、初契り20名を縦グリッドで整然と。動きで魅せるダイナミックな構造。
横×縦の動きMIX / インタラクション豊富
E2 を開く →
CASE E3 ★最新
重層レイヤー型
Sticky Sidebar Filter
左サイドに固定ナビ(ジャンル/月次/プラン)+ 右にコンテンツが流れる。フィルタを切るとリアルタイム更新。30名捌きやすい。
左固定フィルタ / 30名探しやすい
E3 を開く →

第2弾: B レイアウト + ワクワク要素全部のせ

主軸: WebGL/Canvas ヒーロー。補助: カスタムカーソル / GSAP scroll typography / 3D 傾き / ローディング演出 / Lenis なめらかスクロール / グレイン

CASE D1
灯火の夜
Lantern Night
深い夜空に無数の灯火が明滅する WebGL シェーダー。マウスに反応して灯火が集まり、人の気配を感じさせる。極端な明暗コントラスト。黒 × 灯火の琥珀 × 月光。
深さ / 神秘 / 灯火パーティクル / 明暗コントラスト
D1 を開く →
CASE D2
墨の流れ
Ink Flow
墨が紙に滲む様子を WebGL で表現。スクロールで墨が画面を流れ、新しい作家を「書き起こす」演出。文字も墨書きアニメーション。オフホワイト × 墨 × 朱。
職人の手仕事感 / 墨流体 / 書き起こし / 和の現代性
D2 を開く →
CASE D3
雪と霧の北
Snow & Mist of the North
札幌の冬を体現。舞う雪粒、流れる霧、遠景に水墨の山並み。スクロールで霧が晴れて作家が現れる演出。深い藍 × 雪白 × ぼんやりとした金。
儚さ / 静謐 / 雪パーティクル / 霧晴れ演出
D3 を開く →

第1弾: 初回 3 案(参考)

こちらが「B レイアウト良い、デザイン性クソ」と判断された 3 案。比較参考用。

CASE A
ミニマル静謐型
Quiet Editorial
余白最大化・タイポ主役・端正な Editorial。背景白系。
余白◎ / 文字主役
A を開く →
CASE B ★ レイアウト採用
シネマティック作品主役型
Cinematic Showcase
黒背景・センター明朝・作家写真主役。レイアウト採用、デザイン性は D シリーズで強化。
黒背景 / 写真主役
B を開く →
CASE C
ストーリーテリング縦スクロール型
Vertical Scroll Storytelling
1スクロールで1人。フルスクリーン没入型。HTML 重い。
没入感 / 章立て
C を開く →
REFERENCE
Stitch 初回出力
First Iteration
3案展開前のベース。比較用。
出発点
ベースを開く →
注: D1/D2/D3 は WebGL シェーダーが含まれるため重い可能性があります。
ダミーのクリエイター名(架空名)と AI 生成プレースホルダー画像を含みます。本実装では棚田さんから収集した実在 11 名のデータと実写真に置き換えます。

現状(旧叩き台): sapporo-creator-directory.pages.dev