CONSTRUCTION CASE CMS / 必要な機能から始めるWeb制作

施工事例を、
自社で更新できる
Webサイトへ。

今あるページに更新機能を。
新しいページ・専用サイトの制作にも対応。

工事が完了しても、掲載依頼が後回しになっていませんか。完成写真・工程写真・施工前後の写真と、自社の担当工事範囲を、社内で追加・修正できるCMSを制作します。

HTMLの知識がなくても、写真を選び、工事内容や説明を専用欄へ入力し、掲載許可と表示を確認して公開できます。同じ場所の施工前・施工後の写真を並べて掲載できます。

今のサイトの必要な部分から導入方法を検討できます。構成や契約・保守条件を確認し、追加できる範囲をご案内します。

サイトURLと「社内で更新したいこと」1つからご相談いただけます。CMSやサーバーの種類が分からなくても大丈夫です。

施工事例CMS / 画面案架空の内装・改修会社ATELIER FIELDの施工事例が写真付きで並ぶ一覧画面案
架空企業の静的な画面案。既存サイトのデザインに合わせた施工事例ページも制作できます。

01 / DESIGN & SCOPE

自社で更新できるようにする、2つの制作方法

今ある施工事例のページをCMS化する方法と、必要に応じて新しいページ・専用サイトを制作する方法があります。デザインを継続するか、見せ方も見直すかを検討します。

A / 今あるページをCMS化

今のデザインで、
施工事例だけCMS化

現在のロゴ・色・書体などを活かし、今ある施工事例のページに更新機能を追加する方法を検討します。ページがない場合は、同じデザインで必要な一覧・詳細を新設できます。

  • 企業サイトのデザインを継続したい
  • 施工事例の追加・修正を社内で進めたい
  • サイト全体のリニューアルは予定していない
既存の企業サイト+ 施工事例の一覧・詳細・更新CMS

B / 事例専用サイトを制作

施工の仕事を伝える、
新しいデザインとCMS

企業サイトとは別のデザインで、施工事例を紹介する専用サイトを制作します。写真を見て相談したい方に向け、建物用途・工事種別から探す一覧、施工の内容と自社の担当範囲を伝える詳細を構成し、更新CMSを組み込みます。

  • 施工写真と仕上げの特徴を詳しく見せたい
  • 工事種別や建物用途から事例を探せるようにしたい
  • 営業時にも紹介できる事例サイトを作りたい
既存の企業サイト別デザインの施工事例サイト + CMS

必要なのが事例の更新機能なら、その部分から。施工写真の見せ方や相談への案内も見直したいなら、サイト制作まで。必要な機能と制作範囲を選んでご相談いただけます。

02 / UPDATE IN-HOUSE

施工事例ページの更新を外注している企業様へ

事例の追加、完成写真の差替え、工事内容の修正を、担当者が管理画面から反映できるようにします。CMSで管理する項目は、制作会社への都度の更新依頼が不要になります。

制作会社へ更新を依頼する場合の一例

  1. 写真・工事内容・掲載条件を社内で確認
  2. 制作会社へ素材と修正内容を連絡
  3. 必要に応じて見積・発注し、ページを制作・修正
  4. 一覧・詳細の表示を確認して公開

施工事例CMSを導入した場合

  1. 専用の入力欄に写真・説明・分類を登録
  2. プレビューと掲載条件を社内で確認
  3. 権限のある担当者が公開して事例ページへ反映

工事の完了と、写真・文章を掲載できる状態は分けて扱います。現場や営業が登録し、確認・公開を別の担当者が行う場合は、権限と手順を設計します。

HTMLの知識がなくても、画像の選択や専用欄への入力で施工事例を追加・修正できます。

写真と説明を登録すると、一覧と詳細へ掲載

専用入力欄と公開表示の静的な画面案です。入力・保存・公開は操作できません。表示内容は説明用の仮設定です。

① 管理画面の入力欄 / 画面案
WordPressを用いる場合の専用入力欄
事例名
共用スペースのあるオフィス改修
担当工事
オフィス内装改修
写真の説明
完成後の共用スペース
選択した掲載画像共用スペースのあるオフィス改修の掲載画像

② 内容・表示を確認 → 公開

③ 公開ページの表示例 / 静的な画面案
ATELIER FIELD
私たちの仕事施工事例

HOME / 施工事例 / オフィス改修

SELECTED WORKS / PROJECT

共用スペースのある
オフィス改修

共用スペースのあるオフィス改修の掲載画像

完成後の共用スペース

担当工事オフィス内装改修

架空サイトの画面案です。リンク・ボタン・検索は操作できません。

写真の掲載許可を確認して公開する設計例です。施工前後は同じ場所の2枚を組にし、工程写真や完成写真と分けます。

担当者が更新すること

写真の追加・差替え、工事内容・担当範囲の修正、事例の公開・非公開。写真と説明は専用欄へ登録します。

制作会社に任せること

ページのデザインやレイアウト、新しい機能の追加。写真の加工・文章作成を任せる場合も、依頼する範囲を確認します。

公開前後に確認すること

顧客名・写真の掲載許可、自社の担当工事範囲、施工前・施工後の写真が同じ場所を写しているか。公開中の表示を保って変更案を確認するか、修正時に掲載許可を再確認する範囲も決めます。

03 / DEDICATED FIELDS

変更する項目だけを、専用の入力欄に

一般的なWordPressの投稿画面でページ全体を編集する方法だけでなく、工事ごとに必要な情報を入力する専用画面を制作します。建物用途と工事種別、完成写真と施工前後の写真など、意味が違う情報を分けて登録する構成です。

事例名・施工の説明
公開するタイトル、ご相談内容、工事の概要、施工した箇所。必要に応じて社内用の案件名と分けます。
建物用途・工事種別
住宅・店舗・オフィスなどの用途と、新築・内装改修・水回り・外装などの工事分類。探し方に合わせて選択項目を決めます。
写真・説明・表示順
一覧のメイン写真、完成写真、工程写真、写真ごとの説明。施工前後は同じ場所の写真を一組で管理する範囲を設計します。
所在地・完了年月・物件情報
公開してよい所在地、工事の完了年月、工期、施工面積、使用した素材・設備。掲載する項目と単位を工事内容に合わせて決めます。
自社の担当範囲
設計・施工・監理・設備工事など。共同案件では、建物全体と自社が担当した工事の範囲を区別して紹介します。
掲載確認・公開状態・関連案内
写真や顧客名の掲載条件、下書き・公開・非公開、関連サービスと相談先。工事の完了状況とは別に管理します。
WordPress / 入力欄の画面案静的な表示例
施工事例の入力
建物用途
オフィス
住宅・店舗などの用途から選択
工事種別
内装改修
建物用途とは別の分類で管理
自社の担当範囲 / 複数選択
設計(選択済み)内装施工(選択済み)監理(未選択)保守(未選択)
工事の完了と、写真・文章の掲載確認は別に管理。
WordPressの入力欄を想定した静的な画面案です。ここでは入力できません。選択肢と担当範囲は、紹介する工事に合わせて設計します。

ページの見た目は、制作側で設計

担当者が入力するのは施工事例の情報です。一覧カード、物件情報、写真と説明は、あらかじめ決めたレイアウトで表示します。完成写真だけの事例と施工前後を載せる事例で、必要な欄や表示方法を検討します。

入力方法も、工事と写真の管理に合わせて

工事種別・建物用途は選択式、担当範囲はチェック式、所在地は公開する範囲だけを登録する欄へ。現場担当者の呼び名と、訪問者が探す分類を確認し、必要な記入例や確認事項を入力欄の近くに用意します。

項目は制作時の検討例です。すべてを必須にせず、実際に紹介する工事と日常の更新作業から対象を決めます。住所や顧客名などの社内情報を持つ場合は、公開側へ出す項目と明確に分けて設計します。

04 / CMS PRODUCTION DEMO

施工事例の一覧・詳細と、情報を更新する管理画面

架空の内装・改修会社「ATELIER FIELD」を使った画面案です。温かい白とブラウンを基調に、空間の写真、工事種別、担当範囲を読む事例サイトを想定しています。

既存サイトに追加する場合も、一覧・詳細のページと更新機能を、現在のデザインに合わせて制作できます。

顧客の制作実績ではありません。架空企業・架空施工事例を使った静的な画面案です。保存・公開・検索・承認は動作しません。写真はAI生成で、実際の施工実績や建材・設備の性能を示すものではありません。

サムネイルから探す、施工事例一覧

施工事例一覧 / PC
オフィス・店舗・住宅の3つの架空施工事例が写真付きで並ぶ一覧画面案
写真と事例名に加え、建物用途・工事種別・担当範囲を表示する一覧の案です。
一覧 / スマートフォン
施工事例一覧のスマートフォン表示の上部
一覧上部の表示案。続きはスクロールする構成です。画像を開くと一覧全体を確認できます。
施工事例の詳細 / PC
架空オフィス改修の完成写真、施工内容、所在地と完了年月、自社の担当範囲を掲載する詳細画面案
一覧から進んだ先の、オフィス改修の詳細ページの案です。

完成写真に加えて、担当した工事を伝える

詳細では、工事の概要、施工した箇所、建物用途、工事種別、担当範囲を紹介します。写真を見た方が、自分の相談に近い仕事か判断できる情報を掲載する構成です。

完成写真・工程写真・施工前後を分けて登録

全景で空間を伝え、造作部分や仕上げの写真で担当箇所を説明するなど、用途を分けて登録します。縦写真の水回り事例も含め、一覧のトリミングと詳細で全体を見せる方法を確認します。

施工前後の写真を使う場合は、同じ場所の組み合わせ、撮影方向、場所名と説明を確認します。工程写真を完成写真として扱わない登録方法も検討します。

詳細ページのスマートフォン表示案を開く(新しいタブ)

住宅リフォーム / ビフォー・アフターの詳細ページ

完成写真だけでなく、同じ場所の施工前・施工後を一組で紹介する画面案です。キッチン・浴室・玄関の3組を並べた例です。比較する場所を追加できる構成も検討できます。

住宅リフォームの施工前後 / PC
架空のマンションリフォーム事例で同じキッチンの施工前後写真を並べ、改修内容と施工概要を紹介する詳細ページ画面案
架空の住宅リフォームの詳細画面案。比較写真と工事内容を同じページに掲載します。

「どこが、どう変わったか」を伝える

施工前・施工後の写真に、場所名と変更した内容を対応させます。写真だけでは伝わりにくい設備の交換や内装の変更、自社が担当した工事も説明できる構成です。

写真は場所ごとに、一組で登録

管理画面では「場所名」「施工前の写真」「施工後の写真」「改修内容」を一組にします。完成写真だけの事例と、比較写真を載せる事例を同じCMSで管理することも可能です。

施工前の写真がない場合に比較欄を表示しない方法、縦横の写真が混在する場合の表示、写真の追加・順序変更は、実際の素材に合わせて設計します。

施工前後の詳細ページ / スマートフォン表示案を開く(新しいタブ)

施工事例を登録する、担当者向けの管理画面

事例名は記入、工事種別と用途は選択、担当範囲はチェック。工事の完了情報と、写真の掲載確認・公開操作を区別する画面案です。

施工事例の編集 / 管理画面案
施工事例の基本情報、写真の役割、担当範囲、工事完了と掲載確認、社内用記録を分けた管理画面案
上部の表示案です。画像を開くと管理画面全体を確認できます。
WordPressの管理画面を想定した静的な画面案です。実際のCMSは制作範囲に合わせて設計します。
現場・営業担当者が登録し、掲載内容を確認する構成例です。
管理画面のスマートフォン表示案を開く(新しいタブ)

工事完了とWeb公開を分ける

工事が終わっていても、写真や顧客名の掲載確認が済んでいなければ下書きで保管する手順を検討します。申請・承認・差し戻しが必要な場合は、確認者と公開条件を別途設計します。

写真ごとの掲載条件を確認

住宅の表札・住所、車のナンバー、人物、店舗名などの写り込みと、顧客・撮影者の掲載条件を確認します。確認記録は案件単位か写真単位かを決め、位置情報など画像に含まれる情報の扱いも確認します。

公開後の差替え・掲載終了にも対応

写真の差替えや説明の訂正で再確認が必要な範囲を決めます。掲載終了ではページだけでなく、写真・資料のURLからの取得も止める必要があるかを確認して対象範囲を設計します。

ここで示しているのは制作時の構成例です。写真の登録形式・容量・向きの補正、施工前後の管理、確認・承認、担当者の権限は、現在の素材と業務を確認して制作範囲を決めます。

05 / ADD TO YOUR WEBSITE

導入環境・移行する情報・担当範囲を確認します

施工事例だけを自社更新にする方法は、現在のサイトによって異なります。CMS、サーバー、既存の制作・保守契約を確認し、デザインと運用を継続できる方法をご提案します。

WordPress

既存のWordPressサイト

現在のテーマやプラグインを確認し、施工事例の入力欄と一覧・詳細の表示を追加します。標準投稿や既存の事例機能から移行する場合は、工事の分類、各項目と写真の対応を確認します。

HTML / PHP

静的HTMLなどのサイト

現在の企業サイトを活かし、施工事例の部分だけCMSで管理する構成を検討します。事例URL、ヘッダー・メニューとの接続、写真や資料の保存先はサーバー環境を確認して決めます。

OTHER CMS / HOSTING

他社CMS・制約のある環境

追加開発や外部機能との接続が可能かを確認します。施工事例を別の環境で管理し、既存サイトから案内する方法も検討できます。保守契約と日常更新の担当範囲も確認します。

過去事例を移行する場合は、旧URLの継続・転送・掲載終了を個別に確認します。写真や文章を移すだけでなく、現在も公開してよい内容か、所在地や担当範囲が適切かを確認する担当も決めます。

公開前の操作確認と、公開後の保守

初期制作と継続保守の作業・費用を分けて確認します。公開前に担当者が入力・確認・公開の操作を試し、操作説明の進め方を決めます。CMS本体・プラグインの更新、バックアップ、障害対応を誰が担当するかも、相談時に確認します。

06 / FOR YOUR UPDATE TEAM

こんな施工事例サイト運用に

サイトを新しく作る予定が決まっていなくても、更新方法だけのご相談からお受けします。

  • 工事が完了するたびに、制作会社へ事例の追加を依頼している
  • 現場や営業担当者の写真を、掲載につなげたい
  • 完成写真を撮り直し、既存事例の写真を入れ替えたい
  • 工事種別と建物用途から事例を探せるようにしたい
  • 施工前後と完成写真の事例を、同じCMSで管理したい
  • 住所や顧客名を伏せた事例も紹介したい
  • 登録担当者と、確認・公開する担当者を分けたい
  • 古い事例の修正・非公開を社内で進めたい

内装会社、リフォーム会社、工務店、住宅・店舗・オフィスの各種工事会社などの施工事例をご相談いただけます。住宅では所在地や表札、店舗では人物や店舗名、共同工事では自社の担当範囲など、紹介する工事に合わせて入力項目と掲載確認を検討します。

07 / QUESTIONS

施工事例ページのCMS化について、よくあるご質問

今の企業サイトのデザインで、施工事例の部分だけCMS化できますか?

現在のサイトを確認し、施工事例の一覧・詳細ページに更新機能を追加する方法をご提案します。色、書体、ヘッダーなども既存サイトに合わせて制作できます。導入方法は、CMS・サーバーの制約や保守契約によって異なります。

顧客名や詳しい住所を出せない事例も紹介できますか?

公開可能な情報だけで構成する方法を検討できます。業種、都道府県、担当内容など、どこまで掲載してよいかを確認します。社内用の案件名・住所を管理する必要がある場合は、公開用の情報と分けて設計します。

施工前・施工後を並べた写真を掲載できますか?

制作範囲に含められます。同じ場所の写真を一組で登録する方法や、場所の説明を付ける方法などを検討します。完成写真のみの事例もある場合は、それぞれの入力項目と表示形式を決めます。

スマートフォンで撮影した写真をそのまま使えますか?

対応する画像形式、容量、縦横比を決めて画像登録機能を制作します。スマートフォンの写真には複数の形式があるため、対応形式の確認が必要です。向きの補正、圧縮、撮影位置などの情報をどう扱うかも設計し、掲載してよい内容かは別途確認します。

担当者が登録し、上司が確認して公開する運用にできますか?

必要な権限と確認手順に合わせて制作できます。単に入力担当者と公開担当者を分ける方法と、申請・承認・差し戻しまで管理する方法では制作範囲が異なります。公開済みの事例を修正するときの確認手順も含めて決めます。

すでに公開している施工事例ページは移行できますか?

現在の構成を調査して、移行できる項目と必要な作業をご案内します。写真、本文、分類、公開日、URLを確認し、継続するページと掲載を終了するページを決めます。移行対象の件数や形式によって作業範囲が変わります。

CMSを導入すれば検索流入も増えますか?

CMSは、施工事例を追加・更新するための仕組みです。導入しただけで検索流入が増えるとは言えません。事例名、担当内容、課題と対応、関連サービスなどを具体的に紹介し、必要な情報が伝わるページを制作します。

制作費用は何によって変わりますか?

ページ構成、入力項目、分類・絞り込み、画像の処理、公開権限、既存環境への導入方法、過去事例の移行件数などによって変わります。現在のサイトと掲載したい事例をご共有いただき、必要な範囲でお見積もりします。

企業サイトとは違うデザインの施工事例サイトも作れますか?

対応します。施工写真の見せ方と工事種別・建物用途からの探し方に合わせて、専用サイトを新規制作します。既存サイトからの案内、入力項目、確認手順と更新CMSを一緒に検討します。

CONSULTATION

社内で更新したいことを、1つから。

まずは、サイトURLと「社内で更新したいこと」を1つお聞かせください。CMSやサーバーの種類が分からない段階でもご相談いただけます。

お問い合わせ内容の記入例

「完成写真と工事内容を、社内で施工事例に追加したい」

このページの「施工事例CMS」の相談と、サイトURLを添えてください。

TOPへ