株式会社皆藤建築設計は、茨城県取手市宮和田に事務所を構える一級建築士事務所です。新築住宅の設計・施工や住宅のリフォーム、店舗・事務所の設計を手がけており、公式サイトではその姿勢が柔らかな曲線と手描き風の線画で表現されています。
このサイトの見どころは、建築という硬い題材を扱いながら、暮らしの温もりを先に感じさせるトーンでまとめている点にあります。本記事では、配色、ファーストビュー、レイアウト、書体、導線の順に、デザインの工夫を読み解いていきます。
生成り色とオレンジで整えた、温もりのある配色
サイト全体の印象を決めているのは、生成りに近い淡いベージュの背景と、ブラウンの文字、オレンジのアクセントという3色の組み合わせです。木の家を思わせる色だけで構成されているため、写真に写る木材や床の色と画面全体が自然になじんでいます。
背景色の切り替えでセクションを区切る設計
ページを下へ進むと、ベージュの背景と白の背景が交互に現れます。区切りに罫線を使わず、色の面を切り替えることで内容のまとまりを伝えているため、画面がすっきりと見えます。
ベージュから白へ移る境目は直線ではなく、ゆるやかな波形で描かれています。写真の切り抜きに使われている曲線と呼応しており、ページ全体に一貫したやわらかさが生まれています。
役割を絞ったアクセントカラーの使い方
オレンジが使われているのは、下層ページへ進むテキストリンクとフッターにほぼ限られています。色の出番を絞っているので、読者はオレンジの文字が押せる場所だと迷わず判断できます。
ファーストビューや導入部分の文章が、黒ではなくブラウンで組まれている点も見逃せません。背景との明度差がやわらぎ、目に優しい読み心地になっています。
有機的なかたちと線画を重ねたファーストビュー
ページを開いて最初に目に入るのは、四角形ではなく不定形に切り抜かれた室内写真です。画面右上にはトップページ、サービス、実績一覧、会社情報、お知らせ、お問い合わせの6項目が小さく並び、主役である写真とイラストを邪魔しない配置になっています。
不定形のマスクで切り抜いた写真
ダイニングの写真と木組みの写真は、どちらも小石のような丸みを帯びたかたちで切り抜かれています。写真の輪郭から少しずらした位置に細いブラウンの線が重ねられており、手で描いたような揺らぎが加わっています。
完成した室内と、建築途中の骨組みを並べている構成も印象的です。仕上がりの美しさと、その内側にある構造の両方を大切にする姿勢が、言葉より先に写真で伝わってきます。
手描き風のイラストが添える親しみ
写真のまわりには、家や車、家族を描いた線画のイラストが配置されています。塗りを使わない細い線だけで描かれているので、主張しすぎず、余白にほどよいリズムを与えています。
建築会社のサイトは図面や外観写真が中心になりがちです。このイラストがあることで、住む人の暮らしに目を向けている印象が強まっています。
字間を広く取ったキャッチコピー
キャッチコピーは写真の下の左側に置かれ、丸みのある書体と広めの字間でゆったりと組まれています。思い描く暮らしを、その人に合ったかたちへ整えていくという趣旨の言葉が、急かさない調子で読者に届きます。
その下には、一級建築士の視点で間取りを工夫するという補足が小さな文字で続きます。大きな言葉で気持ちをつかみ、小さな言葉で根拠を添える二段構えになっています。
セクションごとに表情を変えるレイアウト
トップページは、COMMITMENT、SERVICES、OUR STRENGTHS、GALLERY、NEWSの順に展開します。配色や曲線のルールは共通させつつ、区画ごとに組み方を変えているため、長いページでも単調に感じません。
白いカードに写真を重ねたCOMMITMENT
最初の区画では、角を大きく丸めた白いカードの上に文章が置かれ、左側からキッチンの写真がはみ出すように重なっています。カードの枠に収めきらない配置が奥行きを生み、平面的になりやすい文章主体の区画に動きを与えています。
ここでは、見た目のデザインに加えて構造や耐震性まで含めて提案する考え方が語られています。設計から施工、外構までを一貫して任せられる体制であることも、この区画で確認できます。
写真と文章を左右交互に置いたSERVICES
サービス紹介は、新築住宅、住宅のリフォーム、店舗・事務所の設計の3つで構成されています。写真と文章の位置が1件ごとに左右で入れ替わるジグザグの配置で、視線が自然に下へ流れていきます。
背景には、筆で描いたような淡い弧が大きく引かれています。白い面が続いても寂しく見えないよう、控えめな装飾で余白を支えている点が参考になります。
アーチ型の枠で揃えたOUR STRENGTHS
強みを紹介する区画では、4つの項目が2列2段のグリッドで整列しています。それぞれの見出しはアーチのような丸い線で囲まれ、その下に角丸の写真が添えられています。
前後の区画が自由な曲線で構成されているのに対し、ここだけは整ったグリッドで組まれています。一級建築士による構造面の安心、間取りへのこだわり、一貫した対応、引き渡し後のフォローという要点が、比較しやすいかたちで並んでいます。
方眼紙の背景に写真を散らしたGALLERY
実績を見せる区画では、背景が淡いグリーンの破線による方眼模様に変わります。設計図を連想させる柄で、建築設計事務所らしさをさりげなく表しています。
写真は大きさの異なる不定形で切り抜かれ、あえて不揃いに配置されています。店舗の外観や内装、戸建て住宅の外観が混ざって並ぶことで、手がける建物の幅広さが一目で伝わります。
縦向きの日付が目を引くNEWS
お知らせの区画では、影のついた白いカードと、縦向きに回転させた日付、ブラウンの縦線が組み合わされています。情報量が少ない区画でも、日付の向きを変えるだけで画面に変化が生まれています。
書体の使い分けと余白がつくる読みやすさ
このサイトでは、役割の異なる3種類の書体が使い分けられています。どの書体も字間を広めに取っており、行間のゆとりと合わせて落ち着いた読み心地をつくっています。
細身の欧文見出しがつくる軽やかさ
各区画の冒頭には、横に広い細身の欧文がグレーで大きく置かれています。サイズは大きいものの、線が細く色も淡いため、圧迫感がありません。
見出しを大きく扱うことで区画の切れ目が明確になり、スクロール中でも現在地を把握しやすくなっています。装飾としての美しさと、目印としての機能を兼ねた使い方です。
明朝体と丸みのある書体の役割分担
サービス名の見出しには、黒の太い明朝体が使われています。やわらかな要素が多い画面の中で、ここだけは凛とした表情になり、設計事務所としての信頼感を支えています。
一方、キャッチコピーや導入の文章には丸みのある書体が選ばれています。信頼感を伝える場面と親しみを伝える場面で書体を切り替える考え方は、他業種のサイトでも応用しやすい手法です。
迷わせない導線とフッターの設計
導線の特徴は、大きなボタンを使わず、テキストリンクのかたちを統一している点にあります。押せる場所の見た目が揃っているので、初めて訪れた方でも次に進む場所をすぐに見つけられます。
統一されたテキストリンクのデザイン
各区画の末尾にあるリンクは、オレンジの丸と短い線のアイコン、下線付きのオレンジの文字という共通の形式で作られています。こだわり、各サービス、強み、実績一覧、お知らせ一覧と、行き先が変わっても見た目は変わりません。
塗りつぶしたボタンを置かないことで、写真やイラストの柔らかな雰囲気が保たれています。控えめでも色と形が一貫していれば、リンクとして十分に機能することがわかります。
ページ下部に並ぶCOMPANYとCONTACT
ページの終盤には、木組みの写真を淡く敷いた背景の上に、白い角丸のカードが2枚並んでいます。左が会社情報への案内、右がお問い合わせへの案内で、見出しにはオレンジの破線が下線として引かれています。
お問い合わせのカードには、フォームへのリンクと電話番号が横並びで配置されています。連絡手段を1か所にまとめているため、相談したい方が手段を選びやすい構成です。
オレンジ一色でまとめたフッター
フッターは、ページ内で唯一オレンジを面として使った区画です。淡い色が続いたあとに濃い色で締めくくることで、ページの終わりがはっきりと伝わります。
左側には所在地とGoogle Mapへのリンク、右側にはサービスや選ばれる理由などに分類されたメニューが白い文字で整理されています。上部のナビゲーションより細かい階層まで載っているので、目的のページへ直接移動できます。
取手市で注文住宅やリフォームを考える方に届く情報設計
取手市で注文住宅やリフォームを検討する方、取手市で工務店を探している方にとって、依頼先のサイトで確かめたいのは「誰が設計し、どこまで任せられるのか」という点です。株式会社皆藤建築設計のサイトは、その問いに順を追って答える構成になっています。
設計者の経歴と資格が伝える安心感
会社情報のページでは、一級建築士事務所としての登録に加え、一級建築士や宅地建物取引士、木造耐震に関わる資格を保有していることが示されています。代表取締役の皆藤 拓哉様は、設計事務所での仕事に加えて、地域の工務店で施工現場の監督に携わった経験をお持ちで、図面と現場の両方を知る立場から家づくりに向き合っています。
事業内容には、新築やリフォームのほかに、既存住宅の耐震診断と耐震補強工事も挙げられています。見えない部分の安全を重視する姿勢は、ファーストビューで骨組みの写真を大きく扱うデザインとも一致しています。
相談から引き渡しまでを見通せる構成
新築住宅、リフォーム、店舗設計の各ページでは、選ばれる理由と、相談から引き渡しまでの流れが段階ごとに説明されています。家づくりは工程が多く、全体像が見えないと不安を感じやすいため、先に道筋を示す構成は読者への配慮として有効です。
一般に、注文住宅やリフォームでは、設計、施工、外構を別々の会社に依頼すると打ち合わせの窓口が増えていきます。同社は水回りや電気工事、外構までまとめて対応する体制を掲げており、窓口を一本化したい方には検討しやすい内容です。
株式会社皆藤建築設計のサイトに学ぶ、やわらかさと信頼感の両立
株式会社皆藤建築設計のサイトは、不定形に切り抜いた写真、手描き風の線画、生成り色とオレンジの配色によって、建築設計事務所の堅い印象をやわらげています。その一方で、骨組みの写真や方眼模様、明朝体の見出しを要所に置き、構造を大切にする専門性もきちんと伝えています。
装飾を増やすのではなく、曲線と色のルールを絞ってページ全体に行き渡らせる考え方は、住宅会社や設計事務所のサイトを制作する際の参考になります。実際の画面で、写真の切り抜きや余白の取り方をぜひ確かめてみてください。
