Webデザイン
岡山県のおすすめ工務店のホームページ
2021.04.19
塗装業のホームページ制作で参考にしたいWebデザイン9選
Webデザイン
更新日：2021.11.05
公開日：2021.07.26
WEBサイト・ホームページ制作に興味・関心を持っている塗装業者の方は多いのではないでしょうか。ここ最近で広報の常識は目まぐるしく変わりつつあります。従来型の「チラシ」中心の広告の効果は薄れ、インターネット上に情報を発信する方法が主流になっているのです。
「塗装業者」においても、WEBサイト・ホームページの制作が効果的です。しかし、いざ制作しようと思っても何から始めればいいのか分からないのが悩み所。本記事では、塗装業者のWEBサイト・ホームページ制作を数多く行ってきたTRASP株式会社が、塗装業者のホームページのデザインに関するノウハウや参考事例を一挙ご紹介します。
ぜひ最後までお目通しください！
目次
塗装業者のホームページにおけるデザインの重要性
ホームページの「デザイン」と聞くと、見た目を綺麗に整える作業のように聞こえますが、実際はもっと深く考える必要があります。そもそも、何のためにホームページを作るのかを考える…すなわち、ホームページを制作することで達成したい目標を立てることが最優先なのです。
この目標を達成するために必要な導線作りや、ターゲットに刺さる見た目に仕上げることが「デザイン」なのです。ホームページ作り全体の大きな軸になるので、この目標設定は非常に重要なポイントです。
この目標を立てる際のコツは、「数字で測定できる指標を持つ」ことです。何となく目標に向かって進んでいる気でいても、実際は何も好転していない…という事態に陥らないためにも、設定した数字に近づいているかを確認しながらホームページ制作を進めましょう。
例：一人のユーザー（サイト訪問者）が少なくとも3ページは見るサイトを作りたい
数字で測れる目標を設けて、どのようにホームページを作るかを考えることこそが「デザイン」です。以下、定めた目標を達成するためのコツをお伝えしますので、ぜひ参考にしてみてください。
塗装業者ホームページのデザインのために「ターゲット」を明確にする
前項では、ホームページをデザインする前に目標を設定することの大切さについてまとめました。ここからは、「ホームページを誰に見てほしいか」すなわち「ターゲット」の設定について解説します。
ホームページはユーザー（サイト訪問者）へ情報を伝えるために制作します。年齢や性別が違えば、情報の伝え方やデザインの方向性が変わるため、この「ターゲット」設定も慎重に行う必要があります。
以下、「ターゲット」設定のコツを整理しました。
既存のお客様の特性を知る
まずは思い浮かぶペルソナの中から、あなたが得意とするタイプの人をターゲットに設定するのがおすすめです。いちばん簡単なのは、これまで受注した案件を振り返り、どのようなお客さまへの営業が得意なのかを洗い出す方法です。
普段、お客さまに次に必要なものを提案する場面があると思います。ホームページでも同じで、ユーザーが次に欲しい情報にアクセスできるように情報の掲載場所を考えたり、リンクを増やしたりと常に「提案する」気持ちで構成を考えるのがおすすめです。
新しく来てほしいお客様の特性を整理する
普段から接客しているお客様であれば、向き合い方がイメージできるのでデザインに反映させやすいと思います。しかし、多くの目に触れる可能性のあるホームページを制作するのですから、せっかくなら新たな顧客の獲得に繋げたい所です。
既存の顧客をイメージした時と同じように、これから増やしていきたい顧客をイメージしたデザインにも挑戦しましょう。これまで相手にしていない客層だと難しいと思いがちですが、そんな時には他社サイトを参考にしながらデザインを組むのもおすすめです。
どんな人をターゲットに設定するかを決める
既存のお客様と新たに獲得したい客層のイメージが付いたら、次はその両者からメインで集客したいのはどんな人かを決めましょう。「中古住宅を購入した若い夫婦」や「築10年〜経って外壁の塗り替えを検討している人」など、様々なパターンが想定できるので、ご自身の会社が得意とする層やこれからメインの顧客にしていきたい層に設定することをおすすめします。
どんな人でも受け入れる幅広いニーズに答える業者であると伝えたい、と思う方もいると思いますが、ホームページ制作初期はおすすめしません。なぜなら、ライバル業者との差別化が難しいからです。
一つの強みに特化して情報を伝えた方が、その強みとマッチしたニーズを持つお客様が集まりやすいのです。ライバル業者と比較された際も、その分野では負けない！というメッセージがあれば採択される可能性が高まります。
塗装業者ホームページのデザインのために「コンセプト」を設定する
想定したターゲットは、あなた以外の業者のホームページを見る可能性もあります。比較された際に他社にお客様を奪われないように、「あなたのニーズに合ったこんな利点を持つ業者である」とひと目で分かるデザインが求められます。
「ひと目で分かる」を実現するためには、「私たち、こんな塗装業者です！」と一言で伝える言葉を作ることが効果的です。すなわち「コンセプト」を作るのです。自社の強みや特徴を一言で表現できればそのままキャッチコピーに落とし込むこともできます。また、デザインの方向性に悩んだ時の道標になります。
そもそもコンセプトとは
「コンセプト」は、日本語に直すと概念・発想・構想などの意味を持ちます。「テーマ」とは少し異なり、目標を持って制作を行う際の軸となる考え方のような役割を持ちます。先程お伝えした通り、コピーやデザインの方向性の道標として機能するので必ず設定しておきましょう。
コンセプトを設定する方法
コンセプトを設定するには、まず現状の姿と、これから変わっていきたい理想の姿を言葉で書き出しましょう。この両方を書き出すと、「今後も守っていきたい部分」と、「変わらなければならない部分」が出てくるはずです。また、この2つに加えて「お客様が求めているであろう姿」も想像してみましょう。
これらの拮抗する要素を「MUST（必ず）」と「BETTER（できれば）」に分けるのです。要素を洗い出すと、変わらず守らないと成り立たない要素もあれば、実はそこまでこだわる必要のない要素の差が見え始めます。最終的に削りきれなくなった要素を繋ぎ合わせればコンセプトができあがるはずです。
例：
「現状の姿」：地域に根差した運営、近隣地域の口コミで広がる
「理想の姿」：もっと広い地域から集客、塗装と言ったら私たちという認識が広がる
「お客様が求めているであろう姿」：料金体系が明瞭で安価、安心できる施工
という3つの姿が見えたら…
「今後も守りたい」
地域に根差した運営、料金体系が明瞭、安心できる施工
「変わる必要がある」
「口コミで広がる」から「広い地域から集客」へ、塗装と言ったら私たちという認識が広がる、安価
という2軸で捉え直す。
その後
「MUST（必ず）」
地域に根差した運営、塗装と言ったら私たちという認識が広がる、料金体系が明瞭、安心できる施工（地域に根差した運営を中心に、明瞭なプランと実績で「この地域なら私たち」ブランドを作りたい）
「BETTER（できれば）」
「口コミで広がる」から「広い地域から集客」へ（理想的ではあるが、まずは地域に根差した運営をしたい）
といった観点から「真に」大事にしたい軸を決めます。
この、「MUST」要素が集まって生まれた「地域に根差した運営を中心に、明瞭なプランと実績で”「この地域なら私たち”という」ブランドを作りたい」こそがコンセプトに近いフレーズなのです。
あくまで一例ですので、ぜひご自身の「現状」と「理想」を振り返りコンセプトを打ち立ててみてください。
塗装業者ホームページのデザインで気を付けるべきポイント
塗装業者と分かる画像をトップに
様々なサイトを閲覧すればお分かりの通り、何の情報を伝えるサイトなのかがひと目で分かるサイトの方がユーザーに対して親切です。
飲食店を探して開いたサイトのトップ画像が東京の街並みの写真だとイメージが湧きません。逆に、東京で賃貸を探すサイトのトップ画像がラーメンの写真では信頼できるサイトというイメージが伝わりません。
トップ画像はサイトの顔です。よい第一印象を作るためにこだわりを持って設定しましょう。
画像だけでなくキャッチコピーも用意したい
画像に合わせて、キャッチコピーを作成することもおすすめします。コピーライティングは専門ではないから難しいと感じる方もいらっしゃると思いますが、まっすぐな言葉で書けば問題ありません。
逆に、言い回しにこだわって作るコピーは、時に真意が伝わらず逆効果となる場合があります。ポエムのような「雰囲気コピー」に仕上がってしまうよりは、ありのままの言葉を添えた方が効果は高いのです。先程ご紹介したコンセプトを、そのままキャッチコピーとして仮置きするのもおすすめです。
ホームページの配色にも注意
デザイントーンだけではなく、全体を整える配色にもこだわりましょう。背景と文字色の組み合わせによっては見づらいサイトになってしまうなど、デザイン性だけでなく見やすさにも気を付けてください。おすすめの色の組み合わせを紹介している書籍やサイトもあるので、参考にしながら進めるとよいでしょう。
スマホに対応したデザインがおすすめ
多くの人がWEBサイト・ホームページをスマホで見ています。従来のようにPCだけを想定してサイトを作るのではなく、PCとスマホ両方に対応できるレスポンシブなデザインにしましょう。ワードプレス制作の場合は対応したテーマを使えば実装できますが、より綺麗なデザインを作る場合は専門のWEB業者に依頼した方が納得の仕上がりが実現できます。
SEO対策も取り入れよう
検索窓にキーワードを打ち込んでサイトを探す「オーガニック検索」で優先的に表示されるためには、グーグルのアルゴリズムに基いたSEO対策が必要です。ユーザーがよく使うキーワードを想定した記事を作成することで、より検索に引っかかりやすいサイト作成を目指すことも効果的です。
集客力があがる塗装業者のホームページ制作を目指すなら、以下の記事もあわせてご覧ください。
塗装業者が参考にしたいホームページデザイン９選
ここからは参考にしたいホームページデザインの一例をご紹介します。ぜひ、あなたのサイト制作の参考にしてみてください。
こんなデザインがおすすめ「ほっこり編」
「ほっこり」としたデザインは、読み手に安心感を与え信頼に繋げます。「安心・安全のリフォーム」「まずは無料相談からご相談ください」などのコピーと組み合わせて、柔らかな印象を作り上げることができます。
「ADLOOP合同会社（アドループ）」ホームページ
工事の種類を写真と一緒に紹介しており、どのような時にどのような工事が必要なのかが一目瞭然です。それぞれの施工に関する詳細についても、「ベテランの職人が」「特許取得済の技術で」といった強みを押し出すコピーが添えられており、ユーザーの不安を解消できるコンテンツになっています。
特筆すべきは、「施工動画」です。サイトマップから移動できるページに「塗装の話をしよう！」という動画コンテンツがまとめられています。今後追加していくことも可能な「継続的なコンテンツ」と言えるでしょう。
現在更新はストップされているようですが、「News」ページも用意されています。常に最新の情報を提供するための仕組みとして優れたポイントが多く、ぜひ参考にしたいサイトです。
「Rwwall -リウォール-」ホームページ
パステルカラーで統一された、温かみのあるあたたかな雰囲気のサイトです。トップページにいくつかの画像が流れる形で作成されています。その画像の中に人の姿が見えるのも印象的です。それぞれの項目に入るサムネイル画像にも写真が入っており、「人」が感じられるデザインに整えられています。
また、下部のリンクから飛べる職人紹介のページもポイントです。職人を写真とともに紹介しており、こちらでも「人」の姿が見えるサイト作りが意識されています。よくある質問も同じページにまとめられているなど、ユーザーに寄り添ったホームページとして参考にしたいポイント満載です。
電話やLINE見積もりへのアクセスが分かりやすいので、顧客の獲得にもつながりやすいでしょう。このようなユーザー目線の導線作りにも注目したいですね。
「理建」ホームページ
愛知県の工務店「理建」のホームページです。一般住宅やマンションをは店舗改装などのリフォームを行う工務店です。
メインのトップ画像は自動的で切り替わる設計になっています。家族の笑顔が見えるデザインで、ユーザーにあたたかな家庭を築く家づくりのイメージを持たせることができいます。画像ごとにキャッチコピーも変えられており、ファミリー世代や二世帯で暮らす家族の不安解消に繋がる効果が期待できます。
ターゲットごとにカラーリングを変更しているのもポイントです。業務内容の一覧で、幅広い世代に必要なリフォームにはさわやかな青を基調とした色を、バリアフリーリフォームにはベージュ系の落ち着いた色を使うなど、ほっこりとした雰囲気作りのためのにデザインにをこだわっているのも注目したいところ所です。
こんなデザインがおすすめ「クール編」
スマートな印象を与える「クール」なデザインは、洗練された施工技術が強みの業者さんにぴったりです。スマートな印象を与え、「スムーズな進行」「納得の施工」などのコピーとが相性がいいでしょう。クオリティの高さを重視する読み手に刺さるホームページなら、「クール」がおすすめです。
「濱野工業株式会社」ホームページ
黒を基調としたデザインが特徴的なサイトです。クールなデザインで言葉数を押さえながらも伝えるべき所は正確に伝えているので見やすい作りになっています。
修理の事例を「板金施工事例」「屋根・外壁・リフォーム事例」「落雪ストップ施工事例」などの症例ごとにまとめているので、「悩み」をキーワードに検索して辿り着いたユーザーへ親切新設な作りと言えるでしょう。
トップページで「お知らせ」という形で最新情報を紹介しており、「継続したコンテンツ」も十分にカバーできています。「過去の工事の解説」では実際の施工事例を紹介しているので、これから工事を依頼する方の参考資料としても機能するでしょう。
「株式会社松下組」ホームページ
敢えて顔を映さない角度での撮影を行うなど、職人をかっこよく見せることに特化したトップページがポイントです。クールな雰囲気から洗練されたデザインを行う業者であることをイメージさせます。
下部へスクロールすると、ポップながらも全体の雰囲気を壊さない企画コンテンツが並んでいます。人の姿を見せることを意識しながらもクールな印象は崩さないバランスが絶妙です。職人紹介のコピーも白地にゴシックフォントで締まった印象を与えるなどこだわりが見えます。
「株式会社MIYOSHI」ホームページ
岐阜の家作りを支える「株式会社MIYOSHI」のホームページです。動画をメインビジュアルに使用しており、サイトに飛んだユーザーに自然と見入らせる作りになっています。見出しを明朝体にすることで洗練された印象を与えながらも、本文はゴシック体で読みやすさに特化させているのもポイントです。
スクロールに合わせて各項目がスライドする仕組みもユーザーを飽きさせないアクセントになっています。下部には新たな情報が更新されるコンテンツも用意されており、SEO対策にもこだわりが見えます。
細かい点ですが、スマートフォン表示でハンバーガーメニューを引き出した際の、青色背景の後ろにサイトが透ける見え方もクールです。
こんなデザインがおすすめ「ギラギラ編」
「ギラギラ」なデザインは、情報を素早く視覚的に伝えられるのが特徴的です。「〇〇万円で施工可能！」「最短〇〇で解決！」など具体的な数字を示すデザインに合っています。打ち出したい強みが明らかで、早くフォームやお問い合わせに繋ぎたい場合に選択しましょう。
「Terra Reform株式会社『クイック屋根工事』」サイト
「クイック屋根工事」は、屋根修理業者の情報を集めたエージェントサイトのような作りをしています。TOPページは雰囲気を伝えるというより、料金などの情報が素早く伝わるデザインになっています。「即日対応！」「10000件以上」「資格保有者」など、押したい内容が目に入りやすい一方で、「ほっこり」「クール」といった雰囲気作りとの両立が難しいので、目的に応じて選択する必要があります。
ユーザーの漠然とした不安を具体的な言葉にしたコピーが多いので、すべての文章をじっくり読んでくれるユーザーは問い合わせに繋がりやすいでしょう。コンテンツの量が多くなりがちなので、下部の「修理・工事について」の項目のように丁寧にカテゴリ分けを行うのも効果的です。
「株式会社ルクア」サイト
トップページには写真を配置し、ほっこりとした印象を受けるのですが、下部にスクロールするにつれて具体的な数字が大きく表示される作りになっています。
「安心&満足度No.1」という表記や、「完全オーダーメイド」などのコピーを大きめに配置することでユーザーのニーズに直感的に訴えるデザインが印象的です。会社概要などの文字数が多くなってしまう要素は、下部にまとめることで、前半に文字を並べてもうるさくない構成にしているのもポイントと言えるでしょう。
コピーはギラギラ系に分類されますが、その中でもほっこり系・クール系のいい所を採用して構築されているので、ぜひ参考にしたいサイトです。
「弥栄塗装」サイト
クールな見た目に整えながらも、トップページに費用などの直接的な情報を掲載する作りになっています。
下部にスクロールすると各コンテンツが並んでいるのですが、必ず費用と工期の情報がまとめられています。ユーザーのニーズを満たすのが早ければ、それだけ受注に繋がる可能性も高まるのでおすすめです。各所に散りばめられたコピーの色やフォントは落ち着いていますが、「低価格」「最新」など直感的に分かりやすい言葉選びが意識されています。
デザインとコピーのバランスを取りながら、「うるさくないけどギラギラ系」といういい所取りを実現したサイトと言えるでしょう。
まとめ
今回は、「塗装業者がホームページ制作で気を付けるべき点とは？」についてご紹介しました。
集客や直請けの仕事を受けることを目的にしたホームページ制作のために、どのような人たちがターゲットになるか、どのようなコンテンツやデザインが必要になるかを丁寧に押さえることが大切です。解説した内容を参考にしながら、ホームページを制作してみてください！
TRASP株式会社は「塗装業者」をはじめ、建設業界におけるホームページ制作の実績が豊富です。業界のトレンドや顧客のニーズを踏まえて、高い集客力を持つ最適なサイトを制作します！ぜひ一度、お気軽にお問い合わせください。
お問い合わせはこちら
