『HSPコーチ | にし』の公式サイトは、白と淡いグレー、そして墨に近いブラックだけで画面を組み立て、そこに自然光の写真を大きく置いたオンラインコーチングのサービスサイトです。装飾で語らずに余白と写真で世界観を伝える設計になっているため、落ち着いたトーンで人柄を見せたいサイトの見本として参考になります。ここでは、ファーストビューの作り方から配色、タイポグラフィ、情報設計、問い合わせ導線までを順番に読み解いていきます。
第一印象を決めるファーストビューとヘッダー
このサイトの第一印象は、画面いっぱいに広がる屋外写真と、そこへ重ねた一行の見出しでほとんど決まります。要素を足さずに主題を一つへ絞ったことで、スクロールを始める前に何を扱うサイトなのかが伝わる構成になっています。まずは画面上部の作り方を、写真と文字、ヘッダーという三つの視点から見ていきます。
写真の上に主題を一行だけ置いた構成
ファーストビューは、木立を背にした人物のポートレートを全面に敷き、背景をやわらかくぼかしています。その上に置かれた見出しは白一色で、字間を大きく開けた一行にまとめられており、「やりたいこと」を軸に生きるという主題だけを提示しています。
見出しの下には細い線で描かれた丸い輪郭が重なり、その内側にオンラインでのコーチングであることを示す二行の小さな文字が入ります。文字の色を白へ統一し、大きさの差だけで主従を作っているため、写真の情報量が多くても読み取りの邪魔になりません。画面の右端には縦組みの「scroll」という表示と細い縦線があり、次の動作を控えめに促しています。
写真を隠さない透過ヘッダー
ヘッダーは背景色を敷かずに写真の上へ直接置かれ、左端にサイト名のロゴ、右側に四つのソーシャルメディアのアイコンと「CONTACT」のボタン、さらに二本の横線を重ねたアイコンが並びます。ロゴもアイコンも白抜きで、写真の明るい部分と重ならない位置に収められています。
この並びの中で「CONTACT」だけが白い面で塗られ、周囲との明度差によって浮かび上がります。色を増やさずに優先度を示す方法として分かりやすく、モノトーンの配色を崩さないまま主要な行動を目立たせています。
配色とトーン＆マナー
配色はほぼ無彩色に絞られており、色数の少なさがこのサイトの静けさを支えています。色で語らない代わりに、面の切り替えと写真で場面の変化を作る考え方が全体で徹底されています。
白・淡いグレー・墨色による三段構成
背景は白を基本として、区切りたい場所に淡いグレーの面を敷き、締めたい場所へ墨に近いブラックを使う三段構成になっています。更新情報の帯や問い合わせのブロックに使われた濃い色は完全な黒ではなく、わずかに明度を残した色味で、硬くなりすぎない印象に落ち着いています。
グレーは背景としてだけでなく、文字や写真の背後へずらして重ねる面としても使われます。同じ明度のグレーを繰り返し登場させることで、セクションが変わっても地続きの世界観が保たれています。
彩度を持ち込むのは写真だけという割り切り
ボタンや見出し、テキストリンクに色を使っていないため、画面の中で彩度を持っているのは写真だけになります。木立や田畑の緑、屋外の光がそのままアクセントとして働き、色を足さずに穏やかな空気が生まれています。
この作り方には、写真を差し替えるだけで全体の印象を調整できるという利点があります。強いブランドカラーを持たないサービスでも成立する構成として、取り入れやすい考え方です。
タイポグラフィと見出しの型
文字の扱いは、このサイトの上品さを決めている要素です。書体の種類を増やさず、大きさと字間の差だけで階層を作る方針が貫かれています。
セリフ体の英字と字間を広げた日本語
各セクションの見出しは「ABOUT US」「SERVICE」「STAFF」「FAQ」「FLOW」「SPECIAL」「CONTENT」「CONTACT」と英字で大きく置かれ、縦の画と横の画で太さの差が大きいセリフ体が使われています。日本語は細いゴシック体で、字間と行間をゆったり取っています。
太い書体をほとんど使わないため、画面全体の黒みが増えず、余白がそのまま生きています。本文の分量を一か所あたり数行に抑えている点も、細い書体を選べた理由だと考えられます。
同じ形で繰り返すセクションラベル
見出しは、大きな英字の下に短い横罫を引き、その先へ日本語のラベルを小さく添える形で統一されています。中央寄せ、左寄せ、右寄せと置く位置は変わりますが、組み方そのものは変わりません。
同じ型が繰り返されることで、スクロールの途中でも今どのセクションを読んでいるのかが把握しやすくなります。縦に長い一枚もののページで迷いを防ぐ、地味ですが実用的な工夫です。
写真とレイアウトの重ね方
写真は飾りではなく、サービスの中身と担い手を説明する役割を持っています。人物と場面を描き分け、四角い面と重ねることで、縦長のページに奥行きが生まれています。
屋外の自然光でそろえた人物写真
使われている人物写真は、屋外で自然光を受けたカットでそろえられています。正面からの笑顔、空を見上げる横顔、机に向かって手を動かす場面など、表情と動作の異なる複数の写真が配置されています。
スタッフ紹介のブロックでは、二枚の縦長写真を高さをずらして並べ、右側に大きな英字の見出しを置いています。人が前に出るサービスであることが、写真の量と扱いの大きさから素直に伝わります。
グレーの面と写真をずらして重ねる手法
ページの各所で、淡いグレーの四角い面を文字や写真の背後へずらして敷く手法が使われています。サービス紹介では写真の帯の上に明るい面を重ね、その中へ一覧を組み込んでいます。
「SPECIAL」のブロックでは、白いカードとグレーの帯の上に写真を右へはみ出させて重ね、平坦になりがちな縦の流れに立体感を加えています。要素を四角い面として扱い、少しずつずらして配置する考え方が、ページ全体で共通しています。
情報設計とスクロールの流れ
縦に長い一枚もののページですが、並び順には理解が進む順序が意識されています。悩みの説明から始まり、担い手、進め方、連絡手段へと段階を追って移っていきます。
知る、比べる、進むという並び順
ファーストビューの後は更新情報の帯が二段並び、左端にラベル、中央に日付と見出し、右端に一覧へのリンクが置かれています。続いてHSPという言葉の説明、サービスの紹介、担い手の紹介、よくある質問、利用の流れという順に展開します。
自分に関係のある話かどうかを先に確かめさせ、その後で内容と進め方を示す並びになっているため、はじめて訪れた人でも読み進めやすい設計です。ページの終盤へ問い合わせのブロックを置き、読み終えた流れのまま連絡へ移れるようにしています。
番号付きの一覧で比べやすくしたサービス紹介
サービス紹介は、カードを横に並べる形ではなく、番号を振った行を縦に積む一覧で構成されています。各行には日本語のサービス名と英語表記、短い説明文が入り、右端に矢印が添えられ、行と行の間は細い罫線で区切られています。
初回の個別セッションから、六か月にわたる二つのプランまでが同じ形式で並ぶため、内容の違いを上から下へ視線を動かすだけで比べられます。一行あたりの説明を二行程度に抑えている点も、比較のしやすさにつながっています。
開閉と番号で整理した質問と流れ
よくある質問は、行の先頭にセリフ体の「Q.」を置き、右端の記号で開閉する形式です。閉じた状態で並んでいるため、どのような不安に答えているのかを一覧で確認できます。
利用の流れは、暗いトーンの写真の上へ白い文字を重ね、四枚の半透明のカードで01から04までの段階を示しています。申し込みから面談、書面の確認、長期のセッション開始までの道筋が一画面に収まり、全体像をつかみやすくしています。
UIと問い合わせ導線の作り方
操作に関わる部品は種類を絞り、同じ形を繰り返す方針で作られています。装飾の少ない画面でも迷わせないための、堅実な設計です。
繰り返し登場する丸い矢印ボタン
各セクションの末尾には、細い線の輪の中へ矢印を入れたボタンと、「view all」「view more」という小さな英字のテキストリンクが対で置かれています。形も位置も共通しているため、一度覚えれば次のセクションでは同じ場所を探すだけで済みます。
- セクションの末尾に丸い矢印ボタンとテキストリンクを対で配置しています。
- 問い合わせのボタンは白い面で塗り、明度差だけで目立たせています。
- 質問や更新情報は開閉と一覧リンクへまとめ、ページの縦の長さを抑えています。
連絡手段を横に並べたCONTACTブロック
ページ下部の問い合わせブロックは、墨色の面で背景を切り替え、その中へ三つの入口を横並びで配置しています。左は枠線で囲んだ電話番号と受付時間、中央は入力フォームへの導線、右は通話アプリからの連絡先で、いずれも右端に矢印が添えられています。
フッターにも同じ連絡先と受付時間、郵便番号を含む住所、地図サービスへのリンクが置かれ、各ページへのリンクが三列に整理されています。最下段にはプライバシーポリシーへのリンクとソーシャルメディアのアイコン、著作権の表記、右端にサイト名のロゴが並びます。
やりたいことが分からないという悩みへの向き合い方
『HSPコーチ | にし』が主題として掲げているのは、仕事や人間関係の中で自分の感覚が分からなくなっていく状態です。三十代前後は役割も選択肢も増え、他の人の様子が目に入りやすい時期にあたるため、判断の基準が自分の外側へ移りやすいと語られることの多いテーマでもあります。
サイトでは、HSPをHighly Sensitive Personの頭文字だと説明し、人口のうち一定の割合を占めると言われる気質として紹介しています。周囲の表情や空気の変化に気づきやすい性質が、競争や人間関係の疲れにつながる場合があるという説明が、サイト紹介のブロックに置かれています。
提供されているのは対話によるコーチングで、二週間に一度、まとまった時間を取って個別に話す形が説明されています。話がまとまっていない状態からの相談を想定した質問がよくある質問へ並んでいる点も、想定読者の不安に沿った情報設計だといえます。
デザインの面では、文字を詰め込まずに余白を大きく取っていることが、この主題とかみ合っています。読み手が自分の状態を考えながらスクロールできる速度に、情報量が調整されています。
まとめ：引き算で世界観を作るコーチングサイトの見本
『HSPコーチ | にし』の公式サイトは、色数を絞り、書体を増やさず、同じ形のUIを繰り返すという引き算の判断を積み重ねたサイトです。彩度を写真だけに任せ、グレーの面をずらして重ねることで、静けさを保ったまま単調になることを避けています。
運営しているのは福岡県糟屋郡宇美町に拠点を置くコーチングのサービスで、代表者として西村 裕也様の名前が会社概要に記載されています。オンラインでの対応と、朝から夜までの受付時間、日曜が定休である点も、サイト内に明記されています。
落ち着いたトーンで人柄を伝えたいサイトや、写真を主役にしたサービスサイトを検討している方にとって、学べる要素が多くそろっています。自分の人生を生きている気がしないという感覚に心当たりのある方は、HSPコーチ | にしの公式サイトで世界観と情報の並びを確かめてみてください。
