メイン画像の右部がjQueryで変化する、シャープなデザインが特徴の株式会社ビーアイシー様運営 Re:FUROworksサイトをご紹介。
既存のお風呂を大掛かりに入れ替えたり、新たに導入することなく新品同様に再生可能な浴槽リフォームを独自に行っており、その画期的な工法を訴求するホームページです。浴槽/水まわり設備に対する施工ということで、水を連想させるブルーの色調を調整しながらサイト全体のデザインを行っています。
一般的なリフォーム・建設業のホームページの場合、明るくポップな雰囲気が多いため、敢えて少しクールな印象となるよう意図的にメインコンテンツの形状をシャープにし、サブカラーとして濃淡のグレーも取り入れました。
浴槽リフォーム専門 ホームページ制作実績:Re:FUROworksサイト
デザイン面と訴求力面の工夫
全体的なカラーリングやコンテンツはCoolなビジュアルとなっていますが、サイトロゴが可愛らしさも感じるような浴槽を連想させるデザインのため、最終的にバランス良く仕上がっています。浴槽を改修することをメインとしたホームページということもあり、浴室・ユニットバスの画像が多いものの、写真が主張し過ぎることなく掲載文面にもサイト訪問者の目がいくよう制作。
TEXT文は浴槽リフォームを検討している人に対し、ダイレクトに強いメッセージを届けられるような表現を意識しました。TOPメイン画像では「ユニットバス交換の半額以下」「1~3日程度の短期間」「廃材が少なく済む」といった明確な伝えたい内容部分へ黄色の下線を引き、他よりも目立たせています。
太めのマーカー線を加えることによってターゲットユーザーの関心を引き、そのコンテンツへの注目度を高めることができます。画像・文面がjQueryで切り替わっても、文字の始まりを揃えることで違和感のないよう配慮しました。
またキャッチコピーやメッセージ部分に敢えて適度な余白を残すことで、仕上がりが綺麗になります。それぞれの切替え画像に対し「コスト削減!」「短納期実現!」「環境の保全!」といった一言を菱形の装飾で配置し、よりオシャレ感をアップさせています。
多くの特徴をいかにシャープにデザインするか
トップページ中段では”Re:FUROworksが選ばれる理由”として、8つの特徴を挙げています。8つのポイントを上から順にレイアウトした場合、どうしても単調で面白味のないコンテンツになるので、こちらも見せ方を工夫しました。
右上から左下へと下っていくような傾斜デザインを大胆に取り入れ、スタイリッシュ感をうまく表現できるようデザイン。こちらの項目はメッセージ性よりも、デザイン面でのメリハリへ重きを置いています。
ページ後半ではサイト更新情報やブログ・施工事例の掲載情報などを知らせる、新着情報コンテンツが3つ並んでいますが、同様にシンプル且つスタイリッシュなデザインを重視しました。
ユーザーへ伝えたい内容や掲載ボリュームが多い場合、各コンテンツのデザイン的統一感へ配慮しつつ、雑多な印象とならないよう、うまく余白スペース/装飾レイヤーを活用して制作を行うことが大切です。
【今回の記事の執筆者】
カスタマーサポート部/チームリーダー webディレクター:渡邉 真帆
建設業/製造業を中心に300以上のホームページ制作の経験を積む。ディレクション時、クライアントから「事業の強み/差別化のPOINT」を引き出すことが得意。
日々IT・PCに関するリテラシー向上に努め、Webのことは勿論、お客様の多様なお困りごとを解決。エグゼクティブクリエイションの中でも特に顧客満足度の高いディレクター。
社内では癒し系なものの、クライアントとの打ち合わせ時のキリッと具合は別人のよう。
得意なこと:アクティブリスニングと笑顔 苦手なこと:料理と口喧嘩
---------------------------------------------------------------
新規ホームページ制作なら
東京のエグゼクティブクリエイションへ
---------------------------------------------------------------
◇Web制作や運営保守に関するご相談はこちらから
TEL: 03-5839-2512
FAX: 03-5839-2513
≫ホームページ制作 のエグゼクティブクリエイションTOPページ