道楽屋・山藤あやさんのホームページを制作しました。
ターコイズと施術写真で、4つのサービスを選べる形へ。
文章・図解・24ページの漫画で、仕事と人柄を伝えます。
いくつもの仕事を、ひとつのサイトで伝えたい
広島を拠点に活動する山藤さんは、整体・訪問ボディケアに加え、占い・自分設計図鑑定、AIインタビュー、AI仕組み化サポートを案内しています。
制作の出発点は、訪問ケアとAI支援をひとつのホームページにまとめることでした。鑑定も含めてサービスを整理すると、それぞれを詳しく読めることと、全体の関係が分かること、その両方が必要になりました。
そこで私は、サービス名を並べる前に「何を相談できるか」を整理しました。身体をいたわる、自分を知る、想いを言葉にする、仕事の流れをつくる。この役割を入口に置くことで、訪れた方が今の希望から選べる構成を考えています。
ターコイズを、背景・文字・ボタンへ配分する
色の参考は、山藤さんの自分設計図鑑定の紹介ページです。その水色・青・ターコイズの印象を、道楽屋のホームページ全体につなぎました。鑑定の案内やアプリへ進んだときにも、同じ活動の続きとして感じられるようにしています。
こだわったのは、鮮やかな色をどこに、どれだけ使うかです。白と淡い水色を背景に、本文は濃い紺。ボタンやリンクには深いターコイズを使い、明るいターコイズは細い線のアクセントにしました。
| 色の役割 | 道楽屋での使い方 |
|---|---|
| 白・淡い水色 | 写真と文章のまわりに余白をつくり、内容の区切りを穏やかに見せる |
| 深いターコイズ | ロゴ、ボタン、リンクに使い、選べる入口を示す |
| 濃い紺 | 長い説明や見出しを読むための文字色にする |
| 明るいターコイズ | 細い線に使い、参考ページの爽やかな印象を添える |
余白、細い線、明朝書体、手仕事を感じる写真も、参考にいただいた雰囲気を道楽屋の内容に合わせて取り入れました。文章はすべて横書きです。色だけを合わせるのではなく、写真のやわらかさと説明の読みやすさまで、ひとつの印象に整えています。
施術の手元を、タイトルの隣でしっかり見せる
トップは、左に「身体のケアも」「想いの発信も」というタイトル、右に首と肩へ手を添える施術写真を配置しました。縦長の写真をその比率で見せ、手の置き方や、その場の空気が伝わる構図です。
写真のそばにサービスの説明とボタンを置いたのは、印象を受け取ったあと、そのまま内容を確かめられるようにするため。スマートフォンでは文章のあとに写真が続き、小さな画面でも両方を順に見られます。
4つのサービスを、それぞれ依頼を考えられるページへ
サービス一覧では役割の違いを短く伝え、整体・訪問ケア、占い・鑑定、AIインタビュー、AI仕組み化に、それぞれ独立したページを用意しました。
各ページでは、どんな方に向いているか、相談できる内容、受け取るもの、進め方、料金や条件の確認方法、よくある質問を順に案内しています。訪問先や作業の範囲を確かめてから、具体的な相談へ進めるための構成です。
パソコンのメニューはプルダウン、スマートフォンでは開閉式にして、気になるサービスへ直接進めるようにしました。鑑定からインタビューへ、インタビューから仕事の仕組み化へ、という組み合わせも紹介。ひとつだけの相談にも、いくつかを合わせた相談にも入口を残しています。
図解で進め方を、漫画で人柄と歩みを伝える
訪問ケアの受け方、インタビューで文章ができるまで、AIで仕事を整理する手順。それぞれの説明には図解を入れ、文章だけでは想像しにくい進め方を見渡せるようにしました。
プロフィールでは、取材に基づく文章に加え、24ページのストーリー漫画を掲載しています。山藤さんがどんな歩みを経て今の活動へつながったかを、言葉と場面の両方で伝えます。
漫画には斜めのコマや、人物が枠を越える表現を取り入れました。見せ場に動きをつけながら、読む順番と文字の読みやすさを保つつくりです。パソコンではページを見渡せる大きさ、スマートフォンでは読み進めやすい表示に調整しました。
公開した日から、発信を足していける形に
WordPressのサイトとして公開し、ブログ3本も用意しました。今後は普段の投稿画面から記事を追加できます。お客様の声には「施術・訪問ケア」と「AI・仕組み化支援」の分類を設け、実際にいただいた感想を積み重ねられる形にしています。
公開時点で、4つのサービスの詳しい案内、プロフィールと漫画、ブログ、相談先が、同じホームページからたどれる状態になりました。今回の事例でお伝えしたいのは、この構成と表現の工夫です。
好きな色と、仕事の伝え方を一緒に考える
今回大切にしたのは、参考の色、本人の写真、取材で伺った内容を、同じ仕事の紹介として結びつけることでした。配色や写真の印象に惹かれた方が、サービスを読み、山藤さんを知り、相談内容を考えられる流れをつくっています。
いくつかの活動をしている方や、好きな色・参考サイトの雰囲気を自分の仕事に合わせたい方には、こうした進め方が合います。ひとつの商品への申込みだけを目的にする場合は、紹介する範囲を絞る構成から考えます。
まだ文章がそろっていなくても、参考にしたいページや、普段のお仕事の写真があれば、そこから始められます。あなたの仕事なら何を先に見せると伝わるか、いっしょに整理しましょう。