丸大住宅工業有限会社のWebサイトは、赤みの強いテラコッタ色と淡いピンクベージュだけで画面をまとめ、現場写真を主役に据えたコーポレートサイトです。住宅まわりの工事という硬くなりやすい題材を、色数を絞った落ち着いた画面設計でやわらかく見せている点に見どころがあります。
千葉市を拠点に、住宅の基礎工事から外構、舗装、解体、内装や外装のリフォーム、草刈りや伐採まで引き受ける会社のサイトです。ここではファーストビュー、配色、レイアウト、情報設計、問い合わせ導線という順に、画面から読み取れるデザインの意図を整理します。地域に根ざした工事会社のサイトを組み立てるときの手掛かりとして参考になります。
ファーストビューは写真を左に寄せ、右に余白を残しています
このサイトのファーストビューで効いているのは、写真を画面いっぱいに敷き詰めなかった判断です。画面の左側およそ7割に写真を置き、右側は白のまま残しているため、圧迫感が出ず、上部に並ぶ連絡先も読み取りやすくなっています。
使われている写真は、青空を背景にした住宅の外観や、明るい室内でくつろぐ住まい手の様子です。工事そのものではなく工事を終えた後の暮らしを見せる選び方で、依頼した先にある景色を先に伝える組み立てになっています。
写真と余白をまたぐ見出し
大きな見出しは、写真の上から白い余白へ抜けるように置かれ、一行が2つの領域にまたがります。住まいの困りごとを前向きな結果へ変えるという趣旨の一文が、字間を大きく空けた明朝体で組まれており、背後の明暗が変わっても一字ずつが判別しやすくなっています。
見出しの下には、細いゴシック体で短いサブコピーが添えられています。3DCGを使った可視化と自社での施工という立ち位置が一行で示され、書体と文字サイズの差がそのまま読む順番として働きます。
ヘッダーは固定表示で連絡先を切らしません
ヘッダーは白い帯で、左端にロゴマーク、右側に電話番号と受付時間、封筒アイコンを添えたCONTACT、メニューアイコンが並びます。細い縦罫で3つのまとまりに区切られているため、要素の数のわりに雑然としません。
この帯はページを下へ送っても画面上部に残ります。どこを読んでいても連絡手段が視界にあるので、気になった瞬間に次の行動へ移せる作りです。
配色はテラコッタ色を軸に絞り込まれています
結論から述べると、このサイトの印象を決めているのは色数の少なさです。目に入る色は、ボタンや会社概要のブロックに置かれた深いテラコッタ、背景に敷かれた淡いピンクとベージュ、そして写真を引き立てる白に、ほぼ限られています。
同系色の濃淡で階層をつくる
会社紹介の帯はくすんだ赤茶で塗られ、その上に一段明るいベージュのパネルが重なります。囲み線や影を足さず、同じ色相の濃淡だけでブロックの独立性を出しているため、画面が静かにまとまります。
事業内容や施工実績のテキスト面には、白に近い淡いピンクが使われています。隣に現場写真の面が来ても色がぶつからず、写真側の色数が多くても全体の調子が崩れません。
ボタンは塗りと白抜きで重みを変える
各セクションに置かれた「詳しく見る」は、テラコッタで塗った長方形と、白地に細い枠線を引いたものの2種類が使い分けられています。主要なセクションでは塗り、写真に重ねたカードの中では白抜きという具合に、同じ文言でも優先度の差が視覚的に伝わります。
角を丸めない直線的なボタンは、工事という仕事の実直さと響き合います。文字は中央そろえで字間も広く、押す場所として十分な面積が確保されています。
レイアウトは写真の面とテキストの面を交互に入れ替えます
画面を左右に二分し、片側に写真、もう片側に文章を置く構成が、このサイトの基本形です。同じ骨格を繰り返しながら左右だけを反転させることで、統一感を保ったままスクロールに変化を与えています。
左右を反転させて単調さを避ける
事業内容のまとまりでは左側に現場写真の面、右側に淡いピンクのテキストパネルを配置し、続く施工実績のまとまりでは左右を入れ替えています。写真の面が画面の端まで届いているため、区切り線がなくてもセクションの変わり目が分かります。
写真の面は、小さな2枚を上に並べ、その下に横長の1枚を敷く組み方です。束ねられた竹、ブルーシートで覆われた屋根、重機が入った工事中の敷地といった場面が写り、演出されたイメージ写真ではなく実際の作業の記録なので、何を請け負う会社なのかが文章を読む前に伝わります。
罫線の先端の点と斜めのストライプ
テキストパネルでは、見出しの下に細い横罫が引かれ、その先端に小さな円が添えられています。円はパネルの外側へわずかにはみ出して隣の写真に重なり、離れた2つの領域をつなぐ役目を持ちます。
パネルの地には、背景よりわずかに明るい斜めの帯が重ねられています。目を凝らさなければ気づかない程度の陰影ですが、平坦な面に奥行きが生まれ、単色で塗るよりも表情が出ています。
カードを写真に重ねる下段のブロック
施工の流れとよくある質問は、写真の下端に白いカードを重ねた形で左右に並びます。写真とカードをずらして重ねることで奥行きが生まれ、同じ幅の2枚が並んでも平板になりません。
その下の読み物のまとまりでは背景が薄いグレーへ変わり、記事のカードが2枚並びます。背景色を替えるだけで、工事の情報と読み物の情報が別のまとまりであることが伝わります。
情報設計は「どんな会社か」から「どう頼むか」へ順に進みます
トップページの並びは、会社の紹介、事業内容、施工実績、施工の流れ、よくある質問、読み物、会社概要、問い合わせという流れです。初めて訪れた人が抱く疑問の順にセクションが置かれ、読み進めるほど判断の材料が増えていきます。事業内容のページも、個人の住まい向け、法人や事業者向け、困りごとの相談という3つの入口に分けられています。
英字ラベルと日本語見出しの二段組み
各セクションの見出しは、ABOUTやSERVICEといった小さな英字ラベルと、その下に置かれた日本語見出しの二段構成です。英字はテラコッタ色で字間を広く、日本語は明朝体で大きく組まれており、色と書体の違いがそのまま見出しの階層を示しています。
同じ形式がページを通して繰り返されるので、スクロールの途中でも今どのまとまりを読んでいるのかが分かります。装飾を増やさず規則性だけで秩序をつくる、堅実な作り方です。
施工実績はビフォーアフターを並べて見せる
施工実績のページでは、上部に「すべて」「外構」「内装」「その他」の絞り込みボタンが横並びで置かれ、選ばれているものだけが塗りつぶしで示されます。その下に、淡いピンクの地をテラコッタ色の細い枠で囲んだ事例カードが縦に積まれます。
各カードは、事例名の見出しと区分のラベルの下に、施工前と施工後の写真を左右に並べる形です。写真の左上には円形のラベルが重ねられ、どちらがどの段階かが一目で分かります。さらに所在地、施工箇所、工期が横線で区切られた表として添えられ、条件をそろえた比較ができます。
新築の外構工事の事例では、施工前の位置にCGパースが置かれています。完成予想と仕上がりを同じ枠で見比べる並べ方になっており、3DCGを用いて提案するという特徴が、説明文ではなく見せ方によって伝わります。
完成形が想像しにくい工事だからこそ写真と図が働きます
外構や庭のリフォームは、言葉や平面の図だけでは仕上がりを思い描きにくい工事です。だからこそ、手を入れる前と後を並べた写真や、完成予想を立体で示した図は、依頼する側にとって具体的な手掛かりになります。
このサイトは、そうした素材を飾り立てず、同じ形式でそろえて見せることに徹しています。事例が増えても並びが崩れにくく、更新を続けることを前提にした情報設計だと言えます。
問い合わせ導線は電話とフォームの2つに整理されています
連絡手段は電話とメールフォームの2つに絞られ、ヘッダー、メニュー、ページ下部という3か所に繰り返し置かれています。読者がどの位置で気持ちを固めても手が届くので、探し直す手間が生じません。
メニューは右から開くパネル
右上のメニューアイコンを押すと、画面の右側にテラコッタ色のパネルが開き、背後のページは暗く沈みます。会社紹介、事業内容、施工実績、施工の流れ、よくある質問、お知らせ、読み物といった主要ページが縦一列に中央そろえで並びます。
パネルの下端には、フォームへ進むブロックと電話番号のブロックが重ねて置かれています。閉じるための印は開いたアイコンとほぼ同じ位置にあるため、視線を大きく動かさずに開閉を終えられます。
ページ下部は電話とメールを左右に分ける
ページ下部の問い合わせのまとまりでは、白い枠を縦の細い線で二分し、左に電話番号のボタン、右にフォームへ進むボタンを置いています。どちらもテラコッタ色で塗られ、受話器と封筒のアイコンが添えられているため、押した先で何が起きるかが分かります。
電話のボタンには受付時間が小さく併記されています。連絡してよい時間帯が同じ場所に書かれていると、押す前の迷いが減ります。
会社概要は地図と並べて置く
会社概要はテラコッタ色のブロックに白い文字で組まれ、会社名、住所、電話番号、受付時間、定休日が横線で区切られた表として並びます。ブロックの左半分には地図が配置され、住所の文字と場所の位置関係を同時に確かめられます。
運営者の情報が明記されている点も、依頼先を選ぶ材料になります。プライバシーポリシーには代表者として佐久間 航様の名前と問い合わせ窓口が記され、責任の所在がたどれる状態です。
千葉市の住まいの困りごとを受け止める丸大住宅工業有限会社のサイト
丸大住宅工業有限会社のWebサイトは、テラコッタ色を軸にした少ない色数、写真とテキストを左右で入れ替えるレイアウト、そして同じ形式でそろえられた事例の見せ方によって、地域の工事会社の姿を過不足なく伝えています。派手な演出に頼らず、写真と余白と罫線だけで整理する手法は、実直さを伝えたい業種のサイトづくりに応用できます。
千葉市中央区白旗に本社を置き、千葉市を中心に千葉県内全域へ対応する会社です。住宅の基礎から外構、解体、リフォーム、草刈りや伐採まで幅広く受け止める体制と、3DCGで完成イメージを示す進め方が、画面の隅々から読み取れます。
写真の使い方や事例の並べ方をご自身の目で確かめたい方は、外構の施工事例をビフォーアフター写真で紹介する公式サイトをご覧ください。
