外構工事を専門に扱うMine Garden（マインガーデン）の公式サイトは、施工写真の見せ方と、セクションごとの配色の切り替えが丁寧に組み立てられたサイトです。外構は完成するまで形が想像しにくい分野ですが、このサイトは写真と落ち着いた文字組みだけで、その難しさを埋めようとしています。
ここでは実際の画面を確認しながら、ファーストビュー、配色、レイアウト、導線設計という順番でデザインを読み解いていきます。外構やエクステリア、住宅まわりのサービスを扱うサイトを企画している方にとって、参考にできる工夫がいくつも見つかるはずです。
ファーストビューが伝えるトーン＆マナー
このサイトの第一印象は、濃紺とアイボリーを組み合わせた静かな色使いと、画面いっぱいに広がる現場写真によって決まっています。派手な装飾やアニメーションに頼らず、素材そのものの質で信頼感を出そうとする姿勢が最初の一画面に表れています。ここではロゴ、ヒーロー写真、ヘッダーの情報整理という3つの要素に分けて確認します。
筆記体ロゴとアイボリーの下地が生む落ち着き
画面左上には、濃紺の筆記体で描かれた「Mine Garden」のロゴが置かれ、その右隣に「マインガーデン」というカタカナ表記が小さく添えられています。ロゴの背後だけがアイボリーの面になっており、白い背景との段差でロゴの領域が自然に浮かび上がります。
欧文の筆記体は柔らかさや上品さを連想させる一方で読み取りにくくなりがちですが、カタカナを並べて置くことで、初めて訪れた読者にも名称が正しく伝わります。装飾を足さず、面の色の対比だけで存在感を作る堅実な処理です。
作業中の手元を切り取ったヒーロー写真
ヒーロー領域には、支柱の金具を取り付けている手元を大きく写した写真が全幅で配置されています。完成した庭ではなく施工の途中を選んでいる点が特徴で、仕上がりの美しさよりも先に、作業に向き合う姿勢を伝える構図になっています。
被写体は中央からやや右に寄り、背景の砂利や柱が斜めの線を作るため、視線は自然に画面の中心へ集まります。写真の上に大きな文字を重ねていないので、画像が持つ情報量がそのまま読者に届きます。左右の送りボタンとスクロールを促す表示があり、続きがあることも静かに示されています。
連絡先を先に見せるヘッダーの情報整理
ヘッダーには電話番号が2つ並び、それぞれの下に「小郡店」「博多南店」という店舗名が添えられています。番号だけを並べるとどちらに連絡すべきか迷いますが、店舗名をラベルとして付けたことで、読者が自分で判断できる状態になっています。
その右側には濃紺の角丸ボタンで問い合わせの入口が用意されています。面積は小さいものの画面のなかで最も濃い色が使われているため、視線は最後にこのボタンへ着地します。ヒーロー写真の直下にも同じ電話番号と営業時間、定休日を再掲した帯があり、スクロールを始めた直後にも連絡手段が視界に入る作りです。
7項目に絞ったグローバルナビゲーション
グローバルナビゲーションは、ホーム、コンセプト、施工事例、お客様の声、当社の特徴、会社概要、ブログの7項目で構成されています。細い縦罫で仕切られ、和文には広めの字間が設定されているため、横並びでも窮屈さがありません。
掲載できる情報が多い業種ほど上部のメニューは膨らみがちですが、ここでは検討中の読者が知りたい項目だけを残し、細かなページはフッターのリンク一覧へ逃がしています。上部を軽く保つ判断が、画面全体の静けさにつながっています。
濃紺・やまぶき色・アイボリーで組み立てた配色設計
配色は、ロゴとボタンの濃紺、見出しのやまぶき色、背景の白とアイボリー、そして終盤の淡いグリーンという構成でまとまっています。使う色数を絞り、それぞれに役割を固定していることが、長い1枚もののページを読みやすくしています。ここでは見出しの色と背景の塗り分けという2つの観点から見ていきます。
見出しをやまぶき色でそろえた視線誘導
「ご紹介」「コンセプト」「施工事例」「ブログ」「お客様の声」「コラム」「会社概要」といったセクションの見出しは、すべて明るいやまぶき色で統一されています。本文は黒に近いグレー、ボタンとロゴは濃紺という構成のなかで、暖色は見出しだけに割り当てられています。
色の役割を1つに絞ると、読者はスクロールしながら色を目印として使えるようになります。縦に長い構成でも現在地を見失いにくいのは、この配色の約束が最後まで崩れていないためです。見出しの下には濃紺の小さな副題が続き、色と文字サイズの二段構えで階層が示されています。
背景色の切り替えでセクションの境界を作る
基調は白ですが、コラムのブロックだけは淡いアイボリー、「当社の特徴」のブロックは芝を思わせる淡いグリーンで塗り分けられています。罫線や枠を増やさずに背景の面で区切ることで、画面を静かに保ったまま情報のまとまりが伝わります。
とくに終盤のグリーンは、白と濃紺が続いたあとで印象が切り替わる場所になり、締めくくりのメッセージが記憶に残りやすくなっています。緑という選択は、庭や芝を扱う事業内容とも無理なく結びついています。
写真を主役に据えたレイアウトと情報設計
このサイトは、写真を大きく見せるブロックと、文字だけで整理するブロックを交互に配置しています。同じ形の繰り返しに陥らないよう、セクションごとに構図を変えている点が情報設計の見どころです。ここでは代表的な4つの組み方を取り上げます。
写真を重ねた左右非対称の2カラム
「コンセプト」のブロックでは、左側に2枚の写真を上下にずらして重ね、右側に見出しと説明文、ボタンを縦に積んでいます。左右で高さも面積もそろえていないため、規則的に並ぶ他のセクションとの間にリズムの変化が生まれます。
2枚の写真は植栽のある外構と、芝に飛び石を並べたアプローチという異なる場面を写しています。1枚では伝えきれない庭全体の雰囲気を、短時間で補い合う組み合わせです。
4列グリッドで一覧性を高めた施工事例
施工事例は、横4列・縦2段のグリッドに8枚の写真を並べています。すべて同じ間隔で配置し、写真ごとの説明文を省いているため、上から流し見るだけで施工の幅を把握できます。
人工芝の庭、コンクリートで仕上げた駐車スペース、タイルのアプローチ、目隠しになるルーバーフェンスなど、内容が重ならないように写真が選ばれています。限られた枚数でも扱う範囲の広さが伝わり、詳しくは「施工事例へ」のボタンで一覧ページへ渡すという役割分担が明確です。
段違いに置いた2枚の写真カード
「代表あいさつ」と「よくある質問」は、大きな写真カードを左右で上下にずらして配置しています。カードの左上には白いタブ状の見出しが重なり、写真の下側には白い文字で内容を示す一文が置かれています。
同じ高さでそろえると単調になりやすい2枚組を段違いにすることで、斜めに流れる視線の動きが生まれています。写真の上に文字を重ねる場合も、暗く落ち着いた部分を選んで白文字を置いているため、可読性が損なわれていません。
読み物の一覧は罫線と日付で整理
ブログは日付とタイトルを1行にまとめ、細い罫線で区切った2列のリストになっています。コラムは枠線で囲んだセルのなかに、日付を小さく上へ、タイトルを下へ配置した2列構成で、アイボリーの背景の上に置かれています。
どちらもサムネイル画像を使わず文字だけで並べているため、写真が主役の他セクションと役割がはっきり分かれます。日付が縦に並ぶことで情報が積み重ねられている様子も伝わり、写真の連続のなかに読み物の存在感が確保されています。
回遊を促す導線設計とUIの作り
トップページは概要を伝える場所と割り切られ、詳細はすべて下層ページへ渡す設計になっています。その受け渡しを支えているのが、繰り返し登場する同じ形のボタンと、限られた面積で複数の情報を見せるUIです。ここでは3つの仕掛けを確認します。
セクションごとに置かれた同じ形のボタン
各セクションの末尾には濃紺の角丸ボタンが中央に置かれ、「コンセプトへ」「施工事例へ」「ブログへ」のように行き先を示す短い言葉が入っています。形も色も配置も共通しているため、読者は区切りごとにボタンがあると予測しながら読み進められます。
言葉づかいをそろえたことで、どのボタンも同じ操作をもたらすという安心感が生まれています。ボタンの前には必ず数行の説明が置かれ、押す前に内容を判断できる順序になっている点も丁寧です。
横送りのカルーセルでまとめたお客様の声
お客様の声は、白いカードを横に並べたカルーセルで表示されます。カードには円形のアイコンと投稿者名、星のアイコン、投稿日時、本文の抜粋、続きを開くリンクが同じ順序で収められており、視線の流れが1枚目から最後まで変わりません。
左右には送りの矢印が置かれ、カードの下には丸いインジケーターが並んで全体の枚数が示されています。縦に積み上げずに複数の声を見せられるので、ページの長さを抑えながら情報量を保てます。カードの角を丸め、薄い影で背景から浮かせている点も、写真の多い画面のなかで視認しやすい理由です。
2店舗を同じ形式で並べた会社概要
会社概要のブロックでは、店舗名をやまぶき色の見出しにして、その下に電話番号、所在地、営業時間、定休日という4項目を横罫で区切って並べています。左に項目名、右に内容という並びが2店舗とも共通しているため、見比べながら読み進められます。
小郡店は福岡県小郡市三沢、博多南店は福岡市南区弥永にあり、どちらも営業時間は10時から19時まで、定休日は水曜日と木曜日です。対応エリアはページ上部でも店舗ごとに整理され、小郡店は小郡市とその近隣、博多南店は福岡市全域と近隣が示されています。拠点ごとに情報を分けて置く構成は、複数店舗を持つ事業者のサイトで参考になります。
外構・エクステリアのサイトで写真と文字をどう配分するか
ここからは、福岡市南区で外構工事や外構業者を探している読者の視点に立ち、この分野のサイトに共通して求められる考え方を整理します。Mine Gardenのサイトが実践している工夫と重ねて読むと、設計の意図がより理解しやすくなります。
外構工事は、敷地の形や建物の外観、家族構成によって最適な形が変わるため、言葉だけでは完成形を思い描きにくい分野です。だからこそ、施工後の写真を一定量そろえ、素材や用途が重ならないように選ぶことが、読者の理解を大きく助けます。芝、コンクリート、タイル、フェンスというように系統を散らして並べると、限られた枚数でも守備範囲が伝わります。
一方で、写真だけが続くと情報が平板になり、読者は違いを見分けられなくなります。読み物のコンテンツや店舗情報のように文字が主役のブロックを間に差し込み、視覚的な緩急をつけることが必要です。写真のグリッドと罫線の一覧を交互に置くこのサイトの構成は、その考え方に沿っています。
また、カーポートやフェンスのように機能面が重視される設備は、写真1枚では大きさや周囲との関係が伝わりにくいものです。引きの写真と寄りの写真を組み合わせたり、施工中のカットを添えたりすると、仕上がりだけでなく工程への理解も進みます。ヒーローに作業中の写真を選んだ判断は、この点で理にかなっています。
地域名の扱いも重要です。対応できる範囲を店舗ごとに明示しておくと、読者は自分の住まいが対象かどうかをすぐに確かめられ、問い合わせの前に生じる迷いを減らせます。連絡先を上部と下部の両方に置く構成も、検討が進んだ瞬間を逃さないための基本的な配慮です。
まとめ：Mine Gardenのサイトから学べるデザインの要点
Mine Gardenの公式サイトは、濃紺・やまぶき色・アイボリーという少ない色数に役割を固定し、施工写真を主役に据えることで、外構という伝わりにくい商材を分かりやすく見せているサイトです。装飾を足すのではなく、余白と写真の質で信頼感を作る方向にまとまっています。
グリッド、左右非対称の2カラム、段違いのカード、罫線の一覧というように、セクションごとに構図を変えながらも、見出しの色とボタンの形だけは最後まで統一されています。この「変化させる部分」と「固定する部分」の切り分けが、読みやすさと単調さの回避を両立させている理由です。複数拠点の情報を同じ形式で並べる会社概要も、そのまま応用できる形になっています。
デザインの意図は、実際の画面をスクロールしながら確かめると理解が深まります。福岡市南区でカーポートの設置にも対応するMine Gardenの公式サイトで、施工事例の見せ方や配色の切り替えをぜひご覧ください。
