Story HPストーリーHPプロジェクトAI仕組みラボのホームページ制作
2026.10.29 / 制作事例

片づけと麹料理をつなぐ|ブルー・フラワー制作事例

片づけの訪問サポート、学びの講座、麹料理教室。 広がる仕事を、どんな順番で知ってもらうか。

ブルー・フラワーの菅原康子さんのホームページを、暮らしと食卓を軸にリニューアルしました。

ティファニーブルーの余白で雰囲気を伝えながら、サービスの選び方と相談先を整えています。 今回は、その見せ方に込めたこだわりを紹介します。

ブルー・フラワーの公開トップページ。ティファニーブルーと花、暮らしと食卓のメインビジュアル
トップページの公開画面(2026年10月29日撮影)

片づけと食卓を、ひとつの暮らしでつなぐ

菅原さんが届けているのは、片づけの支援だけではありません。 片づけを学ぶ講座や、麹料理を楽しむ教室もあります。 従来の片づけ中心のホームページから、現在の活動全体が伝わる構成へ組み直しました。

私たちが中心に置いた言葉は、「暮らしに余白を、食卓に楽しみを」。 部屋を整えることも、毎日の食を楽しむことも、その人の暮らしにつながっています。 その共通点を最初に伝え、個々のサービスへ進める順番にしました。

入口は「片づけを手伝ってほしい」「片づけを学びたい」「麹料理を楽しみたい」の三つ。 初めて訪れた方が、自分の目的から選べるようにしています。

ティファニーブルーと、花のある余白

ご希望のティファニーブルーを軸に、白とアイボリー、淡いミント色を合わせました。 見出しやボタンには深い緑を使い、やさしい配色の中でも、読むところと押すところが分かるようにしています。

花、自然な光、食卓の温かさ。 それらを明朝体の見出しとゆったりした余白でつなぎ、落ち着いて過ごせる雰囲気に整えました。 通常の本文はパソコンもスマートフォンも18pxを基本にしています。

暮らしや料理のビジュアルは、日本語の説明も含めてAIで制作したイメージとして表示。 菅原さんご本人の紹介には、ご提供いただいた実際の写真を使いました。 サービスの雰囲気を伝える画像と、人柄を伝える写真で役割を分けています。

最初の画面で、世界観と相談先まで

メインビジュアルは、雰囲気を印象づける大切な場所です。 一方で、大きくしすぎると、その先に何があるかが見えにくくなります。

そこでパソコンでは画像の高さと上下の余白を調整し、最初の画面でメッセージと主な案内を見渡せるバランスにしました。 スマートフォンには縦長の専用画像を用意。 横長画像をそのまま縮めるのではなく、文字と写真の配置から組み直しています。

ブルー・フラワーのスマートフォン版。縦長の専用メインビジュアル
スマホ版の公開画面(2026年10月29日)

サービスは、一つずつ判断できるページに

訪問サポートと講座と料理教室では、申し込む前に知りたいことが違います。 それぞれを詳しく案内できるよう、六つのサービスページを設けました。

たとえば訪問の片づけサポートなら、どんな方に向くのか、対応地域や料金、相談後の流れ。 講座なら、何を学ぶのか、どんな形式で参加するのか。 麹料理教室なら、単発の体験と継続して学ぶコースの違い。 読む方が自分に合うかを考えられる情報を、内容に合わせて並べています。

サービスごとに文字入りの画像も作り、一覧で見たときにも内容をつかめるようにしました。 詳しく知りたい気持ちから、本文、よくある質問、問い合わせへと進める構成です。

片づけサポートの公開ページ。実家と自宅の片づけを案内する見出しと画像
片づけサポートの公開画面(2026年10月29日撮影)

新しいブログと、積み重ねた記事を一緒に

サービスの説明だけでは伝えきれない、日々の工夫や考え方があります。 ブログには、実家と家族、片づけのコツ、麹と食卓、暮らしの楽しみという四つの切り口を設けました。

新たに用意した九つの記事では、手順を紹介する記事、家族との会話を考える記事、基礎を比べて理解する記事、暮らしを楽しむ記事など、テーマに応じて読み方を変えています。 同じ型の説明ばかりにならないようにした点も、今回のこだわりです。

そして、以前から公開されていた57記事は、本文とURLを保って引き継ぎました。 これまでの発信を残しながら、新しいブログもWordPressで続けていける形にしています。 この件数はリニューアル時点のものです。

ブルー・フラワーのブログ一覧。片づけや家族、麹と食卓などの記事を写真付きで紹介
ブログ一覧の公開画面(2026年10月29日撮影)

人柄と、相談するまでの情報をそろえる

片づけは、物だけでなく、家族の思いや暮らし方に触れる仕事です。 何をしてくれるかに加えて、どんな人に相談するのかも知っていただきたいと考えました。

プロフィールでは、実家や義実家の片づけに向き合った経験と、現在の仕事とのつながりを紹介しています。 サービスページから人柄へ、人柄からサービスへと行き来できるようにし、ご本人の写真とともに、相談前に知っておける情報をそろえました。

広がった仕事を、その人らしく伝えるために

今回形にしたのは、いくつもの活動を「暮らし」という軸でつなぎ、目的に合うサービスへ進めるホームページです。 ティファニーブルーの世界観、サービスの具体的な案内、菅原さんの歩み、日々のブログを、一つの場所でたどれるようにしました。

ブルー・フラワーの公開サイトを見る

仕事が広がり、ホームページで何から紹介すればよいか迷っている方へ。 活動の共通点を見つけることと、読む方の目的から入口を分けること。 その両方から、今の仕事に合う見せ方を一緒に考えます。

事業とホームページを相談する

ホームページ制作 / 運営システム

伝わるデザインも、運営の仕組みも。

会社やお店の魅力を伝えるページから、登録フォーム、管理画面、更新マニュアルまで。必要な機能を一緒に整理し、公開後の使いやすさまで考えて制作します。

  • ホームページ
  • 店舗・会員登録
  • 商品管理
  • 管理画面
  • マニュアル

ホームページ制作費

11万円〜

税込・初期制作費

制作範囲・機能・規模に応じてお見積もりします。

制作内容と料金を見る →

公開後の管理・サポートは、別途月額プランが必要です。ホームページ管理+AI仕組みラボは通常月額16,500円(税込)、紹介割引で月額11,000円(税込)。月額プランは1年間継続で、Codexなど外部ツールの利用料は別途です。

記事制作・投稿も任せるAIライター運営代行は、月額33,000円〜(税込)。担当者によって料金・対応範囲が異なります。

公開後の運用プランを確認する →