とまり木様HPの画像

産前産後・女性のからだケアサロン
とまり木 様
実案件

担当範囲
要件整理・ワイヤーフレーム作成・デザイン・コーディング・実装
制作期間
約2ヶ月半
制作ツール
Figma / Photoshop / Visual Studio Code
URL
https://tomarigi-care.com/

ターゲット

産前産後のケアを必要とするママ世代。

目的

当初SNSのみで情報発信を行っており公式サイトがなかったため、さらにサービスの全体像を分かりやすく伝え、信頼性を向上させることを目的に新規サイト制作のご依頼。

実装

HTML / CSS / JavaScriptで構築し、Xサーバーへ直接アップロード。表示速度や軽量性を意識しつつ、シンプルで管理しやすい構成に。

情報設計

  • 1ページでサービスの全体像が把握できるよう、「想い(共感)→ プロフィール(安心感)→ 特徴(強み・興味)→ メニュー(解決策)→ お客様の声(信頼)→ よくあるご質問(不安解消)→ お問い合わせ(行動)」へと自然につながる導線を設計。
  • 必要最小限の情報を取り入れ、さらに詳しい内容はInstagramやnoteで閲覧できるよう、外部リンクボタンを設置。

デザインの意図

  • 「とまり木」というサロンのコンセプトを表現するため、木や鳥といったモチーフを活用し、ナチュラルなベージュとグリーンを基調にしたトーンで統一。
  • あしらいや背景色、写真の形でセクションの見せ方を変え、情報の区切りが分かりやすいよう工夫。
制作過程を見る
ページ全体画像
ページ全体画像