株式会社長谷板金工業の公式サイトは、現場で撮影した写真を大きく扱い、建築板金という仕事の様子をそのまま見せることで信頼につなげているデザインです。装飾を足すのではなく、赤と白に絞った配色と広い余白によって写真を引き立てる組み立てになっています。
運営しているのは大阪府泉南市に事務所を構える建築板金の会社で、外壁や屋根の板金工事、雨樋の修理を手がけています。この記事では、Webサイトの見本を探している方に向けて、ファーストビューの構成、配色、レイアウト、導線の設計までを画面に沿って読み解いていきます。
現場写真を主役に据えた第一印象の設計
このサイトの第一印象を決めているのは、文章ではなく写真です。画面を開いた瞬間に施工中の建物や作業する人の姿が目に入り、どのような仕事をしている会社なのかが、説明を読む前に伝わってきます。ここでは、その第一印象を支えているファーストビューの組み方と、全体の色づかいを順に見ていきます。
複数の写真を並べたファーストビュー
最上部には、クレーンと青空をとらえた横長の写真が広がり、その下に3枚の写真を横並びにした帯が続きます。左側には金属屋根を間近から写した1枚、右側には広い屋根の上で複数の作業員が動いている1枚が置かれ、扱っている工事の規模感が視覚的に示されています。
中央のパネルだけは赤みのフィルターがかけられ、白抜きの太い文字で品質への姿勢を示す短いコピーが載っています。その下には屋根の修理や葺き替え、雨漏りの修繕といった取り扱い内容と社名が続き、写真の帯の中で唯一の「読ませる場所」として働いています。さらに下には夕景の現場写真が横幅いっぱいに敷かれ、文章を挟まずに写真だけで導入を締めくくる構成です。
赤と白を軸にしたトーン＆マナー
配色は白を土台にして、朱色に近い赤を差し色に使う組み立てです。赤が現れるのは、ヘッダーのアイコン、セクションの見出し、記事の分類ラベル、バナー、フッターの背景といった役割の決まった場所に限られています。
使う色を絞っているため、写真ごとに色味や時間帯が違っても全体はまとまって見えます。文字は太めのゴシック体でそろえられ、見出しと本文のサイズ差もはっきりしているので、屋外作業を扱う業種らしい力強さと読みやすさが両立しています。
余白と縦組み見出しがつくる情報設計
写真の点数が多いサイトは情報が渋滞しやすいものですが、このサイトはセクションごとの余白を大きく取ることで整理しています。さらに、日本語の縦組み見出しと英字の大きな装飾文字を組み合わせ、どこで話題が切り替わるのかを目で分かるようにしています。
縦書きの見出しと英字のウォーターマーク
「ご挨拶」や「事業内容」といった見出しは縦書きで配置され、その背後には薄いブルーやグレーで英字が大きく置かれています。会社名や事業内容、採用に対応する英字が使い分けられており、いずれも線だけの中抜き文字や淡いベタ塗りで、読ませるためではなく面を落ち着かせる装飾として働いています。
縦組みの見出しは横書きの本文と向きが直交するため、視線が自然にそこで止まります。装飾の英字も彩度を抑えてあるので、主役である写真と本文の読み取りを妨げません。
写真とテキストカードを重ねた非対称のレイアウト
ご挨拶と事業内容のセクションでは、背景に写真や質感のある地を敷き、その上に白いカードを少しずらして重ねています。ロゴを収めた白い面と本文を収めた白い面が段違いに並ぶため、左右に整列させただけの段組みよりも動きが出ています。
事業内容では、大きな現場写真の下に本文のカードを配置し、右側にもう1枚の作業写真を重ねる形で奥行きを作っています。カードの末尾には細い枠線と黒い文字だけの落ち着いたボタンが添えられ、色を増やさずに次のページへ進める作りです。
迷わせない導線のつくり方
このサイトは、問い合わせと採用という2つの目的に向けて導線がはっきり整理されています。画面の上部、ページの中ほど、そして最下部と、読み進めるどの位置からでも連絡手段にたどり着ける配置です。
ヘッダーに置かれた3つの入口
ヘッダーは白い帯で構成され、左に社名のロゴタイプ、右に「TEL」「MAIL」「MENU」の3つのボタンが等幅で並びます。細い赤の縦線で仕切られ、それぞれ受話器、封筒、三本線のアイコンが赤で添えられています。
ページの一覧を1つのボタンにまとめているので、ヘッダーが写真の面積を奪いません。電話とメールだけは常に見える位置に残し、それ以外は必要なときに開くという割り切った考え方が読み取れます。
採用と問い合わせを並べたバナーと赤いフッター
ページの中ほどには、同じ形の横長バナーが2枚並びます。人物写真を円形に切り抜き、赤い斜めストライプの地に白抜きの英字と「VIEW MORE」のボタンを重ねた作りで、左が採用情報、右がお問い合わせに対応しています。採用側には経験や年齢を問わない旨の帯が重ねられ、求職者が知りたい条件を先に読めるようになっています。
フッターは赤一色で塗られ、白い枠で囲んだ電話の案内、白地に赤文字のメール導線、ページの一覧、住所と地図のボタンが縦に積まれています。電話番号は大きく、受付の時間帯や営業電話を断る注記は小さく添えられており、優先順位が文字の大きさだけで示されています。
下層ページまで一貫したコンテンツの設計
トップページは会社の姿勢と現場の写真を見せる役割に絞られ、詳しい説明は下層ページが受け持っています。更新情報の扱い方と、各ページの役割分担にも整理の跡が見えます。
更新情報を2か所で見せる構成
ファーストビューのすぐ下には、白いカードに更新情報を3件並べた一覧が置かれています。日付、種類を示す小さなラベル、記事の見出し、右端の詳細リンクという並びで、行ごとに細い罫線が入り、要素の位置が縦にそろっています。
ページの後半では、同じ記事をカード形式で見せ直しています。屋根の写真を敷いた帯に大きく「BLOG」と置き、その下に3枚のカードを横並びにして、赤い文字の分類名、見出し、写真を縦に積む構成です。一覧では素早く探せるように、カードでは写真で興味を引けるようにと、同じ情報でも見せ方を変えている点は参考になります。
業務案内や施工実績が担う役割
業務案内のページは、屋根の板金工事、外壁の板金工事、雨樋の修理という3つの区分に分けて説明しています。屋根は自分では確認しにくい場所であることに触れたうえで、担当者が現地を確かめてから必要な修繕を提案する流れが示されており、読者の不安に沿った順番で組み立てられています。
施工実績のページでは、日付と件名を並べた一覧にページ送りが付き、過去の事例をさかのぼって確認できます。会社概要のページは表組みでまとめられ、平成30年の創業と令和4年の設立、5名という従業員数、9時から17時という営業時間、日曜日の定休日、そして全国という対応エリアが整理されています。代表者は長谷 伸一様で、工場を主な対象としながら、戸建てや店舗、ホテルなどの建物にも携わっていると記載されています。
屋根まわりの工事を扱うサイトで参考になる考え方
屋根工事を頼む側は、施工する場所を自分の目で確かめにくいという事情を抱えています。だからこそ、サイトで何をどこまで見せるかが、問い合わせのしやすさに直結します。
一般に、屋根や外壁、雨樋に関わる工事のサイトでは、次のような情報が判断材料になります。
- どの部位のどんな工事に対応しているのかという区分
- 戸建てや店舗、工場など、扱っている建物の種類
- 作業中の様子が伝わる現場写真
- 相談から調査、施工へと進む流れ
- 電話とメールのどちらからでも連絡できる導線
このサイトは、写真で仕事の内容を示し、業務案内で工事の区分を説明し、実績の一覧で過去の対応を並べるという形で、これらを分担させています。デザインの見本として眺めるときも、写真の選び方と情報の置き場所をセットで確認すると、自社のサイトに置き換えて考えやすくなります。
写真と余白で伝える建築板金会社のサイトデザイン
株式会社長谷板金工業の公式サイトは、現場写真を主役に据え、赤と白という限られた配色と広い余白で読みやすさを保った構成です。縦組みの見出しと大きな英字の装飾がセクションの区切りを分かりやすくし、ヘッダーとバナー、フッターに繰り返し置かれた連絡先が読者を迷わせません。
写真の点数が多くなりがちな業種でサイトを作るとき、色数を絞って写真そのものに語らせるという判断は参考になります。画面の動きや写真の質感は、静止した画像だけでは伝わりきらない部分もありますので、気になった方は実際のサイトで確かめてみてください。
