たかし 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

他の事例も見る

LINE注文システム
01 — LINE×飲食店

LINE注文システム

飲食店のテイクアウト・店内注文をLINEで受け付ける仕組み。注文は厨房のLINEグループにカードで届き、「完成」を押すとお客様に通知。専用アプリも月額サービスも不要です。

予約管理システム
02 — Webアプリ×予約

予約管理システム

お客様がスマホから空席を見て予約でき、お店は管理画面で予約・席・コース・営業時間をまとめて管理できるWeb予約システム。席の自動割り当てで二重予約を防ぎます。

トリミングLINE予約
03 — LINE×予約

トリミングLINE予約

トリミングサロンの予約をLINEで24時間受付。店主はLINEに届く承認依頼をタップするだけで、確定通知・カレンダー登録・前日リマインド・来店後のお礼まで自動で送られます。

出面票のペーパーレス化
04 — LINE×ペーパーレス

出面票のペーパーレス化

建設現場の2枚綴り出面票をLINE提出×電子承認に置き換える仕組み。職長はスマホで約1分、元請はタップ1回、両社がいつでも閲覧できます。

リース伝票のLINE承認化
05 — LINE×ペーパーレス

リース伝票のLINE承認化

機械リース店の紙伝票をLINE承認に置き換える仕組み。お客様のタップ1回がサインの代わりになり、控えはトーク履歴として自動で残ります。

運搬伝票デジタル化(デモ)
06 — LINE×業務DX

運搬伝票デジタル化(デモ)

運送業の三枚綴り運搬伝票を電子化する 3 画面連動デモ。電子サイン・GPS 記録・控えの自動配布までブラウザで体験できます。