概要
ウッドデッキを専門施工する「WoodGangWorks」のサイト。本業は植木職人だが、植木屋のイメージは控えてウッドデッキを中心にブランディングをしたいとの要望。ライフスタイルに合わせて自由に楽しむウッドデッキをテーマにデザイン。
課題
- 既存サイトは植木屋のイメージが強く建築系人員の募集に至らない。
- 同業他社ではSNSから採用に至ることがあり、サイトとSNSをうまく連携させて採用に至るようにしたい。
- 施主のニーズに合わせ自由にウッドデッキを提案できることを強みとして伝えたい。
- 代表・従業員を身近に感じてもらえるようなフレンドリーなサイトにしたい。
- 同業他社ではSNSから採用に至ることがあり、サイトとSNSをうまく連携させて採用に至るようにしたい。
- 施主のニーズに合わせ自由にウッドデッキを提案できることを強みとして伝えたい。
- 代表・従業員を身近に感じてもらえるようなフレンドリーなサイトにしたい。
ターゲット
- ウッドデッキを検討している人
- ある程度予算をかけても欲しい空間を実現したい人
- 自分のスタイルを明確に持っている人
- ある程度予算をかけても欲しい空間を実現したい人
- 自分のスタイルを明確に持っている人
解決策
- メインビジュアルでウッドデッキのスタイルを複数提示することで、使用イメージを限定しない自由なウッドデッキを提案できるようにした。
- 選ばれる理由と施工実績で信頼をえて、注文の流れやFAQで不安感を払拭、コラムとプロフィールで親近感を感じてもらえるようにした。
- 配色はユニフォームカラーのベージュにオレンジをアクセントとしてメリハリをつけた。
- 操作できる部位が直感的にわかる方に、ボタン・アイコンのデザイン・ホバーアクションを統一。
- GSAPを使用してメインビジュアルに大きなアニメーションを設置。ページ内の要素はスクロールに連動してフェードインする。
- 施工事例・コラムは記事投稿画面から自動でSNS(Instagram/Pinterest)に投稿。手間をかけずにSNSとホームページを連携させる。
- ホームページコンテンツはWordPressのカスタムフィールドを使用して、コンテンツの追加・削除を容易に行えるようにした。
- 選ばれる理由と施工実績で信頼をえて、注文の流れやFAQで不安感を払拭、コラムとプロフィールで親近感を感じてもらえるようにした。
- 配色はユニフォームカラーのベージュにオレンジをアクセントとしてメリハリをつけた。
- 操作できる部位が直感的にわかる方に、ボタン・アイコンのデザイン・ホバーアクションを統一。
- GSAPを使用してメインビジュアルに大きなアニメーションを設置。ページ内の要素はスクロールに連動してフェードインする。
- 施工事例・コラムは記事投稿画面から自動でSNS(Instagram/Pinterest)に投稿。手間をかけずにSNSとホームページを連携させる。
- ホームページコンテンツはWordPressのカスタムフィールドを使用して、コンテンツの追加・削除を容易に行えるようにした。
制作期間
デザイン:1週間 / コーディング:1週間 / CMS実装:1週間
使用技術
WordPress, JavaScript, html, css, GSAP
完成イメージ
PC
SP