有限会社青柳工務店は、山形県最上郡金山町にある工務店で、地元の銘木である金山杉を使った家づくりを手がけています。公式サイトは、深い緑の帯と木の質感を感じさせる見出し、木造住宅の写真を組み合わせ、素材へのこだわりを落ち着いたトーンで伝えています。
この記事では、配色、ファーストビュー、ロゴとナビゲーション、情報設計、文字の扱いといった観点から、同社のサイトをWebデザインの見本として読み解きます。最上地域や新庄市でリフォームや住まいづくりの依頼先を探している方が、工務店のサイトを見比べる際の視点としても活用できます。
深い緑と木の色で組み立てた配色
このサイトの配色は、深い緑、木を思わせる茶色、白の3色が土台です。そこへ細い黄色の線と淡い黄緑を差し色として添え、全体を自然素材に近い色合いでまとめています。
ページを額縁のように囲む深い緑
画面の最上部と最下部には深い緑の帯が敷かれ、白い本文エリアとの境目にはどちらも細い黄色の線が引かれています。本文エリアの左右も細い緑の線で縁取られているため、ページ全体が一枚の額に収まったような、まとまりのある見え方になっています。
グローバルナビゲーションの帯にも同じ系統の緑が使われており、サイトの基調色がひと目で伝わります。杉の美しい林で知られる金山町の工務店にふさわしく、森や木々を連想させる色選びです。
木の板を思わせる見出しと淡い黄緑のアクセント
右側の列にある「施工作品集」の見出しは、細い横縞を重ねた茶色の帯で表現され、木の板のような質感を帯びています。ナビゲーションの緑とは色を変えているため、作品集がトップページの中で独立したまとまりであることが自然に伝わります。
淡い黄緑は、左端に置かれた縦向きの欧文の背景や、見出しの罫線の右端、箇条書きの小さな四角形など、細かな部分に繰り返し使われています。面積は小さくても同じ色が点在することで画面にリズムが生まれ、配色全体の統一感を支えています。
木造住宅の写真を主役にしたファーストビュー
ファーストビューでは、ロゴとナビゲーションの下に「木の薫る金山杉の家」という見出しを掲げ、その下に木造住宅の写真を大きく配置しています。何を大切にしている会社なのかを、言葉と写真の両方で最初に示す構成です。
切妻屋根の住まいを伝えるメイン写真
メイン写真には、大きな切妻屋根をもつ2階建ての木造住宅が写っています。木の外壁と白い壁、木製の手すりを備えたバルコニー、屋根から伸びる煙突が一枚に収まり、この会社が手がける住まいの雰囲気を具体的に思い描けます。
写真は四角い枠で囲まれておらず、下端や右側が白い背景へ溶け込むように処理されています。建物の姿がやわらかく浮かび上がり、パンフレットの切り抜き写真のような親しみやすさが生まれています。
サイト内では、切妻屋根と杉、白壁を組み合わせた金山型住宅の要素をデザインに取り入れていると紹介されています。メイン写真の外観はその説明とも重なり、文章で語られる家づくりのイメージを視覚的に補っています。
縦向きの欧文と細い罫線による枠取り
写真の左側には、「Kaneyama Sugi」という欧文が90度回転した縦向きで配置されています。太めのセリフ体の一部に淡い黄緑のハイライトが重なり、日本語が中心の画面にさりげない装飾を加えています。
見出しの下を横に走る罫線と、欧文の脇を縦に走る細い線は、左上で交差しています。図面の基準線を思わせるこの枠取りが写真の範囲を静かに示し、家づくりの会社らしい端正な雰囲気を添えています。
屋号を思わせるロゴと4項目のグローバルナビゲーション
ヘッダーは、左端のロゴマークと、社名とメニューを収めた緑の帯を横一列に並べた構成です。会社の名前と主要なページへの入口が同じ高さにそろい、画面上部の情報がすっきり整理されています。
円の中に「青」を収めたロゴマーク
左端には、黒い円の中に「青」の字を置き、上下左右に短い線を添えたマークが配置されています。昔ながらの屋号や紋を思わせる形で、落ち着いた印象を与えます。
マークの右隣に続く緑の帯には、白い文字で社名が表示されています。「有限会社」を小さく2行に積み、「青柳工務店」を大きく見せる組み方のため、社名の中で覚えてほしい部分がはっきり伝わります。帯のすぐ下の右端には、「Aoyagikoumuten.co.Ltd」という小さな欧文表記も添えられています。
項目を絞ったメニューと斜めにカットした帯
グローバルナビゲーションは「金山杉の家」「銘木金山杉」「会社案内」「お問合せ」の4項目で構成されています。項目数が少ないため、訪問者はサイトの全体像をすぐに把握でき、迷わずに目的のページを選べます。
各項目は白い細線で区切られ、太めのゴシック体の白文字で表示されています。メニューの文字は画像で作られているため、閲覧環境による書体の違いが出にくく、ヘッダー全体の見た目がそろいやすくなっています。
帯の左右の端は斜めにカットされ、横長の帯に軽い動きと方向性を与えています。問い合わせの項目を右端に置いた並びは、左から順に読み進めた先で連絡の入口にたどり着く、自然な流れを作っています。
2カラムで整理したトップページの情報設計
トップページは、左側の広いメインカラムと、右側の細いサイドカラムに分かれています。左側に見出しと写真、お知らせ、関連するバナーを置き、右側に施工作品集をまとめる役割分担が明確です。
写真と短い紹介文で並べた施工作品集
右側の施工作品集には、5件の住まいが縦一列に並んでいます。各項目は、白い縁取りとやわらかな影を付けたサムネイル写真の右に、太字の地名と邸名、3行ほどの紹介文を置く形で統一されています。
紹介文は途中で区切られ、末尾に青い下線付きの「続く」という文字リンクが添えられています。続きへの興味を残しつつ、詳しいページへ進めることを分かりやすく示す工夫です。写真に付いた影は、机の上に写真を並べたような立体感を生み、一覧に手触りのある表情を加えています。
掲載されているのは、村山市の2件と、新庄市、最上町、鮭川村の住まいです。サムネイルを見比べると、木の外観が印象的な住まいから、白とグレーの外壁による箱型の現代的な住まいまで、外観の方向性が異なる事例が並んでいることが分かります。
見出しの形式をそろえた下段のブロック
メイン写真の下には、「お知らせ」と「おすすめリンク」の2つのブロックが続きます。どちらの見出しも、小さなアイコン、灰色の文字、右へ伸びる罫線で構成され、罫線の右端に淡い黄緑の帯を重ねた同じ形式で統一されています。
「おすすめリンク」の下には、山形県金山町、金山町森林組合、ecopolis もがみの3つのバナーが横に並んでいます。町や森林に関わる名前のバナーをまとめて置くことで、地域とのつながりを感じさせる締めくくりになっています。
1画面に収まるコンパクトな縦の長さ
このトップページは縦方向の長さが短く、キャプチャではヘッダーからフッターまでが1画面の中に収まっています。パソコンの画面であれば、ほとんどスクロールせずに社名、家づくりの主題、施工作品、関連するバナーまでを一度に見渡せます。
横幅はおよそ800pxの固定幅で組まれており、要素どうしの位置関係が変わりにくい作りです。情報量を絞り込み、限られた面積に必要な要素を整然と収めている点は、地域の工務店のサイトを設計する際の参考になります。
文字の扱いとトーン＆マナー
文字の扱いは、読みやすさを優先したゴシック体が中心です。そこに欧文の書体でわずかな変化を加え、素朴さの中に品のよさを持たせています。
ゴシック体を軸に、欧文で変化を加える書体選び
メニューや見出しには太めのゴシック体、作品集の紹介文には標準的な太さのゴシック体が使われ、日本語の情報は落ち着いて読める状態に整えられています。縦向きの「Kaneyama Sugi」にはセリフ体が使われ、画面の中で数少ない装飾的な文字として目を引きます。
フッターでは、緑の帯の中央に小さな白い文字でコピーライトが表記されています。主張を抑えた控えめな終わり方で、ページ全体の落ち着いたトーンを最後まで保っています。
木の家づくりにふさわしい落ち着いたトーン
緑と茶を中心とした自然な色、木造住宅の写真、控えめな装飾の組み合わせにより、サイト全体に誠実で落ち着いた雰囲気が生まれています。装飾を足すよりも素材と住まいそのものを見せる構成が、金山杉を活かす家づくりの考え方とよく合っています。
要素ごとに色や形の役割をはっきり分けている点も、このサイトの見どころです。木の温かみを大切にする住宅会社が、サイトのトーンを検討する際に参考にしやすい事例といえます。
下層ページで深まる金山杉と家づくりの情報
グローバルナビゲーションの各項目からは、素材、家づくり、会社の情報を掘り下げたページへ進めます。トップページで興味を持った訪問者が、次に知りたい内容へ無理なくたどり着ける情報設計です。
素材の特徴と背景を伝える2つのページ
「金山杉の家」のページでは、冬が長く雪の多い金山町で育つ杉が、年輪を少しずつ均一に重ねるため木目が細かく、狂いにくいという特性が紹介されています。金山型住宅の要素を取り入れながら今の暮らしに合う住まいを提案する方針や、上下の階を1本で貫く通し柱と梁を組み合わせ、基礎から屋根までを一体とした構造についても説明されています。
「銘木金山杉」のページでは、金山町の大美輪にある杉林の位置や地形、推定される樹齢などが項目ごとに整理され、参考資料の一覧も添えられています。家に使う木がどのような土地で育ったのかを示すことで、素材への信頼感を高める構成です。
施工作品集と会社案内
施工作品集の各ページでは、雪への備えとして基礎を高くした村山市の住まいや、高気密・高断熱のオール電化で外観を現代的にまとめた新庄市の住まいなど、1件ずつ特徴が短くまとめられています。旅館を思わせるたたずまいの最上町の住まいや、珪藻土の櫛引き仕上げと腰板を組み合わせた鮭川村のリビングも紹介されています。
「会社案内」のページには、昭和56年6月の会社設立や山形県知事許可を受けていること、業務内容として一般住宅の新築と増改築、店舗を扱っていることが記載されています。代表取締役は青柳孝二様です。
まとめ：金山杉の家づくりを伝える有限会社青柳工務店のサイト
有限会社青柳工務店のサイトは、深い緑と木の色による配色、切妻屋根の木造住宅を主役にしたファーストビュー、写真と短い紹介文で並べた施工作品集によって、金山杉を活かした家づくりを分かりやすく伝えています。要素を絞ったコンパクトな構成は、地域の工務店のサイトを考える際の見本として参考になる点が多くあります。
業務内容には新築だけでなく増改築も含まれ、施工作品集には新庄市や最上町の住まいも掲載されています。最上地域や新庄市でリフォームや住まいづくりを検討している方は、写真や家づくりの考え方を実際のサイトで確かめてみてください。
