株式会社相神工業のコーポレートサイトは、施工現場の写真を主役に据え、濃紺とオフホワイトでまとめた落ち着いた画面設計が特徴です。外構や舗装、排水といった土木寄りの仕事を扱うサイトでありながら、情報の並びは整理されていて、初めて訪れた人でも事業の輪郭をつかみやすい構成になっています。
この記事では、同サイトをWebデザインの見本として読み解きます。ファーストビューの構図、配色の考え方、セクションの型、回遊と問い合わせの導線という順に、施工会社のサイトを設計するときの参考になる部分を整理します。
ファーストビューは現場写真と極太英字の重ね方で印象が決まります
最初に目に入るのは、掘削した溝に配管を据える作業を写した写真で、画面のほぼ全面を占めています。装飾を足さずに現場そのものを見せる判断が、事業内容を言葉で説明する前に伝える役割を果たしています。ここでは、その写真の上でどのように文字を成立させているのかを見ていきます。
写真の情報量を落とさずに文字を載せる工夫があります
写真の上には英語の大文字コピーが2行で置かれ、続けて日本語の短いコピーが並びます。文字色を白に絞り、写真の中でも比較的トーンが均一な部分に文字を重ねているため、背景の情報量が多くても読みやすさが保たれています。
和文コピーの下には、手書きのブラシで引いたような濃紺のストロークが敷かれています。定規で引いた直線の下線ではなく筆跡のある形にしたことで、硬くなりがちな土木系の画面に人の手の気配が加わっています。
タイポグラフィの強弱で視線が上から下へ流れます
英語コピーには文字幅を詰めた極太の書体が使われ、和文コピーは字間を広げた細めの組みになっています。太さと字間を逆の方向に振ることで、同じ白文字でも主従がはっきりし、視線が英字から和文へ自然に落ちていきます。
画面の右端には縦組みでスクロールを促す小さな表示があり、下方向への移動を静かに示しています。ヒーローの下端には電話番号と営業時間、定休日を載せた帯と、濃紺の問い合わせボタンが横並びで置かれ、最初の画面のうちに連絡手段まで見えるようになっています。
濃紺とオフホワイトを軸にした配色設計です
サイト全体は濃紺、オフホワイト、グレーの三色で構成され、写真に含まれる土や重機の色以外はほとんど使われていません。色数を絞ったことで、写真ごとに印象がばらつきやすい施工業の画面が一つのトーンにまとまっています。色をどの役割に割り当てているのかを、順に確かめます。
濃紺は操作できる場所の合図として使われています
ボタン、セクションを覆うパネル、フッターの背景と、濃紺が現れる場所は限られています。とりわけ各セクション末尾のボタンはすべて同じ濃紺の角ばった長方形で統一されているため、色を見ただけで押せる場所だと判断できます。
濃いグレーを背景にしたセクションのボタンだけは、白い枠線と白文字に反転しています。色の役割は変えずに明度だけを入れ替える処理で、統一感を崩さずに視認性を確保しています。
背景色の切り替えがセクションの区切りになっています
各セクションの背景は、ほんのり暖かみのあるオフホワイト、薄いグレー、濃いめのグレーと切り替わります。区切り線を引かずに背景の明度だけで場面転換を示すため、縦に長いページでも画面が騒がしくなりません。
余白も広めに取られていて、見出しと本文、本文とボタンの間隔がセクションをまたいでほぼ揃っています。要素の密度が一定に保たれる分、読み進めるリズムが崩れにくくなっています。
英語見出しと和文サブ見出しを繰り返す情報設計です
このサイトの骨格は、セクションごとに用意された共通の型にあります。同じ並び順を最後まで守ることで、情報量が多くても読者が構造を覚えたまま読み進められます。型そのものと、型を崩さずに変化をつける方法の両方に注目します。
セクションの型が最後まで統一されています
INTRODUCTION、CONCEPT、SERVICE、GREETING、CONSTRUCTED、BLOG、COLUMN、FEATURE、ABOUT、RECRUITと、どのセクションも極太の英字見出しから始まります。その下に短い横罫、和文のサブ見出し、説明文、ボタンという並びが続き、順番が入れ替わることはありません。
英字はラベルとして目印の役割を担い、内容の説明は和文が引き受けます。読者は英語を読まなくても和文のサブ見出しだけで判断できるため、装飾性と実用性が両立しています。
整列パターンに緩急がつけられています
導入部は写真を左、テキストを右に置いた二分割で、見出しの左端には濃紺の縦罫が添えられています。続くコンセプトや事業紹介、代表あいさつの入口は、写真と濃紺のパネルを交互に敷き詰めたモザイク状の配置に変わり、三つの要素を一画面でまとめて見せています。
その後は中央揃えの見出しに戻り、カード、リスト、表と要素の形を変えながら進みます。左右分割、モザイク、中央揃えを織り交ぜることで、同じ縦スクロールでも単調にならずに済んでいます。
回遊と問い合わせの導線が二段構えで用意されています
導線は、画面上部にまとめて置く方法と、各セクションの末尾に置く方法の二段構えです。読者がどの深さまで読んだ時点でも、次の行き先が視界に入るようになっています。上部と下部それぞれの役割を分けて見ていきます。
ヘッダーと帯で連絡手段が最初から見えます
ヘッダーには左にロゴ、その下の段にホームからコラムまでのグローバルナビゲーション、右に電話番号と問い合わせボタンが配置されています。背景を透過させて写真の上に重ねているため、ファーストビューの面積を削らずに機能を確保しています。
ヒーローのすぐ下にも、電話番号と営業時間、定休日を載せた帯と、幅の広い問い合わせボタンが置かれています。ページ冒頭で二度、異なる形で連絡手段が示される構成です。
各セクションのボタンとフッターが回遊を受け止めます
施工事例、ブログ、コラム、当社の特徴、会社概要、リクルートには、それぞれ末尾に個別のボタンが用意されています。セクションを読み終えた直後に、その話題の詳細ページへ進める配置です。
フッターは濃紺を背景に、リンクを五列へ整理して並べています。ページ末尾までスクロールした読者が全体像を見渡せるため、途中で気になった項目へ戻りやすくなっています。
施工事例とブログ、コラムで一覧の見せ方を変えています
更新が続くコンテンツは三種類あり、それぞれの性格に合わせて一覧の形が変えられています。同じ一覧でも扱いを分けることで、読者が中身を予測しやすくなっています。写真を使う一覧と、文字だけの一覧の違いに注目します。
施工事例は写真カードの三分割で見せています
施工事例のセクションでは、舗装工事、外構工事、排水工事の三枚が横並びのカードで並びます。写真を大きく扱い、キャプションは短い工種名だけに抑えているため、視線が写真から写真へ横へ流れます。
並べられた三枚は、道路の舗装、縁石まわりの造作、管を据える作業と、写っている場面が異なります。似た画角の写真を避けたことで、対応できる工種の幅が一目で伝わります。
ブログとコラムは情報の粒度で組み方を分けています
ブログの一覧は、最新の一件を大きな写真付きのカードで見せ、その隣に小さなサムネイル付きの記事を並べる非対称のレイアウトです。写真が主役になる現場報告に合った組み方で、直近の話題が自然と目立ちます。
コラムの一覧は写真を使わず、日付と見出しを一行にまとめた帯を積み重ねる形です。読み物は見出しを見比べて選ばれることが多く、テキストへ絞った判断は理にかなっています。ここでは建設資材や施工技術、現場の安全管理といった話題が扱われています。
会社概要と採用情報の見せ方にも配慮があります
ページの後半では、会社の基礎情報と採用の案内が続きます。装飾を抑えて情報の読み取りやすさを優先している点と、写真で雰囲気を伝える点を使い分けているのが、この二つのセクションの特徴です。
会社概要は罫線だけの表で読ませています
会社概要のセクションには、電話番号、所在地、営業時間、定休日、事業内容を並べた表が置かれています。項目名と内容を左右に分け、横罫だけで区切る簡素な作りで、背景色や囲み枠を足していません。所在地は神奈川県相模原市緑区で、営業時間は8:00〜17:00、定休日は日曜日と記されています。
事業内容の欄には、とび工事や土木工事、造園工事、コンクリート工事、舗装工事など、対応する工事が幅広く列挙されています。文字量の多い項目ですが、表の枠内に収めたことで他の情報とのバランスが保たれています。表の下にはInstagramのアカウントを案内するバナーが置かれ、二次元コードも添えられています。
採用は現場の表情を写した写真で伝えています
採用のセクションは、ヘルメット姿のスタッフが笑顔で写る現場写真を背景に敷き、その上へ明るい半透明のパネルを重ねています。文字を読ませながら写真の雰囲気も残す処理で、働く人の様子が伝わります。
パネルの左に英字見出しと和文の見出し、右に説明文と採用ページへのボタンが置かれています。ページの後半で人へ焦点を当てる流れは、施工品質を支えているのは職人一人ひとりの技術だとする同社の説明とも呼応しています。
相模原で外構工事の依頼先を調べるときに見ておきたい点
外構工事は敷地の使い方に直結するため、サイトから読み取れる情報を手がかりに検討を進めることが多くなります。ここでは、施工会社のサイトを見るときに確かめておくと判断しやすい点を挙げます。
まず参考になるのが施工事例です。写真の枚数よりも、どのような場所でどの工種を手がけたのかが分かるかどうかが大切で、駐車場まわりの舗装や排水、ブロックの積み方など、自宅で検討している内容に近い事例があるかを見ておくと完成後の姿を想像しやすくなります。
次に、対応できる工事の範囲です。外構は土を掘る作業から舗装、コンクリート、植栽まで工種が広く、複数の工種を一社で担えるかどうかで工程の進み方が変わります。会社概要の事業内容の欄は、この点を確かめる手がかりになります。
あわせて、拠点の場所と連絡手段も見ておきたい情報です。現場へ足を運ぶ機会が多い工事だけに、拠点が近いほど打ち合わせの回数を重ねやすくなります。電話番号や営業時間、定休日がサイト上で分かることは、問い合わせのしやすさにもつながります。
まとめ：現場写真と濃紺で信頼感を組み立てたサイトです
株式会社相神工業のサイトは、現場写真を大きく使いながら、濃紺とオフホワイトの配色とセクションの型で全体を統一しています。装飾に頼らず、写真と文字組み、余白の取り方で印象を作る手法は、施工の品質を伝えたい業種のサイトを設計するときの参考になります。
情報設計の面でも、英字見出しと和文サブ見出しの反復、セクション末尾のボタン、フッターのリンク一覧と、読者が迷わない仕掛けが積み重ねられています。同社は神奈川県相模原市を拠点に、外構をはじめ舗装や左官、造成、排水、公共工事まで幅広い工事へ対応し、要望に応じて東京エリアでの施工にも対応しています。
ブログでは、ドットコンパートナー施工店へ加盟したことも知らされています。画面の質感や写真の選び方は実物で確かめるのがいちばん分かりやすいので、相模原のドットコンパートナー施工店に加盟する株式会社相神工業の公式サイトもあわせてご覧ください。
