建設会社のサイトデモ｜使用フレーム・パーツをすべて公開

<< デモ一覧に戻る

建設会社のデモ

このページでは、Frames CMS の製品版で実際に作った建設会社のサイトをご紹介します。土木・建築・リフォームをしている、地域の総合建設会社を想定した、7ページ構成です。
使っているフレーム（デザインの枠）1種類とパーツ20種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
このデモは、ロゴとメニューを左の列に固定し、メニューの下の「サイドバー」にお問い合わせの案内を置いています。トップページは、事業内容・会社の姿勢・数字・施工実績・採用・安全への取り組みと、会社の全体が伝わる順に並べました。

このデモを見る（別ウィンドウ）

まずは全体像から
このデモの構成

7つのページで構成しています。「何をしている会社か」「どんな工事をしてきたか」「どんな会社か」「採用」の4つが、建設会社のサイトの基本の型です。トップページにも、その4つの入口を置いています。

ホーム

〇〇県の総合建設会社。土木・建築・リフォーム。

事業内容

土木・建築・リフォーム。

施工実績

これまでの工事。

会社概要

ごあいさつ・沿革・会社概要。

採用情報

募集職種と、はたらく環境。

お知らせ

さんぷる建設からのお知らせ一覧です。

お問い合わせ

入力項目を自由に作れるフォーム。

デザインの土台
使っているフレーム

このデモで使っているフレームは 「biz66-side（左に固定メニューの2カラム）」 です。

フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。

ロゴとメニューを左の列に固定した2カラムのフレームです。メニューは日本語の下に小さな英語が並び、その下にサイドバーを置けます。画面幅900px未満では1カラムになり、メニューは開閉式になります。

メニューの下に「サイドバー」

管理画面の「サイドバー」に、CTA（誘導ボックス）のパーツで「工事のご相談・お見積りは、お気軽に。」とお問い合わせのボタンを置いています。どのページを見ていても、問い合わせ先がすぐ分かります。左の列は、「デザイン → サイドバーの位置」で右側にも変えられます。

会社の姿勢は「コラージュ」、施工実績は「縦線で区切ったカード」

図面と打ち合わせの写真を2枚重ねるコラージュで、「図面の段階から、現場の目で」という会社の考え方を見せています。施工実績は、写真・工事名・説明を縦線で区切ったカードを「列の並べ方」で「3列」に並べました。

採用は、社員の集合写真の「オーバーレイ」で

トップページの中ほどに、社員の集合写真に文字とボタンを重ねたブロックを横幅いっぱいに置き、採用情報のページへつないでいます。採用情報のページでは、スクロールしても見出しが横に残るパーツで2つの職種を並べ、会社概要のページでは創業からの歩みをタイムラインで見せました。

ロゴは「画像」で入れています

このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴは濃い紺の左の列に入るので、白いロゴを使っています。フッターも濃い色なので、同じ白いロゴが出ます。

ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。

ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。

約50種類のフレームを見る

同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります

Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「biz66-side」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。

司法書士
このデモの作り方

使用したパーツ

セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。

ホーム

セクション	使ったパーツ	Free版
60年、このまちの道と建物を。	基本セット（見出し＋本文＋画像）
サムネイル横スライド（写真の流れ）	サムネイル横スライド（写真の流れ）
事業内容	特徴・サービス（アイコン3列）
会社の考え方	コラージュ（写真2枚＋テキスト）
数字で見るさんぷる建設	実績カウンター（数字）
施工実績	縦線で区切ったカード
採用情報への入口	オーバーレイ（写真＋テキスト＋ボタン）
安全と品質への取り組み	選ばれる理由（左に見出し＋アイコンのカード）
無料相談への誘導	パララックス背景（写真／動画）
お問い合わせへの誘導	CTAセクション（背景写真）
お知らせ	お知らせ一覧（自動）

事業内容／施工実績

セクション	使ったパーツ	Free版
事業内容	写真に文章が回り込む横長ブロック
工事の流れ	ステップ案内（横4列・アイコン）
施工実績	コース・メニュー一覧
画像（1枚）	画像（1枚）
工事の様子	ピックアップギャラリー（大1枚＋小2枚）

会社概要／採用情報／お知らせ

セクション	使ったパーツ	Free版
沿革	沿革・年表（タイムライン）
会社概要	表（項目と内容）
募集職種	表（項目と内容）
はたらく環境	横幅いっぱいレイアウト（テキスト＋写真）
お知らせ	お知らせ一覧（自動）

サイドバー（全ページ共通）

セクション	使ったパーツ	Free版
お問い合わせへの誘導	CTA（誘導ボックス）

全20種類のパーツのうち、17種類は製品版でのみ使えるものです。コラージュや縦線で区切ったカード、見出しが追いかけてくるブロックは製品版のパーツです。製品版では70種類以上のパーツが使えます。

パーツの一覧を見る

ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です

製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。

このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。

作るときの参考に
建設会社のサイトで迷いやすいところ

このデモを作るときに考えたことを、いくつか書いておきます。

公共工事の実績は、載せてもいいですか: 発注者に確認したうえで載せるのが安心です。このデモでは、トップページに3件を写真つきで並べ、施工実績のページで工事の年と種類（土木・建築）を添えました。
採用のページには、何を書けばいいですか: 職種・仕事の内容・給与・資格の支援の4つがあれば、応募の判断ができます。このデモでは、それに加えて「若手が多い」「年間休日」など、はたらく環境も写真つきで書きました。
建設業許可の番号は、どこに載せればいいですか: 会社概要の表に入れておくのが一般的です。お客さまや取引先が、いちばん確かめたい情報の一つです。

この構成で作れるサイト
建設会社以外にも

このデモは建設会社を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。

工務店／設備工事会社／運送会社／製造業／造園会社／測量・設計事務所など、「事業・実績・採用をしっかり見せたい、地域の会社」であれば、そのまま当てはまります。

左の列のメニューは、ページが7〜8つくらいまでがきれいに収まります。

まずは無料で試せます
Free（無料版）のご案内

Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。

無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。

Free(無料版)をダウンロード

このデモをもう一度見る

製品版を購入する