Webサイトのデザイン事例を探している方に向けて、広島県呉市に拠点を置くUB株式会社の公式サイトを見本として読み解きます。遮熱シートを用いるサーモバリアスカイ工法を軸に、塗装工事や建築工事も手がける施工会社のコーポレートサイトです。先に結論を述べると、鮮やかなグリーンを限られた場所だけに効かせながら、円弧で切り抜いた施工写真と広い余白で「守る技術」という主題を静かに印象づける設計になっています。工場や倉庫の熱対策のように、言葉だけでは仕上がりが伝わりにくいテーマをどう見せるかという観点でも参考になります。
ファーストビューで「守る技術」を印象づける組み立て
サイトを開いて最初に目に入る領域は、その会社が何を得意としているのかを伝える場所です。このサイトでは左端に縦組みのナビゲーションを置き、右上に大きな施工写真を配することで、案内役と主役の役割分担をはっきりさせています。ここでは、ナビゲーションの形式と写真の見せ方、見出しの扱いを順に確認します。
左端に縦へ並べたナビゲーション
画面の左には、四角い枠で囲った「UB」のロゴマークと社名を上部に置き、その下へ事業内容・施工事例・会社情報という項目を縦方向にゆったりと並べています。最下段にはグリーンで塗りつぶした角丸のお問い合わせボタンを添え、メニューの中で一段だけ色を変えることで、進んでほしい行き先が自然に伝わるようにしています。横長のヘッダーを使わず縦のメニューへ寄せた分、本文側で写真や見出しを大きく扱う余地が生まれています。
円弧で切り抜いた写真と背後に重ねたグリーン
右上の施工写真は、左側の角を大きな円弧で切り落とした形にトリミングされ、その背後に同じ輪郭のグリーンの面をわずかにずらして重ねています。写真を四角のまま置くよりも動きが生まれ、色の面が縁取りのように働くため、画面の上半分へ視線が集まります。屋根の上で遮熱シートを扱う場面を選んでいる点も、事業の内容を言葉より先に伝える役目を果たしています。
大きな見出しと控えめなスクロール誘導
写真の下には「守る技術で、未来の快適と安心をつくる」という言葉を太いゴシック体で2行に分けて置き、その下へ英文のタグラインを小さなサイズで添えています。日本語と英文で文字サイズを大きく変えているため、主役になる言葉がひと目で読み取れます。右端には縦書きの「Scroll」と細い縦線、下向きの矢印を配し、続きが下にあることを控えめに知らせています。背景には薄いドットの格子が敷かれ、白い余白が単調にならないよう整えられています。
グリーンを絞って使う配色と余白の設計
このサイトの印象を決めているのは、ページ全体で一貫して使われるグリーンの扱い方です。面積を欲張らず、伝えたい場所にだけ置くという方針が最後まで守られています。ここでは差し色としての使い方と、面で色を敷く導入部分の作り方を見ていきます。
行動と見出しに絞り込んだ差し色
グリーンが使われているのは、ロゴまわりとお問い合わせボタン、各セクションの英字見出し、ボタンの輪郭線と文字、そして導入部分の背景といった限られた箇所です。本文は黒に近い濃いグレー、地色は白で統一されているため、わずかな面積のグリーンがそのまま視線の受け皿になります。遮熱や省エネという主題とも重なる色で、配色そのものが事業の説明を補っています。
淡いミントグリーンの面で作る導入部
ファーストビューに続く導入では、右上を大きく丸めた淡いミントグリーンの面を敷き、その上に「工場・倉庫の熱対策に」から始まる2行の見出しと短い説明文を載せています。彩度を落とした同系色を使うことで、ボタンのグリーンとの関係を保ったまま、文章が読みやすい明るさに保たれています。面の下端には工場の屋根と住宅の外観という2枚の写真を少しずらして重ね、大型施設と一般の住まいの双方を扱うことを画像だけでも示しています。
SERVICEセクションに見る情報の整理の仕方
複数の工事を扱う会社のサイトでは、サービスの並べ方が分かりやすさを左右します。このサイトは連番ラベル、写真の大きさ、形をそろえたボタンという3つの手段で、3つの事業を迷わず見比べられる形にまとめています。以下では、レイアウトの強弱とボタンの扱いを取り上げます。
連番ラベルでそろえた3つの事業
大きな英字の「SERVICE」と日本語の小さなラベル、右へ長く伸びる細い罫線を組み合わせた見出しの下に、SERVICE-01からSERVICE-03までの番号を振り、サーモバリアスカイ工法・塗装工事・建築工事を並べています。番号が付いていることで全体の数が先に分かり、読者は自分に関係のある項目を探しながら読み進められます。説明文の分量もそろえられており、どの事業も同じ粒度で紹介されています。
主力の工事だけ大きく見せる強弱の付け方
3つの事業は均等な横並びではなく、01だけを全幅で大きく扱い、02と03を左右2列に並べる構成になっています。01では見出しを左、説明文を右に置いた2段組みにしたうえで、青空を背景にした金属屋根の写真を横幅いっぱいに配置しています。02と03は説明文の下に写真を置く同じ型でそろえられており、扱いの差そのものが「この会社の中心はどれか」を示す合図として働いています。
輪郭線だけで作られたピル型のボタン
各事業の下には、角を完全に丸めたピル型のボタンが2つ用意されています。塗りつぶさずにグリーンの細い輪郭線と文字だけで構成しているため、写真の存在感を損なわずに操作できる場所を示せます。01では2つのボタンを横に並べ、02と03では縦に積む形へ切り替えていて、列の幅に合わせて配置だけを変えながらボタンの見た目は保たれています。
信頼を支える会社情報とお問い合わせの見せ方
施工を任せる相手を探している読者は、どのような会社が手がけるのかを気にします。このサイトは代表者の言葉、会社概要、連絡手段という順に情報を並べ、最後まで読んだ人がそのまま次の行動へ移れる流れを作っています。ここでは背景の作り方とカードの使い方を確認します。
施工写真を薄く敷いたCOMPANYの背景
会社情報のブロックは左上を丸めた大きな面として区切られ、背景には遮熱シートを施した屋根の写真が白い膜越しに薄く敷かれています。写真の主張を弱めて敷くことで、文字の読みやすさを保ったまま現場の空気だけを残せます。左側には「サーモバリアで、建物の環境を変える」という見出しと代表取締役の細美 学様の名前、右側には挨拶文を置き、2列に分けて視線の流れを整えています。
白いカードにまとめられた会社概要
挨拶文の下には、角を丸めた白いカードが背景の上へ重なるように配置され、その中に会社概要の一覧表が収められています。項目名を左、内容を右に置き、行と行の間を細い罫線で区切ったうえで行の高さを十分に取っているため、社名や代表者、所在地、連絡先、取り扱う工事の内容、建設業許可の番号までを上から順に追えます。背景から浮かせたカードにしたことで、読み取ってほしい部分がどこなのかがはっきりします。
グリーン一色で締めくくるCONTACT
ページの最後は、グリーンを全面に敷いたお問い合わせのブロックです。白抜きの英字見出しと短い案内文の下に白いカードを2枚横へ並べ、左にはメールのアイコンと「MAIL FORM」、右には電話のアイコンと番号を配しています。各カードの右端には細い縦線で区切った円形の矢印を添え、押せる場所であることを控えめに示しています。背景色を切り替えて締めくくることで、ここが行動につながる場面だと色だけでも伝わります。フッターには白いロゴと社名を右寄せで置き、最後まで同じ色の中で完結させています。
遮熱工事や外壁塗装をWebで伝えるときの見せ方
遮熱工事や外壁塗装は、仕上がりを文章だけで想像してもらうことが難しい分野です。だからこそ、施工中や施工後の実物写真を大きく扱い、どの部位にどのような材料を用いるのかを視覚的に補うレイアウトが役立ちます。UB株式会社のサイトでは、屋根に敷かれた遮熱シートが光を返す様子、塗り替えを終えた住宅の外観、明るく整えられた室内というように、工事の性格ごとに違う写真を選び、扱う範囲の広さを画像だけでも伝えています。
工場や倉庫の熱対策と住宅の外壁塗装のように、対象も規模も異なる工事を1つのサイトで扱う場合は、区切りの付け方が読みやすさを決めます。番号付きの見出しで事業を分け、それぞれのブロックに詳細ページと施工事例への入口を同じ形でそろえておけば、法人の担当者と住まいの持ち主のどちらも、自分に必要な情報へ短い手順でたどり着けます。会社概要に建設業許可の番号まで載せておく姿勢も、はじめて相談する相手を選ぶ人にとっては判断の手がかりになります。
まとめ：UB株式会社のサイトから学べるデザインの工夫
ここまで見てきたように、UB株式会社の公式サイトは、縦組みのナビゲーションで誌面を広く使い、円弧で切り抜いた写真と絞り込んだグリーンで主題を印象づけ、連番と写真の大小で複数の工事を整理するという組み立てによって、施工会社らしい落ち着きと分かりやすさを両立させています。色の面積を抑えた配色、背景の切り替えによる区切り、形をそろえたボタンといった工夫は、業種を問わず取り入れやすい手法です。
専門的な工法を扱いながらも説明を詰め込みすぎず、写真と余白に語らせる姿勢は、技術を伝えたい会社のサイトを考えるうえで一つの手本になります。配色や写真の選び方、セクションごとの余白の取り方は、実際の画面を見ると理解が進みます。広島で工場の暑さ対策に取り組むUB株式会社の公式サイトもあわせてご覧ください。
