東京・渋谷の道玄坂に事務所を構える合同会社SiaPlaceの公式サイトは、看護師が利用者のもとへ出向くという形のないサービスを、白と淡いグリーンでまとめた静かな画面で伝えています。医療の硬さと美容のやわらかさが同居する領域でありながら、どちらにも寄りすぎない中間の温度で全体が整えられている点が、このサイトの見どころです。
この記事では、SiaPlaceのサイトをWebデザインの見本として取り上げます。配色とタイポグラフィ、ファーストビューの構図、セクションの組み立て方、そして訪問型サービスならではの情報の並べ方を順に読み解きます。医療や介護、美容に関わるサイトを設計するときのヒントとして、具体的な手法に注目していきます。
白と淡いグリーンで統一されたトーン＆マナー
このサイトの印象を決めているのは、彩度を抑えた配色の徹底です。ページ全体を通して使われる色の種類が少なく、そのぶん写真と余白が主役になっています。ここでは色の使い分けと文字の組み方から、全体のトーンがどのように作られているのかを見ていきます。
色数を絞った淡いグリーンの配色
背景はほぼ白に近いオフホワイトで統一され、アクセントには青みを帯びた淡いグリーンが使われています。見出しの文字色、ラベルの塗り、ボタンの枠線、質問行の区切り線まで、ほぼこの一色で処理されているため、ページを下へ進んでも印象がぶれません。
強い原色を使わない配色は、医療に関わる情報を扱う画面で緊張感を与えにくいという利点があります。清潔さを感じさせながら、掲示物のような無機質さにも寄らない中間の色として選ばれていると読み取れます。
ロゴだけに置かれたゴールドのアクセント
グリーンで統一された画面の中で、ヘッダーとフッターのロゴだけが金色に近いブロンズで描かれています。文字の右上には光が広がるような放射状のマークが添えられ、控えめながら視線が最初に止まる位置になっています。
アクセント色を一か所に絞ると、その要素の存在感が自然に高まります。ロゴにだけ別系統の色を与えるこの手法は、装飾を増やさずにブランドの印象を強める方法として参考になります。
細い和文と欧文セリフ体を組み合わせた文字づかい
和文は線の細い書体が選ばれ、字間をゆったり取って組まれています。見出しでも文字を太らせずに大きさだけで差をつけているため、主張が強くなりすぎません。
一方で、ヒーローに添えられた欧文や、セクション名として置かれた「About」「Menu」「Blog」「FAQ」「Access」にはセリフ体が使われ、和文との対比が生まれています。読ませる文章は細い和文が担い、雰囲気をつくる部分は欧文が担うという役割分担が、全体の上品さを支えています。
ファーストビューで「誰のための訪問サービスか」を伝える構成
ファーストビューは、サービスの内容と対象になる方を同時に伝える設計になっています。写真とテキスト、そして二つのボタンが、一画面の中できれいに役割を分けています。構図と導線の両面から順に見ていきます。
写真とテキストパネルを重ねた非対称の構図
画面の左側には、明るい室内で微笑む看護師の写真が大きく配置されています。その上に半透明の白いパネルが右寄りで重ねられ、パネルの中に日本語のメインコピーと説明文が置かれています。メインコピーは、看護師が利用者のいる場所へ出向くという提供形態を、短い一文で言い切る内容です。
さらに写真とパネルの外側には、細い罫線で描かれた四角形がずらして重ねられています。要素を左右にきれいに分けるのではなく、あえて重なりとずれをつくることで、平坦になりがちな白基調の画面に奥行きが生まれています。
関心の違いで分かれる二つの入口
メインコピーの下には、枠線だけで描かれたボタンが二つ横に並んでいます。片方は美容やアンチエイジングに関心がある方へ向けたもので、もう片方は健康管理や訪問ケア、介護に関心がある方へ向けたものです。訪れた方が自分の関心に沿って進めるようになっています。
訪問看護と美容という、動機がまったく異なる二つの需要を一つのサイトで扱う場合、最初の画面で無理に一本化すると説明が散らかります。読み手を先に二つへ分けるこの設計は、扱う領域が広いサービスサイトで応用しやすい考え方です。
ヘッダーとナビゲーションの整理
ヘッダーは左にロゴ、右に電話番号と「Reserve」の項目を置いた単純な構成で、余計な要素がありません。グローバルナビゲーションはヒーローの下に横一列で中央寄せに置かれ、Home、About、Menu、For Business、FAQ、Flow、Blog、Reserveが等間隔で並びます。
表示中のページに当たる項目には淡いグリーンのマーカーが敷かれ、いまどこを見ているのかがひと目で分かります。ナビの右端にはInstagramとLINEのアイコンが小さく添えられ、本流の導線を邪魔しない大きさに抑えられています。
セクションを読み進めさせる情報設計
トップページは当社について、サービス紹介、ブログ、よくあるご質問、アクセスという順に並び、それぞれが同じ骨格で組まれています。共通の型を持たせながら、単調にならない工夫が随所に置かれています。反復と変化のつくり方を見ていきます。
左右を入れ替える交互配置
当社についてのセクションでは左にテキスト、右に写真が置かれ、続くサービス紹介では左に写真、右にテキストという具合に、左右が入れ替わります。同じ型を繰り返しながら向きだけを変えるため、リズムが生まれて読み疲れしにくくなっています。
サービス紹介の写真は一枚ではなく、人物のカットと手を取り合うケアのカットが段違いに重ねて配置されています。写真の枚数と重ね方でセクションごとの表情を変えている点も、単調さを避ける手として効いています。
縦組みの欧文と大きなウォーターマーク
主要なセクションの左端には、細い縦罫線と縦組みの欧文が添えられています。区切りの目印として静かに機能し、見出しを大きくしなくてもセクションの始まりが分かるようになっています。
同じ語が、背景側にも薄いグリーンの大きなウォーターマークとして置かれています。文字を装飾として扱う手法ですが、色を背景に近づけているため読みの邪魔にならず、静かなトーンを保ったまま構造を伝えられています。
ラベルと背景色の切り替えでつくる区切り
当社について以降のセクションでは、冒頭にグリーンで塗りつぶした小さなラベルが置かれ、その中に日本語の見出し語がのっています。欧文の装飾とは別に、日本語で内容を明示する役割を担っている点が丁寧です。
ブログとよくあるご質問の周辺では、背景そのものが淡いグリーンのベタ塗りに切り替わります。ブログのカードが色の境目をまたぐように置かれているため、区切りが硬くならず、ページの流れも途切れません。
訪問サービスへの不安をほどくコンテンツの並び
訪問型のサービスは、自宅や職場という私的な場所に人を招く点で、利用前の心理的なハードルが高くなりがちです。SiaPlaceのサイトは、その不安を順番にほどく並びでコンテンツを配置しています。誰が来るのか、何をしてもらえるのか、どこまで対応するのかという疑問に沿った構成です。
運営者の姿を見せるページ設計
当社についてのページには、コンセプトに続いてスタッフの紹介が置かれています。パーソナルナースであり代表を務める中野 早記様の氏名とともに、看護師と保健師の資格が示され、養護教諭二種免許のほか、ICLSインストラクターや血糖コントロールアドバイザーといった資格も並びます。
経歴の欄では、大学病院の救命救急センターで急性期の医療に携わったこと、美容外科クリニックで勤務したこと、訪問看護ステーションで在宅の看護に関わったことが年ごとに整理され、2025年6月に合同会社SiaPlaceを設立したところまでが記されています。自宅へ上がる人物の背景を先に開示する構成は、この業態のサイトで信頼を積み上げる基本になります。
提携先を別項目として示すアクセス欄
アクセスの欄は、住所、営業時間、電話番号、定休日、そして提携先クリニックという項目が縦に並び、それぞれが細い区切り線で分けられた表の形になっています。右側には明るいガラス張りの建物内部を写した写真が添えられ、無機質になりがちな情報欄に温度が加わっています。
提携先クリニックの行には、銀座こもれびクリニックの名称とリンクが記載されています。自社が訪問で提供する範囲と、提携する医療機関とを同じ文章の中で混ぜず、項目を分けて示している点は、誤解を生まない情報設計として参考になります。表の末尾には電話の受け方に関する注記も小さく添えられ、運用まで想定して作られていることが伝わります。
よくあるご質問とブログで疑問に先回りする
よくあるご質問は、白いバーが三本並ぶ折りたたみ形式で置かれています。行の左に「Q」、右端にプラス記号が添えられ、答えが隠れていることが視覚的に分かります。取り上げられているのは、保険が適用されるかどうか、対応する地域はどこか、男性でも利用できるかという、依頼の前に確かめたくなる論点です。
ブログの欄にはカードが二枚並び、それぞれに「Staff Blog」のラベル、記事のタイトル、日付が置かれています。掲載されているのは利用や施術の流れを説明する記事と、企業や法人に向けた案内で、サービスの補足として機能しています。
予約への導線を主従で分けたフッター
フッターは淡いグリーンの面になり、中央にロゴと住所が置かれています。その下には電話番号のボタンと「Reserve」のボタンが並びますが、前者は白地に枠線、後者はグリーンで塗りつぶすという差がつけられています。
塗りの有無だけで優先したい行動が示されるため、説明文を足さずに導線の主従が伝わります。さらに下にはナビゲーションの項目、InstagramとLINEのアイコン、プライバシーポリシーへのリンクが小さく並び、必要な出口が過不足なくそろっています。
訪問型の美容・健康サービスのサイトで押さえたい観点
ここまで見てきた工夫は、訪問という提供形態を扱うサイト全般に応用できます。東京都内で訪問アンチエイジングや訪問美容医療といったサービスを探す読み手は、店舗へ足を運ぶ場合とは違う判断材料を求めています。一般的な観点として整理しておきます。
「どこへ来てもらえるのか」を先に置く
訪問型のサービスでは、施設の外観や内装よりも、対応する地域と訪問できる場所のほうが先に知りたい情報になります。SiaPlaceのサイトでも、サービス紹介の中に対応できる地域と年齢の範囲、そして予約を前提に訪問する形であることが、短い箇条書きで示されています。
この種の条件は文章の中に埋もれると読み飛ばされやすいため、箇条書きで独立させる扱いが向いています。読み手が自分に当てはまるかどうかを短い時間で判断できると、問い合わせの前の迷いが減ります。
医療と美容をまたぐときの整理のしかた
美容と健康管理の両方を扱うサービスでは、話題の幅が広がるほど一つのページが散らかりやすくなります。関心ごとに入口を分ける、セクションごとにラベルで主題を明示する、提携先と自社の役割を別の項目に置くといった整理は、扱う範囲が広い事業ほど効果を発揮します。
また、医療に近い領域では、断定的な言い回しや過度な演出を避けた静かなデザインのほうが内容に合います。彩度を抑えた配色とゆったりした余白は、見た目の好みだけでなく、扱う情報の性質に合わせた選択として理解できます。
SiaPlaceの公式サイトから学べるデザインの要点
合同会社SiaPlaceの公式サイトは、限られた色数の配色、細い和文と欧文セリフ体の対比、写真とパネルを重ねた非対称の構図によって、訪問という形のないサービスに具体的な手触りを与えています。医療の専門性を主張しすぎない静かな画面が、扱うサービスの性格とよく合っています。
加えて、関心別に分かれるファーストビューの二つの入口、左右を入れ替える交互配置、背景色の切り替えによる区切り、塗りの有無で優先度を示すフッターのボタンなど、装飾を増やさずに情報を整理する手法が一貫しています。医療や介護、美容に関わるサイトを検討している方にとって、参考にできる見本です。
配色や余白の取り方、訪問型サービスの情報の並べ方を実際の画面で確かめたい方は、保険外訪問看護を渋谷の拠点から届けるSiaPlaceの公式サイトをご覧ください。
