WORKS

概要

SDエアーメンテナンス様の、新規顧客獲得のためのWebサイトを制作させていただきました。 デザインからコーディング、WordPress化まで行いました。

クライアント

SDエアーメンテナンス様

ターゲット

エアコンクリーニングを依頼したい個人や法人。

情報設計

ユーザーが迷わずサービスをわかりやすく、お問い合わせまでスムーズに進めるよう、シンプルで直感的なナビゲーションを設計しました。

ビジュアルデザイン

清潔感を重視し、爽やかで信頼感のあるカラーリング（白・青・淡い色）で、 視認性を高めるために、余白を意識したレイアウトにしました。 アイコンや画像を活用して、視覚的にわかりやすくなるように意識しました。

担当内容

企画・デザイン・コーディング

制作期間

2.5ヶ月（企画2週間/デザイン3週間/コーディング2週間/WP3週間）

使用ツール

使用言語

1.リサーチ

エアコン業者やハウスクリーニングのWebサイトを調査し、クライアントのニーズに合ったベンチマーク企業を選定しました。

2.ヒアリング

「清潔感と信頼性を重視し、法人の営業ツールとしても活用できるサイトを作りたい」というご要望をもとに、 法人・一般の双方のユーザーに向けたサイト設計を目指し、 ベンチマークサイトをベースにデザインやコンテンツの方向性を打ち合わせました。

3.サイト構成設計

訪問者がどのページにいてもお問い合わせできるよう、CTA（お問い合わせボタン）を固定表示しました。 また、ユーザーに信頼感を持っていただけるように、 シンプルかつ要点を押さえた説明と、視覚的に分かりやすい画像の活用を意識しました。

4.デザイン

清潔感を演出するために、白ベースに青のグラデーションを用いた爽やかなデザインにしました。 トレーナーにキャッチバックをいただきブラッシュアップを行いました。

改善案

・コンテンツ同士の分かれ目が分かりにくい。

・料金表も少し淋しいのでデザインする。

・写真が少ないので施工事例をよくある質問の前に入れてみる。

改善策

・セクションごとに色を分けて分かりやすく。

・料金表を各項目ごとに装飾。

・別ページにしてた施工事例を1ページにいれ、スライダーにしてコンパクトに設計。

5.UI/UX設計

アニメーションを極力抑え、ビジネス向けの落ち着いた雰囲気にしました。

6.コーディング

デザインを元に、HTML/CSSを用いたマークアップを行い、レスポンシブ対応を施しました。 特に、スマートフォンでの快適な閲覧を重視し、法人・一般の双方のユーザーに使いやすい設計を意識しました。 WordPress化するために最後にphp化を行いました。

7.WordPress化

サイトの更新をスムーズに行えるよう、WordPressを導入しました。 管理画面から簡単に情報を更新できるよう、カスタムフィールドを設定し、 専門知識がなくても運用しやすい構成にしています。

意識したポイント

・料金表、施工事例、お知らせを簡単に編集できる仕様にカスタマイズ

・お問い合わせフォームを設置し、新規顧客獲得を促進

・セキュリティ対策を施し、安全に運用できる環境を構築