実務的な運用負荷に考慮してコーディングとサイト構築 トークライブ＆バー SHAVEL（シャベル）」様

堀江貴文氏プロデュースによるトークライブ＆バー「SHAVEL（シャベル）」の公式サイトにおいて、デザイン再現性と運用性の両立をテーマにコーディングおよび構築を担当しました。デザイナーの意図を忠実に反映しながらも、安定運用と低コスト維持を意識した構成を実現しています。
Talk Live&Bar SHAVEL(シャベル)

PCデザインでSP表示を想定した現代的カンプの忠実再現

デザイナーが提案したのは、PC表示でもSPレイアウトを活かすモバイルファースト設計のカンプでした。一般的なブレークポイント設計とは異なる構成だったため、実際の表示での自然さ・可読性を担保しつつ、視覚的リズムを崩さないようにコーディングしました。

ブレークポイント設計

スマホ系・タブレット系・デスクトップ系の3段階での細かい調整をしました、 この細かなRWD対応は完全ノーコードCMSのwixや今流行りのAIコーディング(2025年現在)でも不可能な領域だと感じております。

静的サイトジェネレーターに頼らない安定構成

当初は静的サイトジェネレーター（Nuxt.jsなど）の導入も検討しましたが、運用担当者のスキルや更新体制を考慮した結果、より「枯れたアイデア」に基づいた構成を採用しました。これにより、導入・運用コストを大幅に抑えつつ、保守しやすい環境を実現しています。

静的ジェネレーターを採用しなかった理由

• 更新作業時にビルドやローカル環境構築の負担が発生
• 初期導入・保守コストがサーバー環境よっては不向き
• チーム全体の運用負荷を軽減するため昔ながらの静的構築を採用

採用した「枯れた」実装アプローチ

• HTML＋CSS＋最小限のJavaScript構成で軽量化
• 旧来のPHP等のインクルードを利用した再利用可能なコンポーネント構造で保守性を確保

GITデプロイによる脱FTP環境の構築

運用フェーズでは、安全に更新が行えるようにGITベースのデプロイ環境を構築しました。FTPによる手動アップロードを排除し、セキュリティと運用効率を向上させています。

• mainブランチへのpushで自動デプロイが走る仕組み
• FTPを使用せず、GIT経由での安全な更新運用
• 差分管理・バックアップの自動化でヒューマンエラーを防止

結び

サイト構築では、最新のデザイン要件と実務的な運用負荷のバランスを最適化、スピード・安定性・運用コストすべてにおいて高いパフォーマンスを発揮するサイトに仕上がっています。