株式会社Hamakenエクステリアは、岐阜県可児市に本社を、多治見市に事務所を置き、外構やエクステリアの工事を手がける会社です。公式サイトは生成りのクリーム色とやわらかな黄緑を基調とし、縦書きの見出しや青海波の模様といった和の要素を取り入れた、落ち着きのあるデザインでまとめられています。
この記事では、同社のサイトをWebデザインの見本として取り上げ、配色、ファーストビュー、写真の見せ方、レイアウト、ボタンと導線の設計を順に読み解きます。可児市や多治見市で外構工事の依頼先を探している方はもちろん、地域の施工会社のサイトづくりを検討している方にも役立つ視点をまとめました。
株式会社Hamakenエクステリアの公式サイトの概要
最初に、サイトを運営する会社の事業と、サイト全体のデザインの方向性を整理します。どのような会社が、どのような印象を目指してつくったサイトなのかを押さえておくと、個々のデザインの意図が読み取りやすくなります。
事業内容と対応エリア
同社は外構工事とエクステリア工事を中心に、宅地造成工事も業務として紹介しています。会社概要によると、可児市を中心として岐阜県の東濃部と中濃部、愛知県西部を対応エリアとしており、そのほかの地域は相談に応じる形です。
グローバルナビは「HOME」「初めての方へ」「業務内容」「ブログ」「会社概要」「お問い合わせ」で構成されています。会社の考え方から工事の種類、施工事例、会社情報、問い合わせまでを一通りたどれる、会社案内の役割を担ったコーポレートサイトです。
デザインの要点
先に結論を述べると、このサイトは石や植物といった外構の素材感と和の落ち着きを、配色と模様、書体の組み合わせで表現しています。写真を大きく使いながらも文字や装飾の色数を絞っているため、情報の多いトップページでも全体の印象が散らかりません。
- 生成り色と黄緑の2色を軸に、セクションごとに背景の色と質感を切り替えています。
- メインビジュアルの縦書きのコピーや導入部分の縦組みで、和の雰囲気を印象づけています。
- 屋根の輪郭で切り抜いた写真や波形の境界など、写真の形に変化をつけています。
- 業務内容のカード、ブログの一覧、地図、問い合わせ情報の順に、知りたい情報を段階的に並べています。
以下では、配色からファーストビュー、各セクションの順に、これらの特徴を確認していきます。
生成り色と黄緑でまとめた配色
配色は、生成りのクリーム色をベースに黄緑を重ねていく構成が中心です。見出しの文字は黒を基本とし、小さなラベルやボタンの文字には、くすみのあるオリーブ系の緑が使われています。
石を並べたような模様を敷いたベースカラー
ヘッダーやグローバルナビ、業務内容から地域の紹介までのセクション、フッターの背景には、生成り色の地に丸みのある石の形を淡く浮かべた模様が敷かれています。無地の白よりも温かみがあり、石や土を扱う外構工事のイメージとも自然に結び付きます。
模様のコントラストはごく弱く抑えられているので、上に載る文字や写真の読みやすさを妨げません。背景に質感を持たせながらも、主役はあくまで写真と見出しに置くというバランスがとられています。
黄緑がセクションの切り替えを知らせる
黄緑は、メインビジュアル下部のコピーの帯、導入セクションの背景、業務内容カードの見出しの帯、問い合わせ情報のエリアなど、要所で繰り返し使われています。場所によって濃さを少しずつ変えているため、同じ色を多用しても単調には見えません。
生成り色の区間と黄緑の区間が交互に現れるので、スクロールしながらでも内容の切れ目を感じ取れます。芝生や植栽を連想させる色でもあり、庭や住まいの外まわりを扱う会社らしさが配色からも伝わります。
ファーストビューの構成
ページを開いて最初に目に入る範囲は、ロゴと電話番号を配したヘッダー、全幅の写真を使ったメインビジュアル、その下のグローバルナビという3段で組み立てられています。社名と連絡手段を先に示し、続けて施工のイメージを大きく見せる順序です。
ロゴと電話番号を左右に振り分けたヘッダー
左側のロゴは、小さめの「株式会社」の下に、太いイタリックのセリフ体で組んだ「Hamaken」と、和文の「エクステリア」を並べた構成です。欧文と和文で書体の表情が異なるため、文字だけのロゴでも社名が印象に残ります。
右側には、上部に黄緑の帯を付けた白い枠の中に、受話器のアイコンと大きな電話番号、営業時間と定休日がまとめられています。電話で相談したい人が迷わず番号を見つけられる位置と大きさに配置されています。
外構の素材感を伝えるメインビジュアル
メインビジュアルには、横幅いっぱいに広がる屋外の写真が使われています。石を積み重ねたような質感の壁や黒い石を敷き詰めた一角、不規則な形の石を並べた通路が写り、奥にはカーポート、右手には社名の入ったサイン壁も見えます。
写真の左端には、親切さと丁寧さ、安心感を掛け合わせた短い言葉が縦書きで重ねられています。下部の黄緑の帯には、理想の住まいを形にしようと呼びかけるキャッチコピーが横書きで大きく置かれ、どちらの文字も白い縁取りによって写真の上で読み取りやすくなっています。
視線は左端の縦書きを上から下へたどり、そのまま下部のキャッチコピーへと移ります。写真の中の通路が手前から奥へ伸びていることも、平面の画面に奥行きを与えています。
写真の下に置いたグローバルナビ
グローバルナビは、メインビジュアルのすぐ下に6つの項目を横一列に並べています。項目の間には細い区切り線が入り、生成り色の背景になじむ控えめな見た目です。
ナビを写真の上ではなく下に置いているため、訪問者はまず施工の雰囲気を受け取り、そのあとで読みたいページを選ぶ流れになります。項目数が少なく名称も具体的なので、初めて訪れた人でも行き先を判断しやすくなっています。
縦書きと和柄で印象づける導入セクション
グローバルナビの下には、会社の姿勢を伝える導入のセクションが続きます。縦組みのレイアウトと和柄を組み合わせ、ほかのセクションとは異なる雰囲気をつくっている点が特徴です。
右から読ませる縦書きの見出しと本文
画面の右側には、可児市を中心に活動していることを示す小さなラベルと、住まいに合わせた外構工事の相談を呼びかける2行の見出し、数行の本文がすべて縦書きで配置されています。和文の書体と縦組みの組み合わせが、手紙を読むような落ち着いた語り口を感じさせます。
Webサイトでは横書きが一般的なので、縦書きのブロックはそれだけで目を引きます。本文の行数を少なめに抑えているため、縦組みでも読む負担が大きくなりすぎません。
写真から背景へ溶け込むグラデーション
左側には木々に囲まれた住まいの玄関まわりの写真が置かれ、右へ進むにつれて黄緑の背景へ溶け込むようにぼかされています。写真と文字の領域を線で区切らないことで、画面全体がひと続きの風景のように見えます。
黄緑の背景には布目のような細かな質感があり、右上には青海波の模様が少し濃い緑で描かれています。和柄を控えめに添えることで、縦書きの見出しとの統一感が生まれています。
強みと施工イメージを伝えるレイアウト
導入セクションのあとは白に近い明るい背景へ切り替わり、会社の強みを伝えるブロックと、外構が整った住まいを見せる写真の帯が続きます。文字と写真の配置に変化をつけ、スクロールしても単調にならないよう工夫されています。
3つの強みを短いフレーズで示す左右分割
左側には、オリーブ系の緑で書かれた小さなラベル、家族が楽しく暮らせる住まいをテーマにした見出し、本文、ボタンが縦に並びます。本文では「業歴約25年以上」「年間施工数100件以上」「安心の自社施工」という3つの強みが、かぎ括弧でくくった短いフレーズとして示されています。
数字を含む言葉を長い文章に埋もれさせず、独立したフレーズとして見せているため、流し読みでも会社の特徴が頭に残ります。その下には強みや施工への想いを案内する一文と「詳しく見る」ボタンが置かれ、詳しい説明を読みたい人の入口になっています。
屋根の輪郭を生かした切り抜き写真
右側の写真には、木目の外壁とバルコニーが目を引く2階建ての住まいの前に、大人と子どもが並んで立つ場面が写っています。空の部分が切り抜かれているため、屋根の傾きがそのまま写真の輪郭になっています。
四角い写真をそのまま置くよりも画面に動きが出て、左側の整然とした文字のブロックとの対比が生まれます。人物が写っていることで、外構が日々の暮らしを支える空間として身近に感じられます。
波形の境界でつなぐ写真の帯
続いて、画面の横幅いっぱいに、外構が整った住まいの写真が帯状に配置されています。上部をれんがで縁取ったアーチ形の白い門柱、黒いアイアンの門扉とフェンス、芝生の庭、左手のカーポートが一枚に収まり、外まわり全体の仕上がりをイメージしやすい写真です。
写真の上部には淡い黄緑のグラデーションが重なり、その下端がゆるやかな波形の曲線で写真と接しています。直線で区切るよりもやわらかな印象になり、前後のセクションを自然につなぐ役割を果たしています。
情報設計と導線の工夫
ページの後半は、業務内容、ブログ、地域とのつながり、問い合わせ情報の順に構成されています。関心を持った人が次に知りたくなる情報を段階的に並べ、最後に連絡先へたどり着く流れです。
写真付きの3列カードで示す業務内容
中央ぞろえの見出しの下には、「外構工事」「エクステリア」「施工事例」の3枚のカードが横に並びます。各カードは写真の中央に半透明の黄緑の帯を重ね、その上に項目名を和文の書体で載せたデザインです。
写真はそれぞれ、コンクリートの土間と玄関まわり、住宅の前に設けられたカーポート、作業中の現場を写しており、項目名を読む前から内容の見当がつきます。カードの下には枠線付きの「詳しく見る」ボタンが同じ高さにそろえて置かれ、3つを見比べながら選べるつくりです。
施工事例を一覧で見せるブログ
「ブログ新着記事」の見出しの下には、日付、枠線で囲んだカテゴリのラベル、記事タイトルを1行ずつ並べたリストがあります。行の間は点線で区切られ、タイトルだけを追って読める簡潔なつくりです。
ブログの施工事例カテゴリには、駐車場の拡張や造成工事、カーポートの設置、ウッドデッキの基礎づくり、砂利を敷く工事、ブロックの補修など、現場ごとの記録がまとめられています。業務内容で工事の種類をつかみ、ブログで具体的な作業の様子を確かめるという使い分けができます。
地図で地域とのつながりを示すセクション
地元に寄り添う姿勢を掲げたセクションでは、左側に岐阜県の地図が配置されています。地図は黄緑で塗られ、市町村の境界が白い線で描かれており、県の南部には同心円状の黄色い目印と赤い点が重ねられています。
右側には、岐阜県内での長い活動を伝えるラベル、地域に合わせた施工を案内する見出し、本文、「詳しく見る」ボタンが並びます。文章を読む前に地図の目印が目に入るため、どの地域に根ざした会社なのかを直感的に理解できます。
連絡先を1か所に集めた問い合わせエリア
フッターの手前には、黄緑の背景に連絡先をまとめたエリアがあります。左側にはロゴと相談を促す短いメッセージ、ヘッダーと同じデザインの電話番号の表示、「お問い合わせページへ」ボタンが縦に並び、右側には所在地や営業時間、定休日、FAX番号、メールアドレス、所有資格などを記した表が置かれています。
電話番号の表示をヘッダーとそろえているので、ページの最後まで読んだ人も連絡手段をすぐに見つけられます。表の最後の行には、事務所を訪ねる場合は事前に電話で予約してほしいという案内もあり、来訪を考える人が戸惑わないよう配慮されています。
その下にはSNSでシェアするためのボタンなどを並べたグレーの帯があり、最下部のフッターにはグローバルナビと同じ6つの項目と社名、電話番号、所在地が中央ぞろえで表示されています。ページの最後にも主要なページの名前が並ぶため、読み終えたあとに次に見るページを考えやすい構成です。
細部に見るデザインのルール
細部に目を向けると、書体の使い分けやボタンの形、写真の色調、ブロックの配置、余白の取り方にも一貫したルールが見られます。こうした細かな統一が、サイト全体の落ち着いた印象を支えています。
見出しは筆致のある和文書体、本文はゴシック体
見出しやラベル、ボタンの文字には、筆で書いたような抑揚をもつ和文書体が使われています。一方で本文はクセの少ないゴシック体で組まれ、説明文が数行続いても読みやすさが保たれています。
見出しと本文で書体の性格をはっきり分けているので、どこが要点でどこが説明なのかをひと目で区別できます。電話番号の数字にはセリフ体が使われ、ヘッダーのロゴの欧文とも雰囲気がそろっています。
細い枠線でそろえたボタン
「詳しく見る」や「お問い合わせページへ」のボタンは、白地にオリーブ系の緑の細い枠線を付け、中央に文字、右端に山形の矢印を置いた共通のデザインです。塗りつぶしのボタンに比べると主張は控えめですが、横幅を広く取っているため、操作できる場所として認識しやすくなっています。
トップページのボタンが同じ形にそろっているので、訪問者は一度覚えた見た目を手がかりに次の操作へ進めます。色数を増やさずに操作の入口を示しており、配色の方針とも矛盾しないボタン設計です。
明るい屋外写真を配色になじませる
トップページの写真は、白い外壁や石の灰色、植栽の緑、晴れた空の青といった、日中の屋外で撮影された明るい色合いのものが中心です。写真の色調がそろっているため、生成り色と黄緑の配色の中に置いても写真だけが浮いて見えません。
業務内容のカードのように写真の上へ半透明の黄緑を重ねる手法も、写真とサイトの色を結び付ける役割を果たしています。写真ごとに色味が異なっても、共通の色を一枚かぶせることで全体の統一感が保たれます。
左右を入れ替えながら進むレイアウト
トップページでは、写真と文章を左右に振り分けるブロックが何度か登場し、そのたびに配置が入れ替わります。導入セクションは写真が左で文章が右、強みのブロックは文章が左で写真が右、地域のセクションは地図が左で文章が右という並びです。
配置を交互に変えることで、スクロールするたびに視線が左右へ動き、同じ形のブロックが続く単調さを避けられます。写真と文章が隣り合う組み合わせは保たれているため、読み進める順序に迷うこともありません。
ゆとりのある余白と幅の使い分け
各セクションの間には十分な余白が取られ、業務内容や地域のセクションでは見出しを中央ぞろえにして区切りを明確にしています。写真や色面の帯は画面の横幅いっぱいに広げ、カードや一覧、表は中央の一定の幅に収めることで、メリハリのある画面になっています。
情報を詰め込まずに余白を残しているため、写真や見出しがそれぞれ引き立ちます。落ち着いた配色と相まって、住まいの外まわりをゆったりと考えたくなる雰囲気が生まれています。
下層ページから見える会社の特徴
トップページのデザインが伝える誠実な印象は、下層ページの内容とも結び付いています。ここでは「初めての方へ」「業務内容」「会社概要」の各ページで確認できる情報を、要点に絞って紹介します。
代表のメッセージと自社施工の体制
「初めての方へ」のページでは、代表取締役の浜田 智様が、岐阜県の地元で過ごしながら外構や土木の工事に約25年間携わってきた経験を紹介しています。要望を丁寧に聞き取ったうえで、職人の視点から一歩先の提案をすることを大切にしている点も述べられています。同じページでは、自社施工によって、相談の受付から現地の調査、打ち合わせ、工事、引き渡し後のフォローまでを一貫して担う体制も説明されています。
業務内容と会社概要のページで確認できる情報
業務内容のページでは、ブロックやタイルの工事、門から玄関までの通路や駐車場といった外構工事に加え、ガーデニングやウッドデッキ、カーポートやテラスなどのエクステリア工事、宅地造成工事が紹介されています。カーポートについては、車を紫外線や雨、霜、鳥のふんから守れることや、雨の日でも濡れずに荷物を降ろせることが利点として挙げられています。
会社概要のページによると、本社は岐阜県可児市星見台、事務所は岐阜県多治見市旭ケ丘にあり、所有資格として建設業許可(般-2)第500929号が記載されています。戸建て住宅の施工を担当する機会が多いことにも触れています。
可児市や多治見市で外構工事を検討するときの視点
外構工事の依頼先を選ぶときは、デザインの好みに加えて、対応エリアや工事の種類、相談のしやすさもあわせて確認すると比較しやすくなります。ここでは、可児市や多治見市で外構工事を考えている方に向けて、一般的な検討のポイントを整理します。
新築の外構は建物の計画と合わせて考える
可児市で新築の外構を計画する場合は、建物の間取りや窓の位置、駐車する台数、玄関までの動線をもとに、門まわりや駐車場、塀やフェンスの配置を考えるのが一般的です。防犯やプライバシーへの配慮、夜間の足元の明るさ、植栽の手入れのしやすさなども、住み始めてから気付きやすい項目です。
外構のリフォームやカーポートの設置で確認したいこと
多治見市で外構のリフォームを考える場合は、ブロック塀のひび割れや傾き、通路の段差、駐車スペースの広さなど、今の外まわりで気になっている点を書き出しておくと相談がスムーズです。同社の業務内容のページでは、既存の塀に化粧タイルを張って住まいの印象を変える方法も紹介されています。
カーポートを設置するときは、車の大きさや台数、出し入れのしやすさ、玄関への動線、屋根が日当たりに与える影響などを確認しておくと安心です。可児市でカーポートの設置を検討している方は、同社の業務内容のページとブログの施工事例をあわせて見ておくと、仕上がりのイメージを持ちやすくなります。
まとめ：株式会社Hamakenエクステリアの公式サイト
株式会社Hamakenエクステリアの公式サイトは、生成り色と黄緑の配色、石を思わせる背景の模様、縦書きの見出しや青海波といった和の要素を組み合わせ、外構工事の会社らしい温かみと落ち着きを表現しています。写真の輪郭や境界の形に変化をつける一方で、書体やボタンのルールはそろえており、見た目の印象と使いやすさの両方に配慮した設計です。
業務内容を写真付きのカードで示し、ブログで施工事例を補い、最後に連絡先を1か所へ集める流れは、地域に根ざした施工会社のサイトをつくる際の参考になります。可児市や多治見市で新築の外構や外構のリフォームを考えている方は、可児市でカーポートの設置も相談できる株式会社Hamakenエクステリアの公式サイトで、実際の画面と施工事例を確かめてみてください。
