こんにちは。福岡のホームページ制作会社《アドファクトリーハーツ》です。
愛知県豊田市で2店舗のヘアサロンを展開する株式会社aSPIRE様のコーポレート&サロンホームページを制作いたしました。
「ヘアサロンのこれからをつくる」というビジョンのもと、独立を目指す美容師や、効率的なサロン経営を実現したいオーナー様に向けた情報発信と、来店を促進するサロン紹介を両立させたホームページです。
企業理念とサロンの魅力を効果的に伝えるデザインと、ユーザーの目的に応じた導線設計により、ブランドイメージの向上と集客力の強化を実現しました。
新規サービス立ち上げにあたり、ブランドの世界観をしっかり伝えつつ、体験予約やお問い合わせにつながる導線設計を重視しています。
目次
1. ホームページ新規制作の基本情報とプロジェクト概要
- クライアント
- 株式会社 aSPIRE様(愛知県豊田市)
- 業種
- 美容・理容業
- ご依頼内容
- ホームページ新規制作
- 制作期間・規模
- 2〜3ヶ月
- 担当スタッフ
- ディレクター:池田
デザイナー:古田・迫田
コーダー:大久保
2. 制作をご依頼いただいた背景と目的
aSPIRE様は、ヘアサロン業界が抱える課題解決に取り組む企業です。「Hair Concierge Angie」「hairmake Liko」という2つのサロンを運営しながら、独立を目指す美容師や効率的なサロン経営を実現したいオーナー様をサポートする事業も展開されています。
事業の拡大に伴い、企業としての情報発信基盤を確立する必要性から、ホームページの新規制作をご依頼いただきました。新規制作にあたり、以下のような要望・課題がありました。
- 企業としての理念・ビジョンを明確に発信したい
- 2つのサロンそれぞれの魅力を効果的に伝えたい
- スマートフォンユーザーにも使いやすいサイトにしたい
- 採用活動を強化し、共感する人材を獲得したい
3. 課題解決のための提案内容とデザインアプローチ
異なるターゲットに向けた情報を整理し、明確な導線を設計しました。
情報設計
トップページの役割を明確化
- 企業コンセプトを冒頭で印象的に提示
- 「サロン利用者」「求職者」それぞれの入口を明確に配置
- 各サロンへの導線を分かりやすく設計
サロンごとの独立したページ構成
- Angie、Likoそれぞれに専用ページを用意
- サロンの雰囲気、スタッフ、営業情報を充実
- 電話予約への導線を最適化
デザインコンセプト
信頼感と親しみやすさの両立
業界のプロフェッショナルでありながら、お客様にとって身近で温かいサロンであることを表現するため、以下の方針でデザインしました。
- 明るく開放的なビジュアル – サロンの実際の写真を効果的に配置し、空間の雰囲気を伝える
- 読みやすいタイポグラフィ – 情報量が多くても疲れない、適切な文字サイズと行間
- 洗練されたカラースキーム – ブランドカラーを基調とした、落ち着きと清潔感のある配色
- 余白を活かしたレイアウト – 情報を詰め込みすぎず、呼吸感のあるデザイン
4. ホームページ新規制作の内容と成果
- 成果物:愛知県豊田市の美容院「Angie」様のホームページ
- CMS:WordPress
- 全7ページ構成(TOP・コンセプト・各サロンページ・リクルート・お問い合わせ)
制作後の成果
制作後、以下のような成果が得られました。
- サイト滞在時間の向上 – 情報設計の改善により、訪問者が複数ページを閲覧
- ブランドイメージの向上 – 洗練されたデザインにより、企業としての信頼感が向上
5. 制作の流れ
-
ヒアリング・コンセプト設計
まず初めに、aSPIRE様の企業理念や事業内容について丁寧にヒアリングを行い、ターゲットユーザーの明確化と必要機能の洗い出しを実施しました。競合サイトの分析も併せて行い、プロジェクトの方向性を定めました。 -
サイト構成・ワイヤーフレーム設計
次に、サイト全体の情報設計を行い、サイトマップと各ページの構成案を作成しました。ユーザーが迷わず目的の情報にたどり着けるよう導線を設計し、ワイヤーフレームで構造を確認しながら、クライアント様と認識をすり合わせていきました。 -
デザイン制作
情報設計が固まった後は、デザイン制作に入りました。トップページのデザインから着手し、aSPIRE様のブランドイメージを視覚的に表現することを重視しました。トップページの方向性が確定した後、下層ページへとデザインを展開し、レスポンシブデザインも含めて修正とブラッシュアップを重ねました。 -
コーディング・実装
デザインの承認後、HTML、CSS、JavaScriptを用いたコーディング作業に移りました。レスポンシブ対応やアニメーション実装、お問い合わせフォームの構築、WordPressの実装など、デザインを忠実に再現しながら機能面も充実させていきました。 -
テスト・公開
コーディング完了後は、複数のブラウザやデバイスでの表示・動作確認を行い、表示速度の最適化や細部の調整を実施しました。問題がないことを確認した上で、サーバー設定と公開作業を行いました。
6. クライアント様のご感想
「私たちの想いやビジョンを、とても丁寧に汲み取っていただきました。ヘアサロンという業界の特性や、私たちが目指している『業界の仲間をサポートする』という想いを、デザインとして形にしていただけたことに感謝しています。— 株式会社aSPIRE ご担当者様
7. 使用技術・ツール・対応環境一覧
- CMS
- WordPress
- デザインツール
- Adobe XD、Illustrator、Photoshop
- 対応デバイス
- スマートフォン、タブレット、PC
- 特別な実装
- アニメーション
視線誘導デザイン
管理画面カスタマイズ(お知らせ投稿の簡易化)
お問い合わせフォーム
8. その他のホームページ新規制作・リニューアル事例はこちら
アドファクトリーハーツでは、制作後の運用・集客までを見据えたホームページ運用施策をご提案しています。
本事例が、ホームページ制作をご検討中の方の参考となれば幸いです。
撮影・制作・運用を一貫してご提供できますので、ぜひお気軽にお問い合わせください。

弊社アドファクトリーハーツは、
九州・福岡市にあるデザイン会社です。
DTP・イラスト作成・ホームページ制作・
動画撮影/編集・写真撮影など
様々なコンテンツ制作が可能です。
「コンテンツ制作をしたいが、
どう進めていいかわからない」
「大体の金額だけ知りたい」など
お客様のお悩みをぜひお聞かせください♪