株式会社住まい工房の公式サイトは、深い緑とアイボリーの二色を軸にして、曲線と余白でやわらかさを表現した住宅リフォーム会社のサイトです。写真とコピーの役割分担が整理されているため、初めて訪れた方でも、どんな会社がどの範囲の工事に対応しているのかを上から読み進めるだけでつかめる構成になっています。
ここでは、北海道岩見沢市に拠点を置く同社のサイトを、Webデザインの見本という視点で読み解きます。配色の考え方、ファーストビューの組み立て、縦書きを取り入れた情報設計、カード型の実績一覧、細部の装飾まで、住まいに関わる企業サイトを検討している方が参考にしやすい部分を順に取り上げます。
深い緑とアイボリーを軸にした配色が落ち着いた印象をつくります
このサイトでもっとも印象に残るのは、彩度を抑えた深い緑と、わずかに黄みを含んだアイボリーの組み合わせです。使う色数を思い切って絞り込み、写真以外はほぼこの二色と白だけで構成しているため、画面をスクロールしても視覚的な情報がぶつかり合いません。ここでは、主役の色と差し色がそれぞれ担っている役割を見ていきます。
主役の深緑が「木」と「暮らし」の連想につながります
見出しの英字、セクション名、ボタン、フッターの背景と、サイトのほぼすべての要素に同じ深緑が使われています。左上のロゴマークも同じ緑の面で表現されていて、樹木をかたどった白抜きのシンボルが乗る形になっています。
緑は樹木や植物を思わせる色で、木材を扱う工事会社との相性が良い選択です。会社概要では、シンボルマークの木のかたちに、暖かみのある生活空間をつくるという考え方を込めていることが説明されています。ロゴの意味と画面全体の色が一致しているため、サイトを見ているうちに会社の姿勢が自然に伝わります。
差し色のオレンジがひとつの行動だけを目立たせます
画面のなかで緑以外の色が使われている箇所は、ヘッダー右上に置かれた問い合わせボタンだけです。丸みの強い横長のボタンに温かみのあるオレンジを敷き、メールのアイコンと文字を白で抜いています。
基調色から外れた色をひとつだけ使うと、その要素は自動的に画面の主役になります。読者に取ってほしい行動をひとつに絞り、そこにだけ差し色を割り当てるという判断は、色数を増やさずに導線を強めたい場合の参考になります。
ファーストビューは写真とコピーの役割分担が明快です
ページを開いた直後に見えるのは、大きな一枚の写真と、その上に重ねられた短いコピー、そして右上にまとめられた連絡手段です。写真が雰囲気を担い、文字が意味を担うという分担がはっきりしているため、要素が多くても散らかった印象になりません。ここでは写真の切り取り方と、文字の置き方を分けて確認します。
曲線で切り取った大きな写真が暮らしの場面を伝えます
ファーストビューの写真は、木を張った外壁の住宅と、そのウッドデッキでくつろぐ家族を写したものです。工事中の現場や完成した建物そのものではなく、住まいが使われている場面を選んでいる点に、このサイトの視点が表れています。
写真の左端と下端は直線ではなく、ゆるやかな曲線で切り抜かれています。四角い写真をそのまま敷き詰めるより輪郭がやわらかくなり、住宅を扱うサイトらしい親しみやすさが生まれます。この曲線はページの各所に繰り返し登場し、サイト全体の共通言語として機能しています。
白い帯に分けて置いたコピーが視線を段階的に導きます
コピーは一枚の帯にまとめず、二つの白い長方形に分けて上下にずらして配置されています。文字は深緑で大きく、字間もゆったりと取られているため、写真の上でも埋もれません。
二行目には岩見沢という地名が入り、どの地域に向けたサイトなのかが最初の画面で伝わるようになっています。地域に根ざした事業では、社名よりも先に対応エリアを示すほうが読者の判断が早くなるため、この置き方は理にかなっています。
ロゴと連絡手段を左右に振り分けたヘッダー
ヘッダーは、左上のロゴパネルと右上のナビゲーションパネルという二つのかたまりに分かれています。どちらも角に大きな丸みを付けた面として置かれ、写真の上に浮いているように見えます。
右側のパネルは上下二段で、上段に電話番号と問い合わせボタンが並びます。その下の段には、考え方を伝えるページや事業の案内、施工実績、リフォームの流れ、会社概要へ進む五つのリンクが控えめな文字サイズで置かれています。連絡手段を上、内容を知るためのリンクを下に置く重み付けによって、すぐ相談したい方と、まず内容を見たい方の両方に応えられる形になっています。
縦書きと余白を生かしたコンセプトの見せ方が印象的です
Webサイトの本文は横書きが一般的ですが、このサイトはコンセプト部分にあえて縦書きを採用しています。読ませ方を変えることで、そのブロックだけ空気が変わり、会社の考え方を語る場所であることが伝わります。ここでは縦組みの効果と、前後のブロックとの関係を見ていきます。
縦組みのテキストが読む速度をゆるやかにします
コンセプトの文章は右から左へと縦に流れ、一行ごとの高さをずらして階段状に配置されています。横書きに比べて視線の移動距離が長くなるぶん、読み手はゆっくりと文字を追うことになります。
この区画では、暮らしの希望を聞き取りながら丁寧に仕事を進める姿勢と、年間で100件を超える現場に関わってきた経験を土台に提案していることが語られています。数字を大きなグラフィックとして見せるのではなく、落ち着いた縦組みの文章のなかにそっと置く扱いも、サイト全体の静かなトーンに合っています。
左右を入れ替えたブロック構成が単調さを防ぎます
コンセプトの区画では英字見出しと文章が左、写真が右に置かれています。続く事業案内の区画では逆になり、写真が左、見出しと文章が右へ移ります。
同じ形のブロックを縦に積むと単調になりますが、要素の左右を入れ替えるだけで画面にリズムが生まれます。どちらの区画にも、緑の丸いボタンと矢印を組み合わせた同じ形のリンクが置かれており、変化を付けながらも操作方法は統一されています。
施工実績をカードで並べた一覧設計が回遊を助けます
事業案内の下には、施工実績を六枚のカードで見せる区画が続きます。文章で対応範囲を説明するのではなく、写真と短い見出しの組み合わせを並べることで、扱う工事の幅がひと目で伝わる作りです。ここではカードの並べ方と、共通して使われているボタンの形について取り上げます。
六つの領域をそろったカードで見せています
カードは三列二段に整列しています。上段では住宅のリフォームと店舗の改装、それに水廻りの工事が紹介され、下段には賃貸住宅の退去にともなう復旧や、外壁と屋根に関わる工事、規模の小さな工事が続きます。それぞれ実際の現場写真を上に、緑の見出しを下に置いた同じ構成でそろえられ、写真の明るさや色味も大きくばらつきません。
白いカードの背景にアイボリーの地色が透けることで、一枚ずつが軽く浮いて見えます。住宅の内装から屋根まで幅広く手がけていることを、長い説明文なしに理解させる見せ方です。
円形の矢印ボタンが共通の合図になっています
各カードの右下には、緑の円に白い矢印を入れた小さなボタンが置かれています。同じ形のボタンは、コンセプトや事業案内の続きを読むリンク、リフォームの流れと会社概要へ進む緑の大きなパネル、地図へ進むリンクにも使われています。
形と色をそろえた要素が繰り返されると、読者はそれを見るだけで先へ進めることを理解します。区画ごとにボタンの形を変えず、ひとつの記号に統一している点は、シンプルな企業サイトを設計するうえで参考になります。
細部の装飾がトーン＆マナーを支えています
このサイトは装飾が少ないように見えますが、実際には背景や区切りに細かな工夫が施されています。いずれも主役の写真や文字を邪魔しない濃度に抑えられていて、余白そのものに表情を与える役割を果たしています。ここでは背景の透かしと、区画の区切り方を確認します。
線画のイラストとロゴマークを透かしとして配置しています
背景には、テーブルや椅子を細い線で描いたイラストが、地色よりわずかに濃い程度の色で置かれています。ロゴの樹木マークも同じように大きく引き伸ばされ、コンセプトや事業案内の背後に薄く敷かれています。
写真を敷き詰めれば画面はにぎやかになりますが、情報量も増えます。線画の透かしは、余白を残したまま住まいや家具という主題を伝えられる方法で、落ち着いた印象を保ちたい場合に有効です。
波形の区切りと英字見出しがリズムをつくります
区画と区画の境目は水平の直線ではなく、ゆるやかな波の形で切り替わります。フッターの上端も同じように大きく波打っていて、緑の面が下から迫り上がってくるように見えます。
見出しには、細めの線で組んだ英字が使われています。事業案内の下には、英文のコピーを白抜きの輪郭文字で大きく横に流す帯もあり、区画の切り替えを知らせる合図として働いています。日本語は字間を広めに取ったゴシック体でそろえられ、英字の軽さと調和しています。
会社情報とアクセスの伝え方も整理されています
デザインの印象を支えているのは、掲載されている情報の分かりやすさでもあります。このサイトでは、会社の成り立ちから所在地、連絡手段までが決まった位置にまとめられており、読者が探し回らずに済みます。ここでは事業内容の示し方と、問い合わせまでの導線を見ていきます。
岩見沢を拠点にした事業の広がりが読み取れます
会社概要のページでは、岩見沢の近郊を中心に、住まいのリフォームから店舗の改修、新築の内装工事までを手がけてきたことが述べられています。住宅と店舗の改装に加えて、暮らしやすさに配慮した改修や屋外まわりの工事にも応じる姿勢が示されています。
沿革についても触れられていて、開業は平成24年9月、当時の名称は住まい工房タムラでした。株式会社住まい工房としての法人化は平成29年9月と記されています。役員は代表取締役の田村 英明様で、会社の歩みと責任者を同じページで確認できます。住を通じて地域社会の発展に関わりたいという考えも添えられ、事業の背景にある姿勢まで伝わります。
問い合わせまでの導線が上下に用意されています
ページ下部のアクセス区画には、社名と郵便番号、北海道岩見沢市南町9条5丁目5-17という所在地、電話番号がまとめられ、地図へ進むリンクが添えられています。ヘッダーにも同じ電話番号と問い合わせボタンが置かれているため、どの位置まで読み進めていても連絡手段にたどり着けます。
問い合わせページには入力フォームが用意され、必須の項目が印で示されています。送信の前に内容を確認する手順があり、返信が届かない場合の連絡方法まで案内されているので、初めて相談する方でも迷いにくい流れです。フッターには全ページへのリンクが並び、施工実績については下層の各項目まで展開されています。
まとめ：住宅リフォーム会社のサイトづくりで参考になる点
株式会社住まい工房のサイトは、深緑とアイボリーという限られた配色、曲線で統一された輪郭、縦書きを取り入れたコンセプトの見せ方によって、住まいの温かさという主題を最後まで崩さずに表現しています。装飾を足すのではなく、余白と透かしで空気をつくるという判断が、全体の落ち着きにつながっています。
情報設計の面でも、ファーストビューで地域と姿勢を示し、コンセプトと事業案内で考え方を伝え、六枚のカードで対応範囲を見せ、最後に会社情報と連絡先へ着地するという流れが素直です。差し色を問い合わせボタンだけに使い、円形の矢印ボタンで操作を統一する手法は、規模の大きくないコーポレートサイトほど効果を発揮します。
地域に根ざした工事会社のサイトをつくる際の見本として、実際の画面を確認してみてください。岩見沢でリフォームを手がける株式会社住まい工房の公式サイトはこちら
