目次
大正末期創業の元銭湯という歴史的な建物を活かし、香川県・多度津町で営業するアートカフェ「藝術喫茶 清水温泉」。その魅力をより多くの人に伝えるためのWEBサイト制作をgreenciderが手がけました。
今回のプロジェクトでは単に店舗情報を羅列するのではなく、そのストーリーと世界観を丁寧に伝えることを重視しました。このような表現力重視のサイトでは、ビジュアルデザインの自由度が重要な要素となります。
WordPressのような従来のCMSでは、既存のレイアウトや装飾に制約されがちです。そこで選択したのが、静的サイトジェネレーターのAstroを中心とした技術構成でした。
本記事では、採用した技術スタックがどのように課題解決に貢献したかを紹介します。
【公式サイト】藝術喫茶 清水温泉｜香川県多度津町の元銭湯アートカフェ
元銭湯をリノベーションしたアートカフェ「藝術喫茶 清水温泉」を中心とした、香川県多度津町本通の観光複合施設です。カフェ、宿泊施設、アートギャラリー、ショップなどを運営し、地域再生をめざす観光拠点です。
artcafe-shimizuonsen.com
プロジェクトの詳細や制作背景については、以下の制作実績ページもご覧ください。
ストーリーと営業情報をバランスよく伝えるWEBサイトとInstagram運用｜greencider（グリーンサイダー）
「藝術喫茶 清水温泉」は香川県仲多度郡多度津町に2018年にオープンしたアートカフェです。運営する合同会社ふくぞうさまは、多度津町の地域資源を活用した観光による地域活性化に取り組んでいます。規模拡大や広報・集客のためのWEBサイト新設・Instagram運用代行を、greenciderが担当しました。
greencd.jp
プロジェクトの課題と要求
アートカフェとしての特性
このプロジェクトの大きな特徴は単なる飲食店ではなく「アートカフェ」という業態であることです。元銭湯の独特な空間を活かした施設であるためビジュアルデザインの優先度が高く、ブランドイメージを正確に表現する必要がありました。デザイン重視のサイトでは、制約のない柔軟なレイアウトが不可欠です。
CMS要件の明確化
運用面での要件を整理した結果、CMSで管理する必要があるのは営業時間変更やイベント情報などのお知らせ機能のみでした。施設情報や基本情報は頻繁に変更されないため、静的コンテンツとして扱うことができます。
ビジュアルデザインの重要度の高さと合わせて考えた結果、WordPressのような汎用CMSではなく静的サイトジェネレーター＋ヘッドレスCMSの組み合わせが最適という判断に至りました。
採用した技術スタック
Astro - モダンな静的サイト制作
Astro
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
astro.build
今回のサイトは施設情報などの静的コンテンツがメインで、更新頻度が高いのはお知らせのみという構成でした。そこで静的サイトジェネレーターのAstroを採用しました。
Astroはコンポーネントベースの開発やTypeScriptサポートといったモダンフロントエンドの手法を活用できる静的サイトジェネレーターです。
静的サイトジェネレーターはWordPressのようなCMSと比べて、既存テンプレートやテーマの制約を受けません。HTMLやCSSを直接記述できるため、アートカフェの世界観に合わせた独自のレイアウトや装飾を柔軟に実装できました。
Astroには画像の最適化機能も標準搭載されており、WebP形式への自動変換やレスポンシブ画像の生成が可能です。写真を多用する今回のサイトでも快適な表示速度を実現できました。
Svelte - 軽量でシンプルなインタラクション
Svelte
Web development for the rest of us
svelte.jp
ナビゲーションやフォームなど、ちょっとした動きを追加したい場面があります。ReactやVueは高機能ですが、部分的な機能追加には少しオーバースペックになりがちです。そこで選択したのが、軽量でシンプルなSvelteです。
必要な部分にのみインタラクティブ機能を追加する「アイランドアーキテクチャ」との相性も良く、簡潔なコードで必要十分なインタラクションを実現できます。
このサイトではハンバーガーメニューやお問い合わせフォームなどでSvelteを活用しました。それぞれが独立したコンポーネントとして動作し、必要最小限のJavaScriptで実装されています。
microCMS - 運用しやすいヘッドレスCMS
microCMS｜APIベースの日本製ヘッドレスCMS
microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。
microcms.io
観光施設では営業時間の変更やイベント情報など頻繁にお知らせを更新する必要があります。非技術者でも簡単にコンテンツ更新ができることを重視し、日本製で実績のあるmicroCMSを採用しました。
Webhook連携による自動デプロイにより、microCMS上の変更がサイトに自動で反映される仕組みを構築しています。
HyperForm - シンプルなフォーム管理
HyperForm
カスタムURLをセットするだけでフォームが作れる「ヘッドレスフォーム」サービス、ハイパーフォームです。
hyperform.jp
お問い合わせフォームはメール通知のみの簡単な仕様で十分でした。複雑なデータベースやバックエンドサーバーは不要だったので、サーバーレス環境でフォーム処理を実現できるHyperFormを採用しました。
サーバー管理が不要になることで運用負荷を軽減し、シンプルなお問い合わせ対応を実現できています。
インフラとデプロイメント
Cloudflare Pages - 高速配信
Pages | Full-stack platform for frontend developers
Build dynamic front-end applications and deploy directly onto the global network with Cloudflare Pages
www.cloudflare.com
静的サイトの配信には、世界中のエッジサーバーから高速配信できるCloudflare Pagesを採用しました。無料枠が非常に大きいため、このサイトは完全に無料枠内で運用できています。
またプルリクエストごとにプレビュー環境を生成できるため、本番反映前の確認作業も効率化されています。
GitHub Actions - CI/CD自動化
Actions
GitHub Actionsを使用することで、高機能のCI / CDですべてのソフトウェアワークフローを簡単に自動化できます。 GitHubから直接コードをビルド、テスト、デプロイします。コードレビュー、ブランチ管理、問題のトリアージを希望どおりに機能させます。
github.co.jp
GitHubへのプッシュをトリガーに、サイトのビルドとデプロイを自動化しています。リントや型チェックなどの品質チェックも自動実行されるため、コードの品質を保ちながら効率的な開発が可能です。
まとめ
アートカフェの独特な世界観を表現するために、デザインの柔軟性が最も重要だった本プロジェクト。従来のWordPressではなくAstroを中心とした技術構成を選択することで、制約のない自由なデザイン表現を実現できました。
この技術選定により、アートカフェらしいビジュアル表現と実用的な運用性を両立した持続可能なWEBサイトを構築できました。
