MENU
  • 自己紹介・スキル
  • 実績
    • デザイン
    • Web制作・開発
    • ライティング
    • SEO
  • ブログ
  • お問合せ
Yusukeのポートフォリオ
  • 自己紹介・スキル
  • 実績
    • デザイン
    • Web制作・開発
    • ライティング
    • SEO
  • ブログ
  • お問合せ
Yusukeのポートフォリオ
  • 自己紹介・スキル
  • 実績
    • デザイン
    • Web制作・開発
    • ライティング
    • SEO
  • ブログ
  • お問合せ
  1. ホーム
  2. Portfolio
  3. Web
  4. ヘアケア製品公式サイト制作

ヘアケア製品公式サイト制作

2026 1/28
Web
2022年10月13日2026年1月28日

ヘアケア製品を販売するクライアントが、自社製品の認知度不足とオンライン販売の伸び悩みに課題を抱えていた状況を解決しました。

WordPressでブランドの世界観を表現した公式サイトを制作し、SEO対策を徹底実施。「商品名×効果」の主要キーワードでSEO1位を獲得し、月間8,000以上のトラフィック獲得に成功、問い合わせ数が制作前の3.2倍に増加しました。

目次

プロジェクト概要

期間: 2022年1月〜3月
予算: 20万円
業務内容: WordPressでのデザインから制作、SEO対策込み

クライアントの課題

ヘアケア製品を製造・販売するクライアントは、以下の課題を抱えていました。

1. 自社製品の認知度が低い

  • 大手メーカーに埋もれている状況
    ヘアケア市場は大手メーカー(パンテーン、ラックス、ボタニストなど)が強く、中小企業の製品は消費者の目に触れにくい状況。
  • 「どこで買えるのか分からない」という声
    実店舗での販売は一部地域のみで、オンライン販売を強化したいものの、公式サイトが存在せず、Amazonや楽天に頼り切っている状態。

2. ブランドの世界観を伝えられていない

  • ECモールでは差別化が難しい
    Amazonや楽天では、商品画像と説明文だけで差別化するのは困難。
    「なぜこの製品を選ぶべきか」「どんなこだわりがあるのか」を伝える場がない。
  • SNSだけでは情報が埋もれる
    InstagramやTwitterで発信しているものの、投稿がすぐに流れてしまい、体系的に情報を整理して伝えることができていない。

3. オンライン販売の伸び悩み

  • 検索エンジンからの流入がゼロ
    公式サイトがないため、Google検索で「ヘアケア おすすめ」「髪 ダメージ 改善」といったキーワードで検索しても、自社製品が表示されない状況。
  • 広告費ばかりがかさむ
    認知度を上げるためにSNS広告やGoogle広告に頼っていましたが、費用対効果が悪く、広告費が経営を圧迫していた。

実施した施策

1. ブランドの世界観を表現したデザイン設計

ヒアリングとブランド理解

まず、クライアントへの詳細なヒアリングを実施し、ブランドの核となる想いを理解しました。

クライアントのブランドフィロソフィー:

「目にみえる美しさの実感が、自分の存在そのものが持つ美しさに気づくきっかけになる」

このブランドが目指すのは、単なる製品販売ではなく、使う人が日々の生活の中で「今日の自分は美しい」と実感し、それが本物の自信に繋がっていくこと。
忙しい日常で見逃しがちな自分の美しさに気づくための「きっかけ」を提供することでした。

製品コンセプト:

髪は一人ひとりの個性を映し出す美の象徴であり、クライアントが目指したのは、水面が光を受けてきらめくような、みずみずしくツヤめく髪。
日常的に使えるヘアケアアイテムで、髪本来の力を引き出し、ツヤとまとまりのある美髪を実現することが製品の本質でした。

デザインコンセプトの策定

このブランドフィロソフィーを視覚的に表現するため、以下のデザインコンセプトを策定しました。

  • 「美の実感」を視覚化する: 製品を使う体験そのものが美しく、心躍るものであることを伝える
  • 水のきらめきを表現: コンセプトに合わせ、水のきらめき、透明感、みずみずしさをデザインに落とし込む
  • 余白と光の演出: 情報を詰め込みすぎず、光と余白を活かした洗練されたレイアウト
  • 本物の美しさを伝える写真: 過度な加工をせず、製品と髪の本来の美しさが伝わる高品質な写真を使用

デザインの具体的な表現

  • 配色: 透明感のある淡いトーンを基調に、水のきらめきを感じさせる配色
  • タイポグラフィ: エレガントで読みやすいフォントを選定し、ブランドの上質さを表現
  • 写真の使い方: 製品の質感、髪のツヤ、光の反射が伝わる高品質な写真を大きく配置
  • 余白の活かし方: 情報を詰め込まず、見る人が「美しい」と感じられる空間を意識

こだわったポイント

  • ブランドメッセージを言葉で伝える: トップページでブランドフィロソフィーを伝え、製品を選ぶ理由を明確化
  • 「触れるたび、心躍る」体験を演出: サイト全体のUI/UXを通じて、製品を手に取りたくなる感情を喚起

2. WordPress構築とカスタマイズ

機能実装

  • カスタム投稿タイプ: 製品ページ、お客様の声、ヘアケアコラムを通常の投稿とは別に管理
  • カスタムフィールド: 製品名、価格、成分、使用方法、容量などを入力できるフィールドを追加
  • 問い合わせフォーム: Contact Form 7で問い合わせフォームを実装
  • ブログ機能: ヘアケアに関するコラムを発信できる機能を実装

クライアントが自走できる設計

  • 投稿や編集が簡単: WordPressの管理画面から、クライアントが自由に製品情報やブログ記事を追加・編集できるよう設計
  • 操作マニュアルの作成: スクリーンショット付きの操作マニュアルを作成し、納品時にレクチャー

3. SEO対策

キーワード戦略

まず、ターゲットとなるキーワードを選定しました。

  • メインキーワード: 「商品名×効果」(月間検索ボリューム約8,000)
  • サブキーワード: 「髪 ダメージ 改善」「ヘアケア 自然由来」「シャンプー おすすめ 無添加」など

内部SEO対策の実施

  • メタタグ最適化:
    • タイトルタグ:主要キーワードを含め、30文字以内に収める
    • メタディスクリプション:製品の魅力を簡潔に伝え、クリック率を向上
  • 見出しタグ(h1, h2, h3)の最適化:
    • ユーザーが求める情報を見つけやすいよう、論理的な見出し構造を設計
    • キーワードを自然に含める
  • alt属性の最適化:
    • すべての画像に適切なalt属性を設定(例:「自然由来成分配合のヘアケア製品で艶やかな髪に」)
    • 画像検索からの流入も狙う
  • 構造化データ(schema.org)の実装:
    • 製品情報(Product)、レビュー(Review)、FAQ(FAQPage)の構造化データを実装
    • 検索結果にリッチスニペット(星評価、価格など)が表示されるよう設定
  • 内部リンク設計:
    • 関連する製品やブログ記事へのリンクを設置し、ユーザーの回遊率を向上
    • サイト全体の情報構造を最適化
  • ページ速度の最適化:
    • 画像の圧縮、CSSとJavaScriptの最小化
    • モバイルでの表示速度を重視(Core Web Vitalsの改善)
  • モバイルフレンドリー対応:
    • スマホでの閲覧を最優先に設計(レスポンシブデザイン)
    • タップしやすいボタンサイズ、読みやすい文字サイズ

コンテンツSEO

  • ヘアケアコラムの提案:
    • 「髪のダメージを改善する5つの方法」「自然由来シャンプーの選び方」など、ユーザーの悩みに応えるコンテンツを提案
    • クライアントが継続的にコンテンツを発信できるよう、記事テンプレートを作成

4. ユーザー体験(UX)の最適化

購入までの導線設計

  • CTAの最適化: 各ページに「購入はこちら」「詳しく見る」などのCTAボタンを配置
  • 信頼性の向上: お客様の声、使用前後の写真、成分の安全性データなどを掲載
  • FAQ(よくある質問): 「どれくらいで効果が出ますか?」「敏感肌でも使えますか?」など、購入前の不安を解消

成果

1. SEO1位を獲得

「商品名×効果」の主要キーワードでSEO1位を獲得しました。

  • 月間検索ボリューム:約8,000
  • 1位獲得までの期間:約2ヶ月
  • 2位以下の競合(大手メーカー含む)を抑え、安定的に1位をキープ

2. オーガニック検索流入の大幅増加

SEO対策により、広告に頼らない集客を実現しました。

  • サイトへのオーガニック検索流入が、公式サイト立ち上げ前(ゼロ)から月間8,000以上に増加
  • 検索経由での問い合わせ・購入が増加

3. 問い合わせ数が3.2倍に増加

公式サイトを通じた問い合わせ数が、制作前と比べて3.2倍に増加しました(クライアント報告値)。

  • 「製品について詳しく知りたい」という問い合わせが増加
  • 問い合わせ内容も具体的になり、購入に繋がる確率が向上

4. ブランド認知度の向上

  • SNSでの言及が増加: 公式サイトができたことで、SNSで「〇〇の公式サイトを見て購入した」という投稿が増加

5. 広告費の削減

オーガニック検索からの流入が増えたことで、広告費を削減しながらも、問い合わせ・購入数を増やすことに成功しました。

  • 広告費:月30万円 → 月15万円(50%削減)
  • 問い合わせ数:制作前の3.2倍

6. クライアントからの評価

「公式サイトができて、ようやく自社ブランドの世界観を伝えられるようになった。
広告費を削減しながらも売上が伸びているので、本当に感謝しています。」

このプロジェクトで得たスキル・知見

1. ブランディングとWebデザインの融合

単に「きれいなサイト」を作るだけでなく、ブランドの世界観を視覚的に表現し、ユーザーに価値を伝えるデザインの重要性を学びました。

  • ヒアリングを通じて、ブランドの本質を理解する力
  • 配色、フォント、写真の選び方で、ブランドの印象を大きく左右できることを実感
  • 「誰に、何を、どう伝えるか」を明確にすることの重要性

2. SEO対策の実践力と成果創出

内部SEO対策を徹底的に実施し、主要キーワードでSEO1位を獲得した経験は、大きな自信になりました。

  • キーワード戦略の立案力
  • メタタグ、構造化データ、alt属性、見出しタグ、ページ速度など、技術的なSEO対策の実践力
  • 「ユーザーと検索エンジンの両方に評価される設計」の重要性

3. クライアントのビジネス成果にコミットする姿勢

「サイトを作ること」がゴールではなく、「クライアントのビジネス成果を出すこと」がゴールであることを強く実感しました。

  • 問い合わせ数3.2倍、広告費50%削減という具体的な成果を出せたことで、クライアントから深い信頼を得られた
  • 「技術力」だけでなく、「ビジネス理解」も必要であることを学んだ

4. WordPressのカスタマイズ力

クライアントが自走できるよう、投稿・編集が簡単なWordPress設計を実現しました。

  • カスタム投稿タイプ、カスタムフィールドの活用
  • プラグインの選定と設定
  • 操作マニュアルの作成とレクチャー
Web
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • システム開発会社サイトリニューアル+ロゴ制作
  • アンティークコイン販売サイト制作

この記事を書いた人

Yusuke Moriokaのアバター Yusuke Morioka

1992年生、山形県出身。接客業から、未経験独学でシステム開発会社に入社。現在はWeb系フリーランスとしてSEOライター、Web制作、Webデザイン、SEOディレクションなどを軸に幅広く活動中。自身が運営するブログのPV数は年間14万人を超える。温泉と旅行が趣味。

関連記事

  • 企業公式アカウント向けショート動画台本制作
    2025年12月30日
  • デンタル製品LPの制作を担当しました
    2023年5月10日
  • アンティークコイン販売サイト制作
    2022年12月28日
  • システム開発会社サイトリニューアル+ロゴ制作
    2022年9月28日
  • ドーナツ店HPカンプ
    2021年8月5日
  • システム会社HPカンプ
    2021年8月2日
  • ひねりのある”建築会社”トップビュー
    2021年7月26日
  • アンティークテイストHPカンプ
    2021年5月3日

コメント

コメントする コメントをキャンセル

Portfolio
  • CG・ゲーム開発系メディアでの執筆実績
    CG・ゲーム開発系メディアでの執筆実績
  • キャリア・転職系メディアでの執筆実績
    キャリア・転職系メディアでの執筆実績
  • 法人向けビジネス・技術メディアでの執筆実績
    法人向けビジネス・技術メディアでの執筆実績
  • CAD・製造業向け技術メディアでの執筆実績
    CAD・製造業向け技術メディアでの執筆実績
  • AI・データサイエンス系メディアでの執筆実績
    AI・データサイエンス系メディアでの執筆実績
  • AI・資格関連メディアでの執筆実績
    AI・資格関連メディアでの執筆実績
  • 企業公式アカウント向けショート動画台本制作
    企業公式アカウント向けショート動画台本制作
  • Tech Mentor Blog インタビュー記事制作
    Tech Mentor Blog インタビュー記事制作
BLOG
  • 新ブログサイト開設のお知らせ
    新ブログサイト開設のお知らせ 2021年5月29日
  • Illustratorにてアウトラインを作成する方法【文字と線でやり方が異なる】
    Illustratorにてアウトラインを作成する方法【文字と線でやり方が異なる】 2021年5月27日
  • Illustratorでギターのピックを作成する方法
    Illustratorでギターのピックを作成する方法 2021年5月26日
  • 【体験談】27歳IT業界完全未経験者が基本情報技術者試験を受けてボロ負けした話
    【体験談】27歳IT業界完全未経験者が基本情報技術者試験を受けてボロ負けした話 2021年5月23日
  • 断捨離は時短に繋がる【捨てるは一瞬、残すは永遠】
    断捨離は時短に繋がる【捨てるは一瞬、残すは永遠】 2021年5月23日

© Yusukeのポートフォリオ.

目次