青森県八戸市の有限会社サンナイ建設工業の公式サイトは、舗装工事や外構工事という力仕事の分野を扱いながら、白とグリーンでまとめた淡い配色によって親しみやすい印象に整えたコーポレートサイトです。工事系のサイトは黒や濃いグレー、注意喚起に近いオレンジで重厚感を出す例が多いのですが、このサイトはあえて逆の方向に振っています。ここでは配色、ファーストビュー、レイアウト、導線設計という順に、デザインの意図を読み解いていきます。
白とグリーンに絞った配色が生む清潔感
このサイトの第一の特徴は、使う色を白とグリーンのほぼ二系統に絞り込んでいる点です。写真以外の面はすべて緑の濃淡で構成されているため、ページを最後までスクロールしても色の印象がぶれません。まずは、その緑をどのように使い分けているのかを見ていきます。
三段階に整理されたグリーンの濃淡
緑はおおむね三段階で使い分けられています。もっとも淡いミントグリーンはセクションのパネルやフッターの背景に、中間の緑は「当社について」を囲む帯に、もっとも濃い緑はボタンや会社概要のパネルに割り当てられています。
色相を大きく変えずに明度だけを動かしているため、要素の役割が色の濃さだけで伝わります。読者は説明を読まなくても、濃い緑の面が押せる場所だと自然に理解できます。
「当社について」の見せ方は特に分かりやすく、中間の緑の帯の中に一段淡い緑のカードを重ねる入れ子の構造になっています。同系色を重ねているので境目がきつくならず、それでいてカードの範囲ははっきりと認識できます。
彩度を抑えて色数を増やさない写真の処理
掲載されている写真も、全体的に明るく彩度を落とした調子でそろえられています。ファーストビューの人物写真は白いベールをかけたように明るく、施工現場のアスファルトやコンクリートの写真もコントラストが強すぎません。
工事の写真は本来、土や砂利、重機の色が入り込んで雑多になりやすい素材です。明度を上げてそろえることで、緑と白の世界観の中に写真が違和感なく収まっています。
写真と余白の境界にコピーを重ねたファーストビュー
ファーストビューは、このサイトでもっとも設計の意図が表れている部分です。画面いっぱいに写真を敷き詰めるのではなく、写真の右側に白い余白を残した非対称の構成を採用しています。ここでは配置と文字組みの二点から見ていきます。
写真を左に寄せ、右に余白を残す非対称の構図
横幅のおよそ七割を写真が占め、右側の三割ほどは白い面のまま残されています。写真は複数枚が切り替わる仕組みになっていて、タブレットを手に上を指し示す作業者の姿と、石張りのアプローチや門柱が整った住宅外構の完成写真が交互に現れます。
働く人と仕上がりという二つの側面を交互に見せることで、施工を担う人の存在と成果物の両方が短い時間で伝わります。余白を残した構図は圧迫感を和らげ、写真が主張しすぎない効果も生んでいます。
明朝体と広い字間で落ち着きを出す見出し
ファーストビューの見出しは「想いを形にする」という言葉から始まり、街の舗装と外構を任せられる相手であることを二行で示しています。この言葉は写真と白い余白の境界をまたぐ位置に置かれています。明朝体で字間を大きく開けて組まれており、太いゴシック体で力強さを訴える建設系のサイトとは異なる、静かな語り口になっています。
文字が写真の上と白い面の上の両方に乗る配置ですが、写真側の明度が高く保たれているため、どちらの背景でも読みやすさが保たれています。すぐ下には、アスファルトの工事から住宅の外構までを扱うと分かる補足の一文が小さめのゴシック体で添えられ、見出しと説明の役割が明確に分かれています。
セクションごとに組み方を変える情報設計
ファーストビューから下は、同じ形のカードを機械的に並べるのではなく、セクションごとに構成を変える方針が取られています。単調さを避けながら、内容の性質に応じて見せ方を切り替える設計です。
左右を反転させた「施工メニュー」と「施工実績」
「施工メニュー」は右側に説明パネル、左側に写真グリッドという配置で、続く「施工実績」ではその左右が反転しています。写真グリッドには転圧のローラーや流し込まれた生コンクリート、平板やブロックを敷き並べた現場など、工事の異なる場面が集められています。
左右を入れ替えることで、視線がジグザグに動きながら下へ進みます。説明パネルは細い緑の枠線で囲まれ、隅には薄い斜めのグラフィックが敷かれていて、隣り合う写真ブロックとの間に明確な差がつけられています。
欧文と和文をそろえた二段構成の見出し
各セクションの見出しは、上に小さな欧文、下に明朝体の和文という二段構成で統一されています。欧文は緑、和文は黒に近い色で組まれ、色でも役割が分けられています。
欧文は目印として、和文は意味の伝達として働くため、いま何のセクションを見ているのかが一目で分かります。見出しの下には細い罫線が引かれ、その左端に小さな緑の点を置くという共通の飾りも添えられていて、セクションが変わってもリズムが崩れません。
優先度を示す塗りボタンと線ボタン
ボタンにも優先度の差が付けられています。「当社について」「施工メニュー」「施工実績」では濃い緑で塗りつぶしたボタンが使われ、「施工の流れ」「よくある質問」では白地に緑の枠線だけのボタンが使われています。
塗りのボタンは面積が大きく視線を引き寄せ、線のボタンは控えめに存在します。読んでほしい順序がボタンの見た目だけで表現されており、読者は説明を読まなくても優先度を受け取れます。「コンテンツ」の記事カードでも、サムネイルの上にカテゴリーのラベルを重ね、日付と見出しを添える形で情報の粒度がそろえられています。
ヘッダーとページ下部で二段構えにした導線設計
回遊のための導線は、常に画面の上部に残るヘッダーと、ページ下部の問い合わせ枠という二段構えで用意されています。項目を横並びで見せる代わりに、開閉式のメニューへ集約する方法が選ばれています。
右から開くドロワーメニュー
ヘッダーは半透明の白い帯で、左に社名のロゴ、右に封筒アイコンを添えた「CONTACT」と緑の三本線のボタンが並びます。三本線を押すと画面の右側から緑のパネルが開き、ホーム、当社について、施工メニュー、施工実績、施工の流れ、よくある質問、ブログ、プライバシーポリシーが縦一列に並びます。
パネルの下部には淡い緑地の問い合わせボタンが置かれ、メニューを開いた状態からそのまま問い合わせへ進めます。ヘッダーはスクロールしても画面の上部に残るため、ページのどこにいても入口を呼び出せます。
ページの最下部まで途切れない問い合わせの入口
ページの終盤には「お問い合わせ」のセクションが独立して置かれ、細い緑の枠の中に横幅いっぱいの緑のボタンが配置されています。封筒のアイコンを添えることで、メールでの連絡に進むのだと直感的に伝わります。
さらにフッターには各ページへのテキストリンクが横一列に並び、画面の右下には上部へ戻る小さなボタンも表示されます。長いトップページを読み終えた読者が行き止まりにならないよう配慮されています。
会社情報と実務の情報の見せ方
デザインの印象を支えているのは、掲載されている情報の整理の仕方でもあります。地域の工事会社に対して読者が抱きやすい疑問に、ページの構成そのもので答える作りになっています。
地図と会社概要を左右に分けた二カラム
「会社概要」のセクションは、左半分に所在地を示す地図、右半分に濃い緑のパネルという二カラムで組まれています。パネルの中は会社名、住所、電話番号、営業時間、最寄り駅といった項目が細い区切り線で行分けされ、項目名と内容が左右にきれいに整列しています。
白い文字と濃い緑の組み合わせは他のセクションと明確に差がつくため、事務的な情報がまとまっている場所だと視覚的に区別できます。青い森鉄道の諏訪ノ平駅から車でどのくらいかかるかまで書かれている点も、初めて訪れる読者には助けになります。
疑問を先回りする「施工の流れ」と「よくある質問」
「施工の流れ」のページでは、問い合わせから現地の調査とヒアリング、プランの提案、着工、引き渡しとアフターフォローまでが段階ごとに整理されています。「よくある質問」では、対応できる地域や、駐車場のぬかるみへの対処、工事期間の目安といった具体的な疑問が扱われています。
「当社について」のページには、代表取締役の山内 巧様の役職と保有資格が記載され、対応地域や事業内容も一覧で示されています。誰がどの範囲で施工しているのかを確認できることは、地域の工事会社を探している読者にとって判断の材料になります。
八戸市で舗装や外構のサイトを考えるときの見本として
有限会社サンナイ建設工業のサイトは、舗装工事や外構工事という分野で、重厚さではなく清潔感と親しみやすさを選んだ珍しい例です。白とグリーンに色を絞り、明朝体の見出しと明るい写真で全体を整えることで、住宅の駐車場や庭まわりを相談したい個人の読者にも近づきやすい雰囲気を作り出しています。
扱う工事の幅は、トップページの「施工メニュー」と個別のページの両方で確認できます。外構やエクステリアの工事では玄関のアプローチやフェンス、コンクリートの施工まで、舗装の工事では個人の住宅の駐車場から店舗の空き地までを対象にしていることが読み取れます。施工実績はアスファルト舗装と外構工事に分けて掲載され、施工前と施工後、あるいは施工中の写真を並べて変化が分かるようにまとめられています。
地域に根ざした工事会社のサイトを設計するうえでは、扱う工事の種類、対応できる地域、進め方、問い合わせの入口という四つを、それぞれ独立したセクションとして用意する構成が参考になります。装飾を増やすのではなく、色数と書体を絞って統一感を出すという考え方も、業種を問わず取り入れやすい手法です。
実際の画面の動きや写真の質感は、スクロールしながら見てこそ伝わります。デザインの参考として、公式サイトも確かめてみてください。
