Compagnie l'Entr'Axes
パフォーマンス98。劇団には、遅いサイトに割く予算はありません。
- 年
- 2026
- 制作期間
- 3週間
- 技術スタック
- Next.js · React · Tailwind · TypeScript · Vercel
- デザイン
- 開発
- ローカルSEO
- ライティング
- Lighthouseパフォーマンス
- 98/100
- 年間のホスティング費用
- 0ユーロ
- 劇団の創立年
- 2009
解決すべき課題。
背景
La Compagnie l'Entr'Axesは、2009年からアニエス・フェイ（Agnès Faye）が主宰する、リヨンのアマチュア劇団です。公演、ワークショップ、レパートリーを手がけています。
制約
アマチュア劇団には、保守の予算もWeb担当者もいません。サイトは何か月も放置されたまま機能し、変わっていく日程を最新に保ち、予約したい気持ちを喚起しなければなりません。しかも、継続的な費用をかけずにです。
解決策
静的レンダリング、無料のホスティング、読みやすいデータファイルで管理するコンテンツ。上演スケジュールには実際の日付を持たせています。終了した公演は、「近日上演」として表示されたままになるのではなく、自動的にレパートリーへ移ります。誰も手を加えなくても、サイトが古くなることはありません。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
劇的な雰囲気
コントラストの強いセリフ体、深い黒、幕の赤。演劇には強い視覚的なコードがあります。それを無視して汎用的なデザインにしていたら、この場のアイデンティティを失っていたでしょう。
上演スケジュールを最初に
劇団の紹介より先に、次回の公演日程。演劇のサイトを訪れる人は、何がいつ上演されるのかを知りたいのです。劇団の歴史に関心が向くのはその後です。
ワークショップを第2の柱に
劇団を支えているのは、公演と同じくらいワークショップです。「私たちについて」のページの1行ではなく、時間帯、料金、申し込みを載せた専用のページを設けています。
プロジェクトのカラーパレット
ステージブラック
#141013
背景
カーテンレッド
#A32639
アイデンティティ、アクセント
アイボリー
#F3EEE7
テキスト
スポットライトゴールド
#C9A24B
細部
タイポグラフィ体系
見出し用書体
Playfair Display 700
本文用書体
Inter 400
ポスターにはディドーン系の書体を、上演スケジュールにはサンセリフ体を。日付は等幅数字にして、カレンダーの中で揃うようにしています。
その裏側にある技術。
- Next.js
- React
- Tailwind
- TypeScript
- Vercel
日程の自動切り替え
各公演には日程が設定されています。最終公演が終わると、手を加えることなく上演スケジュールから外れ、レパートリーに加わります。Web担当者のいないサイトが正確さを保てるのは、このためです。
パフォーマンス98
静的サイト、セルフホストの2つのフォント、アニメーションライブラリなし、サイズを指定した画像。ポートフォリオの中で最も低い予算で、最も高いパフォーマンススコアを達成しました。
運用コストゼロ
アプリケーションサーバーもデータベースもなく、ホスティングは無料です。非営利団体にとって、サイトが長続きするかどうかは、何よりもそのコストにかかっています。
検索で見つけてもらうための仕組み。
日付入りのEventマークアップ
各公演に、日付、会場、予約リンクを含むEventのノードを付けています。これにより、イベントの検索結果に表示されるようになります。
お出かけのクエリ
「アマチュア演劇 リヨン」「リヨン 今週末 公演」「大人向け 演劇ワークショップ リヨン」。3つの異なる検索意図に、3つのページで応えています。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法（European Accessibility Act）により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
黒い背景でのコントラストを検証
スコアは94です。深い黒の上の幕の赤は、本文テキストで4.5:1を保てるよう明るく調整しました。残る減点は、特定済みの装飾的な要素に関するものです。
納品したもの。
- トップ
- 上演スケジュール
- レパートリー
- ワークショップ
- 劇団について
- 予約
- お問い合わせ
プロジェクトの流れ。
制約の整理
保守の予算はゼロ。サイトは自ら最新の状態を保たなければなりません。
デザイン
劇的な雰囲気、上演スケジュールを先頭に。
開発
静的サイト、日程の自動切り替え、無料のホスティング。
SEO
Eventのマークアップ、3つのクエリ群。
