プロジェクト
HAGIホーム・プロデュース様
Webサイトリニューアル
- UIリサーチ＋Webサイト制作
- UXリサーチ＋戦略設計
施工事例を魅力的に紹介し、顧客の興味を高めるUIデザインを実現
DESIGN αでは、見た目のデザインだけでなく、見る人の使いやすさや適切な情報設計を取り入れたWebサイトの提案を行っています。
その一例として、HAGIホーム・プロデュース様のWebサイトリニューアルの事例を紹介いたします。
概要
HAGIホーム・プロデュース様は、岐阜県の垂井町を拠点に、岐阜県中•西部を中心に注文住宅を手掛けています。
このプロジェクトでは、以下の目的とプロセスでWebサイトのリニューアルを進めていく方針となりました。
目的
Webサイトに選りすぐった施工例を印象的に魅せ、HAGIホーム・プロデュース様に深い興味を持ってもらうことで、より高い候補のひとつとして位置づけさせること。
また、これまでに家を建てたオーナー様とのつながりを大切に、今後も守り育てていくこと。
コンセプト
施工例の写真を前面に出した、明るくさわやかなデザインでユーザーの満足度を高めるWebサイト
主な実施内容
・要件定義
・ワイヤーフレーム設計
・デザイン制作
・Webサイト制作
・ブログデザイン / 制作
・運用 / 保守
要件定義
ヒアリングを行い、ターゲットや目的、施策を練りました。
HAGIホーム・プロデュース様では、家を建てたあとのつながりも大切にしています。
お客様の90%が、過去にHAGIホーム・プロデュース様で家を建てたオーナー様からのご紹介であり、サイトでも満足度の高さを伝えていく構成にしました。
従来のサイトはPC用サイトのみでレスポンシブ対応がされていなかったため、今回はスマートフォン用のレイアウトも用意しました。
これまでの強みを活かしつつ、改善ポイントも多く盛り込んだ提案を行いました。
ワイヤーフレーム
ワイヤーフレームを作成することで、サイトの情報がより伝わりやすくなります。
豊富な施工実績をしっかり見せることを目的に、閲覧の順番や導線を意識したレイアウトを設計。
写真や文章を載せることで、実際のサイトのイメージを共有しました。
デザイン制作
ワイヤーフレームを基に、ユーザー視点を重視して、よりブラッシュアップしたデザインを作ります。
デザインではより細やかな配慮を行いました。
■デザインでの再構成
施工実績が見たいユーザーの気持ちに応えるべく、入り口となるHOMEのメインビジュアルから実績を展開。ユーザーの満足度を高めるために、画面いっぱいの良質な写真と、次々と施工例が目に入ってくる連続性が必要と考えました。
■サイトのキーカラー
お客様との会話やコミュニケーションを大切にする考え方や、竣工後の輪も守っていくHAGIホーム・プロデュース様の思いから、明るい印象が良く合うと考え、さわやかなグリーンを採用しました。
■フォントや線の扱い
会社としてしっかりとした印象を与えたく、太めで可読性の高いものを基準に選定しました。尚且つデザイン性にも優れていることも大事にし、細めのフォントをアクセントとして織り交ぜています。
サイトを訪れるユーザーに「もっとたくさん見てみたい」と感じさせるデザインを心がけました。
Webサイト制作
より多くの方に見ていただけるよう、レスポンシブ対応を行いました。
同じPCでも、デスクトップとノートでは画面サイズが異なり、スマートフォンでも様々な画面サイズの機種が存在していたりと、サイト制作には工夫が求められます。
施工実績は、リニューアル前から導入されていた機能を活かしつつ、より見やすいレイアウトに変更しました。
デザインの意図を正確に伝えられるサイトにするために、どんな環境でも正しく表示されるよう、こだわりを持って作成しました。
ブログデザイン / 制作
サイトのリニューアルと同時に、ブログもリニューアルしました。
ブログもサイト同様、要件定義からしっかり行い、機能面を重視したデザインに仕上げました。
カテゴリも設計し、ブログの記事がWebサイトへカテゴリごとに読み込まれるよう連携しました。
ブログを更新すると、Webサイトにも反映されるため、運用しやすい設計になっています。
過去に投稿されていた記事も読んでいただきたいと考え、ひと記事ずつ丁寧に移行作業を行いました。
運用 / 保守
公開後も、関わりは続いていきます。
HAGIホーム・プロデュース様が20周年を迎えられた記念に、20周年の記念ロゴをサイト内に配置しました。
サイトは作って終わりではありません。
定期的なメンテナンスを行うことで、サイトの鮮度を保つことができます。
ご要望に応じて、ページの改修を含めた提案をさせていただくことも多くあります。
リニューアル前後のWebサイト
