名古屋市名東区に拠点を構えるホームプランナーの公式サイトは、住宅リフォームという専門的なテーマを扱いながら、画面から受ける印象がとてもやわらかいところに特徴があります。ベージュと白を土台にした暖色の配色に、手描き風のイラストと猫のマスコットを重ね、初めて訪れた人が身構えずに読み進められる雰囲気をつくっています。
リフォームは完成した姿を事前に確かめにくいため、依頼する側は「イメージどおりに仕上がるだろうか」という不安を抱えたまま会社を探します。このサイトはその心理に対して、写真とイラストの配分、セクションごとの背景の切り替え、カードの並べ方といったデザインの手段で応えています。ここからは、Webサイトを制作する立場から参考になる点を、実際の画面に沿って整理していきます。
暖色とイラストで相談しやすさを形にした全体のトーン
このサイトの印象を決めているのは、色数を絞った暖色の配色と、線の細いイラストの使い方です。住宅設備の写真だけで構成すると説明的になりやすい題材を、色とイラストの力で暮らしの場面へ引き寄せています。まずは全体を貫くトーン＆マナーから見ていきます。
ベージュを土台に、オレンジと黄色を役割で使い分ける配色
背景の多くは彩度を落としたベージュで、その上に白いカードや白に近い面を重ねる構成です。地の色が穏やかなため写真の色味が浮かず、本文の文字も落ち着いて読めます。
強い色はオレンジと黄色のほぼ二色に限られています。オレンジは見出しの帯やナビゲーションの点、アイコンなど「ここを見てほしい」箇所に、黄色は先へ進むボタンやマーカー風の下線など「次の行動」に結びつく箇所に使われており、色そのものが役割を持っています。文字色は黒ではなく濃いブラウンで、背景のベージュと同じ系統にそろえているため、全体がひと続きの世界観として見えます。
セクションごとに背景を切り替えて縦長のページを読み分ける
トップページはかなりの縦長ですが、読んでいて迷いにくいのは区切りの付け方が丁寧だからです。ベージュ、白に近いアイボリー、オレンジのベタ塗りと背景を切り替え、内容を載せる面の上端を大きく丸めることで、章が変わったことを色と形の両方で知らせています。
とくにお客様の声のセクションだけをオレンジ一色にしている点は効果的です。前後の落ち着いた面に挟まれることで自然に視線が止まり、長いページの中間地点に休憩と山場を同時につくり出しています。
ファーストビューは写真と大きな英字コピーの重ね方が見どころ
ファーストビューは、ショールームの内観写真を大きく使いながら、文字が写真に埋もれないよう工夫を重ねています。写真、コピー、キャラクター、ボタンという要素の多さを、余白と重なりの順序で整理している点が参考になります。
角を丸めて抜いた写真と、弧を描く日本語コピー
写真は画面いっぱいに敷かず、四隅を大きく丸めた横長の面として切り抜かれ、周囲にベージュの余白を残しています。角を丸めるだけで硬さが取れ、ページ全体の丸みのある雰囲気と最初からそろいます。
その上には白抜きの日本語コピーが弧を描くように並び、中央に「For Your Peace」という英字が大きく重ねられています。日本語をアーチ状に、英字を水平にと組み方を変えているため、二つのコピーが同じ場所にあっても読み分けられます。写真の下端にはオレンジの帯を敷いた一文が置かれ、担当者が顔の見える形で工事を管理する姿勢と、地域に根ざして仕事をしている立ち位置が短く示されています。
ヘッダーは二段構成でメニューの多さを整理
ヘッダーは上下二段に分かれています。上段には会社概要やお知らせといった補助的な項目を細い区切り線で並べ、下段にサイトの主要な導線を置くことで、項目数が多くても視線が散らかりません。
下段の各項目には小さなオレンジの点が添えられ、リンクの始まりが分かりやすくなっています。右端にはオレンジ色のボタンが独立して配置され、ナビゲーションの文字とは明確に色を変えることで、押せる場所として際立たせています。
ファーストビューの直下に置かれた新着情報の並び
ヒーローのすぐ下には、新着情報の一覧が置かれています。左に黄色い大きな丸を敷いて見出しと一覧ページへのボタンをまとめ、右に横長の白い行を三つ積むという、左右で役割を変えた組み方です。
各行は日付と見出しを横並びにし、右端に丸い矢印のアイコンを添えることで、押せる行であることを示しています。更新の状況を早い位置で見せながらも行の高さを抑えているため、主役であるサービス紹介まで読み手を早く送り届けられます。
知りたい順に積み上げたトップページの情報設計
トップページの並び順は、会社を探している人が疑問を持つ順番に沿っています。会社の姿勢、対応できる工事の範囲、利用した人の反応、施工の記録、来店の案内、そして問い合わせという流れです。ここでは中核となる三つのセクションを取り上げます。
選ばれる理由を三枚のカードに要約したPolicy
会社の考え方を伝えるセクションでは、吹き出し形のラベルと大きな英字見出しを組み合わせ、続けてオレンジの帯に白文字で結論を一行だけ置いています。長い理念文を読ませる前に、要点を一行で受け取れる形になっています。
その下には、番号入りのリボンを付けた三枚のカードが横並びになります。写真、見出し、短い説明という同じ構造をそろえ、見出しには黄色いマーカー風の下線を引いて視線を止めています。一貫管理、職人マナー、地域密着とW保証という三つの柱が、比較しやすい形で並びます。
十種類のリフォームメニューを面で見せるReform
対応できる工事を紹介するセクションは、写真カードを四列のグリッドで並べた構成です。カードごとに写真の上へ白いピル型のラベルを重ね、その下に英語表記を白抜きで添えているため、日本語と英語が競わずに読めます。
扱う範囲は、キッチンや浴室、洗面、トイレといった水まわりから始まります。続いて外壁屋根の塗装や外装、防水など建物の外側を守る工事が並び、さらにサッシ、エクステリア、内装まで顔をそろえています。文章で列挙せずカードの面として見せているため、住まいのどこを相談できるのかが一目で伝わります。カードの下に添えた一行の説明も、工事の名前ではなく暮らしがどう変わるかを語る書き方に統一されています。
タグを添えて探しやすくしたWorks
施工実績のセクションは、仕上がりの写真を中心にしたカードが八件並びます。カードのタイトルは白いピル型のラベルとして写真の下端に重なり、そのすぐ下に黄色い小さなタグが続きます。
タグには戸建やマンションといった建物の種類と、屋根・防水や内装、耐震工事といった工事の種類が入っています。二種類のタグが並ぶことで、読む人は自分の住まいに近い事例を見分けられます。実績を写真の羅列で終わらせず、探すための手がかりを持たせた良い例です。
マスコットと線画イラストが担う視線誘導
このサイトを最も特徴づけているのは、イラストの使い方です。写真だけでは硬くなりがちな住宅リフォームの題材に、線画とキャラクターを差し込むことで、ページ全体の温度が明らかに変わっています。
猫のマスコットが読み進めるリズムをつくる
作業着姿の猫のキャラクターが、ページのあちこちに姿を変えて登場します。ローラーを手にした姿、指を立てて説明する姿、便りを読む姿、頬づえをついてくつろぐ姿と、そのセクションの内容に合わせてポーズが変わります。
登場する位置も工夫されていて、見出しの脇やカードの端にわずかに重なるように置かれています。要素の境目にキャラクターが立つことで次のブロックへ視線が自然に送られ、長いページでも途中で飽きにくくなっています。
線画のイラストが余白と空きスペースを埋める
キャラクター以外にも、細い線で描いた家や木、街灯が並ぶ街並みのイラストがセクションの区切りに敷かれ、施工実績の見出しは左右から家のイラストに挟まれています。写真を使わない場所にも住まいの気配が残るため、話題が途切れません。
とくに感心するのは、リフォームメニューのグリッドで最後の行に空きが生まれた部分の処理です。空白のまま残さず、観葉植物、ソファ、収納棚の線画を置いて面のバランスを取っています。グリッドの割り切れなさを弱点にせず、世界観を伝える余地へ変えている点は参考になります。
見出しとUIパーツに通された共通のルール
細部を見ていくと、見出しやボタンの作り方に一貫した決まりがあることが分かります。ページが長くても散らかって見えないのは、同じ形を繰り返しているからです。
英字の大見出しと字間を広げた日本語の組み合わせ
主要なセクションの見出しは、丸みのある書体で組んだ英単語を大きく置き、その下に日本語を小さく字間を広げて添える形でそろえられています。英字が図形のように働き、日本語が意味を補う役割分担です。
見出しの上には、黄色い短い線を放射状に並べた飾りが共通して置かれています。同じ飾りが繰り返し現れることで、読み手は新しい話題が始まる合図をすぐに覚えられます。
角丸とピル型で統一されたボタンとラベル
ボタンは端を丸めた横長の形で統一され、右側に矢印を入れた丸が添えられています。基本は黄色ですが、お客様の声のセクションだけはオレンジの背景に濃いグレーのボタンを置き、背景に負けないよう色の関係を反転させています。
カードのタイトルや工事の分類に使うラベルも同じ丸みで統一されているため、押せるボタンと押せないラベルが同じ世界の部品として並びます。角の丸みという一つのルールを全体へ通したことが、やわらかい印象を支えています。
ショールーム案内から問い合わせ・フッターまでの締めくくり
ページの後半は、来店を案内するセクションと問い合わせのセクションが続き、最後にフッターへ落ち着きます。どれも情報を並べるだけでなく、写真と色で次の行動を後押しする作りです。
写真を背景に敷いたショールームの案内
ショールームのセクションは、実際の店内写真を画面の幅いっぱいに敷き、その上に白い文字を重ねています。英字を弧を描くように配置し、その下へ引用符で挟んだ大きな日本語を置くことで、写真の情報量に負けない見出しになっています。
写真の手前には白いカードが重なり、来店を案内する文章と黄色いボタンが収まります。カードの右下にはマスコットが頬づえをついて寄り添い、右端には大きな白い英字が画面の外へ流れるように配置されています。文字を意図的に切ることで、写真の奥行きが強調されています。
四つの入口を色で描き分けたお問い合わせ
問い合わせのセクションでは、白いカードが二列二行で並びます。各カードの左には丸いアイコンが置かれ、オレンジ、黄色、濃い青、水色と色が変えられているため、四つの入口が同じ見た目のまま埋もれることがありません。
用意されている入口は、リフォームの相談、資料送付、ショールーム見学予約、その他のお問い合わせの四つです。カードには英語の小見出しと日本語の見出し、どんな人に向いているかを示す一行が添えられ、読む人が自分に合う窓口を選べるようになっています。並びの下には、個人情報の取り扱いを確認できるページへのボタンも置かれています。
濃色のフッターで全体を引き締める
フッターは濃いブラウンの背景に切り替わり、明るい本編との差でページの終わりを示します。左側にロゴと所在地、大きく組んだ電話番号、営業日時の案内を囲んだ枠を置き、右側にサイトマップを列に分けて並べる構成です。
リフォームの分類は二列に折り返してまとめられ、リンクが多くても縦に伸びすぎないよう調整されています。右下にはSNSのアイコンが並び、最下部に著作権表示が控えめに置かれています。
まとめ：名古屋のリフォーム会社サイトのデザイン見本として
ホームプランナーの公式サイトは、暖色の配色、角丸で統一したパーツ、そして猫のマスコットと線画イラストという三つの要素で、住宅リフォームの敷居を下げることに成功しています。写真で仕事の実像を伝えつつ、イラストで気軽さを添えるという役割分担が、最初から最後まで崩れません。
情報設計の面でも、会社の姿勢、対応できる工事、利用した人の声、施工の記録、来店案内、問い合わせという順番が素直で、初めて訪れた人が知りたい順に読み進められます。地域に根ざした住宅リフォーム会社が、専門性と親しみやすさを同時に見せたいときの手本になるサイトです。
配色や写真とイラストの組み合わせ、ボタンの手ざわりは、実際の画面で確かめるとより理解しやすくなります。リフォームの相場が気になる方も、ホームプランナーの公式サイトで施工実績やページ全体の作りをご覧になってみてください。
