たかし Back to Works
Home / Works / 青波建設株式会社(デモ)
Webサイト制作

青波建設株式会社(デモ)

海上土木を主役にした、地域インフラ企業のためのコーポレートサイト

青波建設株式会社(デモ)
Overview

概要

海上土木・河川・道路工事を主力とする総合建設会社のためのコーポレートサイトデモ。Next.js (App Router) + Tailwind CSS で構築し、海と港をイメージしたカラーパレット(ocean / navy / sand)で「海と土に、確かな仕事を。」というブランドメッセージを表現しました。発注者向けの信頼情報に加えて、地域住民向けに工事進捗を継続発信できる専用ページを設けているのが、他のコーポレートサイトデモとの大きな差別化ポイントです。

Challenge

課題

海上土木のように工種が専門的で BtoB 比率の高い業種では、Web サイトでの情報発信が後回しになりがちです。一方で、河川や道路工事は地域住民への進捗説明が求められるため、「BtoB 向けの信頼情報」と「地域住民向けの進捗開示」を 1 サイトで両立する必要があります。さらに 50 年の歴史を持つ企業らしい重厚感も、Web で表現しきれていないケースが多く見られました。

Approach

アプローチ

Next.js App Router で 5 ページ構成のサイトを構築し、ホーム・工事の内容・工事進捗状況・お知らせ・お問合せという情報設計に整理。海と港を想起させる ocean / navy / sand カラーをブランドカラーとして採用し、ヒーロー動画/写真でスケール感を演出。住民向けの「工事進捗状況」ページを独立させ、現在進行中の案件をタイムラインで開示する構成にしました。

Features

主な機能

  • 01
    海上土木を主役にしたヒーロー
    「海と土に、確かな仕事を。」というブランドメッセージを大きく打ち出し、専門領域を一目で伝える。
  • 02
    工事の内容ページ
    海上土木・河川治水・道路造成の 3 領域に整理し、それぞれの工種・実績例を構造化して提示。
  • 03
    工事進捗状況ページ
    現在進行中の案件をタイムラインで開示し、地域住民・周辺住民向けの情報発信窓口として機能。
  • 04
    お知らせページ
    受注情報・休業案内・採用情報などを継続発信できる枠を確保。
  • 05
    お問合せフォーム
    工事相談・取材・採用問い合わせなどを 1 つの導線で受付。電話番号も常時ヘッダー表示。
  • 06
    ブランドカラーシステム
    ocean / navy / sand の 3 系統で海と港をイメージし、Tailwind で一貫した配色を実現。
Stack

技術スタック

  • Next.js 14
  • / App Router
  • / TypeScript
  • / Tailwind CSS
  • / Cloudflare Pages
Results

成果

5 ページ
ページ構成
発注者 / 地域住民
対応オーディエンス
工事進捗ページ
差別化ポイント
Next

類似のシステム開発をご検討ですか?

現場の課題に沿った仕組みづくりをご支援します。お気軽にご相談ください。

More

他の事例も見る