Kohbai Foods
Kohbai Foods
老舗の和食品ブランド・Kohbai Foods様のコーポレートサイトを、洗練されたレスポンシブデザインで制作しました。Next.jsによるフロントエンド開発、レスポンシブデザインの設計を担当し、安定した表示性能を確保するため社内のセキュアなファイルサーバーへ公開しています。
担当領域
レスポンシブWebデザイン
あらゆるデバイスと画面サイズでシームレスな体験を実現
フロントエンド開発
Next.jsによる最適なパフォーマンスとユーザー体験の構築
画像最適化
高速な読み込みと画質を両立するパフォーマンスチューニング
ホスティング構築
ファイルサーバーへの静的デプロイと配信の最適化
課題
Kohbai Foods様が求めていたのは、商品の品質を伝えるクリーンでモダンなサイトでありながら、老舗としての伝統も守ることでした。私たちはこのバランスを取りつつ、「バックエンド処理を持たない静的ファイルサーバーへ公開する」という技術的な制約の中で実現する必要がありました。
アプローチ
デザイン
シンプルさと温かみを重視しました。UI/UXの方向性としては、大きなビジュアル、アースカラー、和の余白感を活かしたレイアウトを採用し、テキストは最小限に、見出しは力強く、余白はゆったりと設計しています。設計当初からモバイル表示を最適化しました。
Next.jsによる開発
フロントエンドを静的サイトとして構築するためNext.jsを採用しました。各ページを事前レンダリングしたHTMLとして生成することで、パフォーマンスを高め、軽量な構成を保てます。あわせて画像最適化を組み込み、静的ファイルルーティングによって分かりやすいナビゲーションを実現しました。
ホスティング
ファイルサーバーでの運用というご要望に合わせ、サイトを静的書き出しし、最適化済みのアセットをお客様の環境へ納品しました。互換性を確保するため、複数のデバイスとブラウザでビルドを検証しています。
成果
モバイルファーストの設計で、全ブレークポイントに完全対応
旧サイト比で読み込み時間を約80%短縮
静的ファイルサーバーへスムーズに公開
今後の保守・更新が容易な構成
制作の舞台裏
難しかったのは、モダンに見せながらも見慣れない印象を与えないことでした。クリーンなデザインと文化的な個性がちょうど重なる地点を探して、書体とアイコンの検証にかなりの時間を費やしました。また、大きな商品画像を最適化しつつRetinaディスプレイでも鮮明に保つ調整には試行錯誤が必要でしたが、その甲斐はありました。
今後の展開
今後は多言語版（日本語・英語、可能であればタイ語）の展開をご支援し、商品お問い合わせフォームや簡易的なEC機能の追加についても検討していく予定です。