たかし Back to Works
Home / Works / 八雲建設 現場公開サイト(デモ)
現場公開サイト

八雲建設 現場公開サイト(デモ)

遊水地整備工事の情報を、モダンなデザインで地域に届ける

八雲建設 現場公開サイト(デモ)
Overview

概要

現場公開サイトのデザイン違いデモ。同じ情報構成(工事概要・工事内容・進捗・お知らせ・お問い合わせ)を、モダンな Web デザインの語彙で表現しました。左端の巨大英字ウォーターマーク・ゴースト番号・ヒーロースライダーなど、地方建設会社のサイトとして目を引く演出を取り入れつつ、公共案件としての節度は保っています。

Challenge

課題

現場公開サイトを標準構成で作ると「どこも似た印象になってしまう」という課題があります。とはいえ、公共工事の性格上、派手すぎるデザインは避けたい。標準的な情報構成を保ちつつ、モダンで印象に残るビジュアルを実現する落としどころを模索しました。

Approach

アプローチ

白基調 × オレンジ (#ef8200) のシンプルな配色に、巨大な英字ウォーターマーク・ゴースト番号などのタイポグラフィ演出を組み合わせ、モダンな建設サイトのトレンドを取り入れました。3 枚のヒーロースライダーで工事のスケール感を演出しつつ、5 ページ構成で必要情報は網羅しています。

Features

主な機能

  • 01
    モダンなヒーローセクション
    3 枚の写真スライダー + カウンターで工事のスケール感を演出。
  • 02
    左端の英字ウォーターマーク
    各セクションに巨大英字を配置し、ページ全体に統一感とデザイン性を付与。
  • 03
    ゴースト番号(01〜05)
    セクション見出しに大きなゴースト番号を配置し、視覚的リズムを生成。
  • 04
    工事進捗状況ページ
    現在の進捗率とマイルストーンをタイムラインで開示。
  • 05
    5 ページ構成
    トップ / 工事内容 / 進捗 / お知らせ / お問い合わせ、必要十分の情報設計。
  • 06
    ブランドカラー(オレンジ)
    白基調に差し色オレンジで、地方建設会社の温かみと現代性を両立。
Stack

技術スタック

  • HTML/CSS
  • / Google Fonts
  • / Cloudflare Pages
  • / レスポンシブ
Results

成果

モダン建設
デザイン方向性
5 ページ
ページ構成
即運用可能
本番想定構成
Next

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

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

More

他の事例も見る