Art Scénic
無料体験レッスンこそが商品。サイト全体を、そこへ導くために設計しました。
- 年
- 2026
- 制作期間
- 3週間
- 技術スタック
- React · Vite · Tailwind · Framer Motion · Vercel
- デザイン
- 開発
- コンバージョン導線
- ローカルSEO
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。
- Lighthouseパフォーマンス
- 97/100
- つだけのCTA
- 1
- 項目で体験を予約
- 4
解決すべき課題。
背景
L'Art-Scénicは、アンヌ・クラフツ＝タルナフスキー（Anne Kravz-Tarnavsky）が創設した、エキュリー（Écully）の劇団です。子ども向けと大人向けの公演とワークショップを提供しています。
制約
ワークショップの申し込みは、9月の3週間で決まります。それ以外の時期、サイトは知名度を維持しなければなりません。申し込みの本当のきっかけは、料金でもプログラムでもなく体験です。体験が、舞台に立つことへの不安を取り除くのです。
解決策
無料の体験レッスンを、サイト唯一のアクションにしました。トップページも、各ワークショップのページも、ギャラリーも、すべてがそこへ導きます。フォームは短く、時間帯を直接提案します。公演のスケジュールも載せていますが、二番手の位置づけです。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
ひとつのアクションを、どこにでも
「無料体験レッスンを予約する」が、サイト唯一のCTAです。競合するボタンを増やせば注意が分散し、それとともにコンバージョン率も下がります。
子ども向けと大人向けでワークショップを分ける
2つの顧客層、2つの不安、2つの訴求。親は子どもを申し込ませ、大人は自分自身を申し込ませます。後者の決断のほうがはるかに難しく、別の言葉が必要です。
アマチュアを見せるギャラリー
写真に写っているのはプロの俳優ではなく、ワークショップ中の生徒たちです。自分もできそうだと思えることが、申し込みのきっかけになります。
プロジェクトのカラーパレット
ベルベット
#5B2233
アイデンティティ
サンド
#F4EDE3
背景
インク
#1E1A1B
テキスト
ブラス
#B08D4A
アクセント
タイポグラフィ体系
見出し用書体
Cormorant Garamond 600
本文用書体
Inter 400
大げさにならない演劇らしさ。劇団が語りかける相手は批評家ではなく、アマチュアだからです。
その裏側にある技術。
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
アニメーションがあってもパフォーマンス97
Framer Motionはアニメーションを使うページでしか読み込まれず、ユーザーが「視差効果を減らす」を設定していれば、すべてのアニメーションが無効になります。
最小限の体験申し込みフォーム
名前、連絡先、希望の時間帯、ワークショップ。4つの項目だけです。年齢、経験、動機まで尋ねていたら、申し込みが書類審査になっていたでしょう。
検索で見つけてもらうための仕組み。
「演劇教室 エキュリー」「子ども 演劇ワークショップ リヨン西部」
近隣検索のクエリで、8〜9月に非常にはっきりとしたピークがあります。ページはシーズンよりずっと前に準備を整えています。
CourseとEventのマークアップ
ワークショップはスケジュール付きのCourse、公演は日付入りのEventです。2つの異なる実態に、2つの異なる型を使っています。
納品したもの。
- トップ — 体験レッスン
- 子ども向けワークショップ
- 大人向けワークショップ
- 公演
- ギャラリー
- 劇団について
- 体験を予約
プロジェクトの流れ。
分析
体験レッスンを唯一のきっかけとして特定。
デザイン
単一のアクション、2つのワークショップ対象、アマチュアのギャラリー。
開発
条件付きのアニメーション、4項目のフォーム。
SEO
近隣検索のクエリ、CourseとEventのマークアップ。
