アクセシビリティ重視のウェブ制作

チャコウェブ

株式会社CyberCats

受付時間:9:00~17:00(月曜日~金曜日)

中小企業のホームページ制作で事業の価値を引き出します。良いホームページの作り方や運営の方法、集客に役立つヒントをお届けします。

【発信させるホームページを使ってWEB集客をしましょう】千葉県千葉市の外壁塗装会社ホームページ制作事例

千葉県千葉市の外壁塗装会社のホームページ制作事例をご紹介します。

サイトはこちらからご覧ください。

【制作内容】
・オリジナルデザイン制作
・スマートフォン / タブレット対応レスポンシブデザイン
・WordPress搭載
・オウンドメディア搭載
・常時SSL対応
・ファビコン対応

今回の事例はオリジナルデザインコースでの制作でした。
本コースでは、高品質なデザインをお客さまお一人お一人にオリジナルで作成するだけではなく、制作目的に合わせた細やかなデザインが可能なことが特徴です。

例えば病院でも、先生は患者さまお一人お一人を見て診療しますね。
それと同じで、「ホームページを作る」といっても、その背景や目的などはお客さまお一人お一人で全く違うものです。

誰もがホームページを持つことが出来るようになった今では、「かっこいい・インパクトあるデザイン」だけでホームページから集客出来る時代は終わりました。
ホームページを作る目的を明確化し、「売れる」ホームページを持たないと勝ち残ってはいけません。

この記事ではデザイン制作にあたり注意した点、気をつけた点などをご紹介していきます。

キャッチフレーズを確実に読ませる。

今回のお客さまの事業では、「地域密着の企業であること」がキャッチフレーズとして最重要でした。
そのため、トップページの一番最初に目に入ってくる文字は、背景にある画像の中に埋もれないようにし、誰もが絶対に読めるキャッチフレーズにしてあります。

キャッチフレーズを確実に読ませる。

過去の記事でも紹介していますが、画像と文字を上手に組み合わせることによって、デザイン性が高まりインパクトが出ます。その結果、サイトを初めて見た時に強い印象を残すことが出来るのですが、文字(情報)が読みにくくなってしまう事だけは避けたいところです。

 

今回の事例のように画像と文字を完全に分離させずに、うまく合成する方法として、例えば以下のようなものが挙げられます。

背景に透過をひく

背景に透過をひく

一番簡単な方法でしょうか。 写真と文字がはっきりしなくて読みにくい場合は、文字の後ろに透過で白を入れる方法があります。

大事なのは、「ちょうどよい透過具合」を意識します。濃すぎても薄すぎてもいけません。

背景写真を暗くする

背景写真を暗くする

背景写真よりも上にある文字情報のほうが重要度は高めです。 そのため、背景の写真を暗くして、さらに文字を明るくして両者のコントラストを強めに出しましょう。

ただし、背景が「何の写真なのか」が分かる程度を常に意識しましょう。

 

その他色々な方法が考えられますが、文字数や写真の色など素材によって対応方法はケースバイケースと言えます。 臨機応変に対応していくことが重要です。

 

フォントで一工夫する。

お客さまが用意したロゴマークの文字が柔らかいフォントでしたので、
・統一感を出す
・地域密着事業の親密感を出す

ために、アルファベットと電話番号の数字は丸みのあるフォントを使用しています。

メインの文字は読みやすいゴシック系を採用し、ワンポイントとして柔らかいフォントを利用しています。

フォントで一工夫する。

一般的に、パンフレットや名刺などの紙媒体で使えるフォントよりも、ホームページなどのWEBで使えるフォントのほうが選択肢は少なく、おそらくほとんどのホームページがゴシック体に近いフォントを利用していると思います。

そこには理由があり、紙媒体の情報よりも、WEBでの情報は流し読みされやすいため、ホームページの文章を読むにあたり、可読性の高さはとても重要な要素であるからです。

読みづらいフォントや、華美なフォントを多用したホームページでは、ユーザーが文字を読むことに疲れてしまい、ページから離脱してしまう危険性がありますので要注意です。

 

アイコンを適時利用し分かりやすくする。

アイコンを適時利用し分かりやすくする。

サービス内容を紹介するページでは画像が少なく、文字が中心のページでした。

文字が中心のページですとどうしてもユーザーは瞬間的に情報を読み解くことが難しくなりますので、アイコン・マークを利用して文字だけの単調なコンテンツにならないよう工夫をしてあります。

 

WordPressのブログを内容によって2つに分ける。

今回の制作事例では、WordPressのブログ投稿機能を利用して、
・施工事例
・お客様の声
の2つのカテゴリーをお客さまが更新しやすいように設計しました。

施工事例とお客様の声の2つのカテゴリーを1つのブログデザインで共用する方法も考えられましたが、施工事例とお客様の声では内容があまりに違いすぎるため、それぞれのデザインを用意し、お客さまが使いやすいよう配慮しました。

【お客さまの声のページデザイン】
【お客さまの声のページデザイン】

【施工事例のページデザイン】
【施工事例のページデザイン】

 

発信・成長させるホームページを持ちましょう。

いかがでしたでしょうか?

塗装業のホームページの場合、事業内容や料金説明などを入れておけば名刺代わりのホームページとしては充分と言えますが、数多くある競合他社とオンライン上で競い合っていくにはそれだけでは不充分です。

WEBで集客を考えるのであれば、事業内容や料金などの固定の情報だけではなく、実際の事例やお客さまの声などの、こちらから発信していけるようなホームページを持ち、こうしている今もインターネットで業者を探しているユーザーにあなたのホームページが届く「仕掛け」をしていきましょう。


          この記事を書いた人        
ヤマ編集長
株式会社Cyber Cats ブログ編集長。ウェブディレクター、コンテンツ発信サポーター
ブログを9年間運用してきた経験から実践的なアドバイスを得意とし、コンテンツ発信を活用して企業の価値を高めるサポートをしています。
400件を超える中小企業のホームページ制作に関わり、SEO、コンテンツマーケティング、ライティングの知識を使ったコンテンツ制作で利益につなげる制作ディレクションと利益獲得のアドバイスをしてきました。
ウェブの情報発信力を存分に活用する考え方を基礎からお伝えし、運用能力を身につけていただくお手伝いをしています。
詳しいプロフィールはこちらから
ヤマ編集長のXはこちら
SNSでフォローする